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
, queryDebounce =
Debouncer.Messages.manual
|> Debouncer.Messages.settleWhenQuietFor (Just <| Debouncer.Messages.fromSeconds 0.6)
|> Debouncer.Messages.settleWhenQuietFor (Just <| Debouncer.Messages.fromSeconds 0.4)
|> Debouncer.Messages.toDebouncer
, query = query
, querySuggest =
@ -264,22 +264,7 @@ update path navKey result_type options decodeResultItemSource msg model =
(QueryInputDebounce (Debouncer.Messages.provideInput QueryInputSuggestionsSubmit))
{ model
| query = Just query
, querySuggest =
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
, querySuggest = RemoteData.Loading
, querySelectedSuggestion = Nothing
}
|> Tuple.mapSecond
@ -708,14 +693,25 @@ view path title model viewSuccess outMsg =
[ text <| Maybe.withDefault "" x.text ]
]
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 ]
, div
[ classList
[ ( "search-input", True )
, ( "with-suggestions", RemoteData.isSuccess model.querySuggest && List.length suggestions > 0 )
, ( "with-suggestions-loading", RemoteData.isLoading model.querySuggest )
[ class "search-backdrop"
, onClick <| outMsg SuggestionsClose
]
[]
, div
[ class "search-input"
]
[ form [ onSubmit (outMsg QueryInputSubmit) ]
[ p

23
src/index.scss
View file

@ -29,21 +29,28 @@ header .navbar.navbar-static-top {
}
}
.search-page {
.search-input.with-suggestions-loading {
.search-page.with-suggestions-loading {
.input-append div.loader {
display: block;
}
}
.search-input.with-suggestions {
}
.search-page.with-suggestions {
ul.dropdown-menu {
display: block;
}
.input-append input {
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;
ul.dropdown-menu {
font-size: 18px;
@ -98,8 +105,8 @@ header .navbar.navbar-static-top {
font-size: 1.2em;
margin-left: 0.2em;
}
}
.search-result {
}
.search-result {
tbody > tr {
cursor: pointer;
}
@ -128,9 +135,9 @@ header .navbar.navbar-static-top {
tbody > td > dl > dd {
margin-bottom: 1em;
}
}
}
.loader,
.loader:before,
.loader:after {