summaryrefslogtreecommitdiff
path: root/skins
diff options
context:
space:
mode:
authorthomascube <thomas@roundcube.net>2011-12-26 19:33:14 +0000
committerthomascube <thomas@roundcube.net>2011-12-26 19:33:14 +0000
commit847d31060967760f009485dbb80cd588669e21bf (patch)
tree0c0831a26a3a01f44b3d6dfffc2250a297af3092 /skins
parentfe1bd5f960d85f19ad639d9a4eee9da2aaffaeb8 (diff)
Complete Larry's mail view with selection menus and quota display
Diffstat (limited to 'skins')
-rw-r--r--skins/larry/images/listicons.pngbin22515 -> 22854 bytes
-rw-r--r--skins/larry/images/quota.pngbin0 -> 4639 bytes
-rw-r--r--skins/larry/images/selector.pngbin0 -> 1032 bytes
-rw-r--r--skins/larry/mail.css40
-rw-r--r--skins/larry/styles.css65
-rw-r--r--skins/larry/templates/mail.html31
-rw-r--r--skins/larry/ui.js11
7 files changed, 128 insertions, 19 deletions
diff --git a/skins/larry/images/listicons.png b/skins/larry/images/listicons.png
index abd6dc0cb..0a3fede97 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 000000000..8e091280f
--- /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 000000000..560f2a10d
--- /dev/null
+++ b/skins/larry/images/selector.png
Binary files differ
diff --git a/skins/larry/mail.css b/skins/larry/mail.css
index 1381e2dc2..7e9fad22f 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 @@ 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 ***/
diff --git a/skins/larry/styles.css b/skins/larry/styles.css
index 428cfaa95..68949705d 100644
--- a/skins/larry/styles.css
+++ b/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;
diff --git a/skins/larry/templates/mail.html b/skins/larry/templates/mail.html
index 0d3306407..8a87ef8df 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="&#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">
diff --git a/skins/larry/ui.js b/skins/larry/ui.js
index 7c0b0354b..c24915eef 100644
--- a/skins/larry/ui.js
+++ b/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
*/