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

View File

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

View File

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

View File

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

View File

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