From 6118bf6a7a4778d6ddd6c2c54ea73f9eec6c560b Mon Sep 17 00:00:00 2001
From: Hadi Nategh <hnategh@gmail.com>
Date: Tue, 23 Aug 2022 15:57:30 +0200
Subject: [PATCH] Fix mail preview in mobile template

---
 mail/templates/mobile/index.xet |   9 +-
 mail/templates/mobile/view.xet  | 142 ++++++++++++++++----------------
 pixelegg/mobile/fw_mobile.css   |  20 ++---
 pixelegg/mobile/fw_mobile.less  |   8 +-
 4 files changed, 93 insertions(+), 86 deletions(-)

diff --git a/mail/templates/mobile/index.xet b/mail/templates/mobile/index.xet
index 48b51a80cc..f11efa7b42 100644
--- a/mail/templates/mobile/index.xet
+++ b/mail/templates/mobile/index.xet
@@ -5,7 +5,7 @@
 	<template id="mail.index.rows" template="" lang="" group="0" version="1.9.001">
 		<grid width="100%">
 			<columns>
-				<column width="20"/>
+				<column width="50"/>
 				<column width="90%"/>
 				<column width="80"/>
 			</columns>
@@ -14,7 +14,10 @@
 
 				</row>
 				<row>
-					<description class="$row_cont[class] mobile_cat_col"/>
+					<hbox>
+						<description class="$row_cont[class] mobile_cat_col"/>
+						<lavatar src="$row_cont[avatar]" lname="$row_cont[address]" shape="rounded" size="2.75em"/>
+					</hbox>
 					<vbox>
 						<url-email id="${row}[address]" class="$row_cont[class]" readonly="true"/>
 						<hbox>
@@ -25,7 +28,7 @@
 					</vbox>
 					<vbox>
 						<hbox>
-							<time_or_date align="center"  class="$row_cont[class]" id="${row}[date]" readonly="true"/>
+							<date-time-today align="center"  class="$row_cont[class]" id="${row}[date]" readonly="true"/>
 						</hbox>
 						<hbox>
 							<image src="$row_cont[smime]" height="16px"/>
diff --git a/mail/templates/mobile/view.xet b/mail/templates/mobile/view.xet
index b43cab4f81..abe9427401 100644
--- a/mail/templates/mobile/view.xet
+++ b/mail/templates/mobile/view.xet
@@ -10,83 +10,87 @@
 					<description/>
 				</hbox>
 			</hbox>
-			<hbox  class="mail-d-h1" width="100%">
-				<description align="left" id="subject" no_lang="1" readonly="true"/>
-				<hbox class="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"/>
+			<hbox class="mailPreviewHeaders">
+				<description id="subject" 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="!@smime=smime_sign"
+						   align="right" width="24"/>
+					<image id="smime_encryption" src="smime_encrypt" statustext="Smime encrypted message"
+						   disabled="!@smime=smime_encrypt" align="right" width="24"/>
 				</hbox>
 			</hbox>
