Prettify modal dialogs a bit

This commit is contained in:
Eike Kettner 2020-06-12 00:17:26 +02:00
parent 936177a910
commit 9658b2780b
5 changed files with 182 additions and 144 deletions

View File

@ -193,6 +193,10 @@ update flags msg model =
) )
Submit -> Submit ->
let
failMsg =
Just (BasicResult False "Please fill required fields.")
in
case model.form of case model.form of
TM tm -> TM tm ->
let let
@ -206,7 +210,10 @@ update flags msg model =
) )
else else
( model, Cmd.none, Nothing ) ( { model | result = failMsg }
, Cmd.none
, Nothing
)
OM om -> OM om ->
let let
@ -220,7 +227,10 @@ update flags msg model =
) )
else else
( model, Cmd.none, Nothing ) ( { model | result = failMsg }
, Cmd.none
, Nothing
)
PMC pm -> PMC pm ->
let let
@ -234,7 +244,10 @@ update flags msg model =
) )
else else
( model, Cmd.none, Nothing ) ( { model | result = failMsg }
, Cmd.none
, Nothing
)
PMR pm -> PMR pm ->
let let
@ -248,7 +261,10 @@ update flags msg model =
) )
else else
( model, Cmd.none, Nothing ) ( { model | result = failMsg }
, Cmd.none
, Nothing
)
EM em -> EM em ->
let let
@ -262,7 +278,10 @@ update flags msg model =
) )
else else
( model, Cmd.none, Nothing ) ( { model | result = failMsg }
, Cmd.none
, Nothing
)
TagMsg lm -> TagMsg lm ->
case model.form of case model.form of
@ -271,7 +290,10 @@ update flags msg model =
( tm_, tc_ ) = ( tm_, tc_ ) =
Comp.TagForm.update flags lm tm Comp.TagForm.update flags lm tm
in in
( { model | form = TM tm_ } ( { model
| form = TM tm_
, result = Nothing
}
, Cmd.map TagMsg tc_ , Cmd.map TagMsg tc_
, Nothing , Nothing
) )
@ -286,7 +308,10 @@ update flags msg model =
( pm_, pc_ ) = ( pm_, pc_ ) =
Comp.PersonForm.update flags lm pm Comp.PersonForm.update flags lm pm
in in
( { model | form = PMR pm_ } ( { model
| form = PMR pm_
, result = Nothing
}
, Cmd.map PersonMsg pc_ , Cmd.map PersonMsg pc_
, Nothing , Nothing
) )
@ -296,7 +321,10 @@ update flags msg model =
( pm_, pc_ ) = ( pm_, pc_ ) =
Comp.PersonForm.update flags lm pm Comp.PersonForm.update flags lm pm
in in
( { model | form = PMC pm_ } ( { model
| form = PMC pm_
, result = Nothing
}
, Cmd.map PersonMsg pc_ , Cmd.map PersonMsg pc_
, Nothing , Nothing
) )
@ -311,7 +339,10 @@ update flags msg model =
( om_, oc_ ) = ( om_, oc_ ) =
Comp.OrgForm.update flags lm om Comp.OrgForm.update flags lm om
in in
( { model | form = OM om_ } ( { model
| form = OM om_
, result = Nothing
}
, Cmd.map OrgMsg oc_ , Cmd.map OrgMsg oc_
, Nothing , Nothing
) )
@ -326,7 +357,10 @@ update flags msg model =
( em_, ec_ ) = ( em_, ec_ ) =
Comp.EquipmentForm.update flags lm em Comp.EquipmentForm.update flags lm em
in in
( { model | form = EM em_ } ( { model
| form = EM em_
, result = Nothing
}
, Cmd.map EquipMsg ec_ , Cmd.map EquipMsg ec_
, Nothing , Nothing
) )
@ -339,57 +373,72 @@ update flags msg model =
--- View --- View
viewButtons : Model -> List (Html Msg)
viewButtons model =
[ button
[ class "ui primary button"
, href "#"
, onClick Submit
, disabled model.submitting
]
[ if model.submitting then
i [ class "ui spinner loading icon" ] []
else
text "Submit"
]
, button
[ class "ui button"
, href "#"
, onClick Cancel
]
[ text "Cancel"
]
]
viewIntern : UiSettings -> Bool -> Model -> List (Html Msg)
viewIntern settings withButtons model =
[ div
[ classList
[ ( "ui message", True )
, ( "error", Maybe.map .success model.result == Just False )
, ( "success", Maybe.map .success model.result == Just True )
, ( "invisible hidden", model.result == Nothing )
]
]
[ Maybe.map .message model.result
|> Maybe.withDefault ""
|> text
]
, case model.form of
TM tm ->
Html.map TagMsg (Comp.TagForm.view tm)
PMR pm ->
Html.map PersonMsg (Comp.PersonForm.view settings pm)
PMC pm ->
Html.map PersonMsg (Comp.PersonForm.view settings pm)
OM om ->
Html.map OrgMsg (Comp.OrgForm.view settings om)
EM em ->
Html.map EquipMsg (Comp.EquipmentForm.view em)
]
++ (if withButtons then
div [ class "ui divider" ] [] :: viewButtons model
else
[]
)
view : UiSettings -> Model -> Html Msg view : UiSettings -> Model -> Html Msg
view settings model = view settings model =
div [] div []
[ case model.form of (viewIntern settings True model)
TM tm ->
Html.map TagMsg (Comp.TagForm.view tm)
PMR pm ->
Html.map PersonMsg (Comp.PersonForm.view settings pm)
PMC pm ->
Html.map PersonMsg (Comp.PersonForm.view settings pm)
OM om ->
Html.map OrgMsg (Comp.OrgForm.view settings om)
EM em ->
Html.map EquipMsg (Comp.EquipmentForm.view em)
, div [ class "ui divider" ] []
, button
[ class "ui primary button"
, href "#"
, onClick Submit
, disabled model.submitting
]
[ if model.submitting then
i [ class "ui spinner loading icon" ] []
else
text "Submit"
]
, button
[ class "ui button"
, href "#"
, onClick Cancel
]
[ text "Cancel"
]
, div
[ classList
[ ( "ui message", True )
, ( "error", Maybe.map .success model.result == Just False )
, ( "success", Maybe.map .success model.result == Just True )
, ( "invisible hidden", model.result == Nothing )
]
]
[ Maybe.map .message model.result
|> Maybe.withDefault ""
|> text
]
]
viewModal : UiSettings -> Maybe Model -> Html Msg viewModal : UiSettings -> Maybe Model -> Html Msg
@ -405,10 +454,10 @@ viewModal settings mm =
(\_ -> "Add Equipment") (\_ -> "Add Equipment")
headIcon = headIcon =
fold (\_ -> Icons.tagIcon) fold (\_ -> Icons.tagIcon "")
(\_ -> Icons.personIcon) (\_ -> Icons.personIcon "")
(\_ -> Icons.organizationIcon) (\_ -> Icons.organizationIcon "")
(\_ -> Icons.equipmentIcon) (\_ -> Icons.equipmentIcon "")
in in
div div
[ classList [ classList
@ -428,13 +477,21 @@ viewModal settings mm =
|> Maybe.withDefault "" |> Maybe.withDefault ""
|> text |> text
] ]
, div [ class "content" ] , div [ class "scrolling content" ]
[ case mm of (case mm of
Just model -> Just model ->
view settings model viewIntern settings False model
Nothing -> Nothing ->
span [] [] []
] )
, div [ class "actions" ]
(case mm of
Just model ->
viewButtons model
Nothing ->
[]
)
] ]
] ]

