Add modal actions helper

unisonweb · Aug 10, 2023 · 445e032 · 445e032
1 parent 05472ab
commit 445e032
Show file tree

Hide file tree

Showing 2 changed files with 58 additions and 2 deletions.
diff --git a/src/UI/Modal.elm b/src/UI/Modal.elm
@@ -6,15 +6,17 @@ module UI.Modal exposing
     , modal
     , modal_
     , view
+    , withActions
     , withAttributes
     , withHeader
     )
 
-import Html exposing (Attribute, Html, a, div, h2, header, section, text)
+import Html exposing (Attribute, Html, a, div, footer, h2, header, section, text)
 import Html.Attributes exposing (class, id, tabindex)
 import Html.Events exposing (on, onClick)
 import Json.Decode as Decode
 import UI
+import UI.Button as Button exposing (Button)
 import UI.Icon as Icon
 
 
@@ -28,6 +30,10 @@ type alias Modal msg =
     , closeMsg : Maybe msg
     , attributes : List (Attribute msg)
     , header : Maybe (Html msg)
+    , footer :
+        { leftSide : List (Html msg)
+        , actions : List (Button msg)
+        }
     , content : Content msg
     }
 
@@ -43,6 +49,7 @@ modal_ id content_ =
     , closeMsg = Nothing
     , attributes = []
     , header = Nothing
+    , footer = { leftSide = [], actions = [] }
     , content = content_
     }
 
@@ -67,6 +74,15 @@ withHeader title modal__ =
     { modal__ | header = Just (text title) }
 
 
+withActions : List (Button msg) -> Modal msg -> Modal msg
+withActions actions modal__ =
+    let
+        footer_ =
+            modal__.footer
+    in
+    { modal__ | footer = { footer_ | actions = actions } }
+
+
 withAttributes : List (Attribute msg) -> Modal msg -> Modal msg
 withAttributes attrs modal__ =
     { modal__ | attributes = modal__.attributes ++ attrs }
@@ -92,6 +108,19 @@ view modal__ =
                     )
                 |> Maybe.withDefault UI.nothing
 
+        footer_ =
+            if List.isEmpty modal__.footer.actions && List.isEmpty modal__.footer.leftSide then
+                UI.nothing
+
+            else
+                footer [ class "modal-footer" ]
+                    [ div [ class "modal-footer_left-side" ]
+                        modal__.footer.leftSide
+                    , div
+                        [ class "modal-footer_actions" ]
+                        (List.map Button.view modal__.footer.actions)
+                    ]
+
         content_ =
             case modal__.content of
                 Content c ->
@@ -100,7 +129,10 @@ view modal__ =
                 CustomContent c ->
                     c
     in
-    view_ modal__.closeMsg (id modal__.id :: modal__.attributes) [ header_, content_ ]
+    view_
+        modal__.closeMsg
+        (id modal__.id :: modal__.attributes)
+        [ header_, content_, footer_ ]
 
 
 

diff --git a/src/css/ui/components/modal.css b/src/css/ui/components/modal.css
@@ -87,6 +87,30 @@
   padding: 1.5rem;
 }
 
+.modal-footer {
+  margin-top: 1.5rem;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.modal-footer .modal-footer_left-side {
+  display: flex;
+  flex-direction: row;
+  justify-self: flex-end;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.modal-footer .modal-footer_actions {
+  display: flex;
+  flex-direction: row;
+  justify-self: flex-end;
+  align-items: center;
+  gap: 0.5rem;
+}
+
 .modal:focus {
   outline: none;
 }