Some improvements in the message preview (contact photo, summary text, fixed alerts)

skins/elastic/styles/styles.less

@@ -222,7 +222,7 @@ a:hover {
 @import "widgets/searchbar";
 @import "widgets/lists";
 @import "widgets/forms";
-@import "widgets/messagebody";
+@import "widgets/mail";
 @import "widgets/googiespell";
 
 
@@ -284,10 +284,12 @@ a:hover {
         max-height: 135px;
     }
 }
+
 #contactphoto {
  /* TODO */
     float: left;
     margin-right: .5em;
 }
+
 #contacthead { /* TODO */ }
 .contactfieldgroup { /* TODO */ }

skins/elastic/styles/widgets/mail.less

@@ -12,6 +12,55 @@
 /*** Mail message body elements ***/
 
 
+@mail-header-photo-height:      4rem;
+
+
+.content #message-header {
+    margin-bottom: 1rem;
+
+    .subject {
+        font-size: 1.5rem;
+        font-weight: bold;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .short-header {
+        display: flex;
+
+        img.contactphoto {
+            margin: 0 1rem 0 0;
+            border-radius: 50%;
+            width: @mail-header-photo-height;
+            height: @mail-header-photo-height;
+        }
+
+        div {
+            line-height: @mail-header-photo-height;
+
+            & > span {
+                line-height: normal;
+                display: inline-block;
+                vertical-align: middle;
+            }
+        }
+    }
+}
+
+
+#message-objects {
+    i.icon {
+        font-size: 2em !important;
+    }
+
+    .ui {
+        float: none;
+        border-radius: 0;
+    }
+}
+
+
 #messagebody {
     /* TODO */
 

skins/elastic/styles/widgets/messages.less

@@ -78,11 +78,3 @@
         content: @fa-var-exclamation-circle;
     }
 }
-
-#message-objects {
-    margin: 0 .2em;
-
-    i.icon {
-        font-size: 2em !important;
-    }
-}

skins/elastic/templates/message.html

@@ -16,18 +16,20 @@
 	<roundcube:endif />
 	<div class="content frame-content" role="main">
 		<div id="message-header">
-			<span class="moreheaderstoggle"></span>
 			<h2 class="subject">
 				<span onmouseover="rcube_webmail.long_subject_title(this)">
 					<span class="voice"><roundcube:label name="subject" />: </span>
 					<roundcube:object name="messageHeaders" valueOf="subject" />
 				</span>
 			</h2>
-			<div class="message-headers">
+			<div class="short-header">
-				<roundcube:object name="messageHeaders" class="headers-table" addicon="virtual" exclude="subject" max="20" />
+				<roundcube:object name="contactphoto" class="contactphoto" placeholder="/images/contactpic.png" />
+				<roundcube:object name="messageSummary" addicon="virtual" />
 			</div>
+<!--
 			<roundcube:object name="messageFullHeaders" id="full-headers" />
-			<div id="contactphoto"><roundcube:object name="contactphoto" /></div>
+			<span class="moreheaderstoggle"></span>
+-->
 		</div>
 		<div id="message-content">
 			<div class="leftcol" role="region" aria-labelledby="aria-label-messageattachments">