-			<hbox class="mail-d-h2" disabled="!@fromaddress" width="100%">
-				<url-email id="fromaddress" readonly="true"/>
-			</hbox>
-			<hbox class="mail-d-h2" align="right" width="100%">
-				<date-time id="date" readonly="true"/>
-			</hbox>
-			<hbox class="mail-d-h2" disabled="!@toaddress" width="100%">
-				<description value="To"/>
-				<url-email id="toaddress" readonly="true"/>
-				<description id="toaddressdetails"/>
-			</hbox>
-			<hbox>
-				<details class="details" title="details" toggle_align="left">
-					<hbox class="mail-d-h2" disabled="!@toaddress" width="100%">
-						<description value="To"/>
-						<grid id="additionaltoaddress">
+			<hbox width="100%" class="mailPreviewHeaders">
+				<lavatar src="@avatar" lname="@address" shape="rounded" size="2.75em"/>
+				<vbox>
+					<hbox>
+						<et2-details class="details" toggleOnHover="true" hoist="true" toggleAlign="left">
+							<et2-select-email slot="summary" id="fromaddress" readonly="true"/>
+							<hbox>
+								<description value="From" class="firstColumnTitle"/>
+								<et2-select-email id="additionalfromaddress" readonly="true"></et2-select-email>
+							</hbox>
+							<hbox disabled="!@toaddress" width="100%">
+								<description value="To" class="firstColumnTitle"/>
+								<et2-select-email id="additionaltoaddress" readonly="true"></et2-select-email>
+							</hbox>
+							<hbox disabled="!@ccaddress"  width="100%">
+								<description value="Cc" class="firstColumnTitle"/>
+								<et2-select-email id="ccaddress" readonly="true"></et2-select-email>
+							</hbox>
+						</et2-details>
+						<date-time-today align="right" id="date" readonly="true"/>
+					</hbox>
+					<et2-details  toggleAlign="left" title="@attachmentsBlockTitle" toggleOnHover="true" hoist="true" class="attachments" disabled="!@attachmentsBlock">
+						<hbox slot="summary">
+							<grid class="previewAttachmentArea egwGridView_grid" >
+								<columns>
+									<column disabled="!@showtempname"/>
+									<column disabled="!@showtempname"/>
+									<column disabled="!@showtempname"/>
+									<column disabled="!@showtempname"/>
+									<column width="70%" />
+									<column width="11%" />
+									<column width="10%"/>
+								</columns>
+								<rows>
+									<row class="row attachmentRow">
+										<description id="attachmentsBlock[0][attachment_number]" />
+										<description id="attachmentsBlock[0][partID]" />
+										<description id="attachmentsBlock[0][type]" />
+										<description id="attachmentsBlock[0][winmailFlag]" />
+										<description class="et2_link useEllipsis" id="attachmentsBlock[0][filename]" no_lang="1" expose_view="true" mime="@attachmentsBlock[0][type]" mime_data="@attachmentsBlock[0][mime_data]" href="@attachmentsBlock[0][mime_url]"/>
+										<description align="right" id="attachmentsBlock[0][size]"/>
+									</row>
+								</rows>
+							</grid>
+						</hbox>
+
+						<grid id="attachmentsBlock" class="previewAttachmentArea egwGridView_grid">
 							<columns>
-								<column/>
+								<column disabled="!@showtempname"/>
+								<column disabled="!@showtempname"/>
+								<column disabled="!@showtempname"/>
+								<column disabled="!@showtempname"/>
+								<column width="70%" />
+								<column width="11%" />
+								<column width="10%"/>
 							</columns>
 							<rows>
-								<row>
-									<url-email id="${row}"/>
+								<row class="row attachmentRow" id="${row}">
+									<description id="${row}[attachment_number]" />
+									<description id="${row}[partID]" />
+									<description id="${row}[type]" />
+									<description id="${row}[winmailFlag]" />
+									<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]"/>
+									<et2-dropdown-button id="${row}[actions]" label="$row_cont[actionsDefaultLabel]" onchange="app.mail.attachmentsBlockActions" onclick="app.mail.attachmentsBlockActions"/>
 								</row>
 							</rows>
 						</grid>
-					</hbox>
-					<hbox class="mail-d-h2" disabled="!@ccaddress"  width="100%">
-						<description value="Cc"/>
-						<grid id="ccaddress">
-							<columns>
-								<column/>
-							</columns>
-							<rows>
-								<row>
-									<url-email id="${row}"/>
-								</row>
-							</rows>
-						</grid>
-					</hbox>
-				</details>
-				<details  title="show attachments" toggle_align="left" class="attachments">
-					<grid disabled="@no_griddata" id="attachmentsBlock" class="previewAttachmentArea egwGridView_grid">
-						<columns>
-							<column disabled="!@showtempname"/>
-							<column disabled="!@showtempname"/>
-							<column disabled="!@showtempname"/>
-							<column disabled="!@showtempname"/>
-							<column width="70%" />
-							<column width="11%" />
-							<column width="3%"/>
-							<column width="3%"/>
-							<column width="3%"/>
-							<column />
-						</columns>
-						<rows>
-							<row class="row attachmentRow">
-								<description id="${row}[attachment_number]" />
-								<description id="${row}[partID]" />
-								<description id="${row}[type]" />
-								<description id="${row}[winmailFlag]" />
-								<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]" 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>
-				</details>
+					</et2-details>
+				</vbox>
 			</hbox>
 			<box height="100%">
 				<iframe id="iframe" width="100%" height="100%" scrolling="auto"/>
