Implement 'message headers' and 'open in new window' buttons

TODO: fix 'open in new window' feature, by not disabling extwin command
in a frame that has a parent window that is not 'small'.

skins/elastic/styles/layout.less

@@ -222,10 +222,6 @@ html.iframe body {
             }
         }
     }
-
-    .hidden-small {
-        display: none !important;
-    }
 }
 
 @media screen and (max-width: @screen-width-xs) {
@@ -257,10 +253,6 @@ html.iframe body {
     body > #layout > .list > .header > .header-title {
         display: none;
     }
-
-    .hidden-large {
-        display: none !important;
-    }
 }
 
 @media screen and (min-width: (@screen-width-small + 1px)) {
@@ -269,14 +261,30 @@ html.iframe body {
     body > #layout > div > .header > a.toolbar-menu-button {
         display: none;
     }
+}
 
+@media screen and (min-width: (@screen-width-xs + 1px)) {
+    body > #layout > div > .header > a.menu-button {
+        display: none;
+    }
+}
+
+html.layout-phone,
+html.layout-small {
+    .hidden-small {
+        display: none !important;
+    }
+}
+
+html.layout-large,
+html.layout-normal {
     .hidden-big {
         display: none !important;
     }
 }
 
-@media screen and (min-width: (@screen-width-xs + 1px)) {
-    body > #layout > div > .header > a.menu-button {
-        display: none;
+html.layout-large {
+    .hidden-large {
+        display: none !important;
     }
 }

skins/elastic/styles/widgets/common.less

@@ -22,6 +22,10 @@
     display: none !important;
 }
 
+font.bold {
+    font-weight: bold;
+}
+
 #rcmdraglayer {
     min-width: 260px;
     width: auto !important;

skins/elastic/styles/widgets/jqueryui.less

@@ -134,7 +134,7 @@
                     height: @layout-header-height;
 
                     &:before {
-                        display: block;
+                        display: block !important;
                         width: auto;
                         height: 1.25em;
                         margin: 0;

skins/elastic/styles/widgets/mail.less

@@ -36,9 +36,13 @@
             height: @mail-header-photo-height;
         }
 
-        div {
-            line-height: @mail-header-photo-height;
+        div.header-content {
+            min-height: @mail-header-photo-height;
             flex: 1;
+        }
+
+        div.header-subject {
+            line-height: @mail-header-photo-height/2;
 
             & > span {
                 line-height: normal;
@@ -46,6 +50,30 @@
                 vertical-align: middle;
             }
         }
+
+        div.header-links {
+            line-height: @mail-header-photo-height/2;
+
+            a {
+                color: #aaa;
+                font-size: 90%;
+                padding-right: .25rem;
+
+                &:before {
+                    &:extend(.font-icon-class);
+                    float: none;
+                    display: inline;
+                }
+
+                &.extwin:before {
+                    content: @fa-var-external-link;
+                }
+
+                &.headers:before {
+                    content: @fa-var-wrench;
+                }
+            }
+        }
     }
 }
 

skins/elastic/templates/dialog.html

@@ -0,0 +1,7 @@
+<roundcube:include file="includes/layout.html" />
+
+<div class="content frame-content">
+	<roundcube:object name="dialogcontent" />
+</div>
+
+<roundcube:include file="includes/footer.html" />

skins/elastic/templates/message.html

@@ -24,12 +24,17 @@
 			</h2>
 			<div class="short-header">
 				<roundcube:object name="contactphoto" class="contactphoto" placeholder="/images/contactpic.png" />
-				<roundcube:object name="messageSummary" addicon="virtual" />
+				<div class="header-content">
+					<roundcube:object name="messageSummary" addicon="virtual" class="header-subject" />
+					<div class="header-links">
+						<a href="#all-headers" class="headers" onclick="return UI.headers_dialog()"><roundcube:label name="arialabelmessageheaders" /></a>
+						<roundcube:add_label name="arialabelmessageheaders" />
+						<roundcube:if condition="!env:message_context">
+							<roundcube:button command="extwin" type="link" class="extwin" innerClass="inner" title="openinextwin" label="openinextwin" data-hidden="small" />
+						<roundcube:endif />
+					</div>
+				</div>
 			</div>
-<!--
-			<roundcube:object name="messageFullHeaders" id="full-headers" />
-			<span class="moreheaderstoggle"></span>
--->
 		</div>
 		<div id="message-content">
 			<div class="leftcol" role="region" aria-labelledby="aria-label-messageattachments">

skins/elastic/ui.js

@@ -52,6 +52,7 @@ function rcube_elastic_ui()
     this.register_content_buttons = register_content_buttons;
     this.menu_hide = menu_hide;
     this.about_dialog = about_dialog;
+    this.headers_dialog = headers_dialog;
     this.spellmenu = spellmenu;
     this.searchmenu = searchmenu;
     this.headersmenu = headersmenu;
@@ -1747,6 +1748,21 @@ function rcube_elastic_ui()
         });
     };
 
+    /**
+     * Mail headers dialog
+     */
+    function headers_dialog()
+    {
+        var props = {_uid: rcmail.env.uid, _mbox: rcmail.env.mailbox},
+            dialog = $('<iframe>').attr({id: 'headersframe', src: rcmail.url('headers', props)});
+
+        rcmail.simple_dialog(dialog, rcmail.gettext('arialabelmessageheaders'), null, {
+            cancel_button: 'close',
+            width: 600,
+            height: 400
+        });
+    };
+
     /**
      * Search options menu popup
      */