From 388b384ef1796484a0931e9da002cbd7c7f56ad2 Mon Sep 17 00:00:00 2001
From: Thomas Bruederli <thomas@roundcube.net>
Date: Mon, 28 Apr 2014 21:00:05 +0200
Subject: [PATCH] Define globally available styles for UI buttons with icons

---
 skins/larry/images/buttons.png            | Bin 39327 -> 39455 bytes
 skins/larry/styles.css                    |  54 +++++++++++++++++++++-
 skins/larry/templates/message.html        |   8 ++--
 skins/larry/templates/messagepreview.html |  12 ++---
 4 files changed, 62 insertions(+), 12 deletions(-)

diff --git a/skins/larry/images/buttons.png b/skins/larry/images/buttons.png
index e6493127852e9be7e5d920ffe9f83c969350d4e8..df4b3afd5a005d91d09f71ef307fba9e1d6f0b43 100644
GIT binary patch
delta 187
zcmV;s07U<vvjU&A0+1ID=?De@006FkDwF^KndY%2T$z7SzI@naTEnKyd1o7)oNN<k
zYLa3lp9Vo8JhzDBR&ml-sc{>*oTLfOU113JDcsk0I)rOo4V$U!N4Xm!p1tW7K<?N&
zZuaciA7+>Cym|9#x&@GNuP$kqklU@}uy658*biB=$55QT=l1F+rI{}HNDqMD&4&Nw
pc0f7VCe9z!<d$7H6)EyP`afy0J<h$w>umr4002ovPDHLkV1fwxTCM;9

delta 58
zcmbQgg=zj~rU~MFPdL~Z7#M^eT6!@s%uL&;8Z%RFqLOQuh~_80zw(Fv6@PY2@D&28
OVDNPHb6Mw<&;$TKD-)ss

diff --git a/skins/larry/styles.css b/skins/larry/styles.css
index 6ec1572db..660daa943 100644
--- a/skins/larry/styles.css
+++ b/skins/larry/styles.css
@@ -325,6 +325,7 @@ input.button:active {
 	margin-bottom: 0;
 }
 
+a.button span.icon,
 .pagenav a.button span.inner {
 	display: inline-block;
 	width: 16px;
@@ -334,56 +335,77 @@ input.button:active {
 	background: url(images/buttons.png) -6px -211px no-repeat;
 }
 
+a.button.prevpage span.icon,
 .pagenav a.prevpage span.inner {
 	background-position: -7px -226px;
 }
 
+a.button.nextpage span.icon,
 .pagenav a.nextpage span.inner {
 	background-position: -28px -226px;
 }
 
+a.button.lastpage span.icon,
 .pagenav a.lastpage span.inner {
 	background-position: -28px -211px;
 }
 
+a.button.pageup span.icon,
 .pagenav a.pageup span.inner {
 	background-position: -7px -241px;
 }
 
+a.button.pagedown span.icon,
 .pagenav a.pagedown span.inner {
 	background-position: -29px -241px;
 }
 
+a.button.reply span.icon,
 .pagenav a.reply span.inner {
 	background-position: -7px -256px;
 }
 
+a.button.forward span.icon,
 .pagenav a.forward span.inner {
 	background-position: -29px -256px;
 }
 
+a.button.replyall span.icon,
 .pagenav a.replyall span.inner {
 	background-position: -7px -271px;
 }
 
+a.button.extwin span.icon,
 .pagenav a.extwin span.inner {
 	background-position: -29px -271px;
 }
 
+a.button.changeformat.html span.icon,
 .pagenav a.changeformat.html span.inner {
 	background-position: -7px -1859px;
 }
+a.button.changeformat.html.selected span.icon,
 .pagenav a.changeformat.html.selected span.inner {
 	background-position: -29px -1859px;
 }
 
+a.button.changeformat.text span.icon,
 .pagenav a.changeformat.text span.inner {
 	background-position: -7px -1874px;
 }
+a.button.changeformat.text.selected span.icon,
 .pagenav a.changeformat.text.selected span.inner {
 	background-position: -29px -1874px;
 }
 
+a.button.add span.icon {
+	background-position: -7px -2009px;
+}
+
+a.button.delete span.icon {
+	background-position: -29px -2009px;
+}
+
 .pagenav .countdisplay {
 	display: inline-block;
 	padding: 3px 1em 0 1em;
@@ -398,7 +420,7 @@ input.button:active {
 
 a.iconbutton {
 	display: inline-block;
-	width: 24px;
+	width: 20px;
 	height: 18px;
 	text-decoration: none;
 	text-indent: -5000px;
@@ -412,17 +434,45 @@ a.iconbutton.disabled {
 }
 
 a.iconbutton.searchoptions {
+	width: 24px;
 	background-position: -2px -317px;
 }
 
 a.iconbutton.reset {
+	width: 24px;
 	background-position: -25px -317px;
 }
 
+a.iconbutton.remove,
 a.iconbutton.cancel {
-	background-position: -7px -377px;
+	background-position: -7px -378px;
+}
+
+a.iconbutton.delete {
+	background-position: -7px -338px;
 }
 
+a.iconbutton.add {
+	background-position: -7px -358px;
+}
+
+a.iconbutton.remove {
+	background-position: -7px -379px;
+}
+
+a.iconbutton.cancel {
+	background-position: -7px -398px;
+}
+
+a.iconbutton.edit {
+	background-position: -7px -418px;
+}
+
+a.iconbutton.upload {
+	background-position: -6px -438px;
+}
+
+
 a.iconlink {
 	display: inline-block;
 	color: #888;
diff --git a/skins/larry/templates/message.html b/skins/larry/templates/message.html
index 0343004f6..a661f5720 100644
--- a/skins/larry/templates/message.html
+++ b/skins/larry/templates/message.html
@@ -57,15 +57,15 @@
 </div>
 
 <roundcube:if condition="env:optional_format=='text'" />
-<div class="pagenav" id="formatcontrols">
+<div id="formatcontrols">
 	<span class="buttongroup">
-		<roundcube:button command="change-format" prop="html" type="link" class="button first changeformat html selected" innerClass="inner" title="changeformathtml" /><roundcube:button command="change-format" prop="text" type="link" class="button last changeformat text" classSel="button last changeformat text pressed" innerClass="inner" title="changeformattext" />
+		<roundcube:button command="change-format" prop="html" type="link" class="button first changeformat html selected" innerClass="icon" title="changeformathtml" /><roundcube:button command="change-format" prop="text" type="link" class="button last changeformat text" classSel="button last changeformat text pressed" innerClass="icon" title="changeformattext" />
 	</span>
 </div>
 <roundcube:elseif condition="env:optional_format=='html'" />
-<div class="pagenav" id="formatcontrols">
+<div id="formatcontrols">
 	<span class="buttongroup">
-		<roundcube:button command="change-format" prop="html" type="link" class="button first changeformat html" classSel="button first changeformat html pressed" innerClass="inner" title="changeformathtml" /><roundcube:button command="change-format" prop="text" type="link" class="button last changeformat text selected" innerClass="inner" title="changeformattext" />
+		<roundcube:button command="change-format" prop="html" type="link" class="button first changeformat html" classSel="button first changeformat html pressed" innerClass="icon" title="changeformathtml" /><roundcube:button command="change-format" prop="text" type="link" class="button last changeformat text selected" innerClass="icon" title="changeformattext" />
 	</span>
 </div>
 <roundcube:endif />
diff --git a/skins/larry/templates/messagepreview.html b/skins/larry/templates/messagepreview.html
index f69f65125..06c3216f4 100644
--- a/skins/larry/templates/messagepreview.html
+++ b/skins/larry/templates/messagepreview.html
@@ -32,22 +32,22 @@
 <div id="countcontrols" class="pagenav">
 <roundcube:if condition="env:optional_format=='text'" />
 	<span class="buttongroup">
-		<roundcube:button command="change-format" prop="html" type="link" class="button first changeformat html selected" innerClass="inner" title="changeformathtml" content="HTML" /><roundcube:button command="change-format" prop="text" type="link" class="button last changeformat text" classSel="button changeformat text pressed" innerClass="inner" title="changeformattext" content="Text" />
+		<roundcube:button command="change-format" prop="html" type="link" class="button first changeformat html selected" innerClass="icon" title="changeformathtml" content="HTML" /><roundcube:button command="change-format" prop="text" type="link" class="button last changeformat text" classSel="button changeformat text pressed" innerClass="icon" title="changeformattext" content="Text" />
 	</span>
 	&nbsp;
 <roundcube:elseif condition="env:optional_format=='html'" />
 	<span class="buttongroup">
-		<roundcube:button command="change-format" prop="html" type="link" class="button first changeformat html" classSel="button changeformat html pressed" innerClass="inner" title="changeformathtml" content="HTML" /><roundcube:button command="change-format" prop="text" type="link" class="button last changeformat text selected" innerClass="inner" title="changeformattext" content="Text" />
+		<roundcube:button command="change-format" prop="html" type="link" class="button first changeformat html" classSel="button changeformat html pressed" innerClass="icon" title="changeformathtml" content="HTML" /><roundcube:button command="change-format" prop="text" type="link" class="button last changeformat text selected" innerClass="icon" title="changeformattext" content="Text" />
 	</span>
 	&nbsp;
 <roundcube:endif />
 <roundcube:if condition="env:mailbox != config:drafts_mbox">
-	<roundcube:button command="reply" type="link" class="button reply" classSel="button reply pressed" innerClass="inner" title="replytomessage" content="&lt;-" />
-	<roundcube:button command="reply-all" type="link" class="button replyall" classSel="button replyall pressed" innerClass="inner" title="replytoallmessage" content="&lt;&lt;-" />
-	<roundcube:button command="forward" type="link" class="button forward" classSel="button forward pressed" innerClass="inner" title="forwardmessage" content="-&gt;" />
+	<roundcube:button command="reply" type="link" class="button reply" classSel="button reply pressed" innerClass="icon" title="replytomessage" content="&lt;-" />
+	<roundcube:button command="reply-all" type="link" class="button replyall" classSel="button replyall pressed" innerClass="icon" title="replytoallmessage" content="&lt;&lt;-" />
+	<roundcube:button command="forward" type="link" class="button forward" classSel="button forward pressed" innerClass="icon" title="forwardmessage" content="-&gt;" />
 	&nbsp;
 <roundcube:endif />
-	<roundcube:button command="extwin" type="link" class="button extwin" classSel="button extwin pressed" innerClass="inner" title="openinextwin" content="[]" />
+	<roundcube:button command="extwin" type="link" class="button extwin" classSel="button extwin pressed" innerClass="icon" title="openinextwin" content="[]" />
 </div>
 
 </div>