Some styling improvements for mail preview

This commit is contained in:
Hadi Nategh 2022-08-04 12:29:42 +02:00
parent 2369daa2e8
commit 797600f899
4 changed files with 30 additions and 103 deletions

View File

@ -483,20 +483,21 @@ div.mail-compose_fileselector {
margin-bottom: 1em; margin-bottom: 1em;
font-size: 1.2em; font-size: 1.2em;
} }
.previewWrapper .et2_details.attachments { et2-details.details::part(summary) {
margin-top: 0.4em; padding-left: 1em;
} }
.previewWrapper .et2_details {
flex-direction: row; et2-details.attachments::part(header) {
text-align: start !important; padding-left: 0px;
} }
.previewWrapper .et2_details .et2_details_title { .mailDisplay et2-details::part(base),
margin: 0; .previewWrapper et2-details::part(base){
margin-left: 0.5em; border: none;
} }
.previewWrapper .et2_details .et2_details_toggle { et2-details.attachments::part(content) {
margin: 0; padding-left: 0px;
} }
#mail-index_mailPreview .et2_email > span { #mail-index_mailPreview .et2_email > span {
display: inline; display: inline;
} }

View File

@ -22,75 +22,29 @@
<hbox width="100%" class="mailPreviewHeaders"> <hbox width="100%" class="mailPreviewHeaders">
<lavatar src="@avatar" lname="@address" shape="rounded"/> <lavatar src="@avatar" lname="@address" shape="rounded"/>
<vbox class="previewWrapper"> <vbox class="previewWrapper">
<et2-details class="details" title="details" toggleOnHover="true" hoist="true"> <et2-details class="details" title="details" toggleOnHover="true" hoist="true" toggleAlign="left">
<et2-select-email slot="summary" value="@from" readonly="true"/> <et2-select-email slot="summary" value="@from" readonly="true"/>
<hbox disabled="!@from"> <hbox disabled="!@from">
<description value="From" class="firstColumnTitle"/> <description value="From" class="firstColumnTitle"/>
<grid id="from"> <et2-select-email id="from" readonly="true"></et2-select-email>
<columns>
<column/>
</columns>
<rows>
<row>
<et2-select-email id="${row}" readonly="true"></et2-select-email>
</row>
</rows>
</grid>
</hbox> </hbox>
<hbox disabled="!@sender"> <hbox disabled="!@sender">
<description value="Sender" class="firstColumnTitle"/> <description value="Sender" class="firstColumnTitle"/>
<grid id="sender"> <et2-select-email id="sender" readonly="true"></et2-select-email>
<columns>
<column/>
</columns>
<rows>
<row>
<et2-select-email id="${row}" readonly="true"></et2-select-email>
</row>
</rows>
</grid>
</hbox> </hbox>
<hbox disabled="!@to"> <hbox disabled="!@to">
<description value="To" class="firstColumnTitle"/> <description value="To" class="firstColumnTitle"/>
<grid id="to"> <et2-select-email id="to" readonly="true"></et2-select-email>
<columns>
<column/>
</columns>
<rows>
<row>
<et2-select-email id="${row}" readonly="true"></et2-select-email>
</row>
</rows>
</grid>
</hbox> </hbox>
<hbox disabled="!@cc"> <hbox disabled="!@cc">
<description value="Cc" class="firstColumnTitle"/> <description value="Cc" class="firstColumnTitle"/>
<grid id="cc"> <et2-select-email id="cc" readonly="true"></et2-select-email>
<columns>
<column/>
</columns>
<rows>
<row>
<et2-select-email id="${row}" readonly="true"></et2-select-email>
</row>
</rows>
</grid>
</hbox> </hbox>
<hbox disabled="!@bcc"> <hbox disabled="!@bcc">
<description value="Bcc" class="firstColumnTitle"/> <description value="Bcc" class="firstColumnTitle"/>
<grid id="bcc"> <et2-select-email id="bcc" readonly="true"></et2-select-email>
<columns>
<column/>
</columns>
<rows>
<row>
<et2-select-email id="${row}" readonly="true"></et2-select-email>
</row>
</rows>
</grid>
</hbox> </hbox>
</et2-details> </et2-details>
</vbox> </vbox>
<date-time-today align="right" id="mail_displaydate" readonly="true"/> <date-time-today align="right" id="mail_displaydate" readonly="true"/>
</hbox> </hbox>

View File

@ -38,46 +38,19 @@
<hbox width="100%" class="mailPreviewHeaders"> <hbox width="100%" class="mailPreviewHeaders">
<lavatar src="@avatar" lname="@address" shape="rounded" size="2.45em"/> <lavatar src="@avatar" lname="@address" shape="rounded" size="2.45em"/>
<vbox> <vbox>
<et2-details class="details" toggleOnHover="true" hoist="true"> <et2-details class="details" toggleOnHover="true" hoist="true" toggleAlign="left">
<et2-select-email slot="summary" id="fromaddress" readonly="true"/> <et2-select-email slot="summary" id="fromaddress" readonly="true"/>
<hbox> <hbox>
<description value="From" class="firstColumnTitle"/> <description value="From" class="firstColumnTitle"/>
<grid id="additionalfromaddress"> <et2-select-email id="additionalfromaddress" readonly="true"></et2-select-email>
<columns>
<column/>
</columns>
<rows>
<row>
<et2-select-email id="${row}" readonly="true"></et2-select-email>
</row>
</rows>
</grid>
</hbox> </hbox>
<hbox disabled="!@toaddress" width="100%"> <hbox disabled="!@toaddress" width="100%">
<description value="To" class="firstColumnTitle"/> <description value="To" class="firstColumnTitle"/>
<grid id="additionaltoaddress"> <et2-select-email id="additionaltoaddress" readonly="true"></et2-select-email>
<columns>
<column/>
</columns>
<rows>
<row>
<et2-select-email id="${row}" readonly="true"></et2-select-email>
</row>
</rows>
</grid>
</hbox> </hbox>
<hbox disabled="!@ccaddress" width="100%"> <hbox disabled="!@ccaddress" width="100%">
<description value="Cc" class="firstColumnTitle"/> <description value="Cc" class="firstColumnTitle"/>
<grid id="ccaddress"> <et2-select-email id="ccaddress" readonly="true"></et2-select-email>
<columns>
<column/>
</columns>
<rows>
<row>
<et2-select-email id="${row}" readonly="true"></et2-select-email>
</row>
</rows>
</grid>
</hbox> </hbox>
</et2-details> </et2-details>
</vbox> </vbox>

View File

@ -484,19 +484,18 @@ div.mail-compose_fileselector {
margin-bottom: 1em; margin-bottom: 1em;
font-size: 1.2em; font-size: 1.2em;
} }
.previewWrapper .et2_details.attachments { et2-details.details::part(summary) {
margin-top: 0.4em; padding-left: 1em;
} }
.previewWrapper .et2_details { et2-details.attachments::part(header) {
flex-direction: row; padding-left: 0px;
text-align: start !important;
} }
.previewWrapper .et2_details .et2_details_title { .mailDisplay et2-details::part(base),
margin: 0; .previewWrapper et2-details::part(base) {
margin-left: 0.5em; border: none;
} }
.previewWrapper .et2_details .et2_details_toggle { et2-details.attachments::part(content) {
margin: 0; padding-left: 0px;
} }
#mail-index_mailPreview .et2_email > span { #mail-index_mailPreview .et2_email > span {
display: inline; display: inline;