From f01c6bce4b35ca4c91060cffbee6c9ba210b6a40 Mon Sep 17 00:00:00 2001 From: the-djmaze <> Date: Mon, 6 Feb 2023 09:49:49 +0100 Subject: [PATCH] Fix some MailMessageView styling --- dev/Styles/@Main.less | 1 - dev/Styles/User/Layout.less | 2 +- dev/Styles/User/MessageView.less | 76 +-- dev/Styles/_Values.less | 4 +- .../templates/Views/User/MailMessageView.html | 556 +++++++++--------- 5 files changed, 301 insertions(+), 338 deletions(-) diff --git a/dev/Styles/@Main.less b/dev/Styles/@Main.less index 899ec0892..26eed8cea 100644 --- a/dev/Styles/@Main.less +++ b/dev/Styles/@Main.less @@ -78,7 +78,6 @@ position: initial; } .messageView, - .messageView .b-content, .messageView .b-message, #messageItem, #messageItem .b-text-part { diff --git a/dev/Styles/User/Layout.less b/dev/Styles/User/Layout.less index cb1f6d162..0fc6183e1 100644 --- a/dev/Styles/User/Layout.less +++ b/dev/Styles/User/Layout.less @@ -97,7 +97,7 @@ html:not(.rl-left-panel-disabled) #rl-left > .resizer, #V-MailMessageView { position: absolute; - top: 50px; + top: 0; bottom: 13px; right: 0; left: 0; diff --git a/dev/Styles/User/MessageView.less b/dev/Styles/User/MessageView.less index 2ce4c0854..b7e27b2c7 100644 --- a/dev/Styles/User/MessageView.less +++ b/dev/Styles/User/MessageView.less @@ -5,25 +5,26 @@ html.rl-no-preview-pane { } } -#V-MailMessageView.focused .messageView { - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); +#V-MailMessageView .top-toolbar { + color: #fff; + padding: 10px 0; +} +html.rl-no-preview-pane #V-MailMessageView .top-toolbar { + padding-left: 1px; +} +html:not(.rl-mobile):not(.rl-no-preview-pane) #V-MailMessageView .top-toolbar { + visibility: hidden; +} +html.rl-bottom-preview-pane #V-MailMessageView .top-toolbar { + display: none; } .messageView { background-color: #fff; border: 1px solid var(--border-color, #aaa); border-radius: var(--border-radius, 5px); - height: 100%; - - .toolbar { - position: absolute; - top: -50px; - right: 0; - left: 0; - height: 30px; - padding: 10px 0; - color: #fff; - } + height: calc(100% - 50px); + position: relative; .priorityHigh .subject::before { content: '! '; /*❗*/ @@ -31,10 +32,6 @@ html.rl-no-preview-pane { font-weight: bolder; } - .b-content { - height: 100%; - } - .b-message { display: flex; flex-direction: column; @@ -141,10 +138,6 @@ html.rl-no-preview-pane { opacity: 0.5; } - .messageButtons { - margin-top: 5px; - } - .informationShort { margin: 0 56px 0 0; overflow: hidden; @@ -240,6 +233,11 @@ html.rl-no-preview-pane { } } +#V-MailMessageView.focused .messageView { + border-color: #9d9d9d; + box-shadow: var(--smMainShadow); +} + #messageItem { color: #000; @@ -443,31 +441,12 @@ html.rl-no-preview-pane { } html.rl-no-preview-pane .messageView { - - .toolbar { - padding-left: 1px; - } - - .b-content { - top: 50px; - left: 0; - bottom: @rlBottomMargin; - right: @rlBottomMargin; - border: 1px solid var(--border-color, #aaa); - box-shadow: var(--smMainShadow); - } -} - -html:not(.rl-mobile):not(.rl-no-preview-pane) .messageView { - .top-toolbar { - display: none; - } + border: 1px solid var(--border-color, #aaa); + box-shadow: var(--smMainShadow); } html.rl-bottom-preview-pane .messageView { - .b-content { - bottom: @rlBottomMargin; - } + height: 100%; } html.rl-fullscreen { @@ -476,20 +455,11 @@ html.rl-fullscreen { #V-MailMessageList, #V-SettingsPane, #V-SystemDropDown, - #V-MailMessageView .messageView .toolbar { + #V-MailMessageView .top-toolbar { display: none !important; } .messageView { border: 0; } - - .messageView .b-content { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - border: 0; - } } diff --git a/dev/Styles/_Values.less b/dev/Styles/_Values.less index 11f7ec9f9..f1af0a24d 100644 --- a/dev/Styles/_Values.less +++ b/dev/Styles/_Values.less @@ -1,14 +1,12 @@ @rlLeftWidth: 200px; @rlLowMargin: 8px; -@rlBottomMargin: 5px; :root { - --rlLeftWidth: 200px; --smDialogShrink: 20px; --smMainShadow: 0 2px 8px rgba(0, 0, 0, 0.2); } .rl-mobile { /* For Firefox */ - --smDialogShrink: 50px; + --smDialogShrink: 25px; } diff --git a/snappymail/v/0.0.0/app/templates/Views/User/MailMessageView.html b/snappymail/v/0.0.0/app/templates/Views/User/MailMessageView.html index 0a1b44d14..82642abb7 100644 --- a/snappymail/v/0.0.0/app/templates/Views/User/MailMessageView.html +++ b/snappymail/v/0.0.0/app/templates/Views/User/MailMessageView.html @@ -1,305 +1,301 @@ -
-
-
-
- ✖ -
-
- 🖉 -
-
- 🗄 - ⚠ - - - - 🗑 -
-
- ❮ - ❯ -
-
+
+
+ ✖
-
-
-
-
-
+
+ 🖉 +
+
+ 🗄 + ⚠ + + + + 🗑 +
+
+ ❮ + ❯ +
+
+
+
+
+
+
-
+
+
+ +
+
+ + +
+
+ 🖉 +
+ + ← + ↞ + +
+ ☰ + +
+
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
    +
    +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + + + + +
    • +
  • + +
    • +
  • + +
    • + +
    +
    +
  • + +
    • +
  • + + + + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • + +
  • + +
    • +
    +     +
    +
    -
    +
    +
    + ℹ + + + × +
    +
    + + +
    +
    + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    + +
    + +   + () +
    +
    - - -
    -
    - 🖉 -
    - - ← - ↞ - +
    +
    +
    + +
    +
    + : + +
    +
    + : + +
    +
    +
    + : + +
    +
    +
    + +
    + : +
    - ☰ - -
    + 🏷 + +
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
    -
    -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - - - - -
    • -
  • - -
    • -
  • - -
    • - -
    -
    -
  • - -
    • -
  • - - - - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • - -
  • - +
    • +
    +
    +
    -
    -
    - ℹ - - - × +
    + +
    -
    - - -
    -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    - -
    - -   - () -
    -
    -
    -
    -
    -
    - -
    -
    - : - -
    -
    - : - -
    -
    -
    - : - -
    -
    -
    - -
    - : - -
    - 🏷 - -
    -
  • - -
    • -
    -     -
    -
    - -
    -
    + + + +
      +
    • + + +
      • +
    + + ⚙ + -
    - - +
    + + + ✖ + + + +
    + +
    -
    -
    -
    -
    - - - - - -
      -
    • - - -
      • -
    - - ⚙ -
    - -
    - - - ✖ - - - -
    - -
    -
    - -
    - - -
    -
    - - -
    - -
    +
    + +
    +
    + + +
    + +
    -
    +