WIP Mail app styling:

-Remove legacy widgets from mail
-Fix iframe not being full height in preview
This commit is contained in:
Hadi Nategh 2022-07-15 11:34:30 +02:00
parent 6d97cb17f4
commit 805ac7e830
4 changed files with 40 additions and 32 deletions

View File

@ -452,7 +452,7 @@ div.mail-compose_fileselector {
background-color: white;
}
div#mail-index_mailPreview > div, div#mail-index_mailPreview > et2-hbox {
#mail-index_mailPreview > div, #mail-index_mailPreview > et2-hbox {
padding-left: 8px !important;
}
@ -670,7 +670,9 @@ div.mailDisplayHeaders div.mail_extraEmails.visible {
.mailPreviewHeaders :first-child, .mailDisplayHeaders :first-child {
width: 5em;
flex: 0 1 auto;
flex: 0 0 auto;
color: #7a7a7a;
text-align: end;
}
div.mailPreviewHeaders div.mail_extraEmails {
@ -682,13 +684,13 @@ div.mailPreviewHeaders div.mail_extraEmails {
vertical-align: top;
}
#mail-index div#mail-index_mailPreview div#mail-index_mailPreviewHeadersSubject {
#mail-index #mail-index_mailPreview #mail-index_mailPreviewHeadersSubject {
width: 90%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
#mail-index div#mail-index_mailPreview div#mail-index_mailPreviewHeadersSubject > span:not(:first-child) {
#mail-index #mail-index_mailPreview #mail-index_mailPreviewHeadersSubject > span:not(:first-child) {
white-space: nowrap;
display: inline;
}
@ -1005,4 +1007,5 @@ div#mail-index_nm.splitter-pane {min-height: 100px;}
#calendar-meeting table.et2_grid.meetingRequest td {
padding-left: 8px !important;
}
}
#mail-index_mailPreview_mailPreviewContainer {height:100%;}

View File

@ -5,12 +5,12 @@
<template id="mail.index.splitter" height="100%" template="" lang="" group="0" version="1.9.001">
<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"/>
<old-vbox id="mailPreview" width="100%">
<vbox id="mailPreview" width="100%">
<toolbar id="toolbar" list_header="short"/>
<old-box id="blank" disabled="false">
<box id="blank" disabled="false">
<image src="mail"/>
<description value="Select an item to read"/>
</old-box>
</box>
<hbox width="100%" id="mailPreviewHeadersFrom" class="mailPreviewHeaders">
<description value="From"/>
<et2-select-email id="fromAddress" readonly="true"></et2-select-email>
@ -30,13 +30,13 @@
<description value="CC"/>
<et2-select-email id="CCAddress" readonly="true"></et2-select-email>
</hbox>
<old-hbox class="mailPreviewHeaders smimeIcons">
<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>
<old-hbox id="mailPreviewHeadersAttachments" class="mailPreviewHeaders">
</hbox>
<hbox id="mailPreviewHeadersAttachments" class="mailPreviewHeaders">
<description value="Attachments"/>
<grid disabled="@no_griddata" id="previewAttachmentArea" class="previewAttachmentArea egwGridView_grid">
<columns>
@ -84,11 +84,11 @@
<buttononly class="transparent-button" statustext="Show all attachments"
image="foldertree_nolines_plus" width="16px" height="16px"
onclick="app.mail.showAllHeader"/>
</old-hbox>
<old-box id="mailPreviewContainer">
</hbox>
<box id="mailPreviewContainer">
<iframe frameborder="1" id="messageIFRAME" scrolling="auto"/>
</old-box>
</old-vbox>
</box>
</vbox>
</split>
</template>
<template id="mail.index.nosplitter" template="" lang="" group="0" version="1.9.001">

View File

