From 2355f5edf5c018d14e12731f51dcf98c550fd057 Mon Sep 17 00:00:00 2001 From: Hadi Nategh Date: Tue, 1 Mar 2016 17:00:28 +0000 Subject: [PATCH] Mobile theme W.I.P: - Implement view mode for mail - Improve performance for reading mails --- mail/inc/class.mail_ui.inc.php | 7 +- mail/js/app.js | 76 +++++++++++++++++--- mail/templates/mobile/app.css | 50 +++++++------ mail/templates/mobile/app.less | 128 ++++++++++++++++----------------- mail/templates/mobile/view.xet | 78 ++++++++++++++++++++ 5 files changed, 243 insertions(+), 96 deletions(-) create mode 100644 mail/templates/mobile/view.xet diff --git a/mail/inc/class.mail_ui.inc.php b/mail/inc/class.mail_ui.inc.php index 73519c17fa..e874d79893 100644 --- a/mail/inc/class.mail_ui.inc.php +++ b/mail/inc/class.mail_ui.inc.php @@ -721,6 +721,10 @@ class mail_ui // sending preview toolbar actions if ($content['mailSplitter']) $etpl->setElementAttribute('mailPreview[toolbar]', 'actions', $this->get_toolbar_actions()); + + // We need to send toolbar actions to client-side because view template needs them + if (html::$ua_mobile) $sel_options['toolbar'] = $this->get_toolbar_actions(); + //we use the category "filter" option as specifier where we want to search (quick, subject, from, to, etc. ....) if (empty($content[self::$nm_index]['cat_id']) || empty($content[self::$nm_index]['search'])) $content[self::$nm_index]['cat_id']=(emailadmin_imapbase::$supportsORinQuery[$this->mail_bo->profileID]?'quick':'subject'); $readonlys = $preserv = array(); @@ -909,9 +913,10 @@ class mail_ui 'caption' => lang('Open'), 'icon' => 'view', 'group' => ++$group, - 'onExecute' => 'javaScript:app.mail.mail_open', + 'onExecute' => html::$ua_mobile?'javaScript:app.mail.mobileView':'javaScript:app.mail.mail_open', 'allowOnMultiple' => false, 'default' => true, + 'mobileViewTemplate' => 'view.xet' ), 'reply' => array( 'caption' => 'Reply', diff --git a/mail/js/app.js b/mail/js/app.js index fab33d6229..8c24764192 100644 --- a/mail/js/app.js +++ b/mail/js/app.js @@ -157,7 +157,6 @@ app.classes.mail = AppJS.extend( case 'mail.sieve.vacation': this.vacationFilterStatusChange(); break; - case 'mail.mobile_index': case 'mail.index': var self = this; jQuery('iframe#mail-index_messageIFRAME').on('load', function() @@ -4257,12 +4256,12 @@ app.classes.mail = AppJS.extend( * Prepare display dialog for printing * copies iframe content to a DIV, as iframe causes * trouble for multipage printing - * + * @param {jQuery object} _iframe mail body iframe * @returns {undefined} */ - mail_prepare_print: function() + mail_prepare_print: function(_iframe) { - var mainIframe = jQuery('#mail-display_mailDisplayBodySrc'); + var $mainIframe = _iframe || jQuery('#mail-display_mailDisplayBodySrc'); var tmpPrintDiv = jQuery('#tempPrintDiv'); if (tmpPrintDiv.length == 0 && tmpPrintDiv.children()) @@ -4273,12 +4272,12 @@ app.classes.mail = AppJS.extend( var notAttached = true; } - if (mainIframe) + if ($mainIframe) { - tmpPrintDiv[0].innerHTML = mainIframe.contents().find('body').html(); + tmpPrintDiv[0].innerHTML = $mainIframe.contents().find('body').html(); } // Attach the element to the DOM after maniupulation - if (notAttached) jQuery('#mail-display_mailDisplayBodySrc').after(tmpPrintDiv); + if (notAttached) $mainIframe.after(tmpPrintDiv); tmpPrintDiv.find('#divAppboxHeader').remove(); }, @@ -5139,7 +5138,66 @@ app.classes.mail = AppJS.extend( }; et2_dialog.show_dialog(callbackDialog, this.egw.lang('Are you sure you want to delete all selected folders?'), this.egw.lang('Delete folder'), {}, et2_dialog.BUTTON_YES_NO, et2_dialog.WARNING_MESSAGE, undefined, egw); + }, + + /** + * Implement mobile view + * + * @param {type} _action + * @param {type} _sender + */ + mobileView: function(_action, _sender) + { + // app id in nm + var id = _sender[0].id; + var content = {}; + + if (id){ + content = egw.dataGetUIDdata(id); + content.data['toolbar'] = etemplate2.getByApplication('mail')[0].widgetContainer.getArrayMgr('sel_options').data.toolbar; + this.et2.setArrayMgr('content', content); + } + // set the current selected row + this.mail_currentlyFocussed = id; + + var self = this; + + this.viewEntry(_action, _sender, function(etemplate){ + // et2 object in view + var et2 = etemplate.widgetContainer; + // iframe to load message + var iframe = et2.getWidgetById('iframe'); + // toolbar widget + var toolbar = et2.getWidgetById('toolbar'); + // attachments details title DOM node + var $attachment = jQuery('.attachments span.et2_details_title'); + // details DOM + var $details = jQuery('.et2_details.details'); + // Content + var content = et2.getArrayMgr('content').data; + + if (content.attachmentsBlock.length>0 && content.attachmentsBlock[0].filename) + { + $attachment.text(content.attachmentsBlock.length+' '+ egw.lang('attachments')); + } + else + { + // disable attachments area if there's no attachments + $attachment.parent().hide(); + } + // disable the detials if there's no details + if (!content.ccaddress) $details.hide(); + + toolbar.set_actions(content.toolbar); + + // Request email body from server + iframe.set_src(egw.link('/index.php',{menuaction:'mail.mail_ui.loadEmailBody',_messageID:id})); + jQuery(iframe.getDOMNode()).on('load',function(){ + // Use prepare print function to copy iframe content into div + // as we don't want to show content in iframe. + self.mail_prepare_print(jQuery(this)); + }); + + }); } - - }); diff --git a/mail/templates/mobile/app.css b/mail/templates/mobile/app.css index 3ddd4d3572..abcdb44714 100644 --- a/mail/templates/mobile/app.css +++ b/mail/templates/mobile/app.css @@ -2499,6 +2499,9 @@ div.mailComposeHeaderSection > table { padding: 1px 8px 0 8px; background: none; } + body #popupMainDiv .mobile-view-editBtn { + display: none; + } body #popupMainDiv div.et2_toolbar.et2_head_toolbar { padding: 1px 5px 5px 10px !important; } @@ -2535,71 +2538,74 @@ div.mailComposeHeaderSection > table { body #popupMainDiv #mail-compose_composeToolbar button#composeToolbar-send:disabled { background-color: none; } - body #popupMainDiv #mail-display .mail-d-h1 { + body #popupMainDiv .mail-d-h1 { padding-bottom: 15px; border-bottom: 1px solid silver; font-size: 12pt; padding-top: 10px; font-weight: bold; } - body #popupMainDiv #mail-display .mail-d-h1 span { + body #popupMainDiv .mail-d-h1 span { font-size: 12pt; } - body #popupMainDiv #mail-display .mail-d-h2 { + body #popupMainDiv .mail-d-h2 { padding-top: 5px; font-size: 10pt; color: grey; } - body #popupMainDiv #mail-display .mail-d-h2 a, - body #popupMainDiv #mail-display .mail-d-h2 span, - body #popupMainDiv #mail-display .mail-d-h2 .et2_label { + body #popupMainDiv .mail-d-h2 a, + body #popupMainDiv .mail-d-h2 span, + body #popupMainDiv .mail-d-h2 .et2_label { color: grey; font-size: 10pt; } - body #popupMainDiv #mail-display .mail-d-h2 a#mail-display_FROM > * { + body #popupMainDiv .mail-d-h2 a#mail-display_FROM > * { color: black; padding-top: 15px; font-size: 12pt; } - body #popupMainDiv #mail-display .et2_details { - width: 50%; - display: inline-block; - } - body #popupMainDiv #mail-display .et2_details.et2_details_expanded { + body #popupMainDiv .et2_details { width: 100%; display: block; } - body #popupMainDiv #mail-display span.et2_details_title { + body #popupMainDiv .et2_details.et2_details_expanded { + width: 100%; + display: block; + } + body #popupMainDiv span.et2_details_title { color: #26537c; font-size: 10pt; } - body #popupMainDiv #mail-display div#mail-display_mailDisplayHeadersFrom > * { + body #popupMainDiv div#mail-display_mailDisplayHeadersFrom > * { color: black; padding-top: 15px; } - body #popupMainDiv #mail-display .mailDisplayAttachments { + body #popupMainDiv .mailDisplayAttachments { position: initial; padding: 0; margin-top: 10px; } - body #popupMainDiv #mail-display button[id="displayToolbar-delete"] { + body #popupMainDiv button[id="displayToolbar-delete"] { margin-left: 0; } - body #popupMainDiv #mail-display .mailDisplay { + body #popupMainDiv .mailDisplay { position: initial; margin-top: 20px; } - body #popupMainDiv #mail-display #mail-display_mailDisplayBodySrc { + body #popupMainDiv #mail-view_iframe { display: none; } - body #popupMainDiv #mail-display #tempPrintDiv div:first-child { + body #popupMainDiv #tempPrintDiv { + display: block; + } + body #popupMainDiv #tempPrintDiv div:first-child { height: auto !important; } - body #popupMainDiv #mail-display #tempPrintDiv td, - body #popupMainDiv #mail-display #tempPrintDiv textarea { + body #popupMainDiv #tempPrintDiv td, + body #popupMainDiv #tempPrintDiv textarea { font-family: Verdana, Arial, Helvetica, sans-serif; } - body #popupMainDiv #mail-display #tempPrintDiv .td_display { + body #popupMainDiv #tempPrintDiv .td_display { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 120%; color: black; diff --git a/mail/templates/mobile/app.less b/mail/templates/mobile/app.less index 03cbb253e7..b47c28ac85 100644 --- a/mail/templates/mobile/app.less +++ b/mail/templates/mobile/app.less @@ -39,6 +39,7 @@ padding: 1px 8px 0 8px; background: none; + .mobile-view-editBtn {display: none;} div.et2_toolbar.et2_head_toolbar { padding: 1px 5px 5px 10px !important; button { @@ -76,82 +77,81 @@ } - #mail-display{ - .mail-d-h1{ - padding-bottom: 15px; - border-bottom: 1px solid silver; - span { - .mob-fontsize-l; - } + + .mail-d-h1{ + padding-bottom: 15px; + border-bottom: 1px solid silver; + span { .mob-fontsize-l; - padding-top: 10px; - font-weight: bold; } - .mail-d-h2{ - padding-top: 5px; - .mob-fontsize-n; + .mob-fontsize-l; + padding-top: 10px; + font-weight: bold; + } + .mail-d-h2{ + padding-top: 5px; + .mob-fontsize-n; + color: grey; + a,span,.et2_label { color: grey; - a,span,.et2_label { - color: grey; - .mob-fontsize-n; - } - a#mail-display_FROM>* { - color:black; - padding-top: 15px; - .mob-fontsize-l; - } - + .mob-fontsize-n; } - .et2_details { - width: 50%; - display: inline-block; - } - .et2_details.et2_details_expanded { - width: 100%; - display: block; - } - span.et2_details_title { - color:#26537c; - .mob-fontsize-n; - } - div#mail-display_mailDisplayHeadersFrom>*, { + a#mail-display_FROM>* { color:black; padding-top: 15px; - } - .mailDisplayAttachments { - position: initial; - padding: 0; - margin-top: 10px; - } - button[id="displayToolbar-delete"] { - margin-left: 0; + .mob-fontsize-l; } - .mailDisplay { - position: initial; - margin-top: 20px; + } + .et2_details { + width: 100%; + display: block; + } + .et2_details.et2_details_expanded { + width: 100%; + display: block; + } + span.et2_details_title { + color:#26537c; + .mob-fontsize-n; } - #mail-display_mailDisplayBodySrc { - display: none; - } - #tempPrintDiv { - - div:first-child { - height:auto !important; - } - td, textarea { - font-family: Verdana, Arial, Helvetica, sans-serif; + div#mail-display_mailDisplayHeadersFrom>*, { + color:black; + padding-top: 15px; + } + .mailDisplayAttachments { + position: initial; + padding: 0; + margin-top: 10px; + } + button[id="displayToolbar-delete"] { + margin-left: 0; + } - } - .td_display { - font-family: Verdana, Arial, Helvetica, sans-serif; - font-size: 120%; - color: black; - background-color: #FFFFFF; - } + .mailDisplay { + position: initial; + margin-top: 20px; + } + #mail-view_iframe { + display: none; + } + #tempPrintDiv { + display:block; + div:first-child { + height:auto !important; } + td, textarea { + font-family: Verdana, Arial, Helvetica, sans-serif; + + } + .td_display { + font-family: Verdana, Arial, Helvetica, sans-serif; + font-size: 120%; + color: black; + background-color: #FFFFFF; + } + } - } } .dtree { diff --git a/mail/templates/mobile/view.xet b/mail/templates/mobile/view.xet new file mode 100644 index 0000000000..57f03ef8e9 --- /dev/null +++ b/mail/templates/mobile/view.xet @@ -0,0 +1,78 @@ + + + + +