better fixedOverlay widget

Author: functora

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

@@ -53,6 +53,9 @@ dialog opts args =
     else
       singleton
         . FixedOverlay.fixedOverlay
+          [ role_ "button",
+            onClick $ closeDialogAction opts args
+          ]
         . singleton
         . nodeHtml "dialog" [boolProp "open" True]
         $ newFlex

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

@@ -5,20 +5,33 @@ where
 
 import Functora.Miso.Prelude
 
-fixedOverlay :: [View action] -> View action
-fixedOverlay =
+fixedOverlay :: [Attribute action] -> [View action] -> View action
+fixedOverlay attrs content =
   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")
-      ]
+    [ 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")
+        ]
+    ]
+    $ ( div_
+          ( style_
+              [ ("position", "fixed"),
+                ("top", "0"),
+                ("left", "0"),
+                ("width", "100%"),
+                ("height", "100%")
+              ]
+              : attrs
+          )
+          mempty
+      )
+    : content

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

@@ -9,5 +9,6 @@ import Functora.Miso.Widgets.FixedOverlay as FixedOverlay
 spinner :: View action
 spinner =
   FixedOverlay.fixedOverlay
+    mempty
     [ div_ [class_ "lds-dual-ring"] mempty
     ]