FixedOverlay and Spinner widgets

Author: functora

ghcjs/delivery-calculator/src/App/Widgets/Main.hs

@@ -11,36 +11,37 @@ import qualified Functora.Miso.Widgets.Dialog as Dialog
 import qualified Functora.Miso.Widgets.Field as Field
 import qualified Functora.Miso.Widgets.FieldPairs as FieldPairs
 import qualified Functora.Miso.Widgets.Grid as Grid
+import qualified Functora.Miso.Widgets.Spinner as Spinner
 import qualified Functora.Money as Money
 import Lens.Micro ((^..))
 import Miso hiding (at, view)
 
 mainWidget :: Model -> View Action
 mainWidget st =
   section_
-    [ class_ "main-widget"
+    [ style_
+        [ ("margin", "0"),
+          ("padding", "0"),
+          ("width", "100%"),
+          ("min-height", "100vh"),
+          ("display", "flex"),
+          ("flex-direction", "column"),
+          ("justify-content", "space-between")
+        ]
     ]
     $ [ header_ mempty $ Menu.menu st
       ]
     <> [ main_
-          [class_ "main-widget-middle"]
+          [style_ [("max-width", "550px")]]
           $ screenWidget st
        ]
     <> [ footer_
           [style_ [("text-align", "center")]]
           [tosWidget]
        ]
-    <> ( if st ^. #modelLoading
-          then
-            [ div_
-                [ class_
-                    "mdc-dialog mdc-dialog--fullscreen fullscreen-dialog mdc-dialog--open mdc-dialog-scroll-divider-footer mdc-dialog--scrollable"
-                ]
-                [ div_ [class_ "mdc-dialog__scrim"] mempty,
-                  div_ [class_ "lds-dual-ring"] mempty
-                ]
-            ]
-          else mempty
+    <> ( if not $ st ^. #modelLoading
+          then mempty
+          else [Spinner.spinner]
        )
 
 screenWidget :: Model -> [View Action]

ghcjs/delivery-calculator/static/app.css

@@ -12,25 +12,13 @@ footer {
   padding-bottom: 18px;
 }
 
-.main-widget {
-  margin: 0;
-  padding: 0;
-  width: 100%;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  /* overflow-x: hidden; */
-}
-
-.main-widget-middle {
-  max-width: 550px;
-}
-
 textarea {
   resize: vertical;
   pointer-events: auto;
-  min-height: 72px;
+}
+
+dialog {
+  overflow: auto;
 }
 
 @media print {

ghcjs/delivery-calculator/static/css/app.css

@@ -111,12 +111,14 @@ library
     Functora.Miso.Widgets.Dialog
     Functora.Miso.Widgets.Field
     Functora.Miso.Widgets.FieldPairs
+    Functora.Miso.Widgets.FixedOverlay
     Functora.Miso.Widgets.Flex
     Functora.Miso.Widgets.Grid
     Functora.Miso.Widgets.Icon
     Functora.Miso.Widgets.Money
     Functora.Miso.Widgets.Qr
     Functora.Miso.Widgets.Select
+    Functora.Miso.Widgets.Spinner
     Functora.Miso.Widgets.Switch
 
 test-suite miso-functora-test
@@ -146,12 +148,14 @@ test-suite miso-functora-test
       Functora.Miso.Widgets.Dialog
       Functora.Miso.Widgets.Field
       Functora.Miso.Widgets.FieldPairs
+      Functora.Miso.Widgets.FixedOverlay
       Functora.Miso.Widgets.Flex
       Functora.Miso.Widgets.Grid
       Functora.Miso.Widgets.Icon
       Functora.Miso.Widgets.Money
       Functora.Miso.Widgets.Qr
       Functora.Miso.Widgets.Select
+      Functora.Miso.Widgets.Spinner
       Functora.Miso.Widgets.Switch
 
   else

ghcjs/miso-functora/miso-functora.cabal

@@ -10,6 +10,7 @@ where
 
 import Functora.Miso.Prelude
 import Functora.Miso.Types
+import qualified Functora.Miso.Widgets.FixedOverlay as FixedOverlay
 import qualified Functora.Miso.Widgets.Icon as Icon
 import qualified Language.Javascript.JSaddle as JS
 
@@ -50,30 +51,31 @@ dialog ::
   Args model action ->
   [View action]
 dialog opts args =
-  singleton
-    . nodeHtml
-      "dialog"
-      [ id_ $ getDialogUid (argsModel args) (argsOptic args)
-      ]
-    $ if args
-      ^? #argsModel
-      . cloneTraversal (argsOptic args)
-      . #uniqueValue
-      /= Just Opened
-      then mempty
-      else
-        newFlex
+  if not opened
+    then mempty
+    else
+      singleton
+        . FixedOverlay.fixedOverlay
+        . singleton
+        . nodeHtml "dialog" [boolProp "open" True]
+        $ newFlex
           header_
           id
           (optsHeaderLeft opts defHeaderLeft)
           (optsHeaderRight opts defHeaderRight)
-          <> argsContent args
-          <> newFlex
-            footer_
-            id
-            (optsFooterLeft opts defFooterRight)
-            (optsFooterRight opts mempty)
+        <> argsContent args
+        <> newFlex
+          footer_
+          id
+          (optsFooterLeft opts defFooterRight)
+          (optsFooterRight opts mempty)
   where
+    opened =
+      args
+        ^? #argsModel
+        . cloneTraversal (argsOptic args)
+        . #uniqueValue
+        == Just Opened
     defHeaderLeft =
       maybeToList
         . fmap

ghcjs/miso-functora/src/Functora/Miso/Widgets/Dialog.hs

@@ -0,0 +1,24 @@
+module Functora.Miso.Widgets.FixedOverlay
+  ( fixedOverlay,
+  )
+where
+
+import Functora.Miso.Prelude
+
+fixedOverlay :: [View action] -> View action
+fixedOverlay =
+  div_
+    . singleton
+    $ style_
+      [ ("position", "fixed"),
+        ("top", "0"),
+        ("left", "0"),
+        ("width", "100%"),
+        ("height", "100%"),
+        ("backdrop-filter", "blur(2px)"),
+        ("background-color", "rgba(0, 0, 0, 0.5)"),
+        ("z-index", "9999"),
+        ("display", "flex"),
+        ("justify-content", "center"),
+        ("align-items", "center")
+      ]

ghcjs/miso-functora/src/Functora/Miso/Widgets/FixedOverlay.hs

@@ -0,0 +1,13 @@
+module Functora.Miso.Widgets.Spinner
+  ( spinner,
+  )
+where
+
+import Functora.Miso.Prelude
+import Functora.Miso.Widgets.FixedOverlay as FixedOverlay
+
+spinner :: View action
+spinner =
+  FixedOverlay.fixedOverlay
+    [ div_ [class_ "lds-dual-ring"] mempty
+    ]