Mail preview / display layout:

Fix header alignment, swap email display to use et2-select-email
This commit is contained in:
nathan 2022-06-24 14:17:58 -06:00
parent 0f5cb9f9d3
commit 5d915ba5eb
7 changed files with 104 additions and 88 deletions

View File

@ -1113,11 +1113,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 = [ var expand_content = [
{build_children: true, data_one: 'FROM', data: 'FROM', widget: 'FROM', line: 'mailDisplayHeadersFrom', full_email:false}, {build_children: false, data_one: 'FROM', data: 'FROM', widget: 'FROM', line: 'mailDisplayHeadersFrom', full_email: false},
{build_children: true, data: 'SENDER', widget: 'SENDER', line: 'mailDisplayHeadersSender'}, {build_children: false, data: 'SENDER', widget: 'SENDER', line: 'mailDisplayHeadersSender'},
{build_children: true, data: 'TO', widget: 'TO', line: 'mailDisplayHeadersTo'}, {build_children: false, data: 'TO', widget: 'TO', line: 'mailDisplayHeadersTo'},
{build_children: true, data: 'CC', widget: 'CC', line: 'mailDisplayHeadersCc'}, {build_children: false, data: 'CC', widget: 'CC', line: 'mailDisplayHeadersCc'},
{build_children: true, data: 'BCC', widget:'BCC', line: 'mailDisplayHeadersBcc'} {build_children: false, data: 'BCC', widget: 'BCC', line: 'mailDisplayHeadersBcc'}
]; ];
if (typeof content != 'undefiend') if (typeof content != 'undefiend')

View File

@ -640,29 +640,42 @@ div.mailDisplayHeaders div.mail_extraEmails {
div.mailDisplayHeaders div.mail_extraEmails.visible { div.mailDisplayHeaders div.mail_extraEmails.visible {
position: fixed; position: fixed;
left: 7em; left: 7em;
display: block; display: block;
max-height: 8em; max-height: 8em;
min-width: 30em; min-width: 30em;
z-index: 999; z-index: 999;
overflow-y: auto; overflow-y: auto;
background-color: white; background-color: white;
box-shadow: 5px 5px 5px #aaa; box-shadow: 5px 5px 5px #aaa;
border: 1px solid gray; border: 1px solid gray;
} }
.mailComposeBody { .mailComposeBody {
white-space: normal !important; white-space: normal !important;
} }
#mail-compose_mail_plaintext { #mail-compose_mail_plaintext {
white-space: pre-wrap !important; white-space: pre-wrap !important;
} }
.mailPreviewHeaders {
font-size: 0.875rem;
}
.mailPreviewHeaders :first-child, .mailDisplayHeaders :first-child {
width: 5em;
flex: 0 1 auto;
}
div.mailPreviewHeaders div.mail_extraEmails { div.mailPreviewHeaders div.mail_extraEmails {
display: inline-block; display: inline-block;
max-height: 1.3em; max-height: 1.3em;
max-width: 50%; max-width: 50%;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
vertical-align: top; vertical-align: top;
} }
#mail-index div#mail-index_mailPreview div#mail-index_mailPreviewHeadersSubject { #mail-index div#mail-index_mailPreview div#mail-index_mailPreviewHeadersSubject {
width: 90%; width: 90%;
text-overflow: ellipsis; text-overflow: ellipsis;

View File

