Display short headers in preview mode, with toggle to show all

thomascube

2012-01-06 f4aaf84b5052bb2686a12e4a41837bef36c5a426

Display short headers in preview mode, with toggle to show all

 skins/larry/mail.css

@@ -664,6 +664,32 @@
    height: 13px;
}

#preview-allheaders {
    display: none;
}

#preview-shortheaders td.header-title {
    padding-right: 0;
}

#preview-shortheaders td.header {
    padding-right: 12px;
}

.headers-table .iconlink {
    text-indent: -1000px;
    padding: 1px 1px 1px 20px;
}

.headers-table .iconlink.add {
    background-position: -5px -359px;
}

.headers-table .iconlink.delete {
    background-position: -5px -339px;
}


#full-headers {
    position: relative;
    color: #666;

 skins/larry/templates/messagepreview.html

@@ -8,7 +8,21 @@

<div id="messagepreviewheader">
<h3 class="subject"><roundcube:object name="messageHeaders" valueOf="subject" /></h3>
<roundcube:object name="messageHeaders" class="headers-table" addicon="/images/addcontact.png" exclude="subject,replyto" />

<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>
    <td class="header from"><roundcube:object name="messageHeaders" valueOf="to" addicon="/images/addcontact.png" /></td>
<roundcube:else />
    <td class="header-title"><roundcube:label name="from" /></td>
    <td class="header from"><roundcube:object name="messageHeaders" valueOf="from" addicon="/images/addcontact.png" /></td>
<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" />

<!-- record navigation -->
<div id="countcontrols" class="pagenav">

 skins/larry/ui.js

@@ -78,6 +78,7 @@
      if (rcmail.env.action == 'show' || rcmail.env.action == 'preview') {
        layout_messageview();
        $("#all-headers").resizable({ handles: 's', minHeight: 50 });
        $('#previewheaderstoggle').click(function(e){ toggle_preview_headers(this); return false });
      }
      else if (rcmail.env.action == 'compose') {
        rcmail.addEventListener('aftertoggle-editor', function(){ window.setTimeout(function(){ layout_composeview() }, 100); });
@@ -425,6 +426,26 @@


  /**
   * Switch between short and full headers display in message preview
   */
  function toggle_preview_headers(button)
  {
    $('#preview-shortheaders').toggle();
    var full = $('#preview-allheaders').toggle();
    
    // 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);
    }
  }


  /**
   *
   */
  function switch_view_mode(mode)