- messagemenu and markmessagemenu fixes + icons

7 files changed, 69 insertions, 11 deletions

diff --git a/skins/default/images/buttons/messagemenu.png b/skins/default/images/buttons/messagemenu.png
new file mode 100644
index 000000000..d19ee9500
--- /dev/null
+++ b/skins/default/images/buttons/messagemenu.png
diff --git a/skins/default/images/icons/print.png b/skins/default/images/icons/print.png
new file mode 100644
index 000000000..dc9ab487e
--- /dev/null
+++ b/skins/default/images/icons/print.png
diff --git a/skins/default/images/icons/save.png b/skins/default/images/icons/save.png
new file mode 100644
index 000000000..aa9ea52b1
--- /dev/null
+++ b/skins/default/images/icons/save.png
diff --git a/skins/default/images/icons/source.png b/skins/default/images/icons/source.png
new file mode 100644
index 000000000..37dceea1c
--- /dev/null
+++ b/skins/default/images/icons/source.png
diff --git a/skins/default/includes/messagemenu.html b/skins/default/includes/messagemenu.html
index 81a1c5d4f..13b984b3e 100644
--- a/skins/default/includes/messagemenu.html
+++ b/skins/default/includes/messagemenu.html
@@ -1,10 +1,10 @@
 <div id="messagemenu">
     <ul class="toolbarmenu">
-	<li><roundcube:button command="print" label="printmessage" classAct="active" /></li>
-	<li><roundcube:button command="download" label="emlsave" classAct="active" /></li>
-	<li><roundcube:button command="viewsource" label="viewsource" classAct="active" /></li>
-	<li><hr></li>
-	<li><roundcube:button command="open" label="openinextwin" target="_blank" classAct="active" /></li>
+	<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="sourcelink" command="viewsource" label="viewsource" classAct="sourcelink active" /></li>
+	<li><hr /></li>
+	<li><roundcube:button class="openlink" command="open" label="openinextwin" target="_blank" classAct="openlink active" /></li>
 	<roundcube:container name="messagemenu" id="messagemenu" />
     </ul>
 </div>
diff --git a/skins/default/mail.css b/skins/default/mail.css
index 7ab2e340e..fcc2be837 100644
--- a/skins/default/mail.css
+++ b/skins/default/mail.css
@@ -103,8 +103,66 @@ ul.toolbarmenu li input
 
 ul.toolbarmenu li hr
 {
-  width: 90%;
-  margin: 2px 10px;
+  width: 130px;
+  margin: 2px 8px 2px 22px;
+}
+
+ul.toolbarmenu li img
+{
+  float: left;
+  margin: 0 2px;
+}
+
+#messagemenu ul.toolbarmenu a,
+#markmessagemenu ul.toolbarmenu a
+{
+  padding: 2px 8px 3px 22px;
+}
+
+#messagemenu li a.active:hover,
+#markmessagemenu li a.active:hover
+{
+  background-color: #ddd;
+}
+
+#messagemenu a.printlink
+{
+  background: url('images/icons/print.png') no-repeat 2px;
+}
+
+#messagemenu a.downloadlink
+{
+  background: url('images/icons/save.png') no-repeat 2px;
+}
+
+#messagemenu a.openlink
+{
+  background: url('images/icons/extwin.png') no-repeat 2px;
+}
+
+#messagemenu a.sourcelink
+{
+  background: url('images/icons/source.png') no-repeat 2px;
+}
+
+#markmessagemenu a.readlink
+{
+  background: url('images/icons/dot.png') no-repeat 2px;
+}
+
+#markmessagemenu a.unreadlink
+{
+  background: url('images/icons/unread.png') no-repeat 2px;
+}
+
+#markmessagemenu a.flaggedlink
+{
+  background: url('images/icons/flagged.png') no-repeat 2px;
+}
+
+#markmessagemenu a.unflaggedlink
+{
+  background: url('images/icons/unflagged.png') no-repeat 2px;
 }
 
 #searchfilter
diff --git a/skins/default/templates/mail.html b/skins/default/templates/mail.html
index 9497757be..a6a1e550d 100644
--- a/skins/default/templates/mail.html
+++ b/skins/default/templates/mail.html
@@ -124,10 +124,10 @@
 
 <div id="markmessagemenu">
   <ul class="toolbarmenu">
-    <li><roundcube:button command="mark" prop="read" label="markread" classAct="active" /></li>
-    <li><roundcube:button command="mark" prop="unread" label="markunread" classAct="active" /></li>
-    <li><roundcube:button command="mark" prop="flagged" label="markflagged" classAct="active" /></li>
-    <li><roundcube:button command="mark" prop="unflagged" label="markunflagged" classAct="active" /></li>
+    <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>
   </ul>
 </div>