Improved/unified attachment preview page

Implemented attachment print button

13 files changed, 226 insertions, 146 deletions

diff --git a/program/js/app.js b/program/js/app.js
index e654a1481..c6b6d39f1 100644
--- a/program/js/app.js
+++ b/program/js/app.js
@@ -277,6 +277,8 @@ function rcube_webmail()
           // 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 @@ function rcube_webmail()
 
         // 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 @@ function rcube_webmail()
         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 @@ function rcube_webmail()
         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;
 
diff --git a/program/localization/en_US/labels.inc b/program/localization/en_US/labels.inc
index 046f2f488..cd0b945d5 100644
--- a/program/localization/en_US/labels.inc
+++ b/program/localization/en_US/labels.inc
@@ -205,6 +205,7 @@ $labels['resetsearch']  = 'Reset search';
 $labels['searchmod']  = 'Search modifiers';
 $labels['msgtext']  = 'Entire message';
 $labels['body']  = 'Body';
+$labels['type'] = 'Type';
 
 $labels['openinextwin'] = 'Open in new window';
 $labels['emlsave'] = 'Download (.eml)';
diff --git a/program/steps/mail/func.inc b/program/steps/mail/func.inc
index 4483ec160..07c315ea7 100644
--- a/program/steps/mail/func.inc
+++ b/program/steps/mail/func.inc
@@ -128,6 +128,40 @@ if (empty($RCMAIL->action) || $RCMAIL->action == 'list') {
   $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_draftinfo_decode($str)
 }
 
 
-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 @@ function rcmail_message_import_form($attrib = array())
   $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',
-));
diff --git a/program/steps/mail/get.inc b/program/steps/mail/get.inc
index 372757720..5efa5c5c4 100644
--- a/program/steps/mail/get.inc
+++ b/program/steps/mail/get.inc
@@ -51,6 +51,12 @@ if (!empty($_GET['_frame'])) {
     $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 @@ function check_storage_status()
         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);
+}
diff --git a/skins/classic/common.css b/skins/classic/common.css
index 1f62fbe07..3c322f0ed 100644
--- a/skins/classic/common.css
+++ b/skins/classic/common.css
@@ -283,6 +283,15 @@ body > #message a
   text-decoration: underline;
 }
 
+body.extwin #closelink
+{
+  position: absolute;
+  top: 5px;
+  right: 20px;
+  text-align: right;
+  z-index:100;
+}
+
 .box
 {
   border: 1px solid #999;
diff --git a/skins/classic/images/mail_toolbar.png b/skins/classic/images/mail_toolbar.png
index e68035da5..4a8431715 100644
--- a/skins/classic/images/mail_toolbar.png
+++ b/skins/classic/images/mail_toolbar.png
diff --git a/skins/classic/mail.css b/skins/classic/mail.css
index 0193e87ff..452093f82 100644
--- a/skins/classic/mail.css
+++ b/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;
 }
@@ -155,6 +163,14 @@
   background-position: -416px -32px;
 }
 
+#messagetoolbar a.download {
+  background-position: -480px 0;
+}
+
+#messagetoolbar a.downloadSel {
+  background-position: -480px -32px;
+}
+
 #messagetoolbar select.mboxlist
 {
   position: relative;
@@ -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;
 }
 
 
diff --git a/skins/classic/templates/messagepart.html b/skins/classic/templates/messagepart.html
index ce7dbe2e1..f768d1703 100644
--- a/skins/classic/templates/messagepart.html
+++ b/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 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>
-
 
-<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>
diff --git a/skins/larry/images/buttons.png b/skins/larry/images/buttons.png
index 54bee0156..9f8f44536 100644
--- a/skins/larry/images/buttons.png
+++ b/skins/larry/images/buttons.png
diff --git a/skins/larry/mail.css b/skins/larry/mail.css
index 0af34f371..f63083e68 100644
--- a/skins/larry/mail.css
+++ b/skins/larry/mail.css
@@ -712,7 +712,6 @@ a.iconbutton.threadmode.selected {
 }
 
 #messageheader,
-#partheader,
 #composeheaders {
 	position: relative;
 	padding: 3px 0;
@@ -1147,8 +1146,8 @@ div.message-partheaders .headers-table td.header {
 
 #messagepartcontainer {
 	position: absolute;
-	top: 60px;
-	left: 0;
+	top: 42px;
+	left: 232px;
 	right: 0;
 	bottom: 0;
 }
@@ -1159,6 +1158,28 @@ div.message-partheaders .headers-table td.header {
 	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 {
diff --git a/skins/larry/styles.css b/skins/larry/styles.css
index 4d689ab2f..ec4f3047c 100644
--- a/skins/larry/styles.css
+++ b/skins/larry/styles.css
@@ -690,17 +690,6 @@ a.iconlink.upload {
 	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;
 }
@@ -883,10 +872,6 @@ a.iconlink.upload {
 	top: 102px;
 }
 
-.partwin #mainscreen {
-	top: 60px
-}
-
 .extwin #mainscreen {
 	top: 40px;
 }
@@ -1817,6 +1802,10 @@ ul.proplist li {
 	background-position: 0 -1745px;
 }
 
+.toolbar a.button.download {
+	background-position: center -1906px;
+}
+
 a.menuselector {
 	display: inline-block;
 	border: 1px solid #ababab;
diff --git a/skins/larry/templates/messagepart.html b/skins/larry/templates/messagepart.html
index dbb4940de..a60210cb8 100644
--- a/skins/larry/templates/messagepart.html
+++ b/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>
+<div id="mainscreen">
 
-<br style="clear:both" />
+<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="mainscreen">
-
-<div id="partheader" class="uibox">
-<roundcube:object name="messagePartControls" class="headers-table" />
+<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>
diff --git a/skins/larry/ui.js b/skins/larry/ui.js
index a8572720b..7dc9b57b1 100644
--- a/skins/larry/ui.js
+++ b/skins/larry/ui.js
@@ -154,6 +154,10 @@ function rcube_mail_ui()
         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',