Improved/unified attachment preview page Implemented attachment print button

Aleksander Machniak

2013-06-24 0494288999ac87f4147766a8bbfc0a4a4c8979de

Improved/unified attachment preview page
Implemented attachment print button

 program/js/app.js

@@ -277,6 +277,8 @@
          // init message compose form
          this.init_messageform();
        }
        else if (this.env.action == 'get')
          this.enable_command('download', 'print', true);
        // show printing dialog
        else if (this.env.action == 'print' && this.env.uid) {
          if (bw.safari)
@@ -864,7 +866,7 @@

        // open attachment in frame if it's of a supported mimetype
        if (command != 'download-attachment' && mimetype && this.env.mimetypes && $.inArray(mimetype, this.env.mimetypes) >= 0) {
          if (this.open_window(this.env.comm_path+'&_action=get&'+qstring+'&_frame=1', true, true))
          if (this.open_window(this.env.comm_path+'&_action=get&'+qstring+'&_frame=1'))
            break;
        }

@@ -1048,7 +1050,10 @@
        break;

      case 'print':
        if (uid = this.get_single_uid()) {
        if (this.env.action == 'get') {
          this.gui_objects.messagepartframe.contentWindow.print();
        }
        else if (uid = this.get_single_uid()) {
          ref.printwin = this.open_window(this.env.comm_path+'&_action=print&_uid='+uid+'&_mbox='+urlencode(this.env.mailbox)+(this.env.safemode ? '&_safe=1' : ''), true, true);
          if (this.printwin) {
            if (this.env.action != 'show')
@@ -1063,7 +1068,10 @@
        break;

      case 'download':
        if (uid = this.get_single_uid())
        if (this.env.action == 'get') {
          location.href = location.href.replace(/_frame=/, '_download=');
        }
        else if (uid = this.get_single_uid())
          this.goto_url('viewsource', { _uid: uid, _mbox: this.env.mailbox, _save: 1 });
        break;


 program/localization/en_US/labels.inc

@@ -205,6 +205,7 @@
$labels['searchmod']  = 'Search modifiers';
$labels['msgtext']  = 'Entire message';
$labels['body']  = 'Body';
$labels['type'] = 'Type';

$labels['openinextwin'] = 'Open in new window';
$labels['emlsave'] = 'Download (.eml)';

 program/steps/mail/func.inc

@@ -128,6 +128,40 @@
  $OUTPUT->set_pagetitle($pagetitle);
}

// register UI objects
$OUTPUT->add_handlers(array(
  'mailboxlist'         => 'rcmail_mailbox_list',
  'messages'            => 'rcmail_message_list',
  'messagecountdisplay' => 'rcmail_messagecount_display',
  'quotadisplay'        => 'rcmail_quota_display',
  'mailboxname'         => 'rcmail_mailbox_name_display',
  'messageheaders'      => 'rcmail_message_headers',
  'messagefullheaders'  => 'rcmail_message_full_headers',
  'messagebody'         => 'rcmail_message_body',
  'messagecontentframe' => 'rcmail_messagecontent_frame',
  'messageimportform'   => 'rcmail_message_import_form',
  'searchfilter'        => 'rcmail_search_filter',
  'searchform'          => array($OUTPUT, 'search_form'),
));

// register action aliases
$RCMAIL->register_action_map(array(
    'refresh' => 'check_recent.inc',
    'preview' => 'show.inc',
    'print'   => 'show.inc',
    'moveto'  => 'move_del.inc',
    'delete'  => 'move_del.inc',
    'send'    => 'sendmail.inc',
    'expunge' => 'folders.inc',
    'purge'   => 'folders.inc',
    'remove-attachment'  => 'attachments.inc',
    'display-attachment' => 'attachments.inc',
    'upload'             => 'attachments.inc',
    'group-expand'       => 'autocomplete.inc',
));



/**
 * Returns 'to' if current folder is configured Sent or Drafts
 * or their subfolders, otherwise returns 'from'.
@@ -1579,45 +1613,6 @@
}


function rcmail_message_part_controls($attrib)
{
  global $MESSAGE, $RCMAIL;

  $part = asciiwords(get_input_value('_part', RCUBE_INPUT_GPC));
  if (!is_object($MESSAGE) || !is_array($MESSAGE->parts) || !($_GET['_uid'] && $_GET['_part']) || !$MESSAGE->mime_parts[$part])
    return '';

  $part  = $MESSAGE->mime_parts[$part];
  $table = new html_table(array('cols' => 3));

  $filename = rcmail_attachment_name($part);

  if (!empty($filename)) {
    $table->add('title', Q(rcube_label('filename')));
    $table->add('header', Q($filename));
    $table->add('download-link', html::a(array('href' => './?'.str_replace('_frame=', '_download=', $_SERVER['QUERY_STRING'])), Q(rcube_label('download'))));
  }

  $table->add('title', Q(rcube_label('filesize')));
  $table->add('header', Q($RCMAIL->message_part_size($part)));

  return $table->show($attrib);
}


function rcmail_message_part_frame($attrib)
{
  global $MESSAGE;

  $part = $MESSAGE->mime_parts[asciiwords(get_input_value('_part', RCUBE_INPUT_GPC))];
  $ctype_primary = strtolower($part->ctype_primary);

  $attrib['src'] = './?' . str_replace('_frame=', ($ctype_primary=='text' ? '_embed=' : '_preload='), $_SERVER['QUERY_STRING']);

  return html::iframe($attrib);
}


/**
 * clear message composing settings
 */
@@ -1956,38 +1951,3 @@
  $OUTPUT->add_gui_object('importform', $attrib['id'].'Frm');
  return $out;
}


// register UI objects
$OUTPUT->add_handlers(array(
  'mailboxlist' => 'rcmail_mailbox_list',
  'messages' => 'rcmail_message_list',
  'messagecountdisplay' => 'rcmail_messagecount_display',
  'quotadisplay' => 'rcmail_quota_display',
  'mailboxname' => 'rcmail_mailbox_name_display',
  'messageheaders' => 'rcmail_message_headers',
  'messagefullheaders' => 'rcmail_message_full_headers',
  'messagebody' => 'rcmail_message_body',
  'messagecontentframe' => 'rcmail_messagecontent_frame',
  'messagepartframe' => 'rcmail_message_part_frame',
  'messagepartcontrols' => 'rcmail_message_part_controls',
  'messageimportform' => 'rcmail_message_import_form',
  'searchfilter' => 'rcmail_search_filter',
  'searchform' => array($OUTPUT, 'search_form'),
));

// register action aliases
$RCMAIL->register_action_map(array(
    'refresh' => 'check_recent.inc',
    'preview' => 'show.inc',
    'print'   => 'show.inc',
    'moveto'  => 'move_del.inc',
    'delete'  => 'move_del.inc',
    'send'    => 'sendmail.inc',
    'expunge' => 'folders.inc',
    'purge'   => 'folders.inc',
    'remove-attachment'  => 'attachments.inc',
    'display-attachment' => 'attachments.inc',
    'upload'             => 'attachments.inc',
    'group-expand'       => 'autocomplete.inc',
));

 program/steps/mail/get.inc

@@ -51,6 +51,12 @@
    $OUTPUT->set_pagetitle(rcmail_attachment_name($part));
  }

  // register UI objects
  $OUTPUT->add_handlers(array(
    'messagepartframe'    => 'rcmail_message_part_frame',
    'messagepartcontrols' => 'rcmail_message_part_controls',
  ));

  $OUTPUT->send('messagepart');
  exit;
}
@@ -410,3 +416,45 @@
        exit;
    }
}


