extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-12-22 14:41:29 +01:00
Code Issues Packages Projects Releases Wiki Activity

Mobile theme W.I.P:

Browse Source 
- Implement view mode for mail
- Improve performance for reading mails
This commit is contained in:
Hadi Nategh 2016-03-01 17:00:28 +00:00
parent 3a9c0c237b
commit 2355f5edf5
5 changed files with 243 additions and 96 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
mail/inc/class.mail_ui.inc.php
View File

@ -721,6 +721,10 @@ class mail_ui
// sending preview toolbar actions // sending preview toolbar actions
if ($content['mailSplitter']) $etpl->setElementAttribute('mailPreview[toolbar]', 'actions', $this->get_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. ....) //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'); 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(); $readonlys = $preserv = array();
@ -909,9 +913,10 @@ class mail_ui
'caption' => lang('Open'), 'caption' => lang('Open'),
'icon' => 'view', 'icon' => 'view',
'group' => ++$group, 'group' => ++$group,
'onExecute' => 'javaScript:app.mail.mail_open', 'onExecute' => html::$ua_mobile?'javaScript:app.mail.mobileView':'javaScript:app.mail.mail_open',
'allowOnMultiple' => false, 'allowOnMultiple' => false,
'default' => true, 'default' => true,
'mobileViewTemplate' => 'view.xet'
), ),
'reply' => array( 'reply' => array(
'caption' => 'Reply', 'caption' => 'Reply',

76
mail/js/app.js
View File

@ -157,7 +157,6 @@ app.classes.mail = AppJS.extend(
case 'mail.sieve.vacation': case 'mail.sieve.vacation':
this.vacationFilterStatusChange(); this.vacationFilterStatusChange();
break; break;
case 'mail.mobile_index':
case 'mail.index': case 'mail.index':
var self = this; var self = this;
jQuery('iframe#mail-index_messageIFRAME').on('load', function() jQuery('iframe#mail-index_messageIFRAME').on('load', function()
@ -4257,12 +4256,12 @@ app.classes.mail = AppJS.extend(
* Prepare display dialog for printing * Prepare display dialog for printing
* copies iframe content to a DIV, as iframe causes * copies iframe content to a DIV, as iframe causes
* trouble for multipage printing * trouble for multipage printing
* * @param {jQuery object} _iframe mail body iframe
* @returns {undefined} * @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'); var tmpPrintDiv = jQuery('#tempPrintDiv');
if (tmpPrintDiv.length == 0 && tmpPrintDiv.children()) if (tmpPrintDiv.length == 0 && tmpPrintDiv.children())
@ -4273,12 +4272,12 @@ app.classes.mail = AppJS.extend(
var notAttached = true; 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 // 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(); 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.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); 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));
});
});
} }
}); });

50
mail/templates/mobile/app.css
View File

