Elastic: Small improvements in message headers layout

program/localization/en_US/labels.inc

@@ -334,8 +334,9 @@ $labels['alwaysshow'] = 'Always show images from $sender';
 $labels['alwaysallow'] = 'Always allow from $sender';
 $labels['isdraft'] = 'This is a draft message.';
 $labels['andnmore'] = '$nr more...';
+$labels['details'] = 'Details';
 $labels['headers'] = 'Headers';
-$labels['envelope'] = 'Envelope';
+$labels['allheaders'] = 'All headers...';
 $labels['togglemoreheaders'] = 'Show more message headers';
 $labels['togglefullheaders'] = 'Toggle raw message headers';
 

skins/elastic/styles/widgets/mail.less

@@ -19,10 +19,30 @@
     margin-bottom: 1rem;
 
     .subject {
-        .overflow-ellipsis;
+        display: flex;
         font-size: 1.5rem;
         font-weight: bold;
         white-space: nowrap;
+
+        a.extwin {
+            margin-left: .25rem;
+
+            &:before {
+                &:extend(.font-icon-class);
+                font-size: 75%;
+                line-height: 1.5;
+                margin: 0;
+                content: @fa-var-external-link-square-alt;
+            }
+        }
+
+        & > span {
+            .overflow-ellipsis;
+        }
+
+        span.inner {
+            display: none;
+        }
     }
 
     .short-header {
@@ -56,25 +76,16 @@
                 margin-right: .5rem;
                 text-decoration: none;
                 white-space: nowrap;
-                line-height: 1.5;
                 display: inline-block;
 
                 &:before {
                     &:extend(.font-icon-class);
-                    display: inline-block;
-                    float: none;
-                }
-
-                &.extwin:before {
-                    content: @fa-var-external-link-square-alt;
-                }
-
-                &.headers:before {
-                    content: @fa-var-wrench;
+                    height: 1.5rem;
+                    line-height: 1.3;
                 }
 
                 &.envelope:before {
-                    .font-icon-regular(@fa-var-envelope);
+                    content: @fa-var-envelope;
                 }
 
                 &.html:before {
@@ -96,6 +107,11 @@
             padding: .25rem 0 !important;
         }
     }
+
+    a.extwin,
+    a.headers {
+        text-decoration: none;
+    }
 }
 
 #message-content {

skins/elastic/templates/message.html

@@ -21,6 +21,10 @@
 					<span class="voice"><roundcube:label name="subject" />: </span>
 					<roundcube:object name="messageHeaders" valueOf="subject" />
 				</span>
+				<roundcube:if condition="!env:message_context && !env:extwin">
+					<roundcube:button command="extwin" type="link" class="extwin" innerClass="inner"
+						label="openinextwin" data-hidden="small" />
+				<roundcube:endif />
 			</h2>
 			<div class="short-header">
 				<roundcube:object name="contactphoto" class="contactphoto" placeholder="/images/contactpic.png" />
@@ -28,15 +32,11 @@
 					<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>
 					<div class="header-links">
-						<a href="#headers" class="envelope" onclick="return UI.headers_show(this)"><roundcube:label name="envelope" /></a>
-						<a href="#all-headers" class="headers" onclick="return UI.headers_dialog()"><roundcube:label name="headers" /></a>
+						<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:message_context && !env:extwin">
-							<roundcube:button command="extwin" type="link" class="extwin" innerClass="inner"
-								label="openinextwin" data-hidden="small" />
-						<roundcube:endif />
 						<roundcube:if condition="env:optional_format=='text'" />
 							<roundcube:button command="change-format" prop="text" type="link" class="plain" innerClass="inner"
 								title="changeformattext" label="plaintoggle" />