function rcmail_message_part_controls($attrib)
{
    global $MESSAGE, $RCMAIL;

    $part = asciiwords(get_input_value('_part', RCUBE_INPUT_GPC));
    if (!is_object($MESSAGE) || !is_array($MESSAGE->parts)
        || !($_GET['_uid'] && $_GET['_part']) || !$MESSAGE->mime_parts[$part]
    ) {
        return '';
    }

    $part  = $MESSAGE->mime_parts[$part];
    $table = new html_table(array('cols' => 2));

    $table->add('title', Q(rcube_label('name')).':');
    $table->add('header', Q(rcmail_attachment_name($part)));

    $table->add('title', Q(rcube_label('type')).':');
    $table->add('header', Q($part->mimetype));

    $table->add('title', Q(rcube_label('size')).':');
    $table->add('header', Q($RCMAIL->message_part_size($part)));

    return $table->show($attrib);
}


function rcmail_message_part_frame($attrib)
{
    global $MESSAGE, $RCMAIL;

    $part = $MESSAGE->mime_parts[asciiwords(get_input_value('_part', RCUBE_INPUT_GPC))];
    $ctype_primary = strtolower($part->ctype_primary);

    $attrib['src'] = './?' . str_replace('_frame=', ($ctype_primary=='text' ? '_embed=' : '_preload='), $_SERVER['QUERY_STRING']);

    $RCMAIL->output->add_gui_object('messagepartframe', $attrib['id']);

    return html::iframe($attrib);
}

 skins/classic/common.css

