5 files changed, 294 insertions, 101 deletions

diff --git a/skins/larry/images/listicons.png b/skins/larry/images/listicons.png
index 0132765d4..f877ae27b 100644
--- a/skins/larry/images/listicons.png
+++ b/skins/larry/images/listicons.png
diff --git a/skins/larry/mail.css b/skins/larry/mail.css
index 23c852a7a..9af0941e7 100644
--- a/skins/larry/mail.css
+++ b/skins/larry/mail.css
@@ -66,6 +66,7 @@ html.ie #mailview-top {
 	left: 0;
 	width: 100%;
 	bottom: 0;
+	outline: none;
 }
 
 #messagelistcontainer {
@@ -86,7 +87,7 @@ html>/**/body #messagelist {
 	left: 0;
 	right: 0;
 	height: 22px;
-	padding: 4px 6px;
+	padding: 5px 6px 3px;
 	border-top: 1px solid #ddd;
 	background: #ebebeb;
 	background: -moz-linear-gradient(top, #ebebeb 0%, #c6c6c6 100%);
@@ -230,20 +231,6 @@ html.mozilla #mailboxlist > li:first-child {
 	top: 0;
 }
 
-#mailpreviewtoggle {
-	display: block;
-	position: absolute;
-	top: 7px;
-	right: 4px;
-	width: 20px;
-	height: 18px;
-	background: url(images/buttons.png) -3px -458px no-repeat;
-}
-
-#mailpreviewtoggle.enabled {
-	background-position: -28px -458px;
-}
-
 #s_interval {
 	margin: 3px 8px;
 }
