Complete Larry's mail view with selection menus and quota display

skins/larry/mail.css

@@ -82,7 +82,8 @@
 	display: inline-block;
 }
 
-#messagelistfooter #listcontrols {
+#messagelistfooter #listcontrols,
+#messagelistfooter #listselectors {
 	display: inline-block;
 	margin-right: 2em;
 }
@@ -127,51 +128,51 @@ a.iconbutton.threadmode.selected {
 	background-position: 6px -21px;
 }
 
-#mailboxlist li.inbox > a {
+#mailboxlist li.mailbox.inbox > a {
 	background-position: 6px -189px;
 }
 
-#mailboxlist li.inbox.selected > a {
+#mailboxlist li.mailbox.inbox.selected > a {
 	background-position: 6px -213px;
 }
 
-#mailboxlist li.drafts > a {
+#mailboxlist li.mailbox.drafts > a {
 	background-position: 6px -238px;
 }
 
-#mailboxlist li.drafts.selected > a {
+#mailboxlist li.mailbox.drafts.selected > a {
 	background-position: 6px -262px;
 }
 
-#mailboxlist li.sent > a {
+#mailboxlist li.mailbox.sent > a {
 	background-position: 6px -286px;
 }
 
-#mailboxlist li.sent.selected > a {
+#mailboxlist li.mailbox.sent.selected > a {
 	background-position: 6px -310px;
 }
 
-#mailboxlist li.junk > a {
+#mailboxlist li.mailbox.junk > a {
 	background-position: 6px -334px;
 }
 
-#mailboxlist li.junk.selected > a {
+#mailboxlist li.mailbox.junk.selected > a {
 	background-position: 6px -358px;
 }
 
-#mailboxlist li.trash > a {
+#mailboxlist li.mailbox.trash > a {
 	background-position: 6px -382px;
 }
 
-#mailboxlist li.trash.selected > a {
+#mailboxlist li.mailbox.trash.selected > a {
 	background-position: 6px -406px;
 }
 
-#mailboxlist li.archive > a {
+#mailboxlist li.mailbox.archive > a {
 	background-position: 6px -1699px;
 }
 
-#mailboxlist li.archive.selected > a {
+#mailboxlist li.mailbox.archive.selected > a {
 	background-position: 6px -1723px;
 }
 
