private messages: some work for the standard messages overview

css/style.css

@@ -1701,6 +1701,12 @@ ul.viewcontact_wrapper > li {
 }
 
 /* private mail */
+.message-content-wrapper > li {
+/* we need this overwriting because we have no template file
+   for the general mail page /message
+*/
+    list-style-type: none;
+}
 .mail-thread {
     max-height: calc(100vh - 200px);
 }
@@ -1710,6 +1716,7 @@ ul.viewcontact_wrapper > li {
     max-height: auto;
     /*height: 500px;*/
     margin-bottom: 0px;
+    padding: 0 15px;
 }
 #mail-conversation.can-reply {
 /*    border-bottom-left-radius: 0px;
@@ -1734,9 +1741,38 @@ ul.viewcontact_wrapper > li {
     max-height: 120px;
 }
 .mail-conv-wrapper {
-    padding: 15px;
-    border-bottom: 1px solid rgba(238, 238, 238, 0.95)
+    padding: 15px 0;
+    border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
 }
+#message-sidebar {
+    height: calc(100vh - 150px);
+}
+#message-preview {
+    /*padding: 0 10px;*/
+    height: calc(100% - 20px);
+}
+#message-preview ul {
+    margin: 0px;
+}
+#message-preview .media-list li {
+    padding: 0px 10px;
+    border: none;
+}
+#message-preview .media-list li:hover {
+    border-left: none !important;
+}
+#message-preview .media-list li a {
+    color: $link_color;
+}
+.mail-list-outside-wrapper {
+    padding: 5px 0;
+    border-bottom: 1px solid rgba(238, 238, 238, $contentbg_transp);
+}
+.mail-list-outside-wrapper .contact-photo-wrapper {
+    height: 48px;
+    width: 48px;
+}
+
 #prvmail-end {
     clear:both;
 }

templates/mail_conv.tpl

@@ -1,6 +1,6 @@
 <div id="mail_conv-{{$mail.id}}" class="mail-conv-wrapper message-{{$mail.id}}">
 	<div class="media">
-		<div class="pull-left contact-photo-wrapper">
+		<div class="media-left contact-photo-wrapper">
 			<a href="{{$mail.from_url}}">
 				<img class="media-object" src="{{$mail.from_photo}}" alt="{{$mail.from_name}}" />
 			</a>

templates/mail_list.tpl

@@ -1,20 +1,18 @@
+
+<li>
 	<div class="mail-list-outside-wrapper">
 
-
-		
 		<div class="media">
-		<div class="media-left">
+			<div class="media-left contact-photo-wrapper">
 				<a href="{{$from_url}}">
-				<img class="media-object" src="{{$from_photo}}" alt="{{$from_name}}" style="min-width:80px; min-height:80px; width:80px; height:80px; max-width:80px; max-height:80px;" />
+					<img class="media-object" src="{{$from_photo}}" alt="{{$from_name}}" />
 				</a>
 			</div>
 			<div class="media-body">
 				<div class="text-muted time ago pull-right" title="{{$date}}">{{$ago}}</div>
 
-			<h5 class="media-heading">{{$from_name}}</h5>
-			<a href="message/{{$id}}">
-				<h4>{{$subject}}</h4>
-			</a>
+				<h4 class="media-heading">{{$from_name}}</h4>
+				<div class="mail-list-subject"><a href="message/{{$id}}">{{$subject}}</a></div>
 				<a href="message/dropconv/{{$id}}" onclick="return confirmDelete();"  title="{{$delete}}" class="close pull-right" onmouseover="imgbright(this);" onmouseout="imgdull(this);" >&times;</a>
 				<p class="text-muted">{{$count}}</p>
 			</div>
@@ -28,3 +26,4 @@
 
 	<div class="mail-list-outside-wrapper-end"></div>
 
+</li>

templates/message_side.tpl

@@ -0,0 +1,12 @@
+<div id="message-sidebar" class="widget">
+	<div id="message-new"><a href="{{$new.url}}" accesskey="m" class="{{if $new.sel}}newmessage-selected{{/if}}">{{$new.label}}</a> </div>
+
+	{{if $tabs}}
+	<div id="message-preview" class="panel panel-default">
+		<ul class="media-list">
+		{{$tabs}}
+		</ul>
+	</div>
+	{{/if}}
+
+</div>

templates/msg-header.tpl

@@ -58,6 +58,7 @@ else
 		//var objDiv = document.getElementById("mail-conversation");
 		//objDiv.scrollTop = objDiv.scrollHeight;
 		$('#mail-conversation').perfectScrollbar();
+		$('#message-preview').perfectScrollbar();
 		$('#mail-conversation').scrollTop($('#mail-conversation')[0].scrollHeight);