@ -448,8 +448,8 @@ div.mail-compose_fileselector {
position: relative;
background-color: white;
}
div#mail-index_mailPreview > div,
div#mail-index_mailPreview > et2-hbox {
#mail-index_mailPreview > div,
#mail-index_mailPreview > et2-hbox {
padding-left: 8px !important;
}
#mail-index_mailPreview .et2_email > span {
@ -657,7 +657,9 @@ div.mailDisplayHeaders div.mail_extraEmails.visible {
.mailPreviewHeaders :first-child,
.mailDisplayHeaders :first-child {
width: 5em;
flex: 0 1 auto;
flex: 0 0 auto;
color: #7a7a7a;
text-align: end;
}
div.mailPreviewHeaders div.mail_extraEmails {
display: inline-block;
@ -667,13 +669,13 @@ div.mailPreviewHeaders div.mail_extraEmails {
text-overflow: ellipsis;
vertical-align: top;
}
#mail-index div#mail-index_mailPreview div#mail-index_mailPreviewHeadersSubject {
#mail-index #mail-index_mailPreview #mail-index_mailPreviewHeadersSubject {
width: 90%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
#mail-index div#mail-index_mailPreview div#mail-index_mailPreviewHeadersSubject > span:not(:first-child) {
#mail-index #mail-index_mailPreview #mail-index_mailPreviewHeadersSubject > span:not(:first-child) {
white-space: nowrap;
display: inline;
}
@ -967,6 +969,9 @@ div#mail-index_nm.splitter-pane {
#calendar-meeting table.et2_grid.meetingRequest td {
padding-left: 8px !important;
}
#mail-index_mailPreview_mailPreviewContainer {
height: 100%;
}
#popupMainDiv {
padding: 5px;
}
@ -1031,26 +1036,26 @@ body {
border-top: 1px solid #B4B4B4;
border-left: 0;
}
#mail-index div#mail-index_mailPreview {
#mail-index #mail-index_mailPreview {
margin: 0;
}
#mail-index div#mail-index_mailPreview div#mail-index_mailPreviewHeadersFrom {
#mail-index #mail-index_mailPreview #mail-index_mailPreviewHeadersFrom {
width: 50%;
}
#mail-index div#mail-index_mailPreview div#mail-index_mailPreviewHeadersTo {
#mail-index #mail-index_mailPreview #mail-index_mailPreviewHeadersTo {
width: 50%;
}
#mail-index div#mail-index_mailPreview div#mail-index_mailPreviewHeadersDate {
#mail-index #mail-index_mailPreview #mail-index_mailPreviewHeadersDate {
position: absolute;
right: 0px;
margin: 3px 5px 0 0;
}
#mail-index div#mail-index_mailPreview div#mail-index_mailPreviewHeadersSubject {
#mail-index #mail-index_mailPreview #mail-index_mailPreviewHeadersSubject {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
#mail-index div#mail-index_mailPreview div#mail-index_mailPreviewHeadersSubject > span {
#mail-index #mail-index_mailPreview #mail-index_mailPreviewHeadersSubject > span {
white-space: nowrap;
}
/*##############################################

View File

@ -98,32 +98,32 @@ body {
}
// Ansicht der Emails
div#mail-index_mailPreview {
#mail-index_mailPreview {
margin: 0;
// From
div#mail-index_mailPreviewHeadersFrom {
#mail-index_mailPreviewHeadersFrom {
width: 50%;
}
// An
div#mail-index_mailPreviewHeadersTo {
#mail-index_mailPreviewHeadersTo {
width: 50%;
}
// Date
div#mail-index_mailPreviewHeadersDate {
#mail-index_mailPreviewHeadersDate {
position: absolute;
right: 0px;
margin: 3px 5px 0 0;
}
// Subject
div#mail-index_mailPreviewHeadersSubject {
#mail-index_mailPreviewHeadersSubject {
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
div#mail-index_mailPreviewHeadersSubject > span {
#mail-index_mailPreviewHeadersSubject > span {
white-space: nowrap;
}
} // Ende: Ansicht der Emails