New skin: set list icons and toolbar buttons

7 files changed, 368 insertions, 19 deletions

diff --git a/skins/larry/images/buttons.png b/skins/larry/images/buttons.png
index c9c1637ad..c86f211f2 100644
--- a/skins/larry/images/buttons.png
+++ b/skins/larry/images/buttons.png
diff --git a/skins/larry/images/listicons.png b/skins/larry/images/listicons.png
index d0b943621..08c098fe0 100644
--- a/skins/larry/images/listicons.png
+++ b/skins/larry/images/listicons.png
diff --git a/skins/larry/includes/mailtoolbar.html b/skins/larry/includes/mailtoolbar.html
new file mode 100644
index 000000000..e97e135f5
--- /dev/null
+++ b/skins/larry/includes/mailtoolbar.html
@@ -0,0 +1,71 @@
+<div id="mailtoolbar" class="toolbar">
+<roundcube:if condition="template:name == 'message'" />
+<roundcube:button command="list" type="link" class="button back disabled" classAct="button back" classSel="button back pressed" label="backtolist" />
+<roundcube:else />
+<roundcube:button command="checkmail" type="link" class="button checkmail disabled" classAct="button checkmail" classSel="button checkmail pressed" label="checkmail" />
+<roundcube:endif />
+<roundcube:button command="compose" type="link" class="button compose disabled" classAct="button compose" classSel="button compose pressed" label="writenewmessage" />
+<roundcube:button command="reply" type="link" class="button reply disabled" classAct="button reply" classSel="button reply pressed" label="replytomessage" />
+<span class="dropbutton">
+<roundcube:button command="reply-all" type="link" class="button reply-all disabled" classAct="button reply-all" classSel="button reply-all pressed" label="replytoallmessage" />
+<span id="replyallmenulink" onclick="rcmail_ui.show_popup('replyallmenu');return false"></span>
+</span>
+<span class="dropbutton">
+<roundcube:button command="forward" type="link" class="button forward disabled" classAct="button forward" classSel="button forward pressed" label="forwardmessage" />
+<span id="forwardmenulink" onclick="rcmail_ui.show_popup('forwardmenu');return false"></span>
+</span>
+<roundcube:button command="delete" type="link" class="button delete disabled" classAct="button delete" classSel="button delete pressed" label="deletemessage" />
+<roundcube:container name="toolbar" id="mailtoolbar" />
+<roundcube:if condition="template:name == 'mail'" />
+<roundcube:button name="markmenulink" id="markmenulink" type="link" class="button markmessage" label="markmessages" onclick="rcmail_ui.show_popup('markmenu');return false" />
+<roundcube:endif />
+<roundcube:button name="messagemenulink" id="messagemenulink" type="link" class="button more" label="moreactions" onclick="rcmail_ui.show_popup('messagemenu');return false" />
+<roundcube:if condition="template:name == 'message'" />
+<roundcube:object name="mailboxlist" type="select" noSelection="moveto" maxlength="25" onchange="rcmail.command('moveto', this.options[this.selectedIndex].value)" class="mboxlist" folder_filter="mail" />
+<roundcube:endif />
+</div>
+
+<div id="forwardmenu" class="popupmenu">
+	<ul class="toolbarmenu">
+		<li class="block">
+			<input type="radio" name="forwardtype" value="0" onchange="rcmail.command('save-pref', {name: 'forward_attachment', value: 0, env: 'forward_attachment'});" />
+			<roundcube:button command="forward" label="forwardinline" prop="sub" classAct="forwardlink active" class="forwardlink" />
+		</li>
+		<li class="block">
+			<input type="radio" name="forwardtype" value="1" onchange="rcmail.command('save-pref', {name: 'forward_attachment', value: 1, env: 'forward_attachment'})" />
+			<roundcube:button command="forward-attachment" label="forwardattachment" prop="sub" classAct="forwardattachmentlink active" class="forwardattachmentlink" />
+		</li>
+		<roundcube:container name="forwardmenu" id="forwardmenu" />
+	</ul>
+</div>
+
+<div id="replyallmenu" class="popupmenu">
+	<ul>
+		<li><roundcube:button command="reply-all" label="replyall" prop="sub" classAct="replyalllink active" class="replyalllink" /></li>
+		<li><roundcube:button command="reply-list" label="replylist" prop="sub" classAct="replylistlink active" class="replylistlink" /></li>
+		<roundcube:container name="replyallmenu" id="replyallmenu" />
+	</ul>
+</div>
+
+<div id="messagemenu" class="popupmenu">
+  <ul class="toolbarmenu">
+	<li><roundcube:button class="printlink" command="print" label="printmessage" classAct="printlink active" /></li>
+	<li><roundcube:button class="downloadlink" command="download" label="emlsave" classAct="downloadlink active" /></li>
+	<li><roundcube:button class="editlink" command="edit" label="editasnew" classAct="editlink active" /></li>
+	<li class="separator_below"><roundcube:button class="sourcelink" command="viewsource" label="viewsource" classAct="sourcelink active" /></li>
+	<li><roundcube:button class="openlink" command="open" label="openinextwin" target="_blank" classAct="openlink active" /></li>
+	<roundcube:container name="messagemenu" id="messagemenu" />
+  </ul>
+</div>
+
+<roundcube:if condition="template:name == 'mail'" />
+<div id="markmessagemenu" class="popupmenu">
+  <ul class="toolbarmenu">
+	<li><roundcube:button command="mark" prop="read" label="markread" classAct="readlink active" class="readlink" /></li>
+	<li><roundcube:button command="mark" prop="unread" label="markunread" classAct="unreadlink active" class="unreadlink" /></li>
+	<li><roundcube:button command="mark" prop="flagged" label="markflagged" classAct="flaggedlink active" class="flaggedlink" /></li>
+	<li><roundcube:button command="mark" prop="unflagged" label="markunflagged" classAct="unflaggedlink active" class="unflaggedlink" /></li>
+	<roundcube:container name="markmenu" id="markmessagemenu" />
+  </ul>
+</div>
+<roundcube:endif />
diff --git a/skins/larry/mail.css b/skins/larry/mail.css
index d59fa24ca..8097a95ef 100644
--- a/skins/larry/mail.css
+++ b/skins/larry/mail.css
@@ -30,7 +30,7 @@
 
 #mailview-top {
 	position: absolute;
