From 9658b2780b7a322fbd2af454a2988ae41e2d06c9 Mon Sep 17 00:00:00 2001 From: Eike Kettner Date: Fri, 12 Jun 2020 00:17:26 +0200 Subject: [PATCH] Prettify modal dialogs a bit --- .../webapp/src/main/elm/Comp/DetailEdit.elm | 191 ++++++++++++------ .../webapp/src/main/elm/Comp/ItemCardList.elm | 2 +- .../webapp/src/main/elm/Comp/ItemDetail.elm | 69 +++---- modules/webapp/src/main/elm/Data/Icons.elm | 48 ++--- .../src/main/elm/Page/ManageData/View.elm | 16 +- 5 files changed, 182 insertions(+), 144 deletions(-) diff --git a/modules/webapp/src/main/elm/Comp/DetailEdit.elm b/modules/webapp/src/main/elm/Comp/DetailEdit.elm index 7eae2160..2e4f9f44 100644 --- a/modules/webapp/src/main/elm/Comp/DetailEdit.elm +++ b/modules/webapp/src/main/elm/Comp/DetailEdit.elm @@ -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 -> + [] + ) ] ] diff --git a/modules/webapp/src/main/elm/Comp/ItemCardList.elm b/modules/webapp/src/main/elm/Comp/ItemCardList.elm index 30236bd0..de2b36ae 100644 --- a/modules/webapp/src/main/elm/Comp/ItemCardList.elm +++ b/modules/webapp/src/main/elm/Comp/ItemCardList.elm @@ -240,7 +240,7 @@ viewItem settings item = [ div [ class "ui basic grey label" ] - [ Icons.dueDateIcon + [ Icons.dueDateIcon "" , text (" " ++ dueDate) ] ] diff --git a/modules/webapp/src/main/elm/Comp/ItemDetail.elm b/modules/webapp/src/main/elm/Comp/ItemDetail.elm index 1065f085..9a65d7af 100644 --- a/modules/webapp/src/main/elm/Comp/ItemDetail.elm +++ b/modules/webapp/src/main/elm/Comp/ItemDetail.elm @@ -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 diff --git a/modules/webapp/src/main/elm/Data/Icons.elm b/modules/webapp/src/main/elm/Data/Icons.elm index bade841f..a52f0c4b 100644 --- a/modules/webapp/src/main/elm/Data/Icons.elm +++ b/modules/webapp/src/main/elm/Data/Icons.elm @@ -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) ] [] diff --git a/modules/webapp/src/main/elm/Page/ManageData/View.elm b/modules/webapp/src/main/elm/Page/ManageData/View.elm index fabdc56b..9d048d2a 100644 --- a/modules/webapp/src/main/elm/Page/ManageData/View.elm +++ b/modules/webapp/src/main/elm/Page/ManageData/View.elm @@ -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" ]