@@ -225,8 +226,8 @@ a.iconbutton.threadmode.selected {
 	position: absolute;
 	top: 4px;
 	right: 6px;
-	width: 2.8em;
-	padding: 2px;
+	min-width: 1.8em;
+	padding: 2px 4px;
 	background: #82acb5;
 	background: -moz-linear-gradient(top, #82acb5 0%, #6a939f 100%);
 	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#82acb5), color-stop(100%,#6a939f));
@@ -868,6 +869,15 @@ div.message-part blockquote blockquote blockquote {
 	border: 0;
 }
 
+#quotadisplay {
+	left: 6px;
+	font-size: 12px;
+	font-weight: bold;
+	text-shadow: 0px 1px 1px #fff;
+	padding-left: 30px;
+	height: 18px;
+	background: url(images/quota.png) -100px 0 no-repeat;
+}
 
 /*** message composition ***/
 

skins/larry/styles.css

@@ -61,6 +61,10 @@ textarea.placeholder {
 	color: #aaa;
 }
 
+select.selector {
+	padding: 2px 4px;
+}
+
 
 /*** buttons ***/
 
@@ -304,9 +308,9 @@ input.button:active {
 
 .pagenav .countdisplay {
 	display: inline-block;
-	padding:0 0.5em;
+	padding:0 1em;
 	text-shadow: 0px 1px 1px #fff;
-	min-width: 20em;
+	min-width: 16em;
 }
 
 a.iconbutton {
@@ -1295,6 +1299,38 @@ ul.proplist li {
 	background-position: center -1050px;
 }
 
+a.menuselector {
+	display: inline-block;
+	border: 1px solid #ababab;
+	border-radius: 4px;
+	background: #f8f8f8;
+	background: -moz-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f8f8f8), color-stop(100%,#dddddd));
+	background: -o-linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
+	background: -ms-linear-gradient(top, #f9f9f9 0%, #dddddd 100%);
+	background: linear-gradient(top, #f8f8f8 0%, #dddddd 100%);
+	text-decoration: none;
+	color: #333;
+}
+
+a.menuselector .handle {
+	display: inline-block;
+	padding: 3px 32px 4px 8px;
+	text-shadow: 0px 1px 1px #fff;
+	background: url(images/selector.png) right center no-repeat;
+	border-radius: 4px;
+}
+
+a.menuselector:active {
+	background: #dddddd;
+	background: -moz-linear-gradient(top, #dddddd 0%, #f8f8f8 100%);
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dddddd), color-stop(100%,#f8f8f8));
+	background: -o-linear-gradient(top, #dddddd 0%, #f8f8f8 100%);
+	background: -ms-linear-gradient(top, #dddddd 0%, #f8f8f8 100%);
+	background: linear-gradient(top, #dddddd 0%, #f8f8f8 100%);
+	text-decoration: none;
+}
+
 
 /*** popup menus ***/
 
@@ -1315,6 +1351,11 @@ ul.proplist li {
 	-o-box-shadow: 0 2px 6px 0 #333;
 }
 
+.popupmenu.dropdown {
+	border-radius: 0 0 4px 4px;
+	border-top: 0;
+}
+
 ul.toolbarmenu,
 #rcmKSearchpane ul {
 	margin: 0;
@@ -1416,6 +1457,22 @@ ul.toolbarmenu li span.unflagged {
 	background-position: 0 -1268px;
 }
 
+ul.toolbarmenu li span.mail {
+	background-position: 0 -1293px;
+}
+
+ul.toolbarmenu li span.list {
+	background-position: 0 -1317px;
+}
+
+ul.toolbarmenu li span.invert {
+	background-position: 0 -1340px;
+}
+
+ul.toolbarmenu li span.cross {
+	background-position: 0 -1365px;
+}
+
 ul.toolbarmenu li span.print {
 	background-position: 0 -1436px;
 }
@@ -1436,6 +1493,10 @@ ul.toolbarmenu li span.extwin {
 	background-position: 0 -1484px;
 }
 
+ul.toolbarmenu li span.conversation {
+	background-position: 0 -1532px;
+}
+
 #rcmKSearchpane {
 	border-radius: 0 0 4px 4px;
 	border-top: 0;

skins/larry/templates/mail.html

@@ -34,6 +34,9 @@
 </div>
 <div class="boxfooter">
 	<roundcube:button name="mailboxmenulink" id="mailboxmenulink" type="link" title="folderactions" class="listbutton groupactions" onclick="UI.show_popup('mailboxmenu');return false" innerClass="inner" content="&#9881;" />
+	<roundcube:if condition="env:quota" />
+		<roundcube:object name="quotaDisplay" id="quotadisplay" class="countdisplay" />
+	<roundcube:endif />
 </div>
 </div>
 
@@ -43,7 +46,7 @@
 
 <!-- search filter -->
 <div id="searchfilter">
-	<roundcube:object name="searchfilter" class="searchfilter" />
+	<roundcube:object name="searchfilter" class="searchfilter selector" />
 </div>
 
 <!-- toolbar -->
@@ -72,6 +75,13 @@
 			<a href="#threads" class="iconbutton threadmode disabled" title="<roundcube:label name='threads' />" onclick="return false">Threads</a>
 		<roundcube:endif />
 	</div>
+	
+	<div id="listselectors">
+	<a href="#select" id="listselectmenulink" class="menuselector" onclick="UI.show_popup('listselectmenu');return false"><span class="handle"><roundcube:label name="select" /></span></a>
+	<roundcube:if condition="env:threads" />
+		&nbsp; <a href="#threads" id="threadselectmenulink" class="menuselector" onclick="UI.show_popup('threadselectmenu');return false"><span class="handle"><roundcube:label name="threads" /></span></a>
+	<roundcube:endif />
+	</div>
 
 	<div id="countcontrols" class="pagenav dark">
 		<roundcube:object name="messageCountDisplay" class="countdisplay" />
@@ -127,6 +137,25 @@
 	</ul>
 </div>
 
+<div id="listselectmenu" class="popupmenu dropdown">
+	<ul class="toolbarmenu iconized">
+		<li><roundcube:button command="select-all" type="link" label="all" class="icon" classAct="icon active" innerclass="icon mail" /></li>
+		<li><roundcube:button command="select-all" type="link" prop="page" label="currpage" class="icon" classAct="icon active" innerclass="icon list" /></li>
+		<li><roundcube:button command="select-all" type="link" prop="unread" label="unread" class="icon" classAct="icon active" innerclass="icon unread" /></li>
+		<li><roundcube:button command="select-all" type="link" prop="flagged" label="flagged" class="icon" classAct="icon active" innerclass="icon flagged" /></li>
+		<li><roundcube:button command="select-all" type="link" prop="invert" label="invert" class="icon" classAct="icon active" innerclass="icon invert" /></li>
+		<li><roundcube:button command="select-none" type="link" label="none" class="icon" classAct="icon active" innerclass="icon cross" /></li>
+	</ul>
+</div>
+
+<div id="threadselectmenu" class="popupmenu dropdown">
+	<ul class="toolbarmenu">
+		<li><roundcube:button command="expand-all" type="link" label="expand-all" class="icon" classAct="icon active" innerclass="icon conversation" /></li>
+		<li><roundcube:button command="expand-unread" type="link" label="expand-unread" class="icon" classAct="icon active" innerclass="icon conversation" /></li>
+		<li><roundcube:button command="collapse-all" type="link" label="collapse-all" class="icon" classAct="icon active" innerclass="icon conversation" /></li>
+	</ul>
+</div>
+
 <div id="listoptions" class="propform popupdialog">
 <roundcube:if condition="!in_array('list_cols', (array)config:dont_override)" />
 	<fieldset class="floating">

skins/larry/ui.js

@@ -96,8 +96,10 @@ function rcube_mail_ui()
             orientation:'h', relative:true, start:310, min:150, size:0, offset:-22 });
           if (previewframe)
             mailviewsplit.init();
+
+          rcmail.addEventListener('setquota', update_quota);
       }
-      
+
       if ($('#mailview-left').length) {
         new rcube_splitter({ id:'mailviewsplitterv', p1:'#mailview-left', p2:'#mailview-right',
           orientation:'v', relative:true, start:248, min:150, size:12, callback:render_mailboxlist, render:resize_leftcol }).init();
@@ -227,6 +229,13 @@ function rcube_mail_ui()
   }
 
 
+  function update_quota(p)
+  {
+    var y = p.total ? Math.ceil(p.percent / 100 * 20) * 24 : 0;
+    $('#quotadisplay').css('background-position', '0 -'+y+'px');
+  }
+
+
   /**
    * Trigger for popup menus
    */