@ -3,56 +3,45 @@
<!-- $Id$ --> <!-- $Id$ -->
<overlay> <overlay>
<template id="mail.display" template="" lang="" group="0" version="1.9.001"> <template id="mail.display" template="" lang="" group="0" version="1.9.001">
<appicon class="onlyPrint"/> <appicon class="onlyPrint"/>
<html id="msg"/> <html id="msg"/>
<old-vbox class="mailDisplay"> <vbox class="mailDisplay">
<old-hbox> <toolbar id="displayToolbar" width="100%" view_range="6" flat_list="true"/>
<toolbar id="displayToolbar" width="100%" view_range="6" flat_list="true"/> <hbox>
</old-hbox> <hbox class="mailDisplayHeaders" id="mailDisplayHeadersFrom" disabled="!@FROM">
<old-hbox> <description value="From"/>
<old-hbox class="mailDisplayHeaders" id="mailDisplayHeadersFrom" disabled="!@FROM" width="70%"> <et2-select-email id="FROM" readonly="true" size="small"/>
<description value="From"/> </hbox>
<old-hbox id="FROM" class="mail_extraEmails"> <date-time id="mail_displaydate" label="Date" readonly="true" align="right"/>
</old-hbox> </hbox>
<buttononly class="transparent-button" statustext="Show all Addresses" image="foldertree_nolines_plus" onclick="app.mail.showAllHeader"/>
</old-hbox>
<old-hbox class="mailDisplayHeaders" align="right" width="30%">
<description value="Date"/>
<date-time id="mail_displaydate" readonly="true"/>
</old-hbox>
</old-hbox>
<old-hbox class="mailDisplayHeaders" id="mailDisplayHeadersSender" disabled="!@SENDER" width="100%"> <hbox class="mailDisplayHeaders" id="mailDisplayHeadersSender" disabled="!@SENDER">
<description value="on behalf of"/> <description value="on behalf of"/>
<url-email id="SENDER" readonly="true"/> <et2-select-email id="SENDER" readonly="true" size="small"/>
</old-hbox> </hbox>
<old-hbox class="mailDisplayHeaders" id="mailDisplayHeadersTo" disabled="!@TO" width="100%"> <hbox class="mailDisplayHeaders" id="mailDisplayHeadersTo" disabled="!@TO">
<description value="To"/> <description value="To"/>
<old-hbox id="TO" class="mail_extraEmails"> <et2-select-email id="TO" class="mail_extraEmails" readonly="true" size="small"/>
</old-hbox> </hbox>
<buttononly class="transparent-button" statustext="Show all Addresses" image="foldertree_nolines_plus" onclick="app.mail.showAllHeader"/> <hbox class="mailDisplayHeaders" id="mailDisplayHeadersCc" disabled="!@CC" width="100%">
</old-hbox> <description value="Cc"/>
<old-hbox class="mailDisplayHeaders" id="mailDisplayHeadersCc" disabled="!@CC" width="100%"> <et2-select-email id="CC" class="mail_extraEmails" readonly="true" size="small"/>
<description value="Cc"/> </hbox>
<old-hbox id="CC" class="mail_extraEmails"> <hbox class="mailDisplayHeaders" id="mailDisplayHeadersBcc" disabled="!@BCC" width="100%">
</old-hbox> <description value="Bcc"/>
<buttononly class="transparent-button" statustext="Show all Addresses" image="foldertree_nolines_plus" onclick="app.mail.showAllHeader"/> <et2-select-email id="BCC" class="mail_extraEmails" readonly="true" size="small"/>
</old-hbox> </hbox>
<old-hbox class="mailDisplayHeaders" id="mailDisplayHeadersBcc" disabled="!@BCC" width="100%"> <hbox class="mailDisplayHeaders" width="100%">
<description value="Bcc"/> <description value="Subject"/>
<old-hbox id="BCC" class="mail_extraEmails"> <description id="mail_displaysubject" no_lang="1" readonly="true"/>
</old-hbox> </hbox>
<buttononly class="transparent-button" statustext="Show all Addresses" image="foldertree_nolines_plus" onclick="app.mail.showAllHeader"/> <old-hbox>
</old-hbox> <image id="smime_signature" src="smime_sign" statustext="Smime signed message" disabled="true"
<old-hbox class="mailDisplayHeaders" width="100%"> align="right" width="24"/>
<description value="Subject"/> <image id="smime_encryption" src="smime_encrypt" statustext="Smime encrypted message" disabled="true"
<description align="left" id="mail_displaysubject" no_lang="1" readonly="true"/> align="right" width="24"/>
</old-hbox> </old-hbox>
<old-hbox> </vbox>
<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"/>
</old-hbox>
</old-vbox>
<old-vbox class="mailDisplay"> <old-vbox class="mailDisplay">
<old-box class="$cont[mailDisplayContainerClass]"> <old-box class="$cont[mailDisplayContainerClass]">
<iframe frameborder="1" class="mail_displaybody" id="mailDisplayBodySrc" name="mailDisplayBodySrc" scrolling="auto" width="100%"/> <iframe frameborder="1" class="mail_displaybody" id="mailDisplayBodySrc" name="mailDisplayBodySrc" scrolling="auto" width="100%"/>

View File