diff --git a/pixelegg/mobile/fw_mobile.css b/pixelegg/mobile/fw_mobile.css
index f53203c95e..2e5cbec6c9 100644
--- a/pixelegg/mobile/fw_mobile.css
+++ b/pixelegg/mobile/fw_mobile.css
@@ -9089,17 +9089,17 @@ table.egwGridView_grid img.et2_appicon {
   body td.et2_fullWidth {
     width: auto;
   }
-  body div.et2_toolbar.et2_head_toolbar {
+  body .et2_toolbar {
     background-color: transparent;
     padding: 1px 5px 5px 10px !important;
   }
-  body div.et2_toolbar.et2_head_toolbar button {
+  body .et2_toolbar button {
     width: 46px;
     height: 46px;
     background-size: 18px 18px;
     touch-action: auto;
   }
-  body div.et2_toolbar.et2_head_toolbar div.ui-toolbar-menulist {
+  body .et2_toolbar .ui-toolbar-menulist {
     width: 100%;
     left: 0px;
     overflow-y: auto !important;
@@ -9110,13 +9110,13 @@ table.egwGridView_grid img.et2_appicon {
     filter: progid:DXImageTransform.Microsoft.Shadow(color=#999999, direction=135, strength=3);
     -moz-user-select: none;
   }
-  body div.et2_toolbar.et2_head_toolbar button.et2_toolbar_hasCaption {
+  body .et2_toolbar button.et2_toolbar_hasCaption {
     width: auto;
   }
-  body div.et2_toolbar.et2_head_toolbar div.et2_toolbar_actionlist {
+  body .et2_toolbar .et2_toolbar_actionlist {
     margin-left: 50px;
   }
-  body div.et2_toolbar.et2_head_toolbar div.et2_toolbar_actionlist button.et2_button.ui-draggable {
+  body .et2_toolbar .et2_toolbar_actionlist button.et2_button.ui-draggable {
     border: none !important;
     box-shadow: none !important;
     background-position: center !important;
@@ -9127,13 +9127,13 @@ table.egwGridView_grid img.et2_appicon {
     border: none;
     width: 40px;
   }
-  body div.et2_toolbar.et2_head_toolbar div.et2_toolbar_more {
+  body .et2_toolbar .et2_toolbar_more {
     position: inherit;
   }
-  body div.et2_toolbar.et2_head_toolbar div.et2_toolbar_more .ui-state-hover {
+  body .et2_toolbar .et2_toolbar_more .ui-state-hover {
     background: none;
   }
-  body div.et2_toolbar.et2_head_toolbar div.et2_toolbar_more .ui-toolbar-menulistHeader {
+  body .et2_toolbar .et2_toolbar_more .ui-toolbar-menulistHeader {
     color: transparent;
     height: 46px;
     width: 50px;
@@ -9148,7 +9148,7 @@ table.egwGridView_grid img.et2_appicon {
     background-size: 24px 24px !important;
     border: none;
   }
-  body div.et2_toolbar.et2_head_toolbar div.et2_toolbar_more .ui-toolbar-menulistHeader span {
+  body .et2_toolbar .et2_toolbar_more .ui-toolbar-menulistHeader span {
     display: none;
   }
   body .et2_tabbox.vertical .et2_tabflag {
diff --git a/pixelegg/mobile/fw_mobile.less b/pixelegg/mobile/fw_mobile.less
index 870a854d1f..ae9b3d55b6 100644
--- a/pixelegg/mobile/fw_mobile.less
+++ b/pixelegg/mobile/fw_mobile.less
@@ -1243,7 +1243,7 @@
 		//#											#
 		//###########################################
 
-		div.et2_toolbar.et2_head_toolbar {
+		.et2_toolbar {
 				background-color: transparent;
 				padding: 1px 5px 5px 10px !important;
 				button {
@@ -1252,7 +1252,7 @@
 					background-size: 18px 18px;
 					touch-action: auto;
 				}
-				div.ui-toolbar-menulist
+				.ui-toolbar-menulist
 				{
 					width: 100%;
 					left:0px;
@@ -1267,7 +1267,7 @@
 				button.et2_toolbar_hasCaption {
 					width:auto;
 				}
-				div.et2_toolbar_actionlist {
+				.et2_toolbar_actionlist {
 					margin-left: 50px;
 					button.et2_button.ui-draggable {
 						border: none !important;
@@ -1277,7 +1277,7 @@
 						width: 40px;
 					}
 				}
-				div.et2_toolbar_more {
+				.et2_toolbar_more {
 					position:inherit;
 					.ui-state-hover {
 						background:none;