elastic: message headers view changes

program/localization/en_US/labels.inc

@@ -338,6 +338,7 @@ $labels['alwaysallow'] = 'Always allow from $sender';
 $labels['isdraft'] = 'This is a draft message.';
 $labels['andnmore'] = '$nr more...';
 $labels['details'] = 'Details';
+$labels['summary'] = 'Summary';
 $labels['headers'] = 'Headers';
 $labels['allheaders'] = 'All headers...';
 $labels['togglemoreheaders'] = 'Show more message headers';

skins/elastic/styles/styles.less

@@ -187,18 +187,33 @@ body.task-error-login #layout {
         div.header-content {
             min-height: @mail-header-photo-height;
             flex: 1;
-        }
 
-        div.header-subject {
-            line-height: @mail-header-photo-height/2;
+            &:not(.details-view) {
+                .message-partheaders {
+                    display: none;
+                }
+            }
 
-            & > span {
-                line-height: 1.5;
-                display: inline-block;
-                vertical-align: middle;
+            &.details-view {
+                .header-subject {
+                    display: none;
+                }
             }
         }
 
+        div.header-envelope {
+            display: flex;
+        }
+
+        div.header-toggle > a {
+            margin: 0 !important;
+        }
+
+        div.header-subject > span {
+            display: inline-block;
+        }
+
+        div.header-toggle,
         div.header-links {
             a {
                 font-size: 90%;
@@ -213,10 +228,14 @@ body.task-error-login #layout {
                     line-height: 1.3;
                 }
 
-                &.envelope:before {
+                &.headers-details:before {
                     content: @fa-var-envelope;
                 }
 
+                &.headers-summary:before {
+                    .font-icon-regular(@fa-var-envelope);
+                }
+
                 &.html:before {
                     content: @fa-var-image;
                 }
@@ -230,11 +249,6 @@ body.task-error-login #layout {
                 }
             }
         }
-
-        .message-partheaders {
-            margin: 0 !important;
-            padding: .25rem 0 !important;
-        }
     }
 
     a.extwin,
@@ -344,10 +358,7 @@ body.task-error-login #layout {
 }
 
 .message-partheaders {
-    padding: .5rem 0;
-    margin: .5rem 0 0 0;
     font-size: 90%;
-    border-top: 1px solid @color-list-border;
     border-bottom: 1px solid @color-list-border;
     color: @color-mail-headers;
 

skins/elastic/templates/message.html

@@ -27,13 +27,19 @@
 			<div class="short-header">
 				<roundcube:object name="contactphoto" class="contactphoto" placeholder="/images/contactpic.svg" />
 				<div class="header-content">
-					<roundcube:object name="messageSummary" addicon="virtual" class="header-subject" />
-					<div class="message-partheaders hidden">
-						<roundcube:object name="messageHeaders" class="headers-table" addicon="virtual" exclude="subject" max="10" />
-						<a href="#all-headers" class="headers" onclick="return UI.headers_dialog()"><roundcube:label name="allheaders" /></a>
+					<div class="header-envelope">
+						<div class="header-toggle">
+							<roundcube:add_label name="details" />
+							<roundcube:add_label name="summary" />
+							<a href="#headers" onclick="return UI.headers_show(true)"></a>
+						</div>
+						<roundcube:object name="messageSummary" addicon="virtual" class="header-subject" />
+						<div class="message-partheaders">
+							<roundcube:object name="messageHeaders" class="headers-table" addicon="virtual" exclude="subject" max="10" />
+							<a href="#all-headers" class="headers" onclick="return UI.headers_dialog()"><roundcube:label name="allheaders" /></a>
+						</div>
 					</div>
 					<div class="header-links">
-						<a href="#headers" class="envelope" onclick="return UI.headers_show(this)"><roundcube:label name="details" /></a>
 						<roundcube:add_label name="arialabelmessageheaders" />
 						<roundcube:if condition="env:optional_format=='text'" />
 							<roundcube:button command="change-format" prop="text" type="link" class="plain" innerClass="inner"

skins/elastic/ui.js

@@ -721,6 +721,9 @@ function rcube_elastic_ui()
                 $('a').filter('[href^="mailto:"]').each(function() {
                     mailtomenu_append(this);
                 });
+
+                // restore headers view to last state
+                headers_show();
             }
         }
         else if (rcmail.task == 'settings') {
@@ -2691,10 +2694,22 @@ function rcube_elastic_ui()
     /**
      * Show/hide more mail headers (envelope)
      */
-    function headers_show(button)
+    function headers_show(toggle)
     {
-        var headers = $(button).parent().prev();
-        headers[headers.is('.hidden') ? 'removeClass' : 'addClass']('hidden');
+        var key = 'mail.show.envelope',
+            pref = get_pref(key),
+            show = toggle ? !pref : pref,
+            label = rcmail.gettext(show ? 'summary' : 'details'),
+            css = 'headers-' + (show ? 'summary' : 'details'),
+            headers = $('div.header-content');
+
+        $('div.header-toggle > a').removeClass().addClass(css).attr('title', label);
+        headers[show ? 'addClass' : 'removeClass']('details-view');
+
+        if (toggle) {
+            // save new pref
+            save_pref(key, show);
+        }
     };
 
     /**