PageContent with tabs

unisonweb · Aug 23, 2023 · 37b0161 · 37b0161
1 parent cf7b7ed
commit 37b0161
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 54 deletions.
diff --git a/src/UI/PageContent.elm b/src/UI/PageContent.elm
@@ -10,12 +10,14 @@ module UI.PageContent exposing
     , withLeftAside
     , withPageTitle
     , withRightAside
+    , withTabList
     )
 
 import Html exposing (Html, aside, div, section)
 import Html.Attributes exposing (class, id)
 import UI
 import UI.PageTitle as PageTitle exposing (PageTitle)
+import UI.TabList as TabList exposing (TabList)
 
 
 type PageAside msg
@@ -27,6 +29,7 @@ type PageAside msg
 type PageContent msg
     = PageContent
         { title : Maybe (PageTitle msg)
+        , tabList : Maybe (TabList msg)
         , content : List (List (Html msg))
         , aside : PageAside msg
         }
@@ -40,6 +43,7 @@ empty : PageContent msg
 empty =
     PageContent
         { title = Nothing
+        , tabList = Nothing
         , content = []
         , aside = NoAside
         }
@@ -51,6 +55,7 @@ oneColumn : List (Html msg) -> PageContent msg
 oneColumn rows =
     PageContent
         { title = Nothing
+        , tabList = Nothing
         , content = [ rows ]
         , aside = NoAside
         }
@@ -62,6 +67,7 @@ twoColumns : ( List (Html msg), List (Html msg) ) -> PageContent msg
 twoColumns ( one, two ) =
     PageContent
         { title = Nothing
+        , tabList = Nothing
         , content = [ one, two ]
         , aside = NoAside
         }
@@ -73,6 +79,7 @@ threeColumns : ( List (Html msg), List (Html msg), List (Html msg) ) -> PageCont
 threeColumns ( one, two, three ) =
     PageContent
         { title = Nothing
+        , tabList = Nothing
         , content = [ one, two, three ]
         , aside = NoAside
         }
@@ -97,6 +104,11 @@ withRightAside asideContent (PageContent cfg) =
     PageContent { cfg | aside = LeftAside asideContent }
 
 
+withTabList : TabList msg -> PageContent msg -> PageContent msg
+withTabList tabList (PageContent cfg) =
+    PageContent { cfg | tabList = Just tabList }
+
+
 
 -- MAP
 
@@ -105,6 +117,7 @@ map : (a -> msg) -> PageContent a -> PageContent msg
 map toMsg (PageContent pageContentA) =
     PageContent
         { title = Maybe.map (PageTitle.map toMsg) pageContentA.title
+        , tabList = Maybe.map (TabList.map toMsg) pageContentA.tabList
         , content = List.map (List.map (Html.map toMsg)) pageContentA.content
         , aside = mapPageAside toMsg pageContentA.aside
         }
@@ -162,12 +175,20 @@ view_ footer (PageContent p) =
                         , aside [ class "page-aside page-aside_right" ] asideItems
                         ]
 
+        tabList =
+            case p.tabList of
+                Just tl ->
+                    TabList.view tl
+
+                _ ->
+                    UI.nothing
+
         pageContent =
             case p.title of
                 Just t ->
-                    [ PageTitle.view t, inner, footer ]
+                    [ PageTitle.view t, tabList, inner, footer ]
 
                 Nothing ->
-                    [ inner, footer ]
+                    [ tabList, inner, footer ]
     in
     section [ id "page-content", class "page-content" ] pageContent
diff --git a/src/UI/PageLayout.elm b/src/UI/PageLayout.elm
@@ -7,7 +7,6 @@ import UI.Click as Click
 import UI.CopyrightYear as CopyrightYear
 import UI.PageContent as PageContent exposing (PageContent)
 import UI.Sidebar as Sidebar exposing (Sidebar)
-import UI.TabList as TabList exposing (TabList)
 
 
 type PageHero msg
@@ -52,13 +51,6 @@ type PageLayout msg
     | CenteredLayout (Layout {} msg)
     | CenteredNarrowLayout (Layout {} msg)
     | PresentationLayout (PageContent msg)
-    | TabbedLayout
-        (Layout
-            { header : List (Html msg)
-            , tabList : TabList msg
-            }
-            msg
-        )
 
 
 heroLayout : PageHero msg -> PageContent msg -> PageFooter msg -> PageLayout msg
@@ -83,12 +75,7 @@ sidebarEdgeToEdgeLayout os sidebar content footer =
         }
 
 
-sidebarLeftContentLayout :
-    OperatingSystem
-    -> Sidebar msg
-    -> PageContent msg
-    -> PageFooter msg
-    -> PageLayout msg
+sidebarLeftContentLayout : OperatingSystem -> Sidebar msg -> PageContent msg -> PageFooter msg -> PageLayout msg
 sidebarLeftContentLayout os sidebar content footer =
     SidebarLeftContentLayout
         { sidebar = sidebar
@@ -123,22 +110,6 @@ presentationLayout content =
     PresentationLayout content
 
 
-tabbedLayout :
-    List (Html msg)
-    -> TabList msg
-    -> PageContent msg
-    -> PageFooter msg
-    -> PageLayout msg
-tabbedLayout header tabList content footer =
-    TabbedLayout
-        { header = header
-        , tabList = tabList
-        , content = content
-        , footer = footer
-        , backgroundColor = SubduedBackground
-        }
-
-
 
 -- TRANSFORM
 
@@ -168,9 +139,6 @@ withContent content pl =
         PresentationLayout _ ->
             PresentationLayout content
 
-        TabbedLayout l ->
-            TabbedLayout (withContent_ l)
-
 
 withBackgroundColor : BackgroundColor -> PageLayout msg -> PageLayout msg
 withBackgroundColor bg pl =
@@ -193,9 +161,6 @@ withBackgroundColor bg pl =
         PresentationLayout _ ->
             pl
 
-        TabbedLayout _ ->
-            pl
-
 
 withSubduedBackground : PageLayout msg -> PageLayout msg
 withSubduedBackground pl =
@@ -267,15 +232,6 @@ map toMsg pageLayout =
         PresentationLayout content ->
             PresentationLayout (PageContent.map toMsg content)
 
-        TabbedLayout layout ->
-            TabbedLayout
-                { header = List.map (Html.map toMsg) layout.header
-                , tabList = TabList.map toMsg layout.tabList
-                , content = PageContent.map toMsg layout.content
-                , footer = mapPageFooter toMsg layout.footer
-                , backgroundColor = layout.backgroundColor
-                }
-
 
 mapPageFooter : (a -> msg) -> PageFooter a -> PageFooter msg
 mapPageFooter toMsg (PageFooter items) =
@@ -376,10 +332,3 @@ view page =
             div [ class "page presentation-layout" ]
                 [ PageContent.view_ (viewPageFooter (PageFooter [])) content
                 ]
-
-        TabbedLayout layout_ ->
-            div [ class "page tabbed-layout" ]
-                [ header [] layout_.header
-                , TabList.view layout_.tabList
-                , div [] [ PageContent.view_ (viewPageFooter (PageFooter [])) layout_.content ]
-                ]