@@ -283,6 +283,15 @@
  text-decoration: underline;
}

body.extwin #closelink
{
  position: absolute;
  top: 5px;
  right: 20px;
  text-align: right;
  z-index:100;
}

.box
{
  border: 1px solid #999;

 skins/classic/images/mail_toolbar.png

 skins/classic/mail.css

@@ -107,6 +107,14 @@
  background-position: -192px -32px;
}

#messagetoolbar a.print {
  background-position: -224px 0;
}

#messagetoolbar a.printSel {
  background-position: -224px -32px;
}

#messagetoolbar a.markmessage {
  background-position: -256px 0;
}
@@ -153,6 +161,14 @@

#messagetoolbar a.sendSel {
  background-position: -416px -32px;
}

#messagetoolbar a.download {
  background-position: -480px 0;
}

#messagetoolbar a.downloadSel {
  background-position: -480px -32px;
}

#messagetoolbar select.mboxlist
@@ -284,10 +300,38 @@
#messagepartcontainer
{
  position: absolute;
  top: 80px;
  left: 20px;
  right: 20px;
  bottom: 20px;
  top: 0;
  left: 170px;
  right: 0;
  bottom: 0;
}

#messagepartheader
{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 160px;
  border: 1px solid #999999;
  background-color: #F9F9F9;
  overflow: hidden;
}

#messagepartheader table
{
  width: 100%;
  table-layout: fixed;
}

#messagepartheader table td
{
  text-overflow: ellipsis;
}

#messagepartheader table td.title
{
  width: 60px;
}

#mailcontframe
@@ -329,31 +373,7 @@
  height: 100%;
  min-height: 100%; /* Chrome 14 bug */
  border: 1px solid #999999;
  background-color: #F9F9F9;
}


#partheader
{
  position: absolute;
  top: 10px;
  left: 220px;
  right: 20px;
  height: 40px;
}

#partheader table td
{
  padding-left: 2px;
  padding-right: 4px;
  vertical-align: middle;
  font-size: 11px;
}

#partheader table td.title
{
  color: #666666;
  font-weight: bold;
  background-color: #fff;
}



 skins/classic/templates/messagepart.html

@@ -3,23 +3,38 @@
<head>
<title><roundcube:object name="pagetitle" /></title>
<roundcube:include file="/includes/links.html" />
<script type="text/javascript" src="/splitter.js"></script>
<script type="text/javascript" src="/functions.js"></script>
<style type="text/css">
#messagepartheader { width: <roundcube:exp expression="!empty(cookie:mailpartsplitter) ? cookie:mailpartsplitter-5 : 170" />px; }
#messagepartcontainer { left: <roundcube:exp expression="!empty(cookie:mailpartsplitter) ? cookie:mailpartsplitter+5 : 180" />px;
<roundcube:exp expression="browser:ie ? ('width: expression((parseInt(this.parentNode.offsetWidth)-'.(!empty(cookie:mailpartsplitter) ? cookie:mailpartsplitter+5 : 180).')+\\'px\\');') : ''" />
}
</style>
</head>
<body class="extwin">
<roundcube:object name="message" id="message" />

<roundcube:include file="/includes/header.html" />

<div id="partheader">
<roundcube:object name="messagePartControls" cellpadding="2" cellspacing="0" />

<div style="position:absolute; top:2px; right:0; width:12em; text-align:right">
  [<a href="#close" class="closelink" onclick="self.close()"><roundcube:label name="close" /></a>]
</div>
<div id="messagetoolbar">
    <roundcube:button command="download" type="link" class="button download" classAct="button download" classSel="button downloadSel" title="download" content=" " />
    <roundcube:button command="print" type="link" class="button print" classAct="button print" classSel="button printSel" title="print" content=" " />
</div>


<div id="messagepartcontainer">
<roundcube:object name="messagePartFrame" id="messagepartframe" width="100%" height="100%" />
<div id="mainscreen">
    <div id="messagepartheader">
        <div class="boxtitle" /><roundcube:label name="properties" /></div>
        <div class="boxlistcontent">
            <roundcube:object name="messagePartControls" class="records-table" cellspacing="0" />
        </div>
    </div>
    <div id="messagepartcontainer">
        <roundcube:object name="messagePartFrame" id="messagepartframe" width="100%" height="100%" />
    </div>
