holm/egroupware
1
1
Fork 0
forked from extern/egroupware
Code Issues Pull Requests Packages Projects Releases Wiki Activity

WIP Mail styling:

Browse Source 
- Make display dialog similar to preview
This commit is contained in:
Hadi Nategh 2022-07-25 16:35:50 +02:00
parent fedfc78fb6
commit cd7f2eea60
6 changed files with 147 additions and 217 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2277,7 +2277,7 @@ $filter['before']= date("d-M-Y", $cutoffdate2);
foreach($envelope[$field] as $field_data)
{
//error_log(__METHOD__.__LINE__.array2string($field_data));
$content[$field][] = $field_data;
$content[strtolower($field)][] = $field_data;
$sel_options[$field][] = array(
// taglist requires these - not optional
'id' => $field_data,
@ -2301,10 +2301,13 @@ $filter['before']= date("d-M-Y", $cutoffdate2);
if (!empty($partID)) $linkData['_partID']=$partID;
if ($htmlOptions != $this->mail_bo->htmlOptions) $linkData['_htmloptions']=$htmlOptions;
$content['mailDisplayBodySrc'] = Egw::link('/index.php',$linkData);
if (!empty($attachmentHTMLBlock))
{
$content['mail_displayattachments'] = $attachmentHTMLBlock;
$content['attachmentsBlockTitle'] = count($attachmentHTMLBlock).' '.Lang('attachments');
}
$content['mail_id']=$rowID;
$content['mailDisplayContainerClass']=!empty($attachments)?"mailDisplayContainer mailDisplayContainerFixedHeight":"mailDisplayContainer mailDisplayContainerFullHeight";
$content['mailDisplayAttachmentsClass']=!empty($attachments)?"mailDisplayAttachments":"mail_DisplayNone";
// DRAG attachments actions
$etpl->setElementAttribute('mail_displayattachments', 'actions', array(

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

@ -445,6 +445,7 @@ div.mail-compose_fileselector {
position: relative;
background-color: white;
width: 100%;
height: 100%;
}
#mail-index_mail-index-preview {
overflow: hidden;
@ -459,7 +460,7 @@ div.mail-compose_fileselector {
#mail-index_mailPreview > div, #mail-index_mailPreview > * {
padding-left: 8px !important;
}
#mail-index_mailPreview_subject {
#mail-index_mailPreview_subject, #mail-display_mail_displaysubject {
margin-bottom: 1em;
font-size: 1.2em;
}
@ -567,36 +568,14 @@ div.mail-compose_fileselector {
}
#mail-display {
min-height: 768px;
margin: 0;
padding: 5px;
}
#mail-display_mail_displaysubject {
font-size: 14px;
}
.mailDisplayContainer, .mailDisplayAttachments {
display: block;
display: -moz-inline-stack;
display: -moz-box;
/*width: 99%;*/
overflow: hidden;
left: 8px;
right: 8px;
}
.mailDisplayContainer {
position: fixed;
overflow: hidden;
border: 1px solid silver;
top: 120px;
}
.mailDisplayContainerFixedHeight {
bottom: 123px;
overflow: hidden;
}
.mailDisplayContainerFullHeight {
bottom: 108px;
height: 100%;
padding-top: 1em;
border-top: 1px solid silver;
margin-top: 1em;
}
.mailDisplayBody {
height:100%;
@ -618,10 +597,7 @@ div.mail-compose_fileselector {
#mail-display_mailDisplayBodySrc {
height:100%;
}
div.mail-display > div:first-parent > div.first-parent
{
height: 99%;
}
.mailDisplayHeaders {
overflow: hidden;
right: 8px;
@ -634,10 +610,6 @@ div.mail-display > div:first-parent > div.first-parent
}
div.mailDisplayHeaders > div:first-parent {
overflow: hidden;
}
div.mailDisplayHeaders > span:first-child, div.mailPreviewHeaders > span:first-child {
width: 7em;
display: inline-block;
@ -692,7 +664,6 @@ div.mailDisplayHeaders div.mail_extraEmails.visible {
.mailPreviewHeaders :first-child, .mailDisplayHeaders :first-child {
flex: 0 0 auto;
color: #7a7a7a;
text-align: end;
}
div.mailPreviewHeaders div.mail_extraEmails {
@ -849,7 +820,7 @@ blockquote blockquote blockquote blockquote blockquote blockquote{
pre {
width:99% !important;
}
div.mailDisplayContainer {
.mailDisplayContainer {
border-top: none;
overflow: visible !important;
position: static !important;
@ -874,19 +845,16 @@ blockquote blockquote blockquote blockquote blockquote blockquote{
div.mailDisplayHeaders {
padding-top: 10px;
}
div.mailDisplayContainer.mailvelopeTopContainer {
.mailDisplayContainer.mailvelopeTopContainer {
top:190px;
}
div.mailDisplayContainer.mailvelopeTopContainer > iframe {
.mailDisplayContainer.mailvelopeTopContainer > iframe {
position: static;
min-width: 860px;
}
.mail_extraEmails > a {
display: inline-block;
}
div.mail_extraEmails + img.et2_button.et2_button_icon.ui-button.et2_clickable {
display: none !important;
}
.et2_email:after {
content: " | ";
}

141
mail/templates/default/display.xet
View File

@ -7,49 +7,90 @@
<html id="msg"/>
<vbox class="mailDisplay">
<toolbar id="displayToolbar" width="100%" view_range="6" flat_list="true" list_header="short"/>
<hbox>
<hbox class="mailDisplayHeaders" id="mailDisplayHeadersFrom" disabled="!@FROM">
<description value="From"/>
<et2-select-email id="FROM" readonly="true"/>
</hbox>
<date-time-today id="mail_displaydate" label="Date" readonly="true" align="right"
class="mailDisplayHeaders"/>
</hbox>
<hbox class="mailDisplayHeaders" id="mailDisplayHeadersSender" disabled="!@SENDER">
<description value="on behalf of"/>
<et2-select-email id="SENDER" readonly="true"/>
</hbox>
<hbox class="mailDisplayHeaders" width="100%">
<description value="Subject"/>
<description id="mail_displaysubject" no_lang="1" readonly="true"/>
</hbox>
<hbox class="mailDisplayHeaders" id="mailDisplayHeadersTo" disabled="!@TO">
<description value="To"/>
<et2-select-email id="TO" class="mail_extraEmails" readonly="true"/>
</hbox>
<hbox class="mailDisplayHeaders" id="mailDisplayHeadersCc" disabled="!@CC" width="100%">
<description value="Cc"/>
<et2-select-email id="CC" class="mail_extraEmails" readonly="true"/>
</hbox>
<hbox class="mailDisplayHeaders" id="mailDisplayHeadersBcc" disabled="!@BCC" width="100%">
<description value="Bcc"/>
<et2-select-email id="BCC" class="mail_extraEmails" readonly="true"/>
</hbox>
<old-hbox>
<hbox class="mailPreviewHeaders">
<description id="mail_displaysubject" readonly="true"
hover_action="app.mail.modifyMessageSubjectDialog"
hover_action_title="Modify subject of this message"/>
<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"/>
</old-hbox>
</vbox>
<old-vbox class="mailDisplay">
<old-box class="$cont[mailDisplayContainerClass]">
<iframe frameborder="1" class="mail_displaybody" id="mailDisplayBodySrc" name="mailDisplayBodySrc" scrolling="auto" width="100%"/>
</old-box>
<image id="smime_encryption" src="smime_encrypt" statustext="Smime encrypted message"
disabled="true" align="right" width="24"/>
</hbox>
</hbox>
<old-box class="$cont[mailDisplayAttachmentsClass]">
<grid disabled="@no_griddata" id="mail_displayattachments" class="egwGridView_grid" width="100%">
<hbox width="100%" class="mailPreviewHeaders">
<lavatar src="@avatar" lname="@address" shape="rounded"/>
<vbox class="previewWrapper">
<details class="details" title="details" toggle_align="left">
<hbox disabled="!@from">
<description value="From"/>
<grid id="from">
<columns>
<column/>
</columns>
<rows>
<row>
<et2-select-email id="${row}" readonly="true"></et2-select-email>
</row>
</rows>
</grid>
</hbox>
<hbox disabled="!@sender">
<description value="Sender"/>
<grid id="sender">
<columns>
<column/>
</columns>
<rows>
<row>
<et2-select-email id="${row}" readonly="true"></et2-select-email>
</row>
</rows>
</grid>
</hbox>
<hbox disabled="!@to">
<description value="To"/>
<grid id="to">
<columns>
<column/>
</columns>
<rows>
<row>
<et2-select-email id="${row}" readonly="true"></et2-select-email>
</row>
</rows>
</grid>
</hbox>
<hbox disabled="!@cc">
<description value="Cc"/>
<grid id="cc">
<columns>
<column/>
</columns>
<rows>
<row>
<et2-select-email id="${row}" readonly="true"></et2-select-email>
</row>
</rows>
</grid>
</hbox>
<hbox disabled="!@bcc">
<description value="Bcc"/>
<grid id="bcc">
<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="!@mail_displayattachments">
<grid id="mail_displayattachments" class="previewAttachmentArea egwGridView_grid">
<columns>
<column disabled="!@showtempname"/>
<column disabled="!@showtempname"/>
@ -68,16 +109,22 @@
<description id="${row}[partID]" />
<description id="${row}[type]" />
<description id="${row}[winmailFlag]" />
<description class="useEllipsis et2_link" id="${row}[filename]" extra_link_target="$row_cont[windowName]" extra_link_popup="$row_cont[popup]" expose_view="true" mime="$row_cont[type]" no_lang="1" mime_data="$row_cont[mime_data]" href="$row_cont[mime_url]"/>
<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]" value="save" image="fileexport" onclick="app.mail.saveAttachmentHandler(widget,'downloadOneAsFile', ${row})" statustext="Save to disk"/>
<buttononly id="${row}[saveAsVFS]" disabled="$row_cont[no_vfs]" value="save" 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]" value="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]" value="save_zip" image="mail/save_zip" onclick="app.mail.saveAttachmentHandler(widget,'downloadAllToZip', ${row})" statustext="Save as Zip"/>
<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>
</old-box>
</old-vbox>
</details>
</vbox>
<date-time-today align="right" id="mail_displaydate" readonly="true"/>
</hbox>
<box class="mailDisplayContainer">
<iframe frameborder="1" class="mail_displaybody" id="mailDisplayBodySrc" name="mailDisplayBodySrc" scrolling="auto" width="100%"/>
</box>
</vbox>
</template>
</overlay>

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

@ -113,7 +113,7 @@
</details>
</vbox>
<date-time-today label="Date" align="right" id="date" readonly="true"/>
<date-time-today align="right" id="date" readonly="true"/>
</hbox>
<hbox>

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

@ -442,6 +442,7 @@ div.mail-compose_fileselector {
position: relative;
background-color: white;
width: 100%;
height: 100%;
}
#mail-index_mail-index-preview {
overflow: hidden;
@ -460,7 +461,8 @@ div.mail-compose_fileselector {
#mail-index_mailPreview > * {
padding-left: 8px !important;
}
#mail-index_mailPreview_subject {
#mail-index_mailPreview_subject,
#mail-display_mail_displaysubject {
margin-bottom: 1em;
font-size: 1.2em;
}
@ -571,35 +573,13 @@ div.mail-compose_fileselector {
display: none !important;
}
#mail-display {
min-height: 768px;
margin: 0;
padding: 5px;
}
#mail-display_mail_displaysubject {
font-size: 14px;
}
.mailDisplayContainer,
.mailDisplayAttachments {
display: block;
display: -moz-inline-stack;
display: -moz-box;
/*width: 99%;*/
overflow: hidden;
left: 8px;
right: 8px;
}
.mailDisplayContainer {
position: fixed;
overflow: hidden;
border: 1px solid silver;
top: 120px;
}
.mailDisplayContainerFixedHeight {
bottom: 123px;
overflow: hidden;
}
.mailDisplayContainerFullHeight {
bottom: 108px;
height: 100%;
padding-top: 1em;
border-top: 1px solid silver;
margin-top: 1em;
}
.mailDisplayBody {
height: 100%;
@ -621,9 +601,6 @@ div.mail-compose_fileselector {
#mail-display_mailDisplayBodySrc {
height: 100%;
}
div.mail-display > div:first-parent > div.first-parent {
height: 99%;
}
.mailDisplayHeaders {
overflow: hidden;
right: 8px;
@ -633,9 +610,6 @@ div.mail-display > div:first-parent > div.first-parent {
position: absolute;
top: 12px;
}
div.mailDisplayHeaders > div:first-parent {
overflow: hidden;
}
div.mailDisplayHeaders > span:first-child,
div.mailPreviewHeaders > span:first-child {
width: 7em;
@ -684,7 +658,6 @@ div.mailDisplayHeaders div.mail_extraEmails.visible {
.mailDisplayHeaders :first-child {
flex: 0 0 auto;
color: #7a7a7a;
text-align: end;
}
div.mailPreviewHeaders div.mail_extraEmails {
display: inline-block;
@ -835,7 +808,7 @@ blockquote blockquote blockquote blockquote blockquote blockquote {
pre {
width: 99% !important;
}
div.mailDisplayContainer {
.mailDisplayContainer {
border-top: none;
overflow: visible !important;
position: static !important;
@ -858,19 +831,16 @@ blockquote blockquote blockquote blockquote blockquote blockquote {
div.mailDisplayHeaders {
padding-top: 10px;
}
div.mailDisplayContainer.mailvelopeTopContainer {
.mailDisplayContainer.mailvelopeTopContainer {
top: 190px;
}
div.mailDisplayContainer.mailvelopeTopContainer > iframe {
.mailDisplayContainer.mailvelopeTopContainer > iframe {
position: static;
min-width: 860px;
}
.mail_extraEmails > a {
display: inline-block;
}
div.mail_extraEmails + img.et2_button.et2_button_icon.ui-button.et2_clickable {
display: none !important;
}
.et2_email:after {
content: " | ";
}
@ -1015,6 +985,7 @@ div#mail-index_nm.splitter-pane {
min-width: 3.7em !important;
}
#popupMainDiv {
height: 99%;
padding: 5px;
}
#popupMainDiv .et2_grid tr td {
@ -1042,10 +1013,6 @@ iframe#mail-display_mailDisplayBodySrc {
height: 99%;
/*border: 4px solid yellow;*/
}
/*Border around iframe*/
.mailDisplayContainer {
border: 0px;
}
body {
background-color: white;
}
@ -1350,7 +1317,6 @@ body {
* ##################################################################################
*/
#mail-display {
min-height: 768px;
padding: 5px;
}
#mail-display .mailDisplayAttachments {
@ -1904,30 +1870,6 @@ div.mailPreviewHeaders img.et2_button_icon {
}
/*######################################################*/
/*Diplay : View */
.mailDisplayContainer,
.mailDisplayAttachments {
display: block;
display: -moz-inline-stack;
display: -moz-box;
width: 99%;
overflow: hidden;
overflow-y: auto;
left: 3px;
right: 3px;
z-index: 100;
}
.mailDisplayContainer {
position: fixed;
overflow: hidden;
overflow-y: auto;
border-top: 2px solid silver;
top: 120px;
bottom: 108px;
border-bottom: 1px solid silver;
width: 98%;
background-color: white;
margin-left: 10px;
}
.mailDisplayHeaders {
overflow: hidden;
}

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

@ -18,6 +18,7 @@
#popupMainDiv{
height: 99%;
padding: 5px;
.et2_grid{
tr{
@ -51,10 +52,6 @@ iframe#mail-display_mailDisplayBodySrc{
/*border: 4px solid yellow;*/
}
/*Border around iframe*/
.mailDisplayContainer{
border: 0px;
}
body {
background-color: white;
@ -377,11 +374,7 @@ body {
*/
#mail-display {
// gesamtbreite
min-height: 768px;
padding: 5px;
.mailDisplayAttachments {
// background-color:#efefdf;
max-height: 12%;
@ -1002,29 +995,6 @@ div.mailPreviewHeaders img.et2_button_icon {
/*######################################################*/
/*Diplay : View */
.mailDisplayContainer, .mailDisplayAttachments {
display: block;
display: -moz-inline-stack;
display: -moz-box;
width: 99%;
overflow: hidden;
overflow-y: auto;
left: 3px;
right: 3px;
z-index: 100;
}
.mailDisplayContainer {
position: fixed;
overflow: hidden;
overflow-y: auto;
border-top: 2px solid silver;
top: 120px;
bottom: 108px;
border-bottom: 1px solid silver;
width: 98%;
background-color: white;
margin-left: 10px;
}
.mailDisplayHeaders {
overflow: hidden;