Make dropdowns searchable by default and improve open/close clicks

Ref #207
This commit is contained in:
Eike Kettner 2020-08-14 23:02:21 +02:00
parent 61f76acdca
commit fde52bbbb0
3 changed files with 24 additions and 10 deletions

View File

@ -106,7 +106,7 @@ makeSingle :
makeSingle opts = makeSingle opts =
makeModel makeModel
{ multiple = False { multiple = False
, searchable = \n -> n > 5 , searchable = \n -> n > 0
, makeOption = opts.makeOption , makeOption = opts.makeOption
, labelColor = \_ -> \_ -> "" , labelColor = \_ -> \_ -> ""
, placeholder = opts.placeholder , placeholder = opts.placeholder
@ -144,7 +144,7 @@ makeMultiple :
makeMultiple opts = makeMultiple opts =
makeModel makeModel
{ multiple = True { multiple = True
, searchable = \n -> n > 5 , searchable = \n -> n > 0
, makeOption = opts.makeOption , makeOption = opts.makeOption
, labelColor = opts.labelColor , labelColor = opts.labelColor
, placeholder = "" , placeholder = ""
@ -403,7 +403,6 @@ viewSingle model =
div div
[ class "message" [ class "message"
, style "display" "inline-block !important" , style "display" "inline-block !important"
, onClick ToggleMenu
] ]
[ i [ class "delete icon", onClick (RemoveItem item) ] [] [ i [ class "delete icon", onClick (RemoveItem item) ] []
, text item.option.text , text item.option.text
@ -429,13 +428,28 @@ viewSingle model =
] ]
in in
div div
[ classList (classList
[ ( "ui search dropdown selection", True ) [ ( "ui search dropdown selection", True )
, ( "open", model.menuOpen ) , ( "open", model.menuOpen )
] ]
] :: (if model.menuOpen then
[]
else
[ onClick ToggleMenu ]
)
)
(List.append (List.append
[ i [ class "dropdown icon", onClick ToggleMenu ] [] [ i
(class "dropdown icon"
:: (if model.menuOpen then
[ onClick ToggleMenu ]
else
[]
)
)
[]
] ]
<| <|
if model.menuOpen && isSearchable model then if model.menuOpen && isSearchable model then

View File

@ -89,7 +89,7 @@ init =
, orgModel = , orgModel =
Comp.Dropdown.makeModel Comp.Dropdown.makeModel
{ multiple = False { multiple = False
, searchable = \n -> n > 5 , searchable = \n -> n > 0
, makeOption = \e -> { value = e.id, text = e.name, additional = "" } , makeOption = \e -> { value = e.id, text = e.name, additional = "" }
, labelColor = \_ -> \_ -> "" , labelColor = \_ -> \_ -> ""
, placeholder = "Choose an organization" , placeholder = "Choose an organization"
@ -107,7 +107,7 @@ init =
, concEquipmentModel = , concEquipmentModel =
Comp.Dropdown.makeModel Comp.Dropdown.makeModel
{ multiple = False { multiple = False
, searchable = \n -> n > 5 , searchable = \n -> n > 0
, makeOption = \e -> { value = e.id, text = e.name, additional = "" } , makeOption = \e -> { value = e.id, text = e.name, additional = "" }
, labelColor = \_ -> \_ -> "" , labelColor = \_ -> \_ -> ""
, placeholder = "Choose an equipment" , placeholder = "Choose an equipment"

View File

@ -14,7 +14,7 @@ makeDropdownModel : Comp.Dropdown.Model Tag
makeDropdownModel = makeDropdownModel =
Comp.Dropdown.makeModel Comp.Dropdown.makeModel
{ multiple = True { multiple = True
, searchable = \n -> n > 5 , searchable = \n -> n > 0
, makeOption = \tag -> { value = tag.id, text = tag.name, additional = "" } , makeOption = \tag -> { value = tag.id, text = tag.name, additional = "" }
, labelColor = , labelColor =
\tag -> \tag ->
@ -28,7 +28,7 @@ makeCatDropdownModel : Comp.Dropdown.Model String
makeCatDropdownModel = makeCatDropdownModel =
Comp.Dropdown.makeModel Comp.Dropdown.makeModel
{ multiple = True { multiple = True
, searchable = \n -> n > 5 , searchable = \n -> n > 0
, makeOption = \cat -> { value = cat, text = cat, additional = "" } , makeOption = \cat -> { value = cat, text = cat, additional = "" }
, labelColor = \_ -> \_ -> "" , labelColor = \_ -> \_ -> ""
, placeholder = "Choose a tag category" , placeholder = "Choose a tag category"