Re-enable PageLayout.EdgeToEdgeLayout

unisonweb · Jul 12, 2024 · 0961307 · 0961307
1 parent e120d3f
commit 0961307
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 5 deletions.
diff --git a/src/Code/FullyQualifiedName.elm b/src/Code/FullyQualifiedName.elm
@@ -267,11 +267,15 @@ extend a b =
         |> append a
 
 
+{-| prepend a single item onto the FQN segments
+-}
 cons : String -> FQN -> FQN
 cons s (FQN segments_) =
     FQN (NEL.cons s segments_)
 
 
+{-| append a single item onto the FQN segments
+-}
 snoc : FQN -> String -> FQN
 snoc (FQN segments_) s =
     FQN (NEL.append segments_ (NEL.fromElement s))

diff --git a/src/UI/PageLayout.elm b/src/UI/PageLayout.elm
@@ -53,6 +53,7 @@ type PageLayout msg
     | CenteredLayout (Layout {} msg)
     | CenteredNarrowLayout (Layout {} msg)
     | TabbedLayout (Layout { pageTitle : PageTitle msg, tabList : TabList msg } msg)
+    | EdgeToEdgeLayout (Layout {} msg)
     | PresentationLayout (PageContent msg)
 
 
@@ -108,6 +109,15 @@ centeredNarrowLayout content footer =
         }
 
 
+edgeToEdgeLayout : PageContent msg -> PageFooter msg -> PageLayout msg
+edgeToEdgeLayout content footer =
+    EdgeToEdgeLayout
+        { content = content
+        , footer = footer
+        , backgroundColor = DefaultBackground
+        }
+
+
 tabbedLayout : PageTitle msg -> TabList msg -> PageContent msg -> PageFooter msg -> PageLayout msg
 tabbedLayout pageTitle tabList content footer =
     TabbedLayout
@@ -150,6 +160,9 @@ withContent content pl =
         CenteredNarrowLayout l ->
             CenteredNarrowLayout (withContent_ l)
 
+        EdgeToEdgeLayout l ->
+            CenteredLayout (withContent_ l)
+
         TabbedLayout l ->
             TabbedLayout (withContent_ l)
 
@@ -175,6 +188,9 @@ withBackgroundColor bg pl =
         CenteredNarrowLayout l ->
             CenteredNarrowLayout { l | backgroundColor = bg }
 
+        EdgeToEdgeLayout l ->
+            CenteredNarrowLayout { l | backgroundColor = bg }
+
         TabbedLayout _ ->
             pl
 
@@ -249,6 +265,13 @@ map toMsg pageLayout =
                 , backgroundColor = layout.backgroundColor
                 }
 
+        EdgeToEdgeLayout layout ->
+            EdgeToEdgeLayout
+                { content = PageContent.map toMsg layout.content
+                , footer = mapPageFooter toMsg layout.footer
+                , backgroundColor = layout.backgroundColor
+                }
+
         TabbedLayout layout ->
             TabbedLayout
                 { pageTitle = PageTitle.map toMsg layout.pageTitle
@@ -357,6 +380,14 @@ view page =
                 [ PageContent.view_ (viewPageFooter footer) content
                 ]
 
+        EdgeToEdgeLayout { content, footer, backgroundColor } ->
+            div
+                [ class "page edge-to-edge-layout"
+                , bgClassName backgroundColor
+                ]
+                [ PageContent.view_ (viewPageFooter footer) content
+                ]
+
         TabbedLayout { pageTitle, tabList, content, footer, backgroundColor } ->
             div
                 [ class "page tabbed-layout"

diff --git a/src/css/ui/page-layout.css b/src/css/ui/page-layout.css
@@ -25,19 +25,19 @@
   --c-width_page-content_outer: calc(100vw - var(--c-width_sidebar));
 }
 
-.page.edge-to-edge-layout {
+.page.centered-layout {
   grid-template-columns: 1fr;
   grid-template-areas: "page-content";
   overflow: auto;
 }
 
-.page.centered-layout {
+.page.centered-narrow-layout {
   grid-template-columns: 1fr;
   grid-template-areas: "page-content";
   overflow: auto;
 }
 
-.page.centered-narrow-layout {
+.page.edge-to-edge-layout {
   grid-template-columns: 1fr;
   grid-template-areas: "page-content";
   overflow: auto;
@@ -235,7 +235,8 @@
   margin-left: -0.75rem;
 }
 
-.page.sidebar-edge-to-edge-layout .page-content {
+.page.sidebar-edge-to-edge-layout .page-content,
+.page.edge-to-edge-layout .page-content {
   padding: 0;
   width: 100%;
   align-items: normal;
@@ -246,7 +247,8 @@
  * TODO: This reset seems bad...
  * also depends on the .page-content reset of align-items ...
  */
-.page.sidebar-edge-to-edge-layout .page-content .column {
+.page.sidebar-edge-to-edge-layout .page-content .column,
+.page.edge-to-edge-layout .page-content .column {
   display: initial;
 }