@@ -372,18 +359,18 @@ table.messagelist.fixedcopy {
 .messagelist tr td div.collapsed,
 .messagelist tr td div.expanded,
 .messagelist tr > .threads .listmenu,
-.messagelist tr > .attachment span.attachment,
-.messagelist tr > .attachment span.report,
-.messagelist tr > .attachment span.encrypted,
+.messagelist tr .attachment span.attachment,
+.messagelist tr .attachment span.report,
+.messagelist tr .attachment span.encrypted,
 .messagelist tr > .priority span.priority,
 .messagelist tr > .priority span.prio1,
 .messagelist tr > .priority span.prio2,
 .messagelist tr > .priority span.prio3,
 .messagelist tr > .priority span.prio4,
 .messagelist tr > .priority span.prio5,
-.messagelist tr > .flag span.flagged,
-.messagelist tr > .flag span.unflagged,
-.messagelist tr > .flag span.unflagged:hover,
+.messagelist tr .flag span.flagged,
+.messagelist tr .flag span.unflagged,
+.messagelist tr .flag span.unflagged:hover,
 .messagelist tr > .status span.status,
 .messagelist tr > .status span.msgicon,
 .messagelist tr > .status span.deleted,
@@ -403,19 +390,19 @@ table.messagelist.fixedcopy {
 	background: url(images/listicons.png) -100px 0 no-repeat;
 }
 
-.messagelist tbody tr td.attachment span.attachment {
+.messagelist tbody tr .attachment span.attachment {
 	background-position: 0 -996px;
 }
 
-.messagelist thead tr th.attachment span.attachment {
+.messagelist thead tr .attachment span.attachment {
 	background-position: -24px -996px;
 }
 
-.messagelist tbody tr td.attachment span.report {
+.messagelist tbody tr .attachment span.report {
 	background-position: -24px -1116px;
 }
 
-.messagelist tbody tr td.attachment span.encrypted {
+.messagelist tbody tr .attachment span.encrypted {
 	background-position: 0 -2272px;
 }
 
@@ -440,11 +427,11 @@ table.messagelist.fixedcopy {
 }
 
 /* thread parent message with flagged children */
-.messagelist tbody tr.flaggedroot td.flag span {
+.messagelist tbody tr.flaggedroot .flag span {
 	background-position: -23px -1076px;
 }
 
-.messagelist tbody tr td.flag span.flagged {
+.messagelist tbody tr .flag span.flagged {
 	background-position: 0 -1036px;
 }
 
@@ -456,7 +443,7 @@ table.messagelist.fixedcopy {
 	background-position: -23px -1057px;
 }
 
-.messagelist tr:hover td.flag span.unflagged {
+.messagelist tr:hover .flag span.unflagged {
 	background-position: -23px -1076px;
 }
 
@@ -1399,3 +1386,199 @@ div.message-partheaders .headers-table td.header {
 #uploadform form div {
 	margin: 4px 0;
 }
+
+
+/**** Styles for widescreen (3-column) view ****/
+
+.widescreen #mailview-top {
+	bottom: 0;
+	width: 400px;
+	height: auto;
+}
+
+.widescreen #mailview-bottom {
+	left: 412px;
+	top:0;
+	border: 1px solid #a3a3a3;
+}
+
+#messagelistheader,
+.widescreen #messagelistfooter #countcontrols,
+.widescreen .messagelist > thead,
+.widescreen .messagelist .branch,
+.widescreen table.fixedcopy {
+	display: none;
+}
+
+.widescreen #messagelistcontainer {
+	top: 34px;
+	overflow-x: hidden;
+}
+
+.widescreen #messagelistheader {
+	display: block;
+	position: absolute;
+	top: 0;
+	left: 0;
+	right: 0;
+	height: 34px;
+	padding: 6px 6px;
+	background: #f0f0f0;
+	background: -moz-linear-gradient(top, #fff 0%, #f0f0f0 100%);
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fff), color-stop(100%,#f0f0f0));
+	background: -ms-linear-gradient(top, #fff 0%, #f0f0f0 100%);
+	background: linear-gradient(to bottom, #fff 0%, #f0f0f0 100%);
+	border-radius: 4px 4px 0 0;
+	white-space: nowrap;
+	border-bottom: 1px solid #dfdfdf;
+	-webkit-box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	box-sizing: border-box;
+}
+
+.widescreen #messagelistheader .listmenu {
+	margin-right: 10px;
+	vertical-align: middle;
+	line-height: 22px;
+	width: 26px;
+	padding: 0;
+	text-indent: -5000px;
+	overflow: hidden;
+	display: inline-block;
+	background: url(images/listicons.png) 0 -2330px no-repeat;
+}
+
+.widescreen #countcontrols {
+	line-height: 24px;
+	display: inline;
+	min-width: 0;
+}
+
+.widescreen #countcontrols span {
+	padding: 0;
+}
+
+.widescreen .pagenavbuttons {
+	position: absolute;
+	top: 4px;
+	right: 6px;
+}
+
+.widescreen .pagenavbuttons a.button {
+	background: none;
+	border: 0;
+	box-shadow: none;
+	padding: 2px;
+	margin: 0;
+	height: 20px;
+}
+
+.widescreen .pagenavbuttons a.button.pressed {
+	background: inherit;
+}
+
+.widescreen a.listmenu:focus,
+.widescreen .pagenav a.button:focus {
+	border-color: #4fadd5;
+	box-shadow: 0 0 4px 2px rgba(71,135,177, 0.8);
+	outline: none;
+}
+
+.widescreen .messagelist td {
+	border-left: 0;
+	vertical-align: top;
+	padding: 3px 2px !important;
+}
+
+.widescreen .messagelist td.subject {
+	width: 99%;
+	white-space: wrap;
+	position: relative; /* for span.date positioning in Firefox */
+}
+
+.widescreen .messagelist td.threads {
+	width: 20px;
+	vertical-align: top;
+}
+
+.widescreen .messagelist td.flags {
+	width: 22px;
+}
+
+.widescreen .messagelist td.subject span {
+	line-height: 20px;
+}
+
+.widescreen .messagelist td.subject span.date {
+	right: 2px;
+	top: 3px;
+	position: absolute;
+	color: #666;
+}
+
+.widescreen .messagelist td.subject span.fromto {
+	padding-left: 22px;
+	display: block;
+	margin-right: 10em;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	color: #666;
+}
+
+.widescreen .messagelist tr.flagged td.subject span.date,
+.widescreen .messagelist tr.flagged td.subject span.fromto {
+	color: #ff5c33;
+}
+
+.widescreen .messagelist tr.deleted td.subject span.date,
+.widescreen .messagelist tr.deleted td.subject span.fromto {
+	color: #ccc;
+}
+
+.widescreen .messagelist td.subject span.subject {
+	clear: both;
+	display: block;
+	font-size: 12px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+}
+
+.widescreen .messagelist td.flags span {
+	width: 20px;
+	height: 20px;
+	display: block;
+	margin-left: 1px;
+}
+
+.widescreen .messagelist td.flags span.flag {
+	cursor: pointer;
+}
+
+.widescreen .messagelist tr td.subject span.msgicon,
+.widescreen .messagelist tr td.subject span.unreadchildren {
+	width: 20px;
+}
+
+/* move attachments list to the bottom on narrow mail preview page */
+@media screen and (max-width: 800px) {
+  #messagepreview .leftcol {
+    margin-right: 0;
+  }
+  #messagepreview .rightcol {
+    min-height: 0;
+    width: auto;
+    right: 0;
+    position: relative;
+    border-radius: 0;
+    border-bottom: 1px solid #dfdfdf;
+    background-color: #f9f9f9;
+    padding: 5px;
+  }
+  ul.attachmentslist,
+  ul.attachmentslist > li,
+  div.rightcol > div > a.button {
+    vertical-align: middle;
+    display: inline-block;
+    margin-top: 0;
+  }
+}
diff --git a/skins/larry/styles.css b/skins/larry/styles.css
index 143c135a6..9219d81a3 100644
--- a/skins/larry/styles.css
+++ b/skins/larry/styles.css
@@ -426,9 +426,7 @@ a.button.delete span.icon {
 
 .pagenav .pagejumper {
 	text-align: center;
-	background: #f8f8f8;
 	padding: 3px 0;
-	background: linear-gradient(to bottom, #dddddd 0%, #f8f8f8 100%);
 	cursor: default;
 }
 
diff --git a/skins/larry/templates/mail.html b/skins/larry/templates/mail.html
index ce51fd2c2..6ab25c469 100644
--- a/skins/larry/templates/mail.html
+++ b/skins/larry/templates/mail.html
@@ -4,7 +4,7 @@
 <title><roundcube:object name="pagetitle" /></title>
 <roundcube:include file="/includes/links.html" />
 <style type="text/css">
-<roundcube:if condition="config:preview_pane == true" />
+<roundcube:if condition="env:layout != 'list'" />
 	#mailview-top { height: 270px; }
 	#mailview-bottom { top: 284px; height: auto; display: block; }
 	#mailpreviewframe { display: block; }
@@ -66,7 +66,7 @@
 
 </div>
 
-<div id="mainscreencontent">
+<div id="mainscreencontent" class="<roundcube:var name="env:layout" />">
 <div id="mailview-left">
 
 <!-- folders list -->
@@ -88,14 +88,15 @@
 
 <div id="mailview-right" role="main">
 
-<roundcube:if condition="config:preview_pane == true" />
+<roundcube:if condition="env:layout == 'desktop'" />
 <div id="mailview-top" class="uibox">
 <roundcube:else />
 <div id="mailview-top" class="uibox fullheight">
 <roundcube:endif />
 
 <!-- messagelist -->
-<div id="messagelistcontainer" class="boxlistcontent">
+<div id="messagelistheader"><roundcube:object name="listmenulink" optionsmenuIcon="true" /></div>
+<div id="messagelistcontainer" class="boxlistcontent" tabindex="-1">
 <h2 id="aria-label-messagelist" class="voice"><roundcube:label name="arialabelmessagelist" /></h2>
 <roundcube:object name="messages"
 	id="messagelist"
@@ -138,8 +139,6 @@
 	</div>
 
 	<roundcube:container name="listcontrols" id="listcontrols" />
-
-	<a href="#preview" id="mailpreviewtoggle" class="iconbutton" title="<roundcube:label name='previewpane' />" role="button" tabindex="0"><roundcube:label name="previewpane" /></a>
 </div>
 
 </div><!-- end mailview-top -->
@@ -201,8 +200,18 @@
 
 <div id="listoptions" class="propform popupdialog" role="dialog" aria-labelledby="aria-label-listoptions" aria-hidden="true">
 <h2 id="aria-label-listoptions" class="voice"><roundcube:label name="arialabelmessagelistoptions" /></h2>
-<roundcube:if condition="!in_array('list_cols', (array)config:dont_override)" />
-	<fieldset class="floating">
+	<roundcube:if condition="!in_array('layout', (array)config:dont_override)" />
+	<fieldset id="listoptions-layout" class="floating">
+		<legend><roundcube:label name="layout" /></legend>
+		<ul class="proplist">
+			<li><label><input type="radio" name="layout" value="widescreen" /> <span><roundcube:label name="layoutwidescreen" /></span></label></li>
+			<li><label><input type="radio" name="layout" value="desktop" /> <span><roundcube:label name="layoutdesktop" /></span></label></li>
+			<li><label><input type="radio" name="layout" value="list" /> <span><roundcube:label name="layoutlist" /></span></label></li>
+		</ul>
+	</fieldset>
+	<roundcube:endif />
+	<roundcube:if condition="!in_array('list_cols', (array)config:dont_override)" />
+	<fieldset id="listoptions-columns" class="floating">
 		<legend><roundcube:label name="listcolumns" /></legend>
 		<ul class="proplist">
 			<li><label class="disabled"><input type="checkbox" name="list_col[]" value="threads" checked disabled /> <span><roundcube:label name="threads" /></span></label></li>
@@ -222,7 +231,7 @@
 	</fieldset>
 	<roundcube:endif />
 	<roundcube:if condition="!in_array('message_sort_col', (array)config:dont_override)" />
-	<fieldset class="floating">
+	<fieldset id="listoptions-sortcol" class="floating">
 		<legend><roundcube:label name="listsorting" /></legend>
 		<ul class="proplist">
 			<li><label><input type="radio" name="sort_col" value="" /> <span><roundcube:label name="nonesort" /></span></label></li>
@@ -238,7 +247,7 @@
 	</fieldset>
 	<roundcube:endif />
 	<roundcube:if condition="!in_array('message_sort_order', (array)config:dont_override)" />
-	<fieldset class="floating">
+	<fieldset id="listoptions-sortord" class="floating">
 		<legend><roundcube:label name="listorder" /></legend>
 		<ul class="proplist">
 			<li><label><input type="radio" name="sort_ord" value="ASC" /> <span><roundcube:label name="asc" /></span></label></li>
diff --git a/skins/larry/ui.js b/skins/larry/ui.js
index 215778b14..984892315 100644
--- a/skins/larry/ui.js
+++ b/skins/larry/ui.js
@@ -28,6 +28,7 @@ function rcube_mail_ui()
 
   var me = this;
   var mailviewsplit;
+  var mailviewsplit2;
   var compose_headers = {};
   var prefs;
 
@@ -229,21 +230,15 @@ function rcube_mail_ui()
         });
       }
       else if (rcmail.env.action == 'list' || !rcmail.env.action) {
-        var previewframe = $('#mailpreviewframe').is(':visible');
+        mail_layout();
 
-        $('#mailpreviewtoggle').addClass(previewframe ? 'enabled' : 'closed').attr('aria-expanded', previewframe ? 'true' : 'false')
-          .click(function(e) { toggle_preview_pane(e); return false; });
         $('#maillistmode').addClass(rcmail.env.threading ? '' : 'selected').click(function(e) { switch_view_mode('list'); return false; });
         $('#mailthreadmode').addClass(rcmail.env.threading ? 'selected' : '').click(function(e) { switch_view_mode('thread'); return false; });
 
-        mailviewsplit = new rcube_splitter({ id:'mailviewsplitter', p1:'#mailview-top', p2:'#mailview-bottom',
-          orientation:'h', relative:true, start:276, min:150, size:12, offset:4 });
-        if (previewframe)
-          mailviewsplit.init();
-
         rcmail.init_pagejumper('#pagejumper');
 
         rcmail.addEventListener('setquota', update_quota)
+          .addEventListener('layout-change', mail_layout)
           .addEventListener('afterimport-messages', show_uploadform);
       }
       else if (rcmail.env.action == 'get') {
@@ -465,6 +460,53 @@ function rcube_mail_ui()
     }
   }
 
