Implement mobile template for mail index:

- Do not create Splitter for mobile template
- Fix extra_iframe for displaying sieve rules covers mail tree when it is display:none (eg.happens in idots)
- Improve mail app performance browsing with mobile device
This commit is contained in:
Hadi Nategh 2015-03-03 09:29:49 +00:00
commit da7840a580
5 changed files with 106 additions and 31 deletions

View File

@ -479,7 +479,7 @@ class mail_ui
$sel_options['filter2'] = $this->searchTypes; $sel_options['filter2'] = $this->searchTypes;
$sel_options['filter'] = $this->statusTypes; $sel_options['filter'] = $this->statusTypes;
$etpl = new etemplate_new('mail.index'); $etpl = new etemplate_new(html::$ua_mobile?'mail.mobile_index':'mail.index');
// Start at 2 so auto-added copy+paste actions show up as second group // Start at 2 so auto-added copy+paste actions show up as second group
// Needed because there's no 'select all' action to push things down // Needed because there's no 'select all' action to push things down
$group=2; $group=2;
@ -650,7 +650,7 @@ class mail_ui
$etpl->setElementAttribute(self::$nm_index.'[foldertree]','actions', $tree_actions); $etpl->setElementAttribute(self::$nm_index.'[foldertree]','actions', $tree_actions);
// sending preview toolbar actions // sending preview toolbar actions
$etpl->setElementAttribute('mailPreview[toolbar]', 'actions', $this->get_toolbar_actions()); if ($content['mailSplitter']) $etpl->setElementAttribute('mailPreview[toolbar]', 'actions', $this->get_toolbar_actions());
if (empty($content[self::$nm_index]['filter2']) || empty($content[self::$nm_index]['search'])) $content[self::$nm_index]['filter2']=(emailadmin_imapbase::$supportsORinQuery[$this->mail_bo->profileID]?'quick':'subject'); if (empty($content[self::$nm_index]['filter2']) || empty($content[self::$nm_index]['search'])) $content[self::$nm_index]['filter2']=(emailadmin_imapbase::$supportsORinQuery[$this->mail_bo->profileID]?'quick':'subject');
$readonlys = $preserv = array(); $readonlys = $preserv = array();

View File