@ -6,33 +6,30 @@
<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"/>
<old-vbox id="mailPreview" width="100%"> <old-vbox id="mailPreview" width="100%">
<toolbar id="toolbar"/> <toolbar id="toolbar"/>
<old-box id="blank" disabled="false"> <old-box id="blank" disabled="false">
<image src="mail"/> <image src="mail"/>
<description value="Select an item to read"/> <description value="Select an item to read"/>
</old-box> </old-box>
<old-hbox width="100%" id="mailPreviewHeadersFrom" class="mailPreviewHeaders"> <hbox width="100%" id="mailPreviewHeadersFrom" class="mailPreviewHeaders">
<description value="From"/> <description value="From"/>
<et2-select-email id="fromAddress" readonly="true"></et2-select-email> <et2-select-email id="fromAddress" readonly="true"></et2-select-email>
</old-hbox> <date-time label="Date" align="right" id="previewDate" readonly="true"/>
<old-hbox id="mailPreviewHeadersSubject" class="mailPreviewHeaders"> </hbox>
<hbox id="mailPreviewHeadersSubject" class="mailPreviewHeaders">
<description value="Subject"/> <description value="Subject"/>
<description align="left" id="previewSubject" readonly="true" <description id="previewSubject" readonly="true"
hover_action="app.mail.modifyMessageSubjectDialog" hover_action="app.mail.modifyMessageSubjectDialog"
hover_action_title="Modify subject of this message"/> hover_action_title="Modify subject of this message"/>
</old-hbox> </hbox>
<old-hbox id="mailPreviewHeadersDate" class="mailPreviewHeaders"> <hbox width="100%" id="mailPreviewHeadersTo" class="mailPreviewHeaders">
</old-hbox>
<et2-hbox width="100%" id="mailPreviewHeadersTo" class="mailPreviewHeaders">
<description value="To"/> <description value="To"/>
<et2-select-email id="toAddress" readonly="true"></et2-select-email> <et2-select-email id="toAddress" readonly="true"></et2-select-email>
<description align="right" value="Date"/> </hbox>
<date-time align="right" id="previewDate" readonly="true"/> <hbox id="mailPreviewHeadersCC" class="mailPreviewHeaders">
</et2-hbox>
<old-hbox id="mailPreviewHeadersCC" class="mailPreviewHeaders">
<description value="CC"/> <description value="CC"/>
<et2-select-email id="CCAddress" readonly="true"></et2-select-email> <et2-select-email id="CCAddress" readonly="true"></et2-select-email>
</old-hbox> </hbox>
<old-hbox class="mailPreviewHeaders smimeIcons"> <old-hbox class="mailPreviewHeaders smimeIcons">
<image id="smime_signature" src="smime_sign" statustext="Smime signed message" disabled="true" <image id="smime_signature" src="smime_sign" statustext="Smime signed message" disabled="true"
align="right" width="24"/> align="right" width="24"/>

View File

@ -659,6 +659,14 @@ div.mailDisplayHeaders div.mail_extraEmails.visible {
#mail-compose_mail_plaintext { #mail-compose_mail_plaintext {
white-space: pre-wrap !important; white-space: pre-wrap !important;
} }
.mailPreviewHeaders {
font-size: 0.875rem;
}
.mailPreviewHeaders :first-child,
.mailDisplayHeaders :first-child {
width: 5em;
flex: 0 1 auto;
}
div.mailPreviewHeaders div.mail_extraEmails { div.mailPreviewHeaders div.mail_extraEmails {
display: inline-block; display: inline-block;
max-height: 1.3em; max-height: 1.3em;

View File

@ -647,6 +647,14 @@ div.mailDisplayHeaders div.mail_extraEmails.visible {
#mail-compose_mail_plaintext { #mail-compose_mail_plaintext {
white-space: pre-wrap !important; white-space: pre-wrap !important;
} }
.mailPreviewHeaders {
font-size: 0.875rem;
}
.mailPreviewHeaders :first-child,
.mailDisplayHeaders :first-child {
width: 5em;
flex: 0 1 auto;
}
div.mailPreviewHeaders div.mail_extraEmails { div.mailPreviewHeaders div.mail_extraEmails {
display: inline-block; display: inline-block;
max-height: 1.3em; max-height: 1.3em;

View File

@ -16,6 +16,7 @@
@import (reference) "../../../pixelegg/less/def_mobile.less"; @import (reference) "../../../pixelegg/less/def_mobile.less";
@import (less) "../default/app.css"; @import (less) "../default/app.css";
#popupMainDiv{ #popupMainDiv{
padding: 5px; padding: 5px;
.et2_grid{ .et2_grid{