c8h4/aux-search
1
0
Fork 0
Code Issues Pull requests Packages Releases Activity

add backdrop for suggestions and show suggestions loading spinner the moment a user starts typing (#129)

Browse source 
fixes #118
fixes #122
This commit is contained in:
Rok Garbas 2020-07-09 19:00:28 +02:00 committed by GitHub
parent a3ed2036cb
commit 71eba22a0e
Failed to generate hash of commit
2 changed files with 125 additions and 122 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
src/Search.elm
View file

@ -149,7 +149,7 @@ init channel query show from size model =
( { channel = Maybe.withDefault defaultChannel channel ( { channel = Maybe.withDefault defaultChannel channel
, queryDebounce = , queryDebounce =
Debouncer.Messages.manual Debouncer.Messages.manual
|> Debouncer.Messages.settleWhenQuietFor (Just <| Debouncer.Messages.fromSeconds 0.6) |> Debouncer.Messages.settleWhenQuietFor (Just <| Debouncer.Messages.fromSeconds 0.4)
|> Debouncer.Messages.toDebouncer |> Debouncer.Messages.toDebouncer
, query = query , query = query
, querySuggest = , querySuggest =
@ -264,22 +264,7 @@ update path navKey result_type options decodeResultItemSource msg model =
(QueryInputDebounce (Debouncer.Messages.provideInput QueryInputSuggestionsSubmit)) (QueryInputDebounce (Debouncer.Messages.provideInput QueryInputSuggestionsSubmit))
{ model { model
| query = Just query | query = Just query
, querySuggest = , querySuggest = RemoteData.Loading
case model.querySuggest of
RemoteData.Success result ->
let
suggestions =
getSuggestions (Just "XXXX") model.querySuggest
|> List.map .text
in
if List.member (Just query) suggestions then
RemoteData.NotAsked
else
model.querySuggest
_ ->
RemoteData.NotAsked
, querySelectedSuggestion = Nothing , querySelectedSuggestion = Nothing
} }
|> Tuple.mapSecond |> Tuple.mapSecond
@ -708,14 +693,25 @@ view path title model viewSuccess outMsg =
[ text <| Maybe.withDefault "" x.text ] [ text <| Maybe.withDefault "" x.text ]
] ]
in in
div [ class "search-page" ] div
[ classList
[ ( "search-page", True )
, ( "with-suggestions", RemoteData.isSuccess model.querySuggest && List.length suggestions > 0 )
, ( "with-suggestions-loading"
, (model.query /= Nothing)
&& (model.query /= Just "")
&& not (RemoteData.isSuccess model.querySuggest || RemoteData.isNotAsked model.querySuggest)
)
]
]
[ h1 [ class "page-header" ] [ text title ] [ h1 [ class "page-header" ] [ text title ]
, div , div
[ classList [ class "search-backdrop"
[ ( "search-input", True ) , onClick <| outMsg SuggestionsClose
, ( "with-suggestions", RemoteData.isSuccess model.querySuggest && List.length suggestions > 0 )
, ( "with-suggestions-loading", RemoteData.isLoading model.querySuggest )
] ]
[]
, div
[ class "search-input"
] ]
[ form [ onSubmit (outMsg QueryInputSubmit) ] [ form [ onSubmit (outMsg QueryInputSubmit) ]
[ p [ p

15
src/index.scss
View file

@ -29,19 +29,26 @@ header .navbar.navbar-static-top {
} }
} }
.search-page { .search-page.with-suggestions-loading {
.search-input.with-suggestions-loading {
.input-append div.loader { .input-append div.loader {
display: block; display: block;
} }
} }
.search-input.with-suggestions { .search-page.with-suggestions {
ul.dropdown-menu { ul.dropdown-menu {
display: block; display: block;
} }
.input-append input { .input-append input {
border-radius: 4px 0 0 0; border-radius: 4px 0 0 0;
} }
.search-backdrop {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 999;
}
} }
.search-input { .search-input {
position: relative; position: relative;
@ -129,7 +136,7 @@ header .navbar.navbar-static-top {
margin-bottom: 1em; margin-bottom: 1em;
} }
} }
}
.loader, .loader,
.loader:before, .loader:before,