From 847d31060967760f009485dbb80cd588669e21bf Mon Sep 17 00:00:00 2001
From: thomascube <thomas@roundcube.net>
Date: Mon, 26 Dec 2011 14:33:14 -0500
Subject: [PATCH] Complete Larry's mail view with selection menus and quota display
---
skins/larry/images/quota.png | 0
skins/larry/templates/mail.html | 31 ++++++++++
skins/larry/images/listicons.png | 0
skins/larry/styles.css | 65 +++++++++++++++++++++
skins/larry/images/selector.png | 0
skins/larry/mail.css | 40 ++++++++-----
skins/larry/ui.js | 11 +++
7 files changed, 128 insertions(+), 19 deletions(-)
diff --git a/skins/larry/images/listicons.png b/skins/larry/images/listicons.png
index abd6dc0..0a3fede 100644
--- a/skins/larry/images/listicons.png
+++ b/skins/larry/images/listicons.png
Binary files differ
diff --git a/skins/larry/images/quota.png b/skins/larry/images/quota.png
new file mode 100644
index 0000000..8e09128
--- /dev/null
+++ b/skins/larry/images/quota.png
Binary files differ
diff --git a/skins/larry/images/selector.png b/skins/larry/images/selector.png
new file mode 100644
index 0000000..560f2a1
--- /dev/null
+++ b/skins/larry/images/selector.png
Binary files differ
diff --git a/skins/larry/mail.css b/skins/larry/mail.css
index 1381e2d..7e9fad2 100644
--- a/skins/larry/mail.css
+++ b/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 @@
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 @@
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 @@
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 ***/
diff --git a/skins/larry/styles.css b/skins/larry/styles.css
index 428cfaa..6894970 100644
--- a/skins/larry/styles.css
+++ b/skins/larry/styles.css
@@ -61,6 +61,10 @@
color: #aaa;
}
+select.selector {
+ padding: 2px 4px;
+}
+
/*** buttons ***/
@@ -304,9 +308,9 @@
.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 @@
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 ***/
@@ -1313,6 +1349,11 @@
-moz-box-shadow: 0 2px 6px 0 #333;
-webkit-box-shadow: 0 2px 6px 0 #333;
-o-box-shadow: 0 2px 6px 0 #333;
+}
+
+.popupmenu.dropdown {
+ border-radius: 0 0 4px 4px;
+ border-top: 0;
}
ul.toolbarmenu,
@@ -1416,6 +1457,22 @@
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 @@
background-position: 0 -1484px;
}
+ul.toolbarmenu li span.conversation {
+ background-position: 0 -1532px;
+}
+
#rcmKSearchpane {
border-radius: 0 0 4px 4px;
border-top: 0;
diff --git a/skins/larry/templates/mail.html b/skins/larry/templates/mail.html
index 0d33064..8a87ef8 100644
--- a/skins/larry/templates/mail.html
+++ b/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="⚙" />
+ <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 -->
@@ -71,6 +74,13 @@
<a href="#list" class="iconbutton listmode selected" title="<roundcube:label name='list' />" onclick="return false">List</a>
<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" />
+ <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">
@@ -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">
diff --git a/skins/larry/ui.js b/skins/larry/ui.js
index 7c0b035..c24915e 100644
--- a/skins/larry/ui.js
+++ b/skins/larry/ui.js
@@ -96,8 +96,10 @@
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 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
*/
--
Gitblit v1.9.1