Merge branch 'feature/layout' into develop

ui/src/Layout.elm

@@ -1,4 +1,4 @@
-module Views.Page exposing (ActivePage(..), frame)
+module Layout exposing (Page(..), frame)
 
 import Data.Session as Session exposing (Session)
 import Html exposing (..)
@@ -20,7 +20,9 @@ import Html.Events as Events
 import Route exposing (Route)
 
 
-type ActivePage
+{-| Used to highlight current page in navbar.
+-}
+type Page
     = Other
     | Mailbox
     | Monitor
@@ -37,20 +39,20 @@ type alias FrameControls msg =
     }
 
 
-frame : FrameControls msg -> Session -> ActivePage -> Maybe (Html msg) -> List (Html msg) -> Html msg
+frame : FrameControls msg -> Session -> Page -> Maybe (Html msg) -> List (Html msg) -> Html msg
-frame controls session page modal content =
+frame controls session activePage modal content =
     div [ class "app" ]
         [ header []
             [ ul [ class "navbar", attribute "role" "navigation" ]
                 [ li [ class "navbar-brand" ]
                     [ a [ Route.href Route.Home ] [ text "@ inbucket" ] ]
                 , if session.config.monitorVisible then
-                    navbarLink page Route.Monitor [ text "Monitor" ]
+                    navbarLink Monitor Route.Monitor [ text "Monitor" ] activePage
 
                   else
                     text ""
-                , navbarLink page Route.Status [ text "Status" ]
+                , navbarLink Status Route.Status [ text "Status" ] activePage
-                , navbarRecent page controls
+                , navbarRecent activePage controls
                 , li [ class "navbar-mailbox" ]
                     [ form [ Events.onSubmit (controls.viewMailbox controls.mailboxValue) ]
                         [ input
@@ -118,15 +120,15 @@ externalLink url title =
     a [ href url, target "_blank", rel "noopener" ] [ text title ]
 
 
-navbarLink : ActivePage -> Route -> List (Html a) -> Html a
+navbarLink : Page -> Route -> List (Html a) -> Page -> Html a
-navbarLink page route linkContent =
+navbarLink page route linkContent activePage =
-    li [ classList [ ( "navbar-active", isActive page route ) ] ]
+    li [ classList [ ( "navbar-active", page == activePage ) ] ]
         [ a [ Route.href route ] linkContent ]
 
 
 {-| Renders list of recent mailboxes, selecting the currently active mailbox.
 -}
-navbarRecent : ActivePage -> FrameControls msg -> Html msg
+navbarRecent : Page -> FrameControls msg -> Html msg
 navbarRecent page controls =
     let
         active =
@@ -158,16 +160,3 @@ navbarRecent page controls =
         [ span [] [ text title ]
         , div [ class "navbar-dropdown-content" ] (List.map recentLink recentMailboxes)
         ]
-
-
-isActive : ActivePage -> Route -> Bool
-isActive page route =
-    case ( page, route ) of
-        ( Monitor, Route.Monitor ) ->
-            True
-
-        ( Status, Route.Status ) ->
-            True
-
-        _ ->
-            False

ui/src/Main.elm

@@ -6,6 +6,7 @@ import Data.AppConfig as AppConfig exposing (AppConfig)
 import Data.Session as Session exposing (Session)
 import Html exposing (..)
 import Json.Decode as D exposing (Value)
+import Layout
 import Page.Home as Home
 import Page.Mailbox as Mailbox
 import Page.Monitor as Monitor
@@ -15,26 +16,25 @@ import Route exposing (Route)
 import Task
 import Time
 import Url exposing (Url)
-import Views.Page as Page exposing (ActivePage(..), frame)
 
 
 
 -- MODEL
 
 
-type Page
+type alias Model =
+    { page : PageModel
+    , mailboxName : String
+    }
+
+
+type PageModel
     = Home Home.Model
     | Mailbox Mailbox.Model
     | Monitor Monitor.Model
     | Status Status.Model
 
 
-type alias Model =
-    { page : Page
-    , mailboxName : String
-    }
-
-
 type alias InitConfig =
     { appConfig : AppConfig
     , session : Session.Persistent
@@ -105,7 +105,7 @@ sessionChange =
     Ports.onSessionChange (D.decodeValue Session.decoder)
 
 
-pageSubscriptions : Page -> Sub Msg
+pageSubscriptions : PageModel -> Sub Msg
 pageSubscriptions page =
     case page of
         Mailbox subModel ->
@@ -346,7 +346,7 @@ applyToModelSession f model =
 {-| Map page updates to Main Model and Msg types.
 -}
 updateWith :
-    (subModel -> Page)
+    (subModel -> PageModel)
     -> (subMsg -> Msg)
     -> Model
     -> ( subModel, Cmd subMsg )
@@ -385,13 +385,13 @@ view model =
             }
 
         framePage :
-            ActivePage
+            Layout.Page
             -> (msg -> Msg)
             -> { title : String, modal : Maybe (Html msg), content : List (Html msg) }
             -> Document Msg
         framePage page toMsg { title, modal, content } =
             Document title
-                [ Page.frame
+                [ Layout.frame
                     controls
                     session
                     page
@@ -401,16 +401,16 @@ view model =
     in
     case model.page of
         Home subModel ->
-            framePage Page.Other HomeMsg (Home.view subModel)
+            framePage Layout.Other HomeMsg (Home.view subModel)
 
         Mailbox subModel ->
-            framePage Page.Mailbox MailboxMsg (Mailbox.view subModel)
+            framePage Layout.Mailbox MailboxMsg (Mailbox.view subModel)
 
         Monitor subModel ->
-            framePage Page.Monitor MonitorMsg (Monitor.view subModel)
+            framePage Layout.Monitor MonitorMsg (Monitor.view subModel)
 
         Status subModel ->
-            framePage Page.Status StatusMsg (Status.view subModel)
+            framePage Layout.Status StatusMsg (Status.view subModel)