-	top: 0;
+	top: 42px;
 	left: 0;
 	width: 100%;
 	bottom: 28px;
@@ -54,6 +54,7 @@
 }
 
 #messagelistcontainer {
+	top: 0;
 	bottom: 32px;
 	overflow: auto;
 }
@@ -72,12 +73,9 @@
 }
 
 #mailboxlist li.mailbox {
-	background-position: 8px 2px;
+	position: relative;
 	background-repeat: no-repeat;
-}
-
-#mailboxlist li.virtual > a {
-	color: #aaa;
+	background-position: 6px 2px;
 }
 
 #mailboxlist li.mailbox a {
@@ -85,6 +83,57 @@
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
+	background-image: url(images/listicons.png);
+	background-repeat: no-repeat;
+	background-position: 6px 3px;
+}
+
+#mailboxlist li.mailbox.selected > a {
+	background-position: 6px -21px;
+}
+
+#mailboxlist li.inbox > a {
+	background-position: 6px -189px;
+}
+
+#mailboxlist li.inbox.selected > a {
+	background-position: 6px -213px;
+}
+
+#mailboxlist li.drafts > a {
+	background-position: 6px -238px;
+}
+
+#mailboxlist li.drafts.selected > a {
+	background-position: 6px -262px;
+}
+
+#mailboxlist li.sent > a {
+	background-position: 6px -286px;
+}
+
+#mailboxlist li.sent.selected > a {
+	background-position: 6px -310px;
+}
+
+#mailboxlist li.junk > a {
+	background-position: 6px -334px;
+}
+
+#mailboxlist li.junk.selected > a {
+	background-position: 6px -358px;
+}
+
+#mailboxlist li.trash > a {
+	background-position: 6px -382px;
+}
+
+#mailboxlist li.trash.selected > a {
+	background-position: 6px -406px;
+}
+
+#mailboxlist li.virtual > a {
+	color: #aaa;
 }
 
 #mailboxlist li.mailbox ul {
@@ -93,23 +142,89 @@
 }
 
 #mailboxlist li.mailbox ul li {
-	padding-left: 30px;
+	padding-left: 26px;
+}
+
+#mailboxlist li.mailbox ul li a {
+	background-position: 6px -93px;
+}
+
+#mailboxlist li.mailbox ul li.selected a {
+	background-position: 6px -117px;
 }
 
 #mailboxlist li.mailbox ul li:last-child {
 	border-bottom: 0;
 }
 