View File

@ -240,7 +240,7 @@ viewItem settings item =
[ div [ div
[ class "ui basic grey label" [ class "ui basic grey label"
] ]
[ Icons.dueDateIcon [ Icons.dueDateIcon ""
, text (" " ++ dueDate) , text (" " ++ dueDate)
] ]
] ]

View File

@ -1775,7 +1775,7 @@ renderItemInfo settings model =
[ class "item" [ class "item"
, title "Due Date" , title "Due Date"
] ]
[ Icons.dueDateIcon [ Icons.dueDateIcon "grey"
, Maybe.map Util.Time.formatDate model.item.dueDate , Maybe.map Util.Time.formatDate model.item.dueDate
|> Maybe.withDefault "" |> Maybe.withDefault ""
|> text |> text
@ -1917,19 +1917,24 @@ renderEditButtons model =
renderEditForm : UiSettings -> Model -> Html Msg renderEditForm : UiSettings -> Model -> Html Msg
renderEditForm settings model = renderEditForm settings model =
let
addIconLink tip m =
a
[ class "right-float"
, href "#"
, title tip
, onClick m
]
[ i [ class "grey plus link icon" ] []
]
in
div [ class "ui attached segment" ] div [ class "ui attached segment" ]
[ div [ class "ui form" ] [ div [ class "ui form" ]
[ div [ class "field" ] [ div [ class "field" ]
[ label [] [ label []
[ Icons.tagsIcon [ Icons.tagsIcon "grey"
, text "Tags" , text "Tags"
, a , addIconLink "Add new tag" StartTagModal
[ class "right-float"
, href "#"
, onClick StartTagModal
]
[ i [ class "add link icon" ] []
]
] ]
, Html.map TagDropdownMsg (Comp.Dropdown.view settings model.tagModel) , Html.map TagDropdownMsg (Comp.Dropdown.view settings model.tagModel)
] ]
@ -1947,14 +1952,14 @@ renderEditForm settings model =
] ]
, div [ class "field" ] , div [ class "field" ]
[ label [] [ label []
[ Icons.directionIcon [ Icons.directionIcon "grey"
, text "Direction" , text "Direction"
] ]
, Html.map DirDropdownMsg (Comp.Dropdown.view settings model.directionModel) , Html.map DirDropdownMsg (Comp.Dropdown.view settings model.directionModel)
] ]
, div [ class " field" ] , div [ class " field" ]
[ label [] [ label []
[ Icons.dateIcon [ Icons.dateIcon "grey"
, text "Date" , text "Date"
] ]
, div [ class "ui action input" ] , div [ class "ui action input" ]
@ -1972,7 +1977,7 @@ renderEditForm settings model =
] ]
, div [ class " field" ] , div [ class " field" ]
[ label [] [ label []
[ Icons.dueDateIcon [ Icons.dueDateIcon "grey"
, text "Due Date" , text "Due Date"
] ]
, div [ class "ui action input" ] , div [ class "ui action input" ]
@ -1993,30 +1998,18 @@ renderEditForm settings model =
] ]
, div [ class "field" ] , div [ class "field" ]
[ label [] [ label []
[ Icons.organizationIcon [ Icons.organizationIcon "grey"
, text "Organization" , text "Organization"
, a , addIconLink "Add new organization" StartCorrOrgModal
[ class "right-float"
, href "#"
, onClick StartCorrOrgModal
]
[ i [ class "add link icon" ] []
]
] ]
, Html.map OrgDropdownMsg (Comp.Dropdown.view settings model.corrOrgModel) , Html.map OrgDropdownMsg (Comp.Dropdown.view settings model.corrOrgModel)
, renderOrgSuggestions model , renderOrgSuggestions model
] ]
, div [ class "field" ] , div [ class "field" ]
[ label [] [ label []
[ Icons.personIcon [ Icons.personIcon "grey"
, text "Person" , text "Person"
, a , addIconLink "Add new correspondent person" StartCorrPersonModal
[ class "right-float"
, href "#"
, onClick StartCorrPersonModal
]
[ i [ class "add link icon" ] []
]
] ]
, Html.map CorrPersonMsg (Comp.Dropdown.view settings model.corrPersonModel) , Html.map CorrPersonMsg (Comp.Dropdown.view settings model.corrPersonModel)
, renderCorrPersonSuggestions model , renderCorrPersonSuggestions model
@ -2027,30 +2020,18 @@ renderEditForm settings model =
] ]
, div [ class "field" ] , div [ class "field" ]
[ label [] [ label []
[ Icons.personIcon [ Icons.personIcon "grey"
, text "Person" , text "Person"
, a , addIconLink "Add new concerning person" StartConcPersonModal
[ class "right-float"
, href "#"
, onClick StartConcPersonModal
]
[ i [ class "add link icon" ] []
]
] ]
, Html.map ConcPersonMsg (Comp.Dropdown.view settings model.concPersonModel) , Html.map ConcPersonMsg (Comp.Dropdown.view settings model.concPersonModel)
, renderConcPersonSuggestions model , renderConcPersonSuggestions model
] ]
, div [ class "field" ] , div [ class "field" ]
[ label [] [ label []
[ Icons.equipmentIcon [ Icons.equipmentIcon "grey"
, text "Equipment" , text "Equipment"
, a , addIconLink "Add new equipment" StartEquipModal
[ class "right-float"
, href "#"
, onClick StartEquipModal
]
[ i [ class "add link icon" ] []
]
] ]
, Html.map ConcEquipMsg (Comp.Dropdown.view settings model.concEquipModel) , Html.map ConcEquipMsg (Comp.Dropdown.view settings model.concEquipModel)
, renderConcEquipSuggestions model , renderConcEquipSuggestions model

View File

@ -54,9 +54,9 @@ date =
"calendar outline icon" "calendar outline icon"
dateIcon : Html msg dateIcon : String -> Html msg
dateIcon = dateIcon classes =
i [ class date ] [] i [ class (date ++ " " ++ classes) ] []
dueDate : String dueDate : String
@ -64,9 +64,9 @@ dueDate =
"bell icon" "bell icon"
dueDateIcon : Html msg dueDateIcon : String -> Html msg
dueDateIcon = dueDateIcon classes =
i [ class dueDate ] [] i [ class (dueDate ++ " " ++ classes) ] []
editNotes : String editNotes : String
@ -94,9 +94,9 @@ tag =
"tag icon" "tag icon"
tagIcon : Html msg tagIcon : String -> Html msg
tagIcon = tagIcon classes =
i [ class tag ] [] i [ class (tag ++ " " ++ classes) ] []
tags : String tags : String
@ -104,9 +104,9 @@ tags =
"tags icon" "tags icon"
tagsIcon : Html msg tagsIcon : String -> Html msg
tagsIcon = tagsIcon classes =
i [ class tags ] [] i [ class (tags ++ " " ++ classes) ] []
direction : String direction : String
@ -114,9 +114,9 @@ direction =
"exchange icon" "exchange icon"
directionIcon : Html msg directionIcon : String -> Html msg
directionIcon = directionIcon classes =
i [ class direction ] [] i [ class (direction ++ " " ++ classes) ] []
person : String person : String
@ -124,9 +124,9 @@ person =
"user icon" "user icon"
personIcon : Html msg personIcon : String -> Html msg
personIcon = personIcon classes =
i [ class person ] [] i [ class (person ++ " " ++ classes) ] []
organization : String organization : String
@ -134,9 +134,9 @@ organization =
"factory icon" "factory icon"
organizationIcon : Html msg organizationIcon : String -> Html msg
organizationIcon = organizationIcon classes =
i [ class organization ] [] i [ class (organization ++ " " ++ classes) ] []
equipment : String equipment : String
@ -144,6 +144,6 @@ equipment =
"box icon" "box icon"
equipmentIcon : Html msg equipmentIcon : String -> Html msg
equipmentIcon = equipmentIcon classes =
i [ class equipment ] [] i [ class (equipment ++ " " ++ classes) ] []

View File

@ -26,28 +26,28 @@ view settings model =
[ classActive (model.currentTab == Just TagTab) "link icon item" [ classActive (model.currentTab == Just TagTab) "link icon item"
, onClick (SetTab TagTab) , onClick (SetTab TagTab)
] ]
[ Icons.tagIcon [ Icons.tagIcon ""
, text "Tag" , text "Tag"
] ]
, div , div
[ classActive (model.currentTab == Just EquipTab) "link icon item" [ classActive (model.currentTab == Just EquipTab) "link icon item"
, onClick (SetTab EquipTab) , onClick (SetTab EquipTab)
] ]
[ Icons.equipmentIcon [ Icons.equipmentIcon ""
, text "Equipment" , text "Equipment"
] ]
, div , div
[ classActive (model.currentTab == Just OrgTab) "link icon item" [ classActive (model.currentTab == Just OrgTab) "link icon item"
, onClick (SetTab OrgTab) , onClick (SetTab OrgTab)
] ]
[ Icons.organizationIcon [ Icons.organizationIcon ""
, text "Organization" , text "Organization"
] ]
, div , div
[ classActive (model.currentTab == Just PersonTab) "link icon item" [ classActive (model.currentTab == Just PersonTab) "link icon item"
, onClick (SetTab PersonTab) , onClick (SetTab PersonTab)
] ]
[ Icons.personIcon [ Icons.personIcon ""
, text "Person" , text "Person"
] ]
] ]
@ -78,7 +78,7 @@ view settings model =
viewTags : Model -> List (Html Msg) viewTags : Model -> List (Html Msg)
viewTags model = viewTags model =
[ h2 [ class "ui header" ] [ h2 [ class "ui header" ]
[ Icons.tagIcon [ Icons.tagIcon ""
, div [ class "content" ] , div [ class "content" ]
[ text "Tags" [ text "Tags"
] ]
@ -90,7 +90,7 @@ viewTags model =
viewEquip : Model -> List (Html Msg) viewEquip : Model -> List (Html Msg)
viewEquip model = viewEquip model =
[ h2 [ class "ui header" ] [ h2 [ class "ui header" ]
[ Icons.equipmentIcon [ Icons.equipmentIcon ""
, div [ class "content" ] , div [ class "content" ]
[ text "Equipment" [ text "Equipment"
] ]
@ -102,7 +102,7 @@ viewEquip model =
viewOrg : UiSettings -> Model -> List (Html Msg) viewOrg : UiSettings -> Model -> List (Html Msg)
viewOrg settings model = viewOrg settings model =
[ h2 [ class "ui header" ] [ h2 [ class "ui header" ]
[ Icons.organizationIcon [ Icons.organizationIcon ""
, div [ class "content" ] , div [ class "content" ]
[ text "Organizations" [ text "Organizations"
] ]
@ -114,7 +114,7 @@ viewOrg settings model =
viewPerson : UiSettings -> Model -> List (Html Msg) viewPerson : UiSettings -> Model -> List (Html Msg)
viewPerson settings model = viewPerson settings model =
[ h2 [ class "ui header" ] [ h2 [ class "ui header" ]
[ Icons.personIcon [ Icons.personIcon ""
, div [ class "content" ] , div [ class "content" ]
[ text "Person" [ text "Person"
] ]