From b208c2487297f1956d90babdbe290f4186780d6b Mon Sep 17 00:00:00 2001 From: Marek Fajkus Date: Mon, 25 Jan 2021 19:09:23 +0100 Subject: [PATCH] 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 --- src/Page/Options.elm | 27 ++++++++++++++++----------- src/Page/Packages.elm | 3 ++- src/Search.elm | 42 ++++++++++++++++++++++++++++++++++-------- src/index.less | 25 +++++++++++++++---------- 4 files changed, 67 insertions(+), 30 deletions(-) diff --git a/src/Page/Options.elm b/src/Page/Options.elm index 91b505f..5654d63 100644 --- a/src/Page/Options.elm +++ b/src/Page/Options.elm @@ -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 ] diff --git a/src/Page/Packages.elm b/src/Page/Packages.elm index 443b6fd..9e0c0df 100644 --- a/src/Page/Packages.elm +++ b/src/Page/Packages.elm @@ -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 ] diff --git a/src/Search.elm b/src/Search.elm index 7772e0c..fba6b7a 100644 --- a/src/Search.elm +++ b/src/Search.elm @@ -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" ] [] diff --git a/src/index.less b/src/index.less index 7d8da92..3a300d7 100644 --- a/src/index.less +++ b/src/index.less @@ -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;