+#mailboxlist li.mailbox div.collapsed,
+#mailboxlist li.mailbox div.expanded {
+	position: absolute;
+	top: 15px;
+	left: 21px;
+	width: 10px;
+	height: 10px;
+	background: url(images/listicons.png) -5px -146px no-repeat;
+	cursor: pointer;
+}
+
+#mailboxlist li.mailbox div.expanded {
+	background-position: -5px -170px;
+}
+
+#mailboxlist li.mailbox ul li div.collapsed,
+#mailboxlist li.mailbox ul li div.expanded {
+	left: 46px;
+	top: 16px;
+}
+
+#mailboxlist li.mailbox .unreadcount {
+	position: absolute;
+	top: 4px;
+	right: 6px;
+	width: 2.8em;
+	padding: 2px;
+	background: #82acb5;
+	background: -moz-linear-gradient(left, #82acb5 0%, #6a939f 100%);
+	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#82acb5), color-stop(100%,#6a939f));
+	background: -o-linear-gradient(left, #82acb5 0%, #6a939f 100%);
+	background: -ms-linear-gradient(left, #82acb5 0%, #6a939f 100%);
+	background: linear-gradient(left, #82acb5 0%, #6a939f 100%);
+	box-shadow: inset 0 1px 1px 0 #536d72;
+	-o-box-shadow: inset 0 1px 1px 0 #536d72;
+	-webkit-box-shadow: inset 0 1px 1px 0 #536d72;
+	-moz-box-shadow: inset 0 1px 1px 0 #536d72;
+	border-radius: 9px;
+	color: #fff;
+	text-align: center;
+	font-weight: bold;
+	text-shadow: none;
+}
+
+#mailboxlist li.mailbox.selected .unreadcount {
+	background: #005d76;
+	background: -moz-linear-gradient(left, #005d76 0%, #004558 100%);
+	background: -webkit-gradient(linear, left top, right top, color-stop(0%,#005d76), color-stop(100%,#004558));
+	background: -o-linear-gradient(left, #005d76 0%, #004558 100%);
+	background: -ms-linear-gradient(left, #005d76 0%, #004558 100%);
+	background: linear-gradient(left, #005d76 0%, #004558 100%);
+	box-shadow: inset 0 1px 1px 0 #003645;
+	-o-box-shadow: inset 0 1px 1px 0 #003645;
+	-webkit-box-shadow: inset 0 1px 1px 0 #003645;
+	-moz-box-shadow: inset 0 1px 1px 0 #003645;
+}
+
 #searchfilter {
 	width: 16em;
 }
 
 #messagetoolbar {
 	position: absolute;
-	top: 0;
+	top: -6px;
 	right: 0;
-	width: auto;
+	left: 15em;
 	height: 40px;
+	text-align: right;
 }
 
 
@@ -200,7 +315,7 @@
 #messagelist tr td.status,
 #messagelist tr td.flag,
 #messagelist tr td.priority {
-	width: 18px;
+	width: 20px;
 	padding: 4px 3px;
 }
 
@@ -370,7 +485,7 @@ html.chrome #messagelist tr td.threads {
 #messagelist tr td.subject span.msgicon,
 #messagelist tr td.subject span.unreadchildren {
 	background-position: 0 -1056px;
-	margin: 0 2px;
+	margin: 0 4px 0 0;
 }
 
 #messagelist tr td.subject span.replied {
diff --git a/skins/larry/settings.css b/skins/larry/settings.css
index dc46020e1..13c011587 100644
--- a/skins/larry/settings.css
+++ b/skins/larry/settings.css
@@ -41,3 +41,103 @@
 	border-radius: 4px 4px 0 0;
 }
 
+#sections-table tbody td.section,
+#settings-sections span.listitem a {
+	padding-left: 36px;
+	background: url(images/listicons.png) -100px 0 no-repeat;
+}
+
+#settings-sections span.listitem a {
+	background-position: 6px -862px;
+}
+
+#settings-sections span.selected a {
+	background-position: 6px -887px;
+}
+
+#settings-sections span.preferences a {
+	background-position: 6px -431px;
+}
+
+#settings-sections span.preferences.selected a {
+	background-position: 6px -455px;
+}
+
+#settings-sections span.folders a,
+#sections-table #rcmrowfolders td.section {
+	background-position: 6px 2px;
+}
+
+#settings-sections span.folders.selected a,
+#sections-table #rcmrowfolders.selected td.section {
+	background-position: 6px -22px;
+}
+
+#settings-sections span.identities a {
+	background-position: 6px -478px;
+}
+
+#settings-sections span.identities.selected a {
+	background-position: 6px -502px;
+}
+
+#settings-sections span.about a {
+	background-position: -100px 0;
+}
+
+#sections-table #rcmrowgeneral td.section {
+	background-position: 6px -573px;
+}
+
+#sections-table #rcmrowgeneral.selected td.section {
+	background-position: 6px -598px;
+}
+
+#sections-table #rcmrowmailbox td.section {
+	background-position: 6px -621px;
+}
+
+#sections-table #rcmrowmailbox.selected td.section {
+	background-position: 6px -646px;
+}
+
+#sections-table #rcmrowcompose td.section {
+	background-position: 6px -670px;
+}
+
+#sections-table #rcmrowcompose.selected td.section {
+	background-position: 6px -695px;
+}
+
+#sections-table #rcmrowmailview td.section {
+	background-position: 6px -718px;
+}
+
+#sections-table #rcmrowmailview.selected td.section {
+	background-position: 6px -742px;
+}
+
+#sections-table #rcmrowaddressbook td.section {
+	background-position: 6px -766px;
+}
+
+#sections-table #rcmrowaddressbook.selected td.section {
+	background-position: 6px -791px;
+}
+
+#sections-table #rcmrowserver td.section {
+	background-position: 6px -814px;
+}
+
+#sections-table #rcmrowserver.selected td.section {
+	background-position: 6px -838px;
+}
+
+#sections-table #rcmrowcalendar td.section {
+	background-position: 6px -526px;
+}
+
+#sections-table #rcmrowcalendar.selected td.section {
+	background-position: 6px -550px;
+}
+
diff --git a/skins/larry/styles.css b/skins/larry/styles.css
index 7dca2642d..d251adb8e 100644
--- a/skins/larry/styles.css
+++ b/skins/larry/styles.css
@@ -199,11 +199,11 @@ a.button.pressed {
 }
 
 .pagenav a.nextpage span.inner {
-	background-position: -8px -241px;
+	background-position: -30px -226px;
 }
 
 .pagenav a.lastpage span.inner {
-	background-position: -8px -256px;
+	background-position: -30px -211px;
 }
 
 .pagenav .countdisplay {
@@ -222,11 +222,11 @@ a.iconbutton {
 }
 
 a.iconbutton.searchoptions {
-	background-position: -4px -363px;
+	background-position: -2px -304px;
 }
 
 a.iconbutton.reset {
-	background-position: -2px -384px;
+	background-position: -25px -303px;
 }
 
 
@@ -685,5 +685,69 @@ table.propform td.title {
 #quicksearchbar #searchreset {
 	position: absolute;
 	top: 4px;
-	right: 4px;
+	right: 3px;
 }
+
+
+/*** toolbar ***/
+
+.toolbar a.button {
+	text-align: center;
+	font-size: 10px;
+	color: #555;
+	min-width: 55px;
+	max-width: 75px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	padding: 28px 2px 2px 2px;
+	text-shadow: 1px 1px 1px #eee;
+	box-shadow: none;
+	-moz-box-shadow: none;
+	-webkit-box-shadow: none;
+	-o-box-shadow: none;
+	background: url(images/buttons.png) -100px 0 no-repeat transparent;
+	border: 0;
+}
+
+.toolbar a.button.disabled {
+	opacity: 0.5;
+}
+
+.toolbar a.button.checkmail {
+	background-position: center -370px;
+}
+
+.toolbar a.button.compose {
+	background-position: center -410px;
+}
+
+.toolbar a.button.reply {
+	background-position: center -450px;
+}
+
+.toolbar a.button.reply-all {
+	background-position: center -490px;
+}
+
+.toolbar a.button.forward {
+	background-position: center -530px;
+}
+
+.toolbar a.button.delete {
+	background-position: center -570px;
+}
+
+.toolbar a.button.markmessage,
+.toolbar a.button.more {
+	background-position: center -730px;
+}
+
+/*** popup menus ***/
+
+.popupmenu {
+	display: none;
+}
+
+
+
diff --git a/skins/larry/templates/mail.html b/skins/larry/templates/mail.html
index d93df4d47..6a1164002 100644
--- a/skins/larry/templates/mail.html
+++ b/skins/larry/templates/mail.html
@@ -40,7 +40,7 @@
 
 <!-- toolbar -->
 <div id="messagetoolbar">
-<!-- roundcube:include file="/includes/messagetoolbar.html" /-->
+<roundcube:include file="/includes/mailtoolbar.html" />
 </div>
 
 <div id="mailview-top">
@@ -65,8 +65,7 @@
 		<roundcube:button command="previouspage" type="link" class="button prevpage disabled" classAct="button prevpage" classSel="button prevpage pressed" innerClass="inner" title="previouspage" content="&amp;lt;" />
 		<roundcube:button command="nextpage" type="link" class="button nextpage disabled" classAct="button nextpage" classSel="button nextpage pressed" innerClass="inner" title="nextpage" content="&amp;gt;" />
 		<roundcube:button command="lastpage" type="link" class="button lastpage disabled" classAct="button lastpage" classSel="button lastpage pressed" innerClass="inner" title="lastpage" content="&amp;gt;|" />
-</div>
-
+	</div>
 </div>
 
 </div><!-- end mailview-top -->