extern/egroupware_official
1
0
Fork 0
mirror of https://github.com/EGroupware/egroupware.git synced 2024-12-31 11:09:04 +01:00
Code Issues Packages Projects Releases Wiki Activity

WIP mail list and preview styling

Browse Source
This commit is contained in:
Hadi Nategh 2022-07-22 15:08:23 +02:00
parent e90ae88a20
commit 862d355e77
6 changed files with 361 additions and 358 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1160,7 +1160,7 @@ class mail_ui
'caption' => lang('Open'), 'caption' => lang('Open'),
'icon' => 'view', 'icon' => 'view',
'group' => ++$group, 'group' => ++$group,
'onExecute' => Api\Header\UserAgent::mobile()?'javaScript:app.mail.mobileView':'javaScript:app.mail.mail_open', 'onExecute' => Api\Header\UserAgent::mobile()?'javaScript:app.mail.mobileView':'javaScript:app.mail.mobileView',
'allowOnMultiple' => false, 'allowOnMultiple' => false,
'default' => true, 'default' => true,
'mobileViewTemplate' => 'view?'.filemtime(Api\Etemplate\Widget\Template::rel2path('/mail/templates/mobile/view.xet')) 'mobileViewTemplate' => 'view?'.filemtime(Api\Etemplate\Widget\Template::rel2path('/mail/templates/mobile/view.xet'))
@ -2113,6 +2113,18 @@ $filter['before']= date("d-M-Y", $cutoffdate2);
if (($header['mdnsent']||$header['mdnnotsent']|$header['seen'])&&isset($data['dispositionnotificationto'])) unset($data['dispositionnotificationto']); if (($header['mdnsent']||$header['mdnnotsent']|$header['seen'])&&isset($data['dispositionnotificationto'])) unset($data['dispositionnotificationto']);
$data['attachmentsBlock'] = $imageHTMLBlock; $data['attachmentsBlock'] = $imageHTMLBlock;
$data['address'] = ($_folderType?$data["toaddress"]:$data["fromaddress"]); $data['address'] = ($_folderType?$data["toaddress"]:$data["fromaddress"]);
$email = Mail::stripRFC822Addresses(array($data['address']));
$contact = $GLOBALS['egw']->contacts->search(
array('contact_email' => $email[0], 'contact_email_home' => $email[0]),
array('contact_id', 'email', 'email_home', 'n_fn'),
'', '', '', false, 'OR', false
);
if (!empty($contact))
{
$data['avatar'] = $contact[0]['photo'];
}
if (in_array("bodypreview", $cols)&&$header['bodypreview']) if (in_array("bodypreview", $cols)&&$header['bodypreview'])
{ {
$data["bodypreview"] = $header['bodypreview']; $data["bodypreview"] = $header['bodypreview'];

279
mail/js/app.js
View File

@ -997,113 +997,6 @@ app.classes.mail = AppJS.extend(
} }
}, },
/**
* Create an expand on click box
*
* @param {object} _expContent an object with at least these elements
* {build_children, data_one, data, widget, line}
*
* @param {object} _dataElem includes data of the widget which need to be expand
* @param {object} _et2 widget container of relevant template, default is this.et2
*
* @return _dataElem content of widgets
*/
url_email_expandOnClick: function (_expContent, _dataElem, _et2)
{
var et2 = _et2 || this.et2;
for(var j = 0; j < _expContent.length; j++)
{
var field = _expContent[j] || [];
var content = _dataElem.data[field.data] || [];
// Add in single address, if there
if(typeof field.data_one != 'undefined' && field.data != field.data_one)
{
if (jQuery.isArray(_dataElem.data[field.data_one]))
content = content.concat(_dataElem.data[field.data_one]);
else
content.unshift(_dataElem.data[field.data_one]);
// Unique
content = content.filter(function(value, index, self) {
return self.indexOf(value) === index;
});
}
// Disable whole box if there are none
var line = et2.getWidgetById(field.line);
if(line != null) line.set_disabled(content.length == 0);
var widget = et2.getWidgetById(field.widget);
if(widget == null) continue;
jQuery(widget.getDOMNode()).removeClass('visible');
// Programatically build the child elements
if(field.build_children)
{
// Remove any existing
var children = widget.getChildren();
for(var i = children.length-1; i >= 0; i--)
{
children[i].destroy();
widget.removeChild(children[i]);
}
if (content.length == 1 && typeof content[0] != 'undefined' && content[0])
{
content = content[0].split(',');
}
// Add for current record
var remembervalue = '';
for(var i = 0; i < content.length; i++)
{
if (typeof content[i] != 'string' || !content[i]) continue;
// if there is no @ in string, its most likely that we have a comma in the personal name part of the emailaddress
if (content[i].indexOf('@')< 0)
{
remembervalue = content[i];
}
else
{
var value = remembervalue+(remembervalue?',':'')+content[i];
var url_email_options = {
id: widget.id + '_' + i,
value: value,
readonly: true,
contact_plus: true,
full_email: typeof field['full_email'] != 'undefined' ? field['full_email'] : true
};
var email = et2_createWidget('url-email', url_email_options, widget);
email.loadingFinished();
remembervalue = '';
}
}
}
else if (widget instanceof Et2SelectEmail)
{
widget.value = content;
}
else
{
widget.set_value({content: content});
}
// Show or hide button, as needed
line.iterateOver(function(button) {
// Avoid binding to any child buttons
if(button.getParent() != line) return;
button.set_disabled(
// Disable if only 1 address
content.length <=1 || (
// Disable if all content is visible
jQuery(widget.getDOMNode()).innerWidth() >= widget.getDOMNode().scrollWidth &&
jQuery(widget.getDOMNode()).innerHeight() >= widget.getDOMNode().scrollHeight)
);
},this,et2_button);
}
return _dataElem;
},
/** /**
* Set values for mail dispaly From,Sender,To,Cc, and Bcc * Set values for mail dispaly From,Sender,To,Cc, and Bcc
* Additionally, apply expand on click feature on thier widgets * Additionally, apply expand on click feature on thier widgets
@ -1113,19 +1006,11 @@ app.classes.mail = AppJS.extend(
{ {
var dataElem = {data:{FROM:"",SENDER:"",TO:"",CC:"",BCC:""}}; var dataElem = {data:{FROM:"",SENDER:"",TO:"",CC:"",BCC:""}};
var content = this.et2.getArrayMgr('content').data; var content = this.et2.getArrayMgr('content').data;
var expand_content = [
{build_children: false, data_one: 'FROM', data: 'FROM', widget: 'FROM', line: 'mailDisplayHeadersFrom', full_email: false},
{build_children: false, data: 'SENDER', widget: 'SENDER', line: 'mailDisplayHeadersSender'},
{build_children: false, data: 'TO', widget: 'TO', line: 'mailDisplayHeadersTo'},
{build_children: false, data: 'CC', widget: 'CC', line: 'mailDisplayHeadersCc'},
{build_children: false, data: 'BCC', widget: 'BCC', line: 'mailDisplayHeadersBcc'}
];
if (typeof content != 'undefiend') if (typeof content != 'undefiend')
{ {
dataElem.data = jQuery.extend(dataElem.data, content); dataElem.data = jQuery.extend(dataElem.data, content);
this.url_email_expandOnClick(expand_content, dataElem);
var toolbaractions = ((typeof dataElem != 'undefined' && typeof dataElem.data != 'undefined' && typeof dataElem.data.displayToolbaractions != 'undefined')?JSON.parse(dataElem.data.displayToolbaractions):undefined); var toolbaractions = ((typeof dataElem != 'undefined' && typeof dataElem.data != 'undefined' && typeof dataElem.data.displayToolbaractions != 'undefined')?JSON.parse(dataElem.data.displayToolbaractions):undefined);
if (toolbaractions) this.et2.getWidgetById('displayToolbar').set_actions(toolbaractions); if (toolbaractions) this.et2.getWidgetById('displayToolbar').set_actions(toolbaractions);
} }
@ -1138,136 +1023,66 @@ app.classes.mail = AppJS.extend(
* @param selected Array Selected row IDs. May be empty if user unselected all rows. * @param selected Array Selected row IDs. May be empty if user unselected all rows.
*/ */
mail_preview: function(selected, nextmatch) { mail_preview: function(selected, nextmatch) {
// Empty values, just in case selected is empty (user cleared selection) let data = {};
//dataElem.data is populated, when available with fromaddress(string),toaddress(string),additionaltoaddress(array),ccaddress (array) let rowId = '';
var dataElem = {data:{subject:"",fromaddress:"",toaddress:"",ccaddress:"",date:"",attachmentsBlock:""}}; let attachmentsBlock = this.et2.getWidgetById('attachmentsBlock');
var attachmentArea = this.et2.getWidgetById('previewAttachmentArea'); let mailPreview = this.et2.getWidgetById('mailPreview');
if(typeof selected != 'undefined' && selected.length == 1) if(typeof selected != 'undefined' && selected.length == 1)
{ {
var _id = this.mail_fetchCurrentlyFocussed(selected); rowId = this.mail_fetchCurrentlyFocussed(selected);
dataElem = jQuery.extend(dataElem, egw.dataGetUIDdata(_id)); data = egw.dataGetUIDdata(rowId).data;
// Try to resolve winmail.data attachment // Try to resolve winmail.data attachment
if (dataElem.data && dataElem.data.attachmentsBlock[0] if (data && data.attachmentsBlock[0]
&& dataElem.data.attachmentsBlock[0].winmailFlag && data.attachmentsBlock[0].winmailFlag
&& (dataElem.data.attachmentsBlock[0].mimetype =='application/ms-tnef' || && (data.attachmentsBlock[0].mimetype =='application/ms-tnef' ||
dataElem.data.attachmentsBlock[0].filename == "winmail.dat")) data.attachmentsBlock[0].filename == "winmail.dat"))
{ {
attachmentArea.getDOMNode().classList.add('loading'); attachmentsBlock.getDOMNode().classList.add('loading');
this.egw.jsonq('mail.mail_ui.ajax_resolveWinmail',[_id], jQuery.proxy(function(_data){ this.egw.jsonq('mail.mail_ui.ajax_resolveWinmail',[rowId], jQuery.proxy(function(_data){
attachmentArea.getDOMNode().classList.remove('loading'); attachmentsBlock.getDOMNode().classList.remove('loading');
if (typeof _data == 'object') if (typeof _data == 'object')
{ {
attachmentArea.set_value({content:_data}); data.attachmentsBlock = _data;
data.attachmentsBlockTitle = `${_data.lenght} attachments`;
this.data.attachmentsBlock = _data;
// Update client cache to avoid resolving winmail.dat attachment again // Update client cache to avoid resolving winmail.dat attachment again
egw.dataStoreUID(this.data.uid, this.data); egw.dataStoreUID(this.data.uid, this.data);
mailPreview.set_value({content:data});
set_prev_iframe_top();
} }
else else
{ {
console.log('Can not resolve the winmail.data!'); console.log('Can not resolve the winmail.data!');
} }
},dataElem)); },data));
} }
} }
var $preview_iframe = jQuery('#mail-index_mailPreviewContainer'); if (data.toaddress||data.fromaddress)
// Re calculate the position of preview iframe according to its visible sibilings
var set_prev_iframe_top = function ()
{ {
// Need to make sure that the iframe is fullyLoad before calculation data.additionaltoaddress = (data.additionaltoaddress??[]).concat(data.toaddress);
window.setTimeout(function(){ data.additionalfromaddress = (data.additionalfromaddress??[]).concat(data.fromaddress);
var lastEl = $preview_iframe.prev();
// Top offset of preview iframe calculated from top level
var iframeTop = $preview_iframe.offset().top;
while (lastEl.css('display') === "none")
{
lastEl = lastEl.prev();
}
var offset = iframeTop - (lastEl.offset().top + lastEl.height()) || 130; // fallback to 130 px if can not calculate new top
// preview iframe parent has position absolute, therefore need to calculate the top via position
$preview_iframe.css ('top', $preview_iframe.position().top - offset + 10);
}, 50);
};
// Show / hide 'Select something' in preview
var blank = this.et2.getWidgetById('blank');
if(blank)
{
blank.set_disabled(true);
} }
if (attachmentArea && typeof _id != 'undefined' && _id !='' && typeof dataElem !== 'undefined')
{ if (data.attachmentsBlock) data.attachmentsBlockTitle = `${data.attachmentsBlock.length} attachments`;
// If there is content to show recalculate the size mailPreview.set_value({content:data});
set_prev_iframe_top();
} if (selected.length>1)
else if (this.getPreviewPaneState())
{
if(blank)
{
blank.set_disabled(false);
}
this.mail_disablePreviewArea(false);
if (!egwIsMobile())return;
}
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
var prevAttchArea = this.et2.getWidgetById('previewAttachmentArea'); if (attachmentsBlock)
if (prevAttchArea)
{ {
prevAttchArea.set_value({content:[]}); attachmentsBlock.set_value({content:[]});
this.et2.getWidgetById('previewAttachmentArea').set_class('previewAttachmentArea noContent mail_DisplayNone'); attachmentsBlock.set_class('previewAttachmentArea noContent mail_DisplayNone');
var IframeHandle = this.et2.getWidgetById('messageIFRAME'); var IframeHandle = this.et2.getWidgetById('messageIFRAME');
IframeHandle.set_src('about:blank'); IframeHandle.set_src('about:blank');
this.mail_disablePreviewArea(true); this.mail_disablePreviewArea(true);
} }
if (!egwIsMobile())return; if (!egwIsMobile())return;
} }
// Not applied to mobile preview // Not applied to mobile preview
if (!egwIsMobile()) if (!egwIsMobile())
{ {
var smimeSigBtn = this.et2.getWidgetById('previewSmimeSigBtn');
if (smimeSigBtn) smimeSigBtn.set_disabled(dataElem.data['smimeSigUrl']?false:true);
// Widget ID:data key map of widgets we can directly set from cached data
var data_widgets = {
'previewDate': 'date',
'previewSubject': 'subject'
};
// Set widget values from cached data
for(var id in data_widgets)
{
var widget = this.et2.getWidgetById(id);
if(widget == null) continue;
widget.set_value(dataElem.data[data_widgets[id]] || "");
}
var smime_widgets = ['smime_signature', 'smime_encryption'];
for (var i in smime_widgets)
{
var widget = this.et2.getWidgetById(smime_widgets[i]);
switch (smime_widgets[i])
{
case 'smime_signature':
widget.set_disabled(!(dataElem.data.smime == 'smime_sign'));
break;
case 'smime_encryption':
widget.set_disabled(!(dataElem.data.smime == 'smime_encrypt'));
break;
default:
widget.set_disabled(true);
}
this.smime_clear_flags([jQuery(widget.getDOMNode())]);
}
this.smime_clear_flags([jQuery('#mail-index_mailPreviewContainer')]);
// Blank first, so we don't show previous email while loading // Blank first, so we don't show previous email while loading
var IframeHandle = this.et2.getWidgetById('messageIFRAME'); var IframeHandle = this.et2.getWidgetById('messageIFRAME');
IframeHandle.set_src('about:blank'); IframeHandle.set_src('about:blank');
@ -1276,27 +1091,13 @@ app.classes.mail = AppJS.extend(
jQuery(IframeHandle.getDOMNode()).show() jQuery(IframeHandle.getDOMNode()).show()
.next(this.mailvelope_iframe_selector).remove(); .next(this.mailvelope_iframe_selector).remove();
// Set up additional content that can be expanded.
// We add a new URL widget for each address, so they get all the UI
// TO addresses have the first one split out, not all together
// list of keys:
var expand_content = [
{build_children: false, data_one: 'fromaddress', data: 'additionalfromaddress', widget: 'fromAddress', line: 'mailPreviewHeadersFrom'},
{build_children: false, data_one: 'toaddress', data: 'additionaltoaddress', widget: 'toAddress', line: 'mailPreviewHeadersTo'},
{build_children: false, data: 'ccaddress', widget: 'CCAddress', line: 'mailPreviewHeadersCC'},
{build_children: false, data: 'attachmentsBlock', widget: 'previewAttachmentArea', line: 'mailPreviewHeadersAttachments'}
];
// Undock the preview before running expandOnClick, because we
// need to have the DOM ready for calculation. // need to have the DOM ready for calculation.
this.mail_disablePreviewArea(false); this.mail_disablePreviewArea(false);
dataElem = this.url_email_expandOnClick(expand_content,dataElem);
// Update the internal list of selected mails, if needed // Update the internal list of selected mails, if needed
if(this.mail_selectedMails.indexOf(_id) < 0) if(this.mail_selectedMails.indexOf(rowId) < 0)
{ {
this.mail_selectedMails.push(_id); this.mail_selectedMails.push(rowId);
} }
var self = this; var self = this;
@ -1305,28 +1106,28 @@ app.classes.mail = AppJS.extend(
for (var t in this.W_TIMEOUTS) {window.clearTimeout(this.W_TIMEOUTS[t]);} for (var t in this.W_TIMEOUTS) {window.clearTimeout(this.W_TIMEOUTS[t]);}
this.W_TIMEOUTS.push(window.setTimeout(function(){ this.W_TIMEOUTS.push(window.setTimeout(function(){
console.log(_id); console.log(rowId);
// Request email body from server // Request email body from server
IframeHandle.set_src(egw.link('/index.php',{menuaction:'mail.mail_ui.loadEmailBody',_messageID:_id})); IframeHandle.set_src(egw.link('/index.php',{menuaction:'mail.mail_ui.loadEmailBody',_messageID:rowId}));
jQuery(IframeHandle.getDOMNode()).on('load', function(e){ jQuery(IframeHandle.getDOMNode()).on('load', function(e){
self.resolveExternalImages (this.contentWindow.document); self.resolveExternalImages (this.contentWindow.document);
}); });
}, 300)); }, 300));
} }
if (dataElem.data['smime']) this.smimeAttachmentsCheckerInterval(); if (data['smime']) this.smimeAttachmentsCheckerInterval();
var messages = {}; var messages = {};
messages['msg'] = [_id]; messages['msg'] = [rowId];
// When body is requested, mail is marked as read by the mail server. Update UI to match. // When body is requested, mail is marked as read by the mail server. Update UI to match.
if (typeof dataElem != 'undefined' && typeof dataElem.data != 'undefined' && typeof dataElem.data.flags != 'undefined' && typeof dataElem.data.flags.read != 'undefined') dataElem.data.flags.read = 'read'; if (typeof data != 'undefined' && typeof data != 'undefined' && typeof data.flags != 'undefined' && typeof data.flags.read != 'undefined') data.flags.read = 'read';
if (typeof dataElem != 'undefined' && typeof dataElem.data != 'undefined' && typeof dataElem.data['class'] != 'undefined' && (dataElem.data['class'].indexOf('unseen') >= 0 || dataElem.data['class'].indexOf('recent') >= 0)) if (typeof data != 'undefined' && typeof data != 'undefined' && typeof data['class'] != 'undefined' && (data['class'].indexOf('unseen') >= 0 || data['class'].indexOf('recent') >= 0))
{ {
this.mail_removeRowClass(messages,'recent'); this.mail_removeRowClass(messages,'recent');
this.mail_removeRowClass(messages,'unseen'); this.mail_removeRowClass(messages,'unseen');
// reduce counter without server roundtrip // reduce counter without server roundtrip
this.mail_reduceCounterWithoutServerRoundtrip(); this.mail_reduceCounterWithoutServerRoundtrip();
if (typeof dataElem.data.dispositionnotificationto != 'undefined' && dataElem.data.dispositionnotificationto && if (typeof data.dispositionnotificationto != 'undefined' && data.dispositionnotificationto &&
typeof dataElem.data.flags.mdnsent == 'undefined' && typeof dataElem.data.flags.mdnnotsent == 'undefined') typeof data.flags.mdnsent == 'undefined' && typeof data.flags.mdnnotsent == 'undefined')
{ {
var buttons = [ var buttons = [
{label: this.egw.lang("Yes"), id: "mdnsent", image: "check"}, {label: this.egw.lang("Yes"), id: "mdnsent", image: "check"},
@ -1575,7 +1376,7 @@ app.classes.mail = AppJS.extend(
quotabox.set_class(_data.data.quotaclass); quotabox.set_class(_data.data.quotaclass);
quotabox.set_value(_data.data.quotainpercent); quotabox.set_value(_data.data.quotainpercent);
quotabox.set_label(_data.data.quota); quotabox.set_label(_data.data.quota);
if (_data.data.quotawarning) if (_data.quotawarning)
{ {
var self = this; var self = this;
var buttons = [ var buttons = [

47
mail/templates/default/app.css
View File

@ -446,16 +446,37 @@ div.mail-compose_fileselector {
background-color: white; background-color: white;
width: 100%; width: 100%;
} }
#mail-index_mailPreview { #mail-index_mail-index-preview {
overflow: hidden; overflow: hidden;
position: relative; position: relative;
background-color: white; background-color: white;
width: calc(100% - 1em);
margin-left: 1em;
} }
.previewWrapper {height: 100%}
#mail-index_mailPreview .th {display: none}
#mail-index_mailPreview > div, #mail-index_mailPreview > et2-hbox { #mail-index_mailPreview > div, #mail-index_mailPreview > * {
padding-left: 8px !important; padding-left: 8px !important;
} }
#mail-index_mailPreview_subject {
margin-bottom: 1em;
font-size: 1.2em;
}
.previewWrapper .et2_details.attachments {
margin-top: 0.4em;
}
.previewWrapper .et2_details {
flex-direction: row;
text-align: start !important;
}
.previewWrapper .et2_details .et2_details_title {
margin: 0;
margin-left: 0.5em;
}
.previewWrapper .et2_details .et2_details_toggle {
margin: 0;
}
#mail-index_mailPreview .et2_email > span { #mail-index_mailPreview .et2_email > span {
display: inline; display: inline;
} }
@ -669,7 +690,6 @@ div.mailDisplayHeaders div.mail_extraEmails.visible {
} }
.mailPreviewHeaders :first-child, .mailDisplayHeaders :first-child { .mailPreviewHeaders :first-child, .mailDisplayHeaders :first-child {
width: 5em;
flex: 0 0 auto; flex: 0 0 auto;
color: #7a7a7a; color: #7a7a7a;
text-align: end; text-align: end;
@ -1010,4 +1030,21 @@ div#mail-index_nm.splitter-pane {min-height: 100px;}
#calendar-meeting table.et2_grid.meetingRequest td { #calendar-meeting table.et2_grid.meetingRequest td {
padding-left: 8px !important; padding-left: 8px !important;
} }
#mail-index_mailPreview_mailPreviewContainer {height:100%;} #mail-index_mailPreview_mailPreviewContainer {
height:100%;
padding-top: 1em;
border-top: 1px solid silver;
margin-top: 1em;
}
#mail-index_nm thead tr th.optcol {
display: none;
}
#mail-index_nm .et2_label.et2_vfs {text-align: center}
.et2_nextmatch .egwGridView_outer .egwGridView_scrollarea tbody tr.row_category td:first-child>div {
margin-left: 0px;
margin-right: 2px;
padding: 0px;
}
#mail-index_nm tbody tr et2-lavatar {max-width: 3.7em; min-width:3.7em !important;}

252
mail/templates/default/index.xet
View File

@ -5,92 +5,128 @@
<template id="mail.index.splitter" height="100%" template="" lang="" group="0" version="1.9.001"> <template id="mail.index.splitter" height="100%" template="" lang="" group="0" version="1.9.001">
<split dock_side="bottomDock" id="mailSplitter"> <split dock_side="bottomDock" id="mailSplitter">
<nextmatch id="nm" onselect="app.mail.mail_preview" class="" template="mail.index.rows" header_left="mail.index.add" header_right="mail.index.header_right" disable_selection_advance="true"/> <nextmatch id="nm" onselect="app.mail.mail_preview" class="" template="mail.index.rows" header_left="mail.index.add" header_right="mail.index.header_right" disable_selection_advance="true"/>
<vbox id="mailPreview" width="100%"> <template id="mail.index.preview"/>
<toolbar id="toolbar" list_header="short"/>
<box id="blank" disabled="false">
<image src="mail"/>
<description value="Select an item to read"/>
</box>
<hbox width="100%" id="mailPreviewHeadersFrom" class="mailPreviewHeaders">
<description value="From"/>
<et2-select-email id="fromAddress" readonly="true"></et2-select-email>
<date-time-today label="Date" align="right" id="previewDate" readonly="true"/>
</hbox>
<hbox id="mailPreviewHeadersSubject" class="mailPreviewHeaders">
<description value="Subject"/>
<description id="previewSubject" readonly="true"
hover_action="app.mail.modifyMessageSubjectDialog"
hover_action_title="Modify subject of this message"/>
</hbox>
<hbox width="100%" id="mailPreviewHeadersTo" class="mailPreviewHeaders">
<description value="To"/>
<et2-select-email id="toAddress" readonly="true"></et2-select-email>
</hbox>
<hbox id="mailPreviewHeadersCC" class="mailPreviewHeaders">
<description value="CC"/>
<et2-select-email id="CCAddress" readonly="true"></et2-select-email>
</hbox>
<hbox class="mailPreviewHeaders smimeIcons">
<image id="smime_signature" src="smime_sign" statustext="Smime signed message" disabled="true"
align="right" width="24"/>
<image id="smime_encryption" src="smime_encrypt" statustext="Smime encrypted message"
disabled="true" align="right" width="24"/>
</hbox>
<hbox id="mailPreviewHeadersAttachments" class="mailPreviewHeaders">
<description value="Attachments"/>
<grid disabled="@no_griddata" id="previewAttachmentArea" 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]"
extra_link_target="$row_cont[windowName]"
extra_link_popup="$row_cont[popup]" 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.saveAttachmentHandler(widget,'downloadOneAsFile', ${row})"
statustext="Save to disk"/>
<buttononly id="${row}[saveAsVFS]" disabled="$row_cont[no_vfs]"
image="filemanager/navbar"
onclick="app.mail.saveAttachmentHandler(widget,'saveOneToVfs', ${row})"
statustext="Save to filemanager"/>
<buttononly class="$row_cont[classSaveAllPossiblyDisabled]" disabled="$row_cont[no_vfs]"
id="${row}[save_all]" image="mail/save_all"
onclick="app.mail.saveAttachmentHandler(widget,'saveAllToVfs', ${row})"
statustext="Save all attachments to filemanager"/>
<buttononly class="$row_cont[classSaveAllPossiblyDisabled]" id="${row}[save_zip]"
image="mail/save_zip"
onclick="app.mail.saveAttachmentHandler(widget,'downloadAllToZip', ${row})"
statustext="Save as Zip"/>
</row>
</rows>
</grid>
<buttononly class="transparent-button" statustext="Show all attachments"
image="foldertree_nolines_plus" width="16px" height="16px"
onclick="app.mail.showAllHeader"/>
</hbox>
<box id="mailPreviewContainer">
<iframe frameborder="1" id="messageIFRAME" scrolling="auto"/>
</box>
</vbox>
</split> </split>
</template> </template>
<template id="mail.index.preview">
<toolbar id="toolbar" list_header="short"/>
<grid id="mailPreview" width="100%" height="100%" >
<columns>
<column/>
</columns>
<rows>
<row class="th">
</row>
<row>
<vbox class="previewWrapper">
<box id="blank" disabled="@fromaddress">
<image src="mail"/>
<description value="Select an item to read"/>
</box>
<hbox class="mailPreviewHeaders">
<description id="subject" readonly="true"
hover_action="app.mail.modifyMessageSubjectDialog"
hover_action_title="Modify subject of this message"/>
<hbox class="mailPreviewHeaders smimeIcons">
<image id="smimeSignature" src="smime_sign" statustext="Smime signed message" disabled="true"
align="right" width="24"/>
<image id="smimeEncryption" src="smime_encrypt" statustext="Smime encrypted message"
disabled="true" align="right" width="24"/>
</hbox>
</hbox>
<hbox width="100%" class="mailPreviewHeaders">
<lavatar src="@avatar" lname="@address" shape="rounded"/>
<vbox>
<details class="details" title="details" toggle_align="left">
<hbox>
<description value="From"/>
<grid id="additionalfromaddress">
<columns>
<column/>
</columns>
<rows>
<row>
<et2-select-email id="${row}" readonly="true"></et2-select-email>
</row>
</rows>
</grid>
</hbox>
<hbox disabled="!@toaddress" width="100%">
<description value="To"/>
<grid id="additionaltoaddress">
<columns>
<column/>
</columns>
<rows>
<row>
<et2-select-email id="${row}" readonly="true"></et2-select-email>
</row>
</rows>
</grid>
</hbox>
<hbox disabled="!@ccaddress" width="100%">
<description value="Cc"/>
<grid id="ccaddress">
<columns>
<column/>
</columns>
<rows>
<row>
<et2-select-email id="${row}" readonly="true"></et2-select-email>
</row>
</rows>
</grid>
</hbox>
</details>
<details title="@attachmentsBlockTitle" toggle_align="left" class="attachments" disabled="!@attachmentsBlock">
<grid 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" readonly="false" onclick="app.mail.saveAttachmentHandler(widget,'downloadOneAsFile', ${row})"/>
<buttononly id="${row}[saveAsVFS]" image="filemanager/navbar" readonly="false" onclick="app.mail.saveAttachmentHandler(widget,'saveOneToVfs', ${row})"/>
<buttononly class="$row_cont[classSaveAllPossiblyDisabled]" readonly="false" id="${row}[save_all]" image="mail/save_all" onclick="app.mail.saveAttachmentHandler(widget,'saveAllToVfs', ${row})"/>
<buttononly class="$row_cont[classSaveAllPossiblyDisabled]" readonly="false" id="${row}[save_zip]" image="mail/save_zip" onclick="app.mail.saveAttachmentHandler(widget,'downloadAllToZip', ${row})" label="Save as Zip"/>
</row>
</rows>
</grid>
</details>
</vbox>
<date-time-today label="Date" align="right" id="date" readonly="true"/>
</hbox>
<hbox>
</hbox>
<box id="mailPreviewContainer">
<iframe frameborder="1" id="messageIFRAME" scrolling="auto"/>
</box>
</vbox>
</row>
</rows>
</grid>
</template>
<template id="mail.index.nosplitter" template="" lang="" group="0" version="1.9.001"> <template id="mail.index.nosplitter" template="" lang="" group="0" version="1.9.001">
<nextmatch id="nm" onselect="app.mail.mail_preview" template="mail.index.rows" header_left="mail.index.add" <nextmatch id="nm" onselect="app.mail.mail_preview" template="mail.index.rows" header_left="mail.index.add"
header_right="mail.index.header_right"/> header_right="mail.index.header_right"/>
@ -98,21 +134,11 @@
<template id="mail.index.rows" template="" lang="" group="0" version="1.9.001"> <template id="mail.index.rows" template="" lang="" group="0" version="1.9.001">
<grid width="100%"> <grid width="100%">
<columns> <columns>
<column width="20"/> <column width="90%"/>
<column width="20"/> <column width="80"/>
<column width="40%"/>
<column minWidth="42" width="95"/>
<column width="95"/>
<column width="95"/>
<column width="30%"/>
<column width="30%"/>
<column width="80"/>
<column width="80"/>
</columns> </columns>
<rows> <rows>
<row class="th"> <row class="th">
<nextmatch-header statustext="Status" label="St." id="status"/>
<nextmatch-header statustext="attachments, ..." label="..." id="attachments"/>
<nextmatch-sortheader label="subject" id="subject"/> <nextmatch-sortheader label="subject" id="subject"/>
<nextmatch-sortheader align="center" label="date" id="date" sortmode="DESC"/> <nextmatch-sortheader align="center" label="date" id="date" sortmode="DESC"/>
<nextmatch-sortheader align="center" label="arrival" id="arrival"/> <nextmatch-sortheader align="center" label="arrival" id="arrival"/>
@ -123,21 +149,27 @@
<nextmatch-header statustext="security" label="Security" id="security"/> <nextmatch-header statustext="security" label="Security" id="security"/>
</row> </row>
<row class="$row_cont[class]"> <row class="$row_cont[class]">
<description span="1" class="status_img"/> <hbox class="$row_cont[class] mobile_cat_col">
<html id="${row}[attachments]"/> <lavatar image="$row_cont[avatar]" fname="$row_cont[address]" size="3.7em" shape="square"/>
<vbox> <vbox>
<description id="${row}[subject]" no_lang="1"/> <url-email id="${row}[address]" class="$row_cont[class]" readonly="true"/>
<description id="${row}[bodypreview]" no_lang="1" class='et2_label bodypreview'/> <hbox>
</vbox>
<hbox> <description id="${row}[subject]" no_lang="1" class="$row_cont[class]" />
<date-time_today align="center" id="${row}[date]" readonly="true"/> </hbox>
<description id="${row}[bodypreview]" no_lang="1" class='et2_label bodypreview'/>
</vbox>
</hbox> </hbox>
<date-time_today align="center" id="${row}[modified]" readonly="true"/> <vbox>
<url-email id="${row}[address]" contact_plus="true" readonly="true"/> <hbox>
<url-email id="${row}[toaddress]" contact_plus="true" readonly="true"/> <date-time_today align="center" class="$row_cont[class]" id="${row}[date]" readonly="true"/>
<url-email id="${row}[fromaddress]" contact_plus="true" readonly="true"/> </hbox>
<vfs-size align="right" id="${row}[size]" no_lang="1" readonly="true"/> <hbox>
<image src="$row_cont[smime]"/> <image src="$row_cont[smime]" height="16px"/>
<html id="${row}[attachments]"/>
<description class="status_img $row_cont[class]"/>
</hbox>
</vbox>
</row> </row>
</rows> </rows>
</grid> </grid>

88
mail/templates/pixelegg/app.css
View File

@ -443,15 +443,41 @@ div.mail-compose_fileselector {
background-color: white; background-color: white;
width: 100%; width: 100%;
} }
#mail-index_mailPreview { #mail-index_mail-index-preview {
overflow: hidden; overflow: hidden;
position: relative; position: relative;
background-color: white; background-color: white;
width: calc(100% - 1em);
margin-left: 1em;
}
.previewWrapper {
height: 100%;
}
#mail-index_mailPreview .th {
display: none;
} }
#mail-index_mailPreview > div, #mail-index_mailPreview > div,
#mail-index_mailPreview > et2-hbox { #mail-index_mailPreview > * {
padding-left: 8px !important; padding-left: 8px !important;
} }
#mail-index_mailPreview_subject {
margin-bottom: 1em;
font-size: 1.2em;
}
.previewWrapper .et2_details.attachments {
margin-top: 0.4em;
}
.previewWrapper .et2_details {
flex-direction: row;
text-align: start !important;
}
.previewWrapper .et2_details .et2_details_title {
margin: 0;
margin-left: 0.5em;
}
.previewWrapper .et2_details .et2_details_toggle {
margin: 0;
}
#mail-index_mailPreview .et2_email > span { #mail-index_mailPreview .et2_email > span {
display: inline; display: inline;
} }
@ -656,7 +682,6 @@ div.mailDisplayHeaders div.mail_extraEmails.visible {
} }
.mailPreviewHeaders :first-child, .mailPreviewHeaders :first-child,
.mailDisplayHeaders :first-child { .mailDisplayHeaders :first-child {
width: 5em;
flex: 0 0 auto; flex: 0 0 auto;
color: #7a7a7a; color: #7a7a7a;
text-align: end; text-align: end;
@ -970,6 +995,24 @@ div#mail-index_nm.splitter-pane {
} }
#mail-index_mailPreview_mailPreviewContainer { #mail-index_mailPreview_mailPreviewContainer {
height: 100%; height: 100%;
padding-top: 1em;
border-top: 1px solid silver;
margin-top: 1em;
}
#mail-index_nm thead tr th.optcol {
display: none;
}
#mail-index_nm .et2_label.et2_vfs {
text-align: center;
}
.et2_nextmatch .egwGridView_outer .egwGridView_scrollarea tbody tr.row_category td:first-child > div {
margin-left: 0px;
margin-right: 2px;
padding: 0px;
}
#mail-index_nm tbody tr et2-lavatar {
max-width: 3.7em;
min-width: 3.7em !important;
} }
#popupMainDiv { #popupMainDiv {
padding: 5px; padding: 5px;
@ -1057,6 +1100,45 @@ body {
#mail-index #mail-index_mailPreview #mail-index_mailPreviewHeadersSubject > span { #mail-index #mail-index_mailPreview #mail-index_mailPreviewHeadersSubject > span {
white-space: nowrap; white-space: nowrap;
} }
#mail-index #mail-index_mailPreview .mail-d-h1 {
position: relative;
padding-bottom: 15px;
border-bottom: 1px solid silver;
font-size: 12pt;
padding-top: 10px;
font-weight: bold;
}
#mail-index #mail-index_mailPreview .mail-d-h1 span {
font-size: 12pt;
}
#mail-index #mail-index_mailPreview .mail-d-h2 {
padding-top: 5px;
font-size: 10pt;
color: grey;
}
#mail-index #mail-index_mailPreview .mail-d-h2 a,
#mail-index #mail-index_mailPreview .mail-d-h2 span,
#mail-index #mail-index_mailPreview .mail-d-h2 .et2_label {
color: grey;
font-size: 10pt;
}
#mail-index #mail-index_mailPreview .mail-d-h2 a#mail-display_FROM > * {
color: black;
padding-top: 15px;
font-size: 12pt;
}
#mail-index #mail-index_mailPreview .et2_details {
width: 100%;
display: block;
}
#mail-index #mail-index_mailPreview .et2_details.et2_details_expanded {
width: 100%;
display: block;
}
#mail-index #mail-index_mailPreview span.et2_details_title {
color: #26537c;
font-size: 10pt;
}
/*############################################## /*##############################################
# # # # # #
# # # # # #

39
mail/templates/pixelegg/app.less
View File

@ -126,6 +126,45 @@ body {
#mail-index_mailPreviewHeadersSubject > span { #mail-index_mailPreviewHeadersSubject > span {
white-space: nowrap; white-space: nowrap;
} }
.mail-d-h1{
position: relative;
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;
}
}
.et2_details {
width: 100%;
display: block;
}
.et2_details.et2_details_expanded {
width: 100%;
display: block;
}
span.et2_details_title {
color:#26537c;
.mob-fontsize-n;
}
} // Ende: Ansicht der Emails } // Ende: Ansicht der Emails
} // iframe } // iframe