- Improve headers toggle button

alecpl

2012-02-27 9bd97cc7073dc381569d5a2563b1b93497ba36e1

- Improve headers toggle button

 skins/larry/mail.css

@@ -699,17 +699,21 @@
    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 @@
}

#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 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')
  }