TheAnachronism/docspell
1
0
Fork 0
mirror of https://github.com/TheAnachronism/docspell.git synced 2025-06-02 13:32:51 +00:00
Code Issues Packages Projects Releases Wiki Activity

Navigate in ugly dropdown with keybord

Browse Source 
- iterate through options with n,p,j,k
- select with enter
- remove item with esc
- fixes dropdown bug when removing an item, where the menu opens
This commit is contained in:
Eike Kettner 2020-09-21 23:52:50 +02:00
parent 22d70b4997
commit dc0e05bc20
1 changed files with 50 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
modules/webapp/src/main/elm/Comp/Dropdown.elm
View File

@ -313,7 +313,7 @@ isDropdownChangeMsg cm =
KeyPress code -> KeyPress code ->
Util.Html.intToKeyCode code Util.Html.intToKeyCode code
|> Maybe.map (\c -> c == Util.Html.Enter) |> Maybe.map (\c -> c == Util.Html.Enter || c == Util.Html.ESC)
|> Maybe.withDefault False |> Maybe.withDefault False
_ -> _ ->
@ -352,7 +352,10 @@ update msg model =
m = m =
deselectItem model e |> applyFilter "" deselectItem model e |> applyFilter ""
in in
( { m | menuOpen = False }, Cmd.none ) ( -- Setting to True, because parent click sets it to False… ugly
{ m | menuOpen = True }
, Cmd.none
)
Filter str -> Filter str ->
let let
@ -369,9 +372,40 @@ update msg model =
Just Util.Html.Up -> Just Util.Html.Up ->
( makeNextActive (\n -> n - 1) model, Cmd.none ) ( makeNextActive (\n -> n - 1) model, Cmd.none )
Just Util.Html.Letter_P ->
( makeNextActive (\n -> n - 1) model, Cmd.none )
Just Util.Html.Letter_K ->
( makeNextActive (\n -> n - 1) model, Cmd.none )
Just Util.Html.Down -> Just Util.Html.Down ->
( makeNextActive ((+) 1) model, Cmd.none ) ( makeNextActive ((+) 1) model, Cmd.none )
Just Util.Html.Letter_N ->
( makeNextActive ((+) 1) model, Cmd.none )
Just Util.Html.Letter_J ->
( makeNextActive ((+) 1) model, Cmd.none )
Just Util.Html.ESC ->
if model.menuOpen then
( model, Cmd.none )
else
case model.selected of
[ e ] ->
let
( m_, c_ ) =
update (RemoveItem e) model
in
( { m_ | menuOpen = False }, c_ )
_ ->
( model, Cmd.none )
Just Util.Html.Space ->
update ToggleMenu model
Just Util.Html.Enter -> Just Util.Html.Enter ->
let let
m = m =
@ -404,7 +438,11 @@ viewSingle model =
[ class "message" [ class "message"
, style "display" "inline-block !important" , style "display" "inline-block !important"
] ]
[ i [ class "delete icon", onClick (RemoveItem item) ] [] [ i
[ class "delete icon"
, onClick (RemoveItem item)
]
[]
, text item.option.text , text item.option.text
] ]
@ -420,7 +458,6 @@ viewSingle model =
[ class "search" [ class "search"
, placeholder "Search…" , placeholder "Search…"
, onInput Filter , onInput Filter
, onKeyUp KeyPress
, value model.filterString , value model.filterString
] ]
[] []
@ -433,10 +470,15 @@ viewSingle model =
, ( "open", model.menuOpen ) , ( "open", model.menuOpen )
] ]
:: (if model.menuOpen then :: (if model.menuOpen then
[] [ tabindex 0
, onKeyUp KeyPress
]
else else
[ onClick ToggleMenu ] [ onClick ToggleMenu
, tabindex 0
, onKeyUp KeyPress
]
) )
) )
(List.append (List.append
@ -482,6 +524,8 @@ viewMultiple settings model =
[ ( "ui search dropdown multiple selection", True ) [ ( "ui search dropdown multiple selection", True )
, ( "open", model.menuOpen ) , ( "open", model.menuOpen )
] ]
, tabindex 0
, onKeyUp KeyPress
] ]
(List.concat (List.concat
[ [ i [ class "dropdown icon", onClick ToggleMenu ] [] [ [ i [ class "dropdown icon", onClick ToggleMenu ] []
@ -492,7 +536,6 @@ viewMultiple settings model =
[ class "search" [ class "search"
, placeholder "Search…" , placeholder "Search…"
, onInput Filter , onInput Filter
, onKeyUp KeyPress
, value model.filterString , value model.filterString
] ]
[] []