@ -2499,6 +2499,9 @@ div.mailComposeHeaderSection > table {
padding: 1px 8px 0 8px; padding: 1px 8px 0 8px;
background: none; background: none;
} }
body #popupMainDiv .mobile-view-editBtn {
display: none;
}
body #popupMainDiv div.et2_toolbar.et2_head_toolbar { body #popupMainDiv div.et2_toolbar.et2_head_toolbar {
padding: 1px 5px 5px 10px !important; padding: 1px 5px 5px 10px !important;
} }
@ -2535,71 +2538,74 @@ div.mailComposeHeaderSection > table {
body #popupMainDiv #mail-compose_composeToolbar button#composeToolbar-send:disabled { body #popupMainDiv #mail-compose_composeToolbar button#composeToolbar-send:disabled {
background-color: none; background-color: none;
} }
body #popupMainDiv #mail-display .mail-d-h1 { body #popupMainDiv .mail-d-h1 {
padding-bottom: 15px; padding-bottom: 15px;
border-bottom: 1px solid silver; border-bottom: 1px solid silver;
font-size: 12pt; font-size: 12pt;
padding-top: 10px; padding-top: 10px;
font-weight: bold; font-weight: bold;
} }
body #popupMainDiv #mail-display .mail-d-h1 span { body #popupMainDiv .mail-d-h1 span {
font-size: 12pt; font-size: 12pt;
} }
body #popupMainDiv #mail-display .mail-d-h2 { body #popupMainDiv .mail-d-h2 {
padding-top: 5px; padding-top: 5px;
font-size: 10pt; font-size: 10pt;
color: grey; color: grey;
} }
body #popupMainDiv #mail-display .mail-d-h2 a, body #popupMainDiv .mail-d-h2 a,
body #popupMainDiv #mail-display .mail-d-h2 span, body #popupMainDiv .mail-d-h2 span,
body #popupMainDiv #mail-display .mail-d-h2 .et2_label { body #popupMainDiv .mail-d-h2 .et2_label {
color: grey; color: grey;
font-size: 10pt; 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; color: black;
padding-top: 15px; padding-top: 15px;
font-size: 12pt; font-size: 12pt;
} }
body #popupMainDiv #mail-display .et2_details { body #popupMainDiv .et2_details {
width: 50%;
display: inline-block;
}
body #popupMainDiv #mail-display .et2_details.et2_details_expanded {
width: 100%; width: 100%;
display: block; 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; color: #26537c;
font-size: 10pt; font-size: 10pt;
} }
body #popupMainDiv #mail-display div#mail-display_mailDisplayHeadersFrom > * { body #popupMainDiv div#mail-display_mailDisplayHeadersFrom > * {
color: black; color: black;
padding-top: 15px; padding-top: 15px;
} }
body #popupMainDiv #mail-display .mailDisplayAttachments { body #popupMainDiv .mailDisplayAttachments {
position: initial; position: initial;
padding: 0; padding: 0;
margin-top: 10px; margin-top: 10px;
} }
body #popupMainDiv #mail-display button[id="displayToolbar-delete"] { body #popupMainDiv button[id="displayToolbar-delete"] {
margin-left: 0; margin-left: 0;
} }
body #popupMainDiv #mail-display .mailDisplay { body #popupMainDiv .mailDisplay {
position: initial; position: initial;
margin-top: 20px; margin-top: 20px;
} }
body #popupMainDiv #mail-display #mail-display_mailDisplayBodySrc { body #popupMainDiv #mail-view_iframe {
display: none; display: none;
} }
body #popupMainDiv #mail-display #tempPrintDiv div:first-child { body #popupMainDiv #tempPrintDiv {
display: block;
}
body #popupMainDiv #tempPrintDiv div:first-child {
height: auto !important; height: auto !important;
} }
body #popupMainDiv #mail-display #tempPrintDiv td, body #popupMainDiv #tempPrintDiv td,
body #popupMainDiv #mail-display #tempPrintDiv textarea { body #popupMainDiv #tempPrintDiv textarea {
font-family: Verdana, Arial, Helvetica, sans-serif; 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-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 120%; font-size: 120%;
color: black; color: black;

136
mail/templates/mobile/app.less
View File

