Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

faceted search trap click #262

Merged
merged 4 commits into from
Jan 17, 2021
Merged

faceted search trap click #262

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
bfaefcd
search results trap click events to avoid double actions
turboMaCk Jan 16, 2021
9bec66b
trap and improve options
turboMaCk Jan 16, 2021
e1930e1
Few small improvements
turboMaCk Jan 16, 2021
ce541bf
apply styles to packages
turboMaCk Jan 16, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 7 additions & 9 deletions src/Page/Options.elm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@ viewSuccess :
-> Html Msg
viewSuccess channel showNixOSDetails show hits =
ul []
(List.concatMap
(List.map
(viewResultItem channel showNixOSDetails show)
hits
)
Expand All @@ -147,7 +147,7 @@ viewResultItem :
-> Bool
-> Maybe String
-> Search.ResultItem ResultItemSource
-> List (Html Msg)
-> Html Msg
viewResultItem channel _ show item =
let
showHtml value =
Expand All @@ -167,7 +167,7 @@ viewResultItem channel _ show item =
pre [] [ text value ]

asPreCode value =
div [] [ pre [] [ code [] [ text value ] ] ]
div [] [ pre [] [ code [ class "code-block" ] [ text value ] ] ]

githubUrlPrefix branch =
"https://github.com/NixOS/nixpkgs/blob/" ++ branch ++ "/"
Expand All @@ -186,7 +186,7 @@ viewResultItem channel _ show item =
[ href <| githubUrlPrefix channelDetails.branch ++ (value |> String.replace ":" "#L")
, target "_blank"
]
[ text <| value ]
[ text value ]

Nothing ->
text <| cleanPosition value
Expand All @@ -212,7 +212,7 @@ viewResultItem channel _ show item =

showDetails =
if Just item.source.name == show then
[ div []
[ div [ Html.Attributes.map SearchMsg Search.trapClick ]
[ div [] [ text "Default value" ]
, div [] [ withEmpty (wrapped asPreCode) item.source.default ]
, div [] [ text "Type" ]
Expand All @@ -230,13 +230,12 @@ viewResultItem channel _ show item =
open =
SearchMsg (Search.ShowDetails item.source.name)
in
[ li
li
[ class "option"
, onClick open
, Search.elementId item.source.name
]
([]
|> List.append showDetails
(showDetails
|> List.append
(item.source.description
|> Maybe.map showHtml
Expand All @@ -248,7 +247,6 @@ viewResultItem channel _ show item =
[ text item.source.name ]
]
)
]



Expand Down
72 changes: 31 additions & 41 deletions src/Page/Packages.elm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,10 +32,7 @@ import Html.Attributes
, id
, target
)
import Html.Events
exposing
( onClick
)
import Html.Events exposing (onClick)
import Json.Decode
import Json.Decode.Pipeline
import Json.Encode
Expand Down Expand Up @@ -294,7 +291,7 @@ viewSuccess :
-> Html Msg
viewSuccess channel showNixOSDetails show hits =
ul []
(List.concatMap
(List.map
(viewResultItem channel showNixOSDetails show)
hits
)
Expand All @@ -305,17 +302,9 @@ viewResultItem :
-> Bool
-> Maybe String
-> Search.ResultItem ResultItemSource
-> List (Html Msg)
-> Html Msg
viewResultItem channel showNixOSDetails show item =
let
onClickStop message =
Html.Events.custom "click" <|
Json.Decode.succeed
{ message = message
, stopPropagation = True
, preventDefault = True
}

cleanPosition =
Regex.fromString "^[0-9a-f]+\\.tar\\.gz\\/"
|> Maybe.withDefault Regex.never
Expand All @@ -331,7 +320,7 @@ viewResultItem channel showNixOSDetails show item =
"https://github.com/NixOS/nixpkgs/blob/" ++ branch ++ "/" ++ uri

createShortDetailsItem title url =
[ li []
[ li [ Html.Attributes.map SearchMsg Search.trapClick ]
[ a
[ href url
, target "_blank"
Expand All @@ -342,22 +331,20 @@ viewResultItem channel showNixOSDetails show item =

shortPackageDetails =
ul []
([]
|> List.append
(item.source.position
|> Maybe.map
(\position ->
case Search.channelDetailsFromId channel of
Nothing ->
[]

Just channelDetails ->
createShortDetailsItem
"source"
(createGithubUrl channelDetails.branch position)
)
|> Maybe.withDefault []
((item.source.position
|> Maybe.map
(\position ->
case Search.channelDetailsFromId channel of
Nothing ->
[]

Just channelDetails ->
createShortDetailsItem
"source"
(createGithubUrl channelDetails.branch position)
)
|> Maybe.withDefault []
)
|> List.append
(item.source.homepage
|> List.head
Expand Down Expand Up @@ -448,9 +435,8 @@ viewResultItem channel showNixOSDetails show item =

longerPackageDetails =
if Just item.source.attr_name == show then
[ div []
([]
|> List.append maintainersAndPlatforms
[ div [ Html.Attributes.map SearchMsg Search.trapClick ]
(maintainersAndPlatforms
|> List.append
(item.source.longDescription
|> Maybe.map (\desc -> [ p [] [ text desc ] ])
Expand All @@ -472,7 +458,9 @@ viewResultItem channel showNixOSDetails show item =
]
[ a
[ href "#"
, onClickStop <| SearchMsg (Search.ShowNixOSDetails True)
, Search.onClickStop <|
SearchMsg <|
Search.ShowNixOSDetails True
]
[ text "On NixOS" ]
]
Expand All @@ -484,20 +472,23 @@ viewResultItem channel showNixOSDetails show item =
]
[ a
[ href "#"
, onClickStop <| SearchMsg (Search.ShowNixOSDetails False)
, Search.onClickStop <|
SearchMsg <|
Search.ShowNixOSDetails False
]
[ text "On non-NixOS" ]
]
]
, div [ class "tab-content" ]
, div
[ class "tab-content" ]
[ div
[ classList
[ ( "tab-pane", True )
, ( "active", not showNixOSDetails )
[ ( "active", not showNixOSDetails )
]
, class "tab-pane"
, id "package-details-nixpkgs"
]
[ pre []
[ pre [ class "code-block" ]
[ text "nix-env -iA nixpkgs."
, strong [] [ text item.source.attr_name ]
]
Expand Down Expand Up @@ -525,7 +516,7 @@ viewResultItem channel showNixOSDetails show item =
open =
SearchMsg (Search.ShowDetails item.source.attr_name)
in
[ li
li
[ class "package"
, onClick open
, Search.elementId item.source.attr_name
Expand All @@ -540,7 +531,6 @@ viewResultItem channel showNixOSDetails show item =
, shortPackageDetails
]
)
]



Expand Down
22 changes: 22 additions & 0 deletions src/Search.elm
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,9 @@ module Search exposing
, init
, makeRequest
, makeRequestBody
, onClickStop
, shouldLoad
, trapClick
, update
, view
)
Expand Down Expand Up @@ -1164,3 +1166,23 @@ decodeAggregationBucketItem =
Json.Decode.map2 AggregationsBucketItem
(Json.Decode.field "doc_count" Json.Decode.int)
(Json.Decode.field "key" Json.Decode.string)



-- Html Event Helpers


onClickStop : msg -> Html.Attribute msg
onClickStop message =
Html.Events.custom "click" <|
Json.Decode.succeed
{ message = message
, stopPropagation = True
, preventDefault = True
}


trapClick : Html.Attribute (Msg a b)
trapClick =
Html.Events.stopPropagationOn "click" <|
Json.Decode.succeed ( NoOp, True )
21 changes: 19 additions & 2 deletions src/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,16 @@
}
}

.search-result-item() {
&:hover {
cursor: pointer;

.search-result-button {
text-decoration: underline;
}
}
}

/* ------------------------------------------------------------------------- */
/* -- Layout --------------------------------------------------------------- */
/* ------------------------------------------------------------------------- */
Expand All @@ -27,6 +37,11 @@ body {
}
}

.code-block {
display: block;
cursor: text;
}

#content {
padding-bottom: 4rem;
}
Expand Down Expand Up @@ -298,6 +313,7 @@ header .navbar.navbar-static-top {
}

&.package {
.search-result-item();

// short details of a pacakge
& > :nth-child(3) {
Expand Down Expand Up @@ -341,7 +357,7 @@ header .navbar.navbar-static-top {

div.tab-content {
padding: 1em;
border: 1px solid #ddd;
border: 1px solid #ddd;
border-top: 0;
}

Expand All @@ -366,13 +382,14 @@ header .navbar.navbar-static-top {
}

&.option {
.search-result-item();

// short details of a pacakge
& > :nth-child(3) {
margin-top: 1em;
margin-left: 1em;
display: grid;
grid-template-columns: 100px max-content;
grid-template-columns: 100px 1fr;
column-gap: 1em;
row-gap: 0.5em;

Expand Down