+  // Mail view layout initialization and change handler
+  function mail_layout(p)
+  {
+    var layout = p ? p.new_layout : rcmail.env.layout,
+      top = $('#mailview-top'),
+      bottom = $('#mailview-bottom');
+
+    if (p)
+      $('#mainscreencontent').removeClass().addClass(layout);
+
+    $('#mailviewsplitter')[layout == 'desktop' ? 'show' : 'hide']();
+    $('#mailviewsplitter2')[layout == 'widescreen' ? 'show' : 'hide']();
+    $('#mailpreviewframe')[layout != 'list' ? 'show' : 'hide']();
+    rcmail.env.contentframe = layout == 'list' ? null : 'messagecontframe';
+
+    if (layout == 'widescreen') {
+      $('#countcontrols').detach().appendTo($('#messagelistheader'));
+      top.css({height: 'auto', width: 394});
+      bottom.css({top: 0, left: 406, height: 'auto'}).show();
+      if (!mailviewsplit2) {
+        mailviewsplit2 = new rcube_splitter({ id:'mailviewsplitter2', p1:'#mailview-top', p2:'#mailview-bottom',
+          orientation:'v', relative:true, start:416, min:400, size:12});
+        mailviewsplit2.init();
+      }
+      else
+        mailviewsplit2.resize();
+    }
+    else if (layout == 'desktop') {
+      top.css({height: 270, width: 'auto'});
+      bottom.css({left: 0, top: 284, height: 'auto'}).show();
+      if (!mailviewsplit) {
+        mailviewsplit = new rcube_splitter({ id:'mailviewsplitter', p1:'#mailview-top', p2:'#mailview-bottom',
+          orientation:'h', relative:true, start:276, min:150, size:12, offset:4 });
+        mailviewsplit.init();
+      }
+      else
+        mailviewsplit.resize();
+    }
+    else { // layout == 'list'
+      top.css({height: 'auto', width: 'auto'});
+      bottom.hide();
+    }
+
+    if (p && p.old_layout == 'widescreen') {
+      $('#countcontrols').detach().appendTo($('#messagelistfooter'));
+    }
+  }
 
   /**
    * Adjust UI objects of the mail view screen
@@ -660,58 +702,6 @@ function rcube_mail_ui()
       $.Event('click', { target:ref.get(0), pageX:pos.left, pageY:pos.top, clientX:pos.left, clientY:pos.top }));
   }
 
-
-  /**
-   * Show/hide the preview pane
-   */
-  function toggle_preview_pane(e)
-  {
-    var button = $(e.target),
-      frame = $('#mailpreviewframe'),
-      visible = !frame.is(':visible'),
-      splitter = mailviewsplit.pos || parseInt(get_pref('mailviewsplitter') || 320),
-      topstyles, bottomstyles, uid;
-
-    frame.toggle();
-    button.toggleClass('enabled closed').attr('aria-expanded', visible ? 'true' : 'false');
-
-    if (visible) {
-      $('#mailview-top').removeClass('fullheight').css({ bottom:'auto' });
-      $('#mailview-bottom').css({ height:'auto' }).show();
-
-      rcmail.env.contentframe = 'messagecontframe';
-      if (uid = rcmail.message_list.get_single_selection())
-        rcmail.show_message(uid, false, true);
-
-      // let the splitter set the correct size and position
-      if (mailviewsplit.handle) {
-        mailviewsplit.handle.show();
-        mailviewsplit.resize();
-      }
-      else
-        mailviewsplit.init();
-    }
-    else {
-      rcmail.env.contentframe = null;
-      rcmail.show_contentframe(false);
-
-      $('#mailview-top').addClass('fullheight').css({ height:'auto', bottom:'0px' });
-      $('#mailview-bottom').css({ top:'auto', height:'0px' }).hide();
-
-      if (mailviewsplit.handle)
-        mailviewsplit.handle.hide();
-    }
-
-    if (rcmail.message_list) {
-      if (visible && uid)
-          rcmail.message_list.scrollto(uid);
-      rcmail.message_list.resize();
-    }
-
-    rcmail.command('save-pref', { name:'preview_pane', value:(visible?1:0) });
-  }
-
-
   /**
    * Switch between short and full headers display in message preview
    */
