Merge branch 'feature/mobile-msg' into develop

ui/src/Page/Mailbox.elm

@@ -136,6 +136,7 @@ type Msg
     = ListLoaded (Result HttpUtil.Error (List MessageHeader))
     | ClickMessage MessageID
     | OpenMessage MessageID
+    | CloseMessage
     | MessageLoaded (Result HttpUtil.Error Message)
     | MessageBody Body
     | OpenedTime Posix
@@ -166,6 +167,14 @@ update msg model =
         OpenMessage id ->
             updateOpenMessage model.session model id
 
+        CloseMessage ->
+            case model.state of
+                ShowingList list _ ->
+                    ( { model | state = ShowingList list NoMessage }, Cmd.none )
+
+                _ ->
+                    ( model, Cmd.none )
+
         DeleteMessage message ->
             updateDeleteMessage model.session model message
 
@@ -466,10 +475,19 @@ updateOpenMessage session model id =
 
 view : Model -> { title : String, modal : Maybe (Html Msg), content : List (Html Msg) }
 view model =
+    let
+        mode =
+            case model.state of
+                ShowingList _ (ShowingMessage _) ->
+                    "message-active"
+
+                _ ->
+                    "list-active"
+    in
     { title = model.mailboxName ++ " - Inbucket"
     , modal = viewModal model.promptPurge
     , content =
-        [ div [ class "mailbox" ]
+        [ div [ class ("mailbox " ++ mode) ]
             [ aside [ class "message-list-controls" ]
                 [ input
                     [ type_ "search"
@@ -574,7 +592,9 @@ viewMessage zone message bodyMode =
     in
     div []
         [ div [ class "button-bar" ]
-            [ button [ class "danger", onClick (DeleteMessage message) ] [ text "Delete" ]
+            [ button [ class "message-close light", onClick CloseMessage ]
+                [ i [ class "fas fa-arrow-left" ] [] ]
+            , button [ class "danger", onClick (DeleteMessage message) ] [ text "Delete" ]
             , a
                 [ href sourceUrl, target "_blank" ]
                 [ button [] [ text "Source" ] ]

ui/src/index.js

@@ -1,4 +1,5 @@
 import './main.css'
+import './mailbox.css'
 import './navbar.css'
 import '@fortawesome/fontawesome-free/css/all.css'
 import { Elm } from './Main.elm'

ui/src/mailbox.css

@@ -0,0 +1,189 @@
+/** MAILBOX */
+
+.mailbox {
+  display: grid;
+  grid:
+    "ctrl" auto
+    "list" auto
+    "mesg" auto / 1fr;
+  justify-self: center;
+}
+
+.message-list-controls {
+  display: none;
+  grid-area: ctrl;
+}
+
+.list-active .message-list-controls {
+  display: flex;
+}
+
+.message-list-controls input[type="search"] {
+  flex: 1 1 auto;
+  padding: 2px 4px;
+}
+
+.message-list {
+  display: none;
+  grid-area: list;
+}
+
+.list-active .message-list {
+  display: block;
+}
+
+.message {
+  display: none;
+  grid-area: mesg;
+  min-height: 0;
+  min-width: 0;
+}
+
+.message-active .message {
+  display: block;
+}
+
+.message-close {
+  margin-right: auto !important;
+}
+
+@media screen and (min-width: 1000px) {
+  .mailbox {
+    grid-gap: 1px 20px;
+    grid:
+      "ctrl mesg" auto
+      "list mesg" 1fr / minmax(200px, 300px) minmax(650px, 1000px);
+    height: 100%;
+  }
+
+  .message-list {
+    display: block;
+    overflow-y: scroll;
+  }
+
+  .message-list-controls {
+    display: flex;
+  }
+
+  .message {
+    display: block;
+    overflow: auto;
+  }
+
+  .message-close {
+    display: none !important;
+  }
+}
+
+.message-list-entry {
+  border-color: var(--border-color);
+  border-width: 1px;
+  border-style: none solid solid solid;
+  cursor: pointer;
+  padding: 5px 8px;
+}
+
+.message-list-entry.selected {
+  background-color: var(--selected-color);
+}
+
+.message-list-entry:first-child {
+  border-style: solid;
+}
+
+.message-list-entry .subject {
+  color: var(--high-color);
+}
+
+.message-list-entry.unseen .subject {
+  font-weight: bold;
+}
+
+.message-list-entry .from,
+.message-list-entry .date {
+  color: var(--low-color);
+  font-size: 85%;
+}
+
+.message-header {
+  border: 1px solid var(--border-color);
+  border-radius: 4px;
+  box-shadow: 0 1px 2px rgba(0,0,0,.05);
+  padding: 10px;
+  margin: 10px 0;
+}
+
+.message-header dt {
+  color: var(--low-color);
+  font-weight: bold;
+}
+
+.message-header dd {
+  color: var(--low-color);
+  padding-left: 10px;
+}
+
+@media screen and (min-width: 1000px) {
+  .message-header {
+    display: grid;
+    grid-template: auto / 5em 1fr;
+  }
+
+  .message-header dt {
+    grid-column: 1;
+    text-align: right;
+  }
+
+  .message-header dd {
+    grid-column: 2;
+  }
+}
+
+.message-body {
+  padding: 5px;
+}
+
+.message-warn li {
+  margin-left: 20px;
+  padding-left: 0px;
+}
+
+.message-warn-severe {
+  font-weight: 700;
+}
+
+nav.tab-bar {
+  border-bottom: 1px solid var(--border-color);
+  display: flex;
+  margin: 20px 0 10px 0;
+}
+
+nav.tab-bar a {
+  border-radius: 4px 4px 0 0;
+  display: block;
+  margin-bottom: -1px;
+  margin-right: 2px;
+  padding: 8px 15px;
+  text-decoration: none;
+}
+
+nav.tab-bar a.active {
+  color: var(--low-color);
+  border-color: var(--border-color) var(--border-color) var(--bg-color) var(--border-color);
+  border-style: solid;
+  border-width: 1px;
+}
+
+nav.tab-bar a:focus,
+nav.tab-bar a:hover {
+  background-color: var(--selected-color);
+}
+
+nav.tab-bar a.active:focus,
+nav.tab-bar a.active:hover {
+  background-color: var(--bg-color);
+}
+
+.attachments {
+  width: 100%;
+}

ui/src/main.css

@@ -213,22 +213,30 @@ h3 {
 
 /** BUTTONS */
 
+.button-bar {
+  display: flex;
+}
+
 .button-bar button {
   background-color: #337ab7;
   background-image: linear-gradient(to bottom, #337ab7 0, #265a88 100%);
   border: none;
   border-radius: 4px;
   color: #fff;
+  display: inline-block;
   font-size: 12px;
   font-style: normal;
   font-weight: 400;
   height: 30px;
-  margin: 0 4px 0 0;
+  margin: 0;
-  padding: 5px;
+  padding: 5px 10px;
   text-align: center;
   text-decoration: none;
   text-shadow: 0 -1px 0 rgba(0,0,0,0.2);
-  width: 8em;
+}
+
+.button-bar *:not(:last-child) {
+  margin-right: 4px;
 }
 
 .button-bar button.danger {
@@ -236,167 +244,16 @@ h3 {
   background-image: linear-gradient(to bottom, #d9534f 0, #c12e2a 100%);
 }
 
-/** MAILBOX */
+.button-bar button.light {
-
+  background-color: #eee;
-.mailbox {
+  background-image: linear-gradient(to bottom, #f0f0f0 0, #e0e0e0 100%);
-  display: grid;
+  color: #000;
-  grid-gap: 1px 20px;
-  grid:
-    "ctrl mesg" auto
-    "list mesg" 1fr / minmax(200px, 300px) minmax(650px, 1000px);
-  height: 100%;
 }
 
-.message-list-controls {
+@media screen and (min-width: 1000px) {
-  display: flex;
+  .button-bar button {
-  grid-area: ctrl;
+    width: 8em;
-}
-
-.message-list-controls input[type="search"] {
-  flex: 1 1 auto;
-  padding: 2px 4px;
-}
-
-.message-list {
-  grid-area: list;
-  overflow-y: scroll;
-}
-
-@media (max-width: 999px) {
-  .mailbox {
-    grid:
-      "ctrl" auto
-      "list" auto
-      "mesg" auto / 1fr;
-    justify-self: center;
-    width: 100%;
   }
-
-  .message-list {
-    overflow-y: visible;
-  }
-}
-
-.message-list-entry {
-  border-color: var(--border-color);
-  border-width: 1px;
-  border-style: none solid solid solid;
-  cursor: pointer;
-  padding: 5px 8px;
-}
-
-.message-list-entry.selected {
-  background-color: var(--selected-color);
-}
-
-.message-list-entry:first-child {
-  border-style: solid;
-}
-
-.message-list-entry .subject {
-  color: var(--high-color);
-}
-
-.message-list-entry.unseen .subject {
-  font-weight: bold;
-}
-
-.message-list-entry .from,
-.message-list-entry .date {
-  color: var(--low-color);
-  font-size: 85%;
-}
-
-
-/** MESSAGE */
-
-.message {
-  grid-area: mesg;
-  overflow: auto;
-}
-
-.message-header {
-  border: 1px solid var(--border-color);
-  border-radius: 4px;
-  box-shadow: 0 1px 2px rgba(0,0,0,.05);
-  padding: 10px;
-  margin: 10px 0;
-}
-
-.message-header dt {
-  color: var(--low-color);
-  font-weight: bold;
-}
-
-.message-header dd {
-  color: var(--low-color);
-  padding-left: 10px;
-}
-
-@media (min-width: 1000px) {
-  .message-header {
-    display: grid;
-    grid-template: auto / 5em 1fr;
-  }
-
-  .message-header dt {
-    grid-column: 1;
-    text-align: right;
-  }
-
-  .message-header dd {
-    grid-column: 2;
-  }
-}
-
-.message-body {
-  padding: 5px;
-}
-
-.message-warn li {
-  margin-left: 20px;
-  padding-left: 0px;
-}
-
-.message-warn-severe {
-  font-weight: 700;
-}
-
-
-nav.tab-bar {
-  border-bottom: 1px solid var(--border-color);
-  display: flex;
-  margin: 20px 0 10px 0;
-}
-
-nav.tab-bar a {
-  border-radius: 4px 4px 0 0;
-  display: block;
-  margin-bottom: -1px;
-  margin-right: 2px;
-  padding: 8px 15px;
-  text-decoration: none;
-}
-
-nav.tab-bar a.active {
-  color: var(--low-color);
-  border-color: var(--border-color) var(--border-color) var(--bg-color) var(--border-color);
-  border-style: solid;
-  border-width: 1px;
-}
-
-nav.tab-bar a:focus,
-nav.tab-bar a:hover {
-  background-color: var(--selected-color);
-}
-
-nav.tab-bar a.active:focus,
-nav.tab-bar a.active:hover {
-  background-color: var(--bg-color);
-}
-
-.attachments {
-  width: 100%;
 }
 
 /** STATUS */

ui/src/navbar.css

@@ -1,10 +1,6 @@
 /** NAV BAR */
 
 :root {
-  --bg-color: #fff;
-  --primary-color: #333;
-  --border-color: #ddd;
-  --selected-color: #eee;
   --navbar-color: #9d9d9d;
   --navbar-bg: #222;
   --navbar-image: linear-gradient(to bottom, #3c3c3c 0, #222 100%);