@ -39,6 +39,7 @@
padding: 1px 8px 0 8px; padding: 1px 8px 0 8px;
background: none; background: none;
.mobile-view-editBtn {display: none;}
div.et2_toolbar.et2_head_toolbar { div.et2_toolbar.et2_head_toolbar {
padding: 1px 5px 5px 10px !important; padding: 1px 5px 5px 10px !important;
button { button {
@ -76,82 +77,81 @@
} }
#mail-display{
.mail-d-h1{
padding-bottom: 15px;
border-bottom: 1px solid silver;
span {
.mob-fontsize-l;
}
.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;
.mob-fontsize-n;
}
a#mail-display_FROM>* {
color:black;
padding-top: 15px;
.mob-fontsize-l;
}
.mail-d-h1{
padding-bottom: 15px;
border-bottom: 1px solid silver;
span {
.mob-fontsize-l;
} }
.et2_details { .mob-fontsize-l;
width: 50%; padding-top: 10px;
display: inline-block; font-weight: bold;
}
.mail-d-h2{
padding-top: 5px;
.mob-fontsize-n;
color: grey;
a,span,.et2_label {
color: grey;
.mob-fontsize-n;
} }
.et2_details.et2_details_expanded { a#mail-display_FROM>* {
width: 100%;
display: block;
}
span.et2_details_title {
color:#26537c;
.mob-fontsize-n;
}
div#mail-display_mailDisplayHeadersFrom>*, {
color:black; color:black;
padding-top: 15px; padding-top: 15px;
} .mob-fontsize-l;
.mailDisplayAttachments {
position: initial;
padding: 0;
margin-top: 10px;
}
button[id="displayToolbar-delete"] {
margin-left: 0;
}
.mailDisplay {
position: initial;
margin-top: 20px;
}
#mail-display_mailDisplayBodySrc {
display: none;
}
#tempPrintDiv {
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;
}
} }
} }
.et2_details {
width: 100%;
display: block;
}
.et2_details.et2_details_expanded {
width: 100%;
display: block;
}
span.et2_details_title {
color:#26537c;
.mob-fontsize-n;
}
div#mail-display_mailDisplayHeadersFrom>*, {
color:black;
padding-top: 15px;
}
.mailDisplayAttachments {
position: initial;
padding: 0;
margin-top: 10px;
}
button[id="displayToolbar-delete"] {
margin-left: 0;
}
.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 { .dtree {

78
mail/templates/mobile/view.xet Normal file
View File

@ -0,0 +1,78 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE overlay PUBLIC "-//Stylite AG//eTemplate 2//EN" "http://www.egroupware.org/etemplate2.dtd">
<!-- $Id$ -->
<overlay>
<template id="mail.view" template="" lang="" group="0" version="1.9.001">
<vbox width="100%">
<hbox class="dialogHeadbar">
<hbox>
<toolbar id="toolbar" class="et2_head_toolbar" width="100%" view_range="1" flat_list="true"/>
<description/>
</hbox>
</hbox>
<hbox class="mail-d-h1" width="100%">
<description align="left" id="subject" no_lang="1" readonly="true"/>
</hbox>
<hbox class="mail-d-h2" disabled="!@fromaddress" width="100%">
<url-email id="fromaddress" readonly="true"/>
</hbox>
<hbox class="mail-d-h2" align="right" width="100%">
<date-time id="date" readonly="true"/>
</hbox>
<hbox class="mail-d-h2" disabled="!@toaddress" width="100%">
<description value="To"/>
<url-email id="toaddress" readonly="true"/>
</hbox>
<hbox>
<details class="details" title="show details" toggle_align="left">
<hbox class="mail-d-h2" disabled="!@ccaddress" width="100%">
<description value="Cc"/>
<grid id="ccaddress">
<columns>
<column/>
</columns>
<rows>
<row>
<url-email id="${row}"/>
</row>
</rows>
</grid>
</hbox>
</details>
<details title="show attachments" toggle_align="left" class="attachments">
<grid disabled="@no_griddata" id="attachmentsBlock" class="previewAttachmentArea egwGridView_grid">
<columns>
<column disabled="!@showtempname"/>
<column disabled="!@showtempname"/>
<column disabled="!@showtempname"/>
<column disabled="!@showtempname"/>
<column width="70%" />
<column width="11%" />
<column width="3%"/>
<column width="3%"/>
<column width="3%"/>
<column />
</columns>
<rows>
<row class="row attachmentRow">
<description id="${row}[attachment_number]" />
<description id="${row}[partID]" />
<description id="${row}[type]" />
<description id="${row}[winmailFlag]" />
<description class="et2_link useEllipsis" id="${row}[filename]" no_lang="1" expose_view="true" mime="$row_cont[type]" mime_data="$row_cont[mime_data]" href="$row_cont[mime_url]"/>
<description align="right" id="${row}[size]"/>
<buttononly id="${row}[save]" image="fileexport" onclick="app.mail.saveAttachment"/>
<buttononly id="${row}[saveAsVFS]" image="filemanager/navbar" onclick="app.mail.saveAttachmentToVFS"/>
<buttononly class="$row_cont[classSaveAllPossiblyDisabled]" id="${row}[save_all]" image="mail/save_all" onclick="app.mail.saveAllAttachmentsToVFS"/>
<buttononly class="$row_cont[classSaveAllPossiblyDisabled]" id="${row}[save_zip]" image="mail/save_zip" onclick="app.mail.saveAllAttachmentsToZip" label="Save as Zip"/>
</row>
</rows>
</grid>
</details>
</hbox>
<box>
<iframe id="iframe" width="100%" height="100%" scrolling="auto"/>
</box>
</vbox>
</template>
</overlay>