@@ -910,6 +900,11 @@ function rcube_mail_ui()
     $('input[name="sort_ord"][value="DESC"]').prop('checked', rcmail.env.sort_order == 'DESC');
     $('input[name="sort_ord"][value="ASC"]').prop('checked', rcmail.env.sort_order != 'DESC');
 
+    $.each(['widescreen', 'desktop', 'list'], function() {
+      $('input[name="layout"][value="' + this + '"]').prop('checked', rcmail.env.layout == this);
+    });
+    $('#listoptions-columns', $dialog)[rcmail.env.layout == 'widescreen' ? 'hide' : 'show']();
+
     // set checkboxes
     $('input[name="list_col[]"]').each(function() {
       $(this).prop('checked', $.inArray(this.value, rcmail.env.listcols) != -1);
@@ -946,10 +941,11 @@ function rcube_mail_ui()
 
     var sort = $('input[name="sort_col"]:checked').val(),
       ord = $('input[name="sort_ord"]:checked').val(),
+      layout = $('input[name="layout"]:checked').val(),
       cols = $('input[name="list_col[]"]:checked')
         .map(function(){ return this.value; }).get();
 
-    rcmail.set_list_options(cols, sort, ord, rcmail.env.threading);
+    rcmail.set_list_options(cols, sort, ord, rcmail.env.threading, layout);
   }
 
 
@@ -1377,6 +1373,10 @@ function rcube_splitter(p)
     // start listening to mousemove events
     $(document).on('mousemove.' + this.id, onDrag).on('mouseup.' + this.id, onDragStop);
 
+    // hack messages list so it will propagate the mouseup event over the list
+    if (rcmail.message_list)
+      rcmail.message_list.drag_active = true;
+
     // enable dragging above iframes
     $('iframe').each(function(i, elem) {
       $('<div>')
@@ -1455,6 +1455,9 @@ function rcube_splitter(p)
     $(document).off('.' + me.id);
     me.drag_active = false;
 
+    if (rcmail.message_list)
+      rcmail.message_list.drag_active = false;
+
     // remove temp divs
     $('div.iframe-splitter-fix').remove();