@ -151,6 +151,7 @@ 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 nm = this.et2.getWidgetById(this.nm_index); var nm = this.et2.getWidgetById(this.nm_index);
this.mail_isMainWindow = true; this.mail_isMainWindow = true;
@ -602,6 +603,7 @@ app.classes.mail = AppJS.extend(
*/ */
mail_disablePreviewArea: function(_value) { mail_disablePreviewArea: function(_value) {
var splitter = this.et2.getWidgetById('mailSplitter'); var splitter = this.et2.getWidgetById('mailSplitter');
// return if there's no splitter we maybe in mobile mode
if (typeof splitter == 'undefined' || splitter == null) return; if (typeof splitter == 'undefined' || splitter == null) return;
var splitterDN = splitter.getDOMNode(); var splitterDN = splitter.getDOMNode();
@ -616,7 +618,7 @@ app.classes.mail = AppJS.extend(
//this.et2.getWidgetById('mailPreviewHeadersSubject').set_disabled(_value); //this.et2.getWidgetById('mailPreviewHeadersSubject').set_disabled(_value);
this.et2.getWidgetById('mailPreview').set_disabled(_value); this.et2.getWidgetById('mailPreview').set_disabled(_value);
//Dock the splitter always if we are browsing with mobile //Dock the splitter always if we are browsing with mobile
if (_value==true || egwIsMobile()) if (_value==true)
{ {
if (this.mail_previewAreaActive) splitter.dock(); if (this.mail_previewAreaActive) splitter.dock();
this.mail_previewAreaActive = false; this.mail_previewAreaActive = false;
@ -803,11 +805,15 @@ app.classes.mail = AppJS.extend(
else else
{ {
// Leave if we're here and there is nothing selected, too many, or no data // Leave if we're here and there is nothing selected, too many, or no data
this.et2.getWidgetById('previewAttachmentArea').set_value({content:[]}); var prevAttchArea = this.et2.getWidgetById('previewAttachmentArea');
this.et2.getWidgetById('previewAttachmentArea').set_class('previewAttachmentArea noContent mail_DisplayNone'); if (prevAttchArea)
var IframeHandle = this.et2.getWidgetById('messageIFRAME'); {
IframeHandle.set_src('about:blank'); prevAttchArea.set_value({content:[]});
this.mail_disablePreviewArea(true); this.et2.getWidgetById('previewAttachmentArea').set_class('previewAttachmentArea noContent mail_DisplayNone');
var IframeHandle = this.et2.getWidgetById('messageIFRAME');
IframeHandle.set_src('about:blank');
this.mail_disablePreviewArea(true);
}
return; return;
} }
@ -888,27 +894,6 @@ app.classes.mail = AppJS.extend(
} }
egw.jsonq('mail.mail_ui.ajax_flagMessages',['read', messages, false]); egw.jsonq('mail.mail_ui.ajax_flagMessages',['read', messages, false]);
} }
// Pre-load next email already so user gets it faster
// Browser will cache the file for us
/*
var fO = egw_getObjectManager('mail',false,1).getObjectById(this.nm_index).getFocusedObject();
var next = false;
if (fO) next = fO.getNext(1);
// Stop until we get all the details worked out - server marks as seen automatically
if(false && next && next.id)
{
if(this.preview_preload.timer != null)
{
window.clearTimeout(this.preview_preload.timer);
}
// Wait 0.5s to avoid flooding server if user is scrolling through their mail
this.preview_preload.timer = window.setTimeout( jQuery.proxy(function() {
this.preview_preload.request = jQuery.get(
egw.link('/index.php',{menuaction:'mail.mail_ui.loadEmailBody',_messageID:next.id})
);
},this),500);
}
*/
}, },
/** /**
@ -3492,18 +3477,39 @@ app.classes.mail = AppJS.extend(
var mailSplitter = this.et2.getWidgetById('mailSplitter'); var mailSplitter = this.et2.getWidgetById('mailSplitter');
var quotaipercent = this.et2.getWidgetById('nm[quotainpercent]'); var quotaipercent = this.et2.getWidgetById('nm[quotainpercent]');
var iframe = _iFrame || this.et2.getWidgetById('extra_iframe'); var iframe = _iFrame || this.et2.getWidgetById('extra_iframe');
if (typeof iframe != 'undefined') if (typeof iframe != 'undefined' && iframe)
{ {
if (_url) if (_url)
{ {
iframe.set_src(_url); iframe.set_src(_url);
} }
if (typeof mailSplitter != 'undefined' && typeof quotaipercent != 'undefined') if (typeof mailSplitter != 'undefined' && mailSplitter && typeof quotaipercent != 'undefined')
{ {
mailSplitter.set_disabled(!!_url); mailSplitter.set_disabled(!!_url);
quotaipercent.set_disabled(!!_url); quotaipercent.set_disabled(!!_url);
iframe.set_disabled(!_url); iframe.set_disabled(!_url);
} }
else if (iframe.id == "extra_iframe")
{
if (egwIsMobile())
{
var nm = this.et2.getWidgetById(this.nm_index);
nm.set_disabled(!!_url)
iframe.set_disabled(!_url);
}
// Set extra_iframe a class with height and width
// and position relative, seems iframe display none
// with 100% height/width covers mail tree and block
// therefore block the click handling
if (!iframe.disabled)
{
iframe.set_class('mail-index-extra-iframe');
}
else
{
iframe.set_class('');
}
}
return true; return true;
} }
return false; return false;

View File

@ -876,3 +876,10 @@ div.mail-compose_toolbar_assist div.mail-compose_fileselector, #mail-compose_sel
div.mailComposeHeaderSection>table { div.mailComposeHeaderSection>table {
padding-top: 35px; padding-top: 35px;
} }
.mail-index-extra-iframe {
position: relative;
z-index: 999;
width:100%;
height:100%;
}

View File

@ -0,0 +1,56 @@
<?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.mobile_index.rows" template="" lang="" group="0" version="1.9.001">
<grid width="100%">
<columns>
<column width="25"/>
<column width="20"/>
<column width="20"/>
<column width="40%"/>
<column width="95"/>
<column width="30%"/>
<column width="30%"/>
<column width="30%"/>
<column width="80"/>
</columns>
<rows>
<row class="th">
<nextmatch-sortheader label="ID" id="uid" readonly="true"/>
<nextmatch-header statustext="Status" label="St." id="status"/>
<nextmatch-header statustext="attachments, ..." label="..." id="attachments"/>
<nextmatch-sortheader label="subject" id="subject"/>
<nextmatch-sortheader align="center" label="date" id="date" sortmode="DESC"/>
<nextmatch-sortheader label="mail-address" id="address"/>
<nextmatch-sortheader label="to" id="toaddress"/>
<nextmatch-sortheader label="from" id="fromaddress"/>
<nextmatch-sortheader align="center" label="size" id="size"/>
</row>
<row class="$row_cont[class]">
<description id="${row}[uid]" no_lang="1" readonly="true"/>
<description span="1" class="status_img"/>
<html id="${row}[attachments]"/>
<description id="${row}[subject]" no_lang="1"/>
<date-time_today align="center" id="${row}[date]" readonly="true"/>
<url-email id="${row}[address]" contact_plus = "true" readonly="true"/>
<url-email id="${row}[toaddress]" contact_plus = "true" readonly="true"/>
<url-email id="${row}[fromaddress]" contact_plus = "true" readonly="true"/>
<vfs-size align="right" id="${row}[size]" no_lang="1" readonly="true"/>
</row>
</rows>
</grid>
</template>
<template id="mail.mobile_index" template="" lang="" group="0" version="1.9.001">
<tree autoloading="mail.mail_ui.ajax_foldertree" id="nm[foldertree]" onclick="app.mail.mail_changeFolder" parent_node="mail-tree_target"/>
<html id="msg"/>
<buttononly id="button[mailcreate]" onclick="app.mail.mail_compose(false);" label="Compose" parent_node="mail-index_buttonmailcreate"/>
<hbox class="mail-index_quotabox"><progress id="nm[quotainpercent]" label="@nm[quota]" class="@nm[quotaclass]"/></hbox>
<hbox class="mail-index_vacation"><vbox>
<description id="nm[vacationnotice]" class="@nm[vacationclass]"/>
<description id="nm[vacationrange]" class="@nm[vacationrangeclass]"/></vbox>
</hbox>
<nextmatch id="nm" onselect="app.mail.mail_preview" template="mail.mobile_index.rows"/>
<iframe frameborder="1" id="extra_iframe" scrolling="auto" disabled="true"/>
</template>
</overlay>

View File

@ -865,6 +865,12 @@ div.mail-compose_toolbar_assist {
div.mailComposeHeaderSection > table { div.mailComposeHeaderSection > table {
padding-top: 35px; padding-top: 35px;
} }
.mail-index-extra-iframe {
position: relative;
z-index: 999;
width: 100%;
height: 100%;
}
#popupMainDiv { #popupMainDiv {
padding: 5px; padding: 5px;
} }