</div>
<script type="text/javascript">
var mailpartsplit = new rcube_splitter({id:'mailpartsplitter', p1: 'messagepartheader', p2: 'messagepartcontainer', orientation: 'v', relative: true, start: 165});
rcmail.add_onload('mailpartsplit.init()');
</script>

</body>
</html>

 skins/larry/images/buttons.png

 skins/larry/mail.css

@@ -712,7 +712,6 @@
}

#messageheader,
#partheader,
#composeheaders {
    position: relative;
    padding: 3px 0;
@@ -1147,8 +1146,8 @@

#messagepartcontainer {
    position: absolute;
    top: 60px;
    left: 0;
    top: 42px;
    left: 232px;
    right: 0;
    bottom: 0;
}
@@ -1159,6 +1158,28 @@
    height: 100%;
}

#messagepartheader {
    position: absolute;
    top: 42px;
    left: 0;
    width: 220px;
    bottom: 0;
}

#messagepartheader table {
    table-layout: fixed;
    overflow: hidden;
}

#messagepartheader table td {
    text-overflow: ellipsis;
}

#messagepartheader table td.title {
    width: 60px;
}


/*** message composition ***/

#composeview-left {

 skins/larry/styles.css

@@ -690,17 +690,6 @@
    opacity: 0.999;
}

.partwin #topline {
    position: absolute;
    right: 6px;
    top: 18px;
    width: auto;
    z-index: 100;
    background: transparent;
    background: none;
    border: 0;
}

.minimal #topline a.button-logout {
    display: none;
}
@@ -881,10 +870,6 @@

.minimal #mainscreen.offset {
    top: 102px;
}

.partwin #mainscreen {
    top: 60px
}

.extwin #mainscreen {
@@ -1817,6 +1802,10 @@
    background-position: 0 -1745px;
}

.toolbar a.button.download {
    background-position: center -1906px;
}

a.menuselector {
    display: inline-block;
    border: 1px solid #ababab;

 skins/larry/templates/messagepart.html

@@ -4,33 +4,38 @@
<title><roundcube:object name="pagetitle" /></title>
<roundcube:include file="/includes/links.html" />
</head>
<body class="partwin">
<body class="extwin noscroll">

<div id="header">
<div id="topline">
    <div class="topright">
        <a href="#close" class="closelink" onclick="self.close()"><roundcube:label name="close" /></a>
    </div>
</div>

<div id="topnav">
    <roundcube:object name="logo" src="/images/roundcube_logo.png" id="toplogo" border="0" alt="Logo" />
</div>

<br style="clear:both" />
</div>

<div id="mainscreen">

<div id="partheader" class="uibox">
<roundcube:object name="messagePartControls" class="headers-table" />
<div id="messagetoolbar" class="toolbar fullwidth">
    <roundcube:button command="download" type="link" class="button download disabled" classAct="button download" classSel="button download pressed" label="download" />
    <roundcube:button command="print" type="link" class="button print disabled" classAct="button print" classSel="button print pressed" label="print" />
</div>

<div id="messagepartheader" class="uibox listbox">
    <h2 class="boxtitle"><roundcube:label name="properties" /></h2>
    <div class="scroller">
        <roundcube:object name="messagePartControls" class="listing" />
    </div>
</div>

<div id="messagepartcontainer" class="uibox">
<roundcube:object name="messagePartFrame" id="messagepartframe" frameborder="0" />
    <div class="iframebox">
    <roundcube:object name="messagePartFrame" id="messagepartframe" frameborder="0" />
    </div>
    <roundcube:object name="message" id="message" class="statusbar" />
</div>

</div>

<roundcube:include file="/includes/footer.html" />

</body>
</html>

 skins/larry/ui.js

@@ -154,6 +154,10 @@
        rcmail.addEventListener('enable-command', enable_command);
        rcmail.addEventListener('afterimport-messages', show_uploadform);
      }
      else if (rcmail.env.action == 'get') {
        new rcube_splitter({ id:'mailpartsplitterv', p1:'#messagepartheader', p2:'#messagepartcontainer',
          orientation:'v', relative:true, start:226, min:150, size:12}).init();
      }

      if ($('#mailview-left').length) {
        new rcube_splitter({ id:'mailviewsplitterv', p1:'#mailview-left', p2:'#mailview-right',