From 805ac7e83022dd89d2facd906992d9273ca03bbb Mon Sep 17 00:00:00 2001
From: Hadi Nategh <hnategh@gmail.com>
Date: Fri, 15 Jul 2022 11:34:30 +0200
Subject: [PATCH] WIP Mail app styling: -Remove legacy widgets from mail -Fix
 iframe not being full height in preview

---
 mail/templates/default/app.css   | 13 ++++++++-----
 mail/templates/default/index.xet | 20 ++++++++++----------
 mail/templates/pixelegg/app.css  | 27 ++++++++++++++++-----------
 mail/templates/pixelegg/app.less | 12 ++++++------
 4 files changed, 40 insertions(+), 32 deletions(-)

diff --git a/mail/templates/default/app.css b/mail/templates/default/app.css
index 5facb18f29..9a93c4ed60 100644
--- a/mail/templates/default/app.css
+++ b/mail/templates/default/app.css
@@ -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;
-}
\ No newline at end of file
+}
+#mail-index_mailPreview_mailPreviewContainer {height:100%;}
\ No newline at end of file
diff --git a/mail/templates/default/index.xet b/mail/templates/default/index.xet
index e3e77f8ae2..ace5c89cf4 100644
--- a/mail/templates/default/index.xet
+++ b/mail/templates/default/index.xet
@@ -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">
diff --git a/mail/templates/pixelegg/app.css b/mail/templates/pixelegg/app.css
index 8a1724b8ae..dd223d1742 100755
--- a/mail/templates/pixelegg/app.css
+++ b/mail/templates/pixelegg/app.css
@@ -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;
 }
 /*##############################################
diff --git a/mail/templates/pixelegg/app.less b/mail/templates/pixelegg/app.less
index 995d6a410e..8a55b89b2c 100755
--- a/mail/templates/pixelegg/app.less
+++ b/mail/templates/pixelegg/app.less
@@ -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