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

WIP Mail app styling:

Browse Source 
-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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -452,7 +452,7 @@ div.mail-compose_fileselector {
background-color: white; 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; padding-left: 8px !important;
} }
@ -670,7 +670,9 @@ div.mailDisplayHeaders div.mail_extraEmails.visible {
.mailPreviewHeaders :first-child, .mailDisplayHeaders :first-child { .mailPreviewHeaders :first-child, .mailDisplayHeaders :first-child {
width: 5em; width: 5em;
flex: 0 1 auto; flex: 0 0 auto;
color: #7a7a7a;
text-align: end;
} }
div.mailPreviewHeaders div.mail_extraEmails { div.mailPreviewHeaders div.mail_extraEmails {
@ -682,13 +684,13 @@ div.mailPreviewHeaders div.mail_extraEmails {
vertical-align: top; vertical-align: top;
} }
#mail-index div#mail-index_mailPreview div#mail-index_mailPreviewHeadersSubject { #mail-index #mail-index_mailPreview #mail-index_mailPreviewHeadersSubject {
width: 90%; width: 90%;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
white-space: nowrap; 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; white-space: nowrap;
display: inline; display: inline;
} }
@ -1005,4 +1007,5 @@ 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%;}

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

@ -5,12 +5,12 @@
<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"/>
<old-vbox id="mailPreview" width="100%"> <vbox id="mailPreview" width="100%">
<toolbar id="toolbar" list_header="short"/> <toolbar id="toolbar" list_header="short"/>
<old-box id="blank" disabled="false"> <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> </box>
<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>
@ -30,13 +30,13 @@
<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>
</hbox> </hbox>
<old-hbox class="mailPreviewHeaders smimeIcons"> <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"/>
<image id="smime_encryption" src="smime_encrypt" statustext="Smime encrypted message" <image id="smime_encryption" src="smime_encrypt" statustext="Smime encrypted message"
disabled="true" align="right" width="24"/> disabled="true" align="right" width="24"/>
</old-hbox> </hbox>
<old-hbox id="mailPreviewHeadersAttachments" class="mailPreviewHeaders"> <hbox id="mailPreviewHeadersAttachments" class="mailPreviewHeaders">
<description value="Attachments"/> <description value="Attachments"/>
<grid disabled="@no_griddata" id="previewAttachmentArea" class="previewAttachmentArea egwGridView_grid"> <grid disabled="@no_griddata" id="previewAttachmentArea" class="previewAttachmentArea egwGridView_grid">
<columns> <columns>
@ -84,11 +84,11 @@
<buttononly class="transparent-button" statustext="Show all attachments" <buttononly class="transparent-button" statustext="Show all attachments"
image="foldertree_nolines_plus" width="16px" height="16px" image="foldertree_nolines_plus" width="16px" height="16px"
onclick="app.mail.showAllHeader"/> onclick="app.mail.showAllHeader"/>
</old-hbox> </hbox>
<old-box id="mailPreviewContainer"> <box id="mailPreviewContainer">
<iframe frameborder="1" id="messageIFRAME" scrolling="auto"/> <iframe frameborder="1" id="messageIFRAME" scrolling="auto"/>
</old-box> </box>
</old-vbox> </vbox>
</split> </split>
</template> </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">

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

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

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

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