Improve copy/paste UX in Options and Packages (#275)
* Improve copy/paste UX in Options and packages - Change title from button to a to make it selectable - Resurect `Name` meta for Options - Make sure this won't break keyboard selection * show description in details view in case of options * make the area of search item in options easier to click on * This should make sorting work again * hide sorting menu Co-authored-by: Rok Garbas <rok@garbas.si>
This commit is contained in:
Marek Fajkus
GitHub
parent
e9bdeae3e2
commit
b208c24872
|
|
@ -152,13 +152,12 @@ viewResultItem :
|
|||
viewResultItem channel _ show item =
|
||||
let
|
||||
showHtml value =
|
||||
div [] <|
|
||||
case Html.Parser.run value of
|
||||
Ok nodes ->
|
||||
Html.Parser.Util.toVirtualDom nodes
|
||||
case Html.Parser.run value of
|
||||
Ok nodes ->
|
||||
Html.Parser.Util.toVirtualDom nodes
|
||||
|
||||
Err _ ->
|
||||
[]
|
||||
Err _ ->
|
||||
[]
|
||||
|
||||
default =
|
||||
"Not given"
|
||||
|
|
@ -213,7 +212,15 @@ viewResultItem channel _ show item =
|
|||
showDetails =
|
||||
if Just item.source.name == show then
|
||||
div [ Html.Attributes.map SearchMsg Search.trapClick ]
|
||||
[ div [] [ text "Default value" ]
|
||||
[ div [] [ text "Name" ]
|
||||
, div [] [ wrapped asPreCode item.source.name ]
|
||||
, div [] [ text "Description" ]
|
||||
, div [] <|
|
||||
(item.source.description
|
||||
|> Maybe.map showHtml
|
||||
|> Maybe.withDefault []
|
||||
)
|
||||
, div [] [ text "Default value" ]
|
||||
, div [] [ withEmpty (wrapped asPreCode) item.source.default ]
|
||||
, div [] [ text "Type" ]
|
||||
, div [] [ withEmpty asPre item.source.type_ ]
|
||||
|
|
@ -241,14 +248,12 @@ viewResultItem channel _ show item =
|
|||
<|
|
||||
List.filterMap identity
|
||||
[ Just <|
|
||||
Html.button
|
||||
Html.a
|
||||
[ class "search-result-button"
|
||||
, onClick toggle
|
||||
, href ""
|
||||
]
|
||||
[ text item.source.name ]
|
||||
, Maybe.map showHtml item.source.description
|
||||
, Just <|
|
||||
Search.showMoreButton toggle isOpen
|
||||
, showDetails
|
||||
]
|
||||
|
||||
|
|
|
|||
|
|
@ -540,9 +540,10 @@ viewResultItem channel showNixOSDetails show item =
|
|||
([]
|
||||
|> List.append longerPackageDetails
|
||||
|> List.append
|
||||
[ Html.button
|
||||
[ Html.a
|
||||
[ class "search-result-button"
|
||||
, onClick toggle
|
||||
, href ""
|
||||
]
|
||||
[ text item.source.attr_name ]
|
||||
, div [] [ text <| Maybe.withDefault "" item.source.description ]
|
||||
|
|
|
|||
|
|
@ -82,6 +82,7 @@ type alias Model a b =
|
|||
, size : Int
|
||||
, buckets : Maybe String
|
||||
, sort : Sort
|
||||
, showSort : Bool
|
||||
, showNixOSDetails : Bool
|
||||
}
|
||||
|
||||
|
|
@ -174,6 +175,7 @@ init args maybeModel =
|
|||
|> Maybe.withDefault ""
|
||||
|> fromSortId
|
||||
|> Maybe.withDefault Relevance
|
||||
, showSort = False
|
||||
, showNixOSDetails = False
|
||||
}
|
||||
|> ensureLoading
|
||||
|
|
@ -213,6 +215,7 @@ elementId str =
|
|||
type Msg a b
|
||||
= NoOp
|
||||
| SortChange Sort
|
||||
| ToggleSort
|
||||
| BucketsChange String
|
||||
| ChannelChange String
|
||||
| QueryInput String
|
||||
|
|
@ -258,6 +261,13 @@ update toRoute navKey msg model =
|
|||
|> ensureLoading
|
||||
|> pushUrl toRoute navKey
|
||||
|
||||
ToggleSort ->
|
||||
( { model
|
||||
| showSort = not model.showSort
|
||||
}
|
||||
, Cmd.none
|
||||
)
|
||||
|
||||
BucketsChange buckets ->
|
||||
{ model
|
||||
| buckets =
|
||||
|
|
@ -577,7 +587,16 @@ view { toRoute, categoryName } title model viewSuccess viewBuckets outMsg =
|
|||
RemoteData.Failure _ ->
|
||||
"failure"
|
||||
in
|
||||
div [ class <| "search-page " ++ resultStatus ]
|
||||
div
|
||||
(List.append
|
||||
[ class <| "search-page " ++ resultStatus ]
|
||||
(if model.showSort then
|
||||
[ onClick (outMsg ToggleSort) ]
|
||||
|
||||
else
|
||||
[]
|
||||
)
|
||||
)
|
||||
[ h1 [] title
|
||||
, viewSearchInput outMsg categoryName model.channel model.query
|
||||
, viewResult outMsg toRoute categoryName model viewSuccess viewBuckets
|
||||
|
|
@ -781,7 +800,7 @@ viewResults model result viewSuccess toRoute outMsg categoryName =
|
|||
String.fromInt result.hits.total.value
|
||||
in
|
||||
[ div []
|
||||
[ Html.map outMsg <| viewSortSelection toRoute model
|
||||
[ Html.map outMsg <| viewSortSelection model
|
||||
, div []
|
||||
(List.append
|
||||
[ text "Showing results "
|
||||
|
|
@ -812,20 +831,27 @@ viewResults model result viewSuccess toRoute outMsg categoryName =
|
|||
|
||||
|
||||
viewSortSelection :
|
||||
Route.SearchRoute
|
||||
-> Model a b
|
||||
Model a b
|
||||
-> Html (Msg a b)
|
||||
viewSortSelection toRoute model =
|
||||
div [ class "btn-group dropdown pull-right" ]
|
||||
viewSortSelection model =
|
||||
div
|
||||
[ class "btn-group dropdown pull-right"
|
||||
, classList
|
||||
[ ( "open", model.showSort )
|
||||
]
|
||||
, onClickStop NoOp
|
||||
]
|
||||
[ button
|
||||
[ class "btn"
|
||||
, attribute "data-toggle" "dropdown"
|
||||
, onClick ToggleSort
|
||||
]
|
||||
[ span [] [ text <| "Sort: " ]
|
||||
, span [ class "selected" ] [ text <| toSortTitle model.sort ]
|
||||
, span [ class "caret" ] []
|
||||
]
|
||||
, ul [ class "dropdown-menu pull-right" ]
|
||||
, ul
|
||||
[ class "pull-right dropdown-menu"
|
||||
]
|
||||
(List.append
|
||||
[ li [ class " header" ] [ text "Sort options" ]
|
||||
, li [ class "divider" ] []
|
||||
|
|
|
|||
|
|
@ -292,7 +292,7 @@ header .navbar.navbar-static-top {
|
|||
|
||||
& > ul > li.header {
|
||||
font-weight: bold;
|
||||
padding: 3px 10px;
|
||||
padding: 3px 10px 0 10px;
|
||||
}
|
||||
|
||||
& > ul > li.header:before,
|
||||
|
|
@ -339,16 +339,16 @@ header .navbar.navbar-static-top {
|
|||
display: block;
|
||||
}
|
||||
|
||||
// Description
|
||||
& > :nth-child(2) {
|
||||
font-size: 1.2em;
|
||||
margin-bottom: 0.5em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
&.package {
|
||||
.search-result-item();
|
||||
|
||||
// Description
|
||||
& > :nth-child(2) {
|
||||
font-size: 1.2em;
|
||||
margin-bottom: 0.5em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
// short details of a pacakge
|
||||
& > :nth-child(3) {
|
||||
color: #666;
|
||||
|
|
@ -418,10 +418,15 @@ header .navbar.navbar-static-top {
|
|||
}
|
||||
|
||||
&.option {
|
||||
.search-result-item();
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
& > :nth-child(1) {
|
||||
padding: 0.5em 0;
|
||||
}
|
||||
|
||||
// short details of a pacakge
|
||||
& > :nth-child(4) {
|
||||
& > :nth-child(2) {
|
||||
margin: 2em 0 1em 1em;
|
||||
display: grid;
|
||||
grid-template-columns: 100px 1fr;
|
||||
|
|
|
|||
Loading…
Reference in a new issue