PageTitle: left and right title text

unisonweb · Oct 27, 2023 · 3ecfd8d · 3ecfd8d
1 parent 2283a80
commit 3ecfd8d
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 21 deletions.
diff --git a/src/UI/PageTitle.elm b/src/UI/PageTitle.elm
@@ -1,14 +1,18 @@
 module UI.PageTitle exposing (..)
 
-import Html exposing (Html, div, h1, header, p, text)
+import Html exposing (Html, div, h1, header, p, span, text)
 import Html.Attributes exposing (class)
+import Maybe.Extra as MaybeE
+import UI
 import UI.Icon as Icon exposing (Icon)
 
 
 type Title msg
     = Title
         { icon : Maybe (Icon msg)
-        , title : Html msg
+        , leftTitleText : Maybe String
+        , titleText : String
+        , rightTitleText : Maybe String
         , description : Maybe (Html msg)
         }
     | CustomTitle (List (Html msg))
@@ -25,19 +29,13 @@ type alias PageTitle msg =
 
 
 title : String -> PageTitle msg
-title title__ =
-    { title =
-        Title { icon = Nothing, title = text title__, description = Nothing }
-    , rightSide = []
-    }
-
-
-title_ : Html msg -> PageTitle msg
-title_ title__ =
+title titleText =
     { title =
         Title
             { icon = Nothing
-            , title = title__
+            , leftTitleText = Nothing
+            , titleText = titleText
+            , rightTitleText = Nothing
             , description = Nothing
             }
     , rightSide = []
@@ -71,6 +69,34 @@ withIcon icon pageTitle_ =
             pageTitle_
 
 
+withLeftTitleText : String -> PageTitle msg -> PageTitle msg
+withLeftTitleText leftTitleText pageTitle_ =
+    case pageTitle_.title of
+        Title t ->
+            let
+                newTitle =
+                    Title { t | leftTitleText = Just leftTitleText }
+            in
+            { pageTitle_ | title = newTitle }
+
+        _ ->
+            pageTitle_
+
+
+withRightTitleText : String -> PageTitle msg -> PageTitle msg
+withRightTitleText rightTitleText pageTitle_ =
+    case pageTitle_.title of
+        Title t ->
+            let
+                newTitle =
+                    Title { t | rightTitleText = Just rightTitleText }
+            in
+            { pageTitle_ | title = newTitle }
+
+        _ ->
+            pageTitle_
+
+
 withDescription : String -> PageTitle msg -> PageTitle msg
 withDescription description pageTitle_ =
     withDescription_ (text description) pageTitle_
@@ -100,12 +126,14 @@ withRightSide rightSide pageTitle_ =
 
 
 mapTitle : (a -> b) -> Title a -> Title b
-mapTitle f title__ =
-    case title__ of
+mapTitle f title_ =
+    case title_ of
         Title t ->
             Title
                 { icon = Maybe.map (Icon.map f) t.icon
-                , title = Html.map f t.title
+                , leftTitleText = t.leftTitleText
+                , titleText = t.titleText
+                , rightTitleText = t.rightTitleText
                 , description = Maybe.map (Html.map f) t.description
                 }
 
@@ -125,36 +153,43 @@ map f pageTitle_ =
 
 
 viewTitle : Title msg -> Html msg
-viewTitle title__ =
-    case title__ of
+viewTitle title_ =
+    case title_ of
         Title t ->
             let
+                h1_ =
+                    h1 []
+                        [ MaybeE.unwrap UI.nothing (\l -> span [ class "left-title-text" ] [ text l ]) t.leftTitleText
+                        , text t.titleText
+                        , MaybeE.unwrap UI.nothing (\r -> span [ class "right-title-text" ] [ text r ]) t.rightTitleText
+                        ]
+
                 viewTitle_ attrs content =
                     div (class "page-title_title page-title_default-title" :: attrs) content
             in
             case ( t.icon, t.description ) of
                 ( Nothing, Nothing ) ->
-                    viewTitle_ [] [ h1 [] [ t.title ] ]
+                    viewTitle_ [] [ h1_ ]
 
                 ( Nothing, Just d ) ->
                     viewTitle_ []
                         [ div [ class "text" ]
-                            [ h1 [] [ t.title ]
+                            [ h1_
                             , p [ class "description" ] [ d ]
                             ]
                         ]
 
                 ( Just i, Nothing ) ->
                     viewTitle_ [ class "has_icon" ]
                         [ div [ class "icon-badge" ] [ Icon.view i ]
-                        , h1 [] [ t.title ]
+                        , h1_
                         ]
 
                 ( Just i, Just d ) ->
                     viewTitle_ [ class "has_icon" ]
                         [ div [ class "icon-badge" ] [ Icon.view i ]
                         , div [ class "text" ]
-                            [ h1 [] [ t.title ]
+                            [ h1_
                             , p [ class "description" ] [ d ]
                             ]
                         ]

diff --git a/src/css/ui/page-layout.css b/src/css/ui/page-layout.css
@@ -131,6 +131,13 @@
   color: var(--u-color_text);
 }
 
+.page-content .page-title .page-title_default-title h1 {
+  & .left-title-text,
+  & .right-title-text {
+    color: var(--u-color_text_subdued);
+  }
+}
+
 .page-content .page-title .page-title_default-title .description {
   height: 1.5rem;
   align-items: center;