- Improve headers toggle button

skins/larry/mail.css

@@ -699,17 +699,21 @@ h3.subject {
 	padding-right: 12px;
 }
 
-#messagepreviewheader .iconlink {
-	text-indent: -1000px;
-	padding: 1px 1px 1px 20px;
+#previewheaderstoggle {
+    width: 16px;
+    height: 16px;
+    padding: 0;
+    margin-top: 5px;
+    position: absolute;
+    outline: none;
 }
 
-#messagepreviewheader .iconlink.add {
-	background-position: -5px -359px;
+#previewheaderstoggle.iconlink.add {
+	background-position: -30px -241px;
 }
 
-#messagepreviewheader .iconlink.delete {
-	background-position: -5px -339px;
+#previewheaderstoggle.iconlink.remove {
+	background-position: -8px -241px;
 }
 
 #full-headers {
@@ -779,7 +783,7 @@ div.hide-headers {
 }
 
 #messagepreviewheader .headers-table {
-	margin: 0 -8px;
+	margin-left: 10px;
 }
 
 #messagepreviewheader h3.subject {

skins/larry/templates/messagepreview.html

@@ -9,6 +9,8 @@
 <div id="messagepreviewheader">
 <h3 class="subject"><roundcube:object name="messageHeaders" valueOf="subject" /></h3>
 
+<a href="#details" id="previewheaderstoggle" class="iconlink add"></a>
+
 <table class="headers-table" id="preview-shortheaders"><tbody><tr>
 <roundcube:if condition="env:mailbox == config:drafts_mbox || env:mailbox == config:sent_mbox">
 	<td class="header-title"><roundcube:label name="to" /></td>
@@ -19,7 +21,6 @@
 <roundcube:endif />
 	<td class="header-title"><roundcube:label name="date" /></td>
 	<td class="header from"><roundcube:object name="messageHeaders" valueOf="date" /></td>
-	<td class="header"><a href="#details" id="previewheaderstoggle" class="iconlink add">Details</a>
 </tr></tbody></table>
 
 <roundcube:object name="messageHeaders" id="preview-allheaders" class="headers-table" addicon="/images/addcontact.png" exclude="subject,replyto" />

skins/larry/ui.js

@@ -462,17 +462,14 @@ function rcube_mail_ui()
   function toggle_preview_headers(button)
   {
     $('#preview-shortheaders').toggle();
-    var full = $('#preview-allheaders').toggle();
+    var full = $('#preview-allheaders').toggle(),
+      button = $('a#previewheaderstoggle');
 
     // add toggle button to full headers table
-    if (!full.data('mod')) {
-      $('<a>').attr('href', '#hide')
-        .addClass('iconlink remove')
-        .html('Hide')
-        .appendTo($('<td>').appendTo($('tr:first', full)))
-        .click(function(){ toggle_preview_headers(this);return false });
-      full.data('mod', true);
-    }
+    if (full.is(':visible'))
+      button.attr('href', '#hide').removeClass('add').addClass('remove')
+    else
+      button.attr('href', '#details').removeClass('remove').addClass('add')
   }