From 5c637e47bee4fd31d290a758bae491afc50b0c3c Mon Sep 17 00:00:00 2001
From: Hadi Nategh <hnategh@gmail.com>
Date: Thu, 28 Jul 2022 15:32:33 +0200
Subject: [PATCH] Use et2-details for mail from and attachments

---
 mail/templates/default/app.css     |   2 +-
 mail/templates/default/display.xet | 209 ++++++++++++++++-------------
 mail/templates/default/index.xet   |  79 +++++++----
 mail/templates/pixelegg/app.css    |   2 +-
 4 files changed, 170 insertions(+), 122 deletions(-)

diff --git a/mail/templates/default/app.css b/mail/templates/default/app.css
index 9cacfcf15e..1d085886da 100644
--- a/mail/templates/default/app.css
+++ b/mail/templates/default/app.css
@@ -175,7 +175,7 @@ A.sieveRowInActive
 	bottom:80px;
 }
 table tr.attachmentRow > td{
-	padding:0 !important;
+	vertical-align: middle;
 }
 table tr.attachmentRow > td > img {
 	background:transparent;
diff --git a/mail/templates/default/display.xet b/mail/templates/default/display.xet
index 4cf2819282..6f1885e4ef 100644
--- a/mail/templates/default/display.xet
+++ b/mail/templates/default/display.xet
@@ -22,101 +22,126 @@
 			<hbox width="100%" class="mailPreviewHeaders">
 				<lavatar src="@avatar" lname="@address" shape="rounded"/>
 				<vbox class="previewWrapper">
-					<details class="details" title="details" toggle_align="left">
-							<hbox  disabled="!@from">
-                                <description value="From" class="firstColumnTitle"/>
-                                <grid id="from">
-                                    <columns>
-                                        <column/>
-                                    </columns>
-                                    <rows>
-                                        <row>
-                                         	<et2-select-email id="${row}" readonly="true"></et2-select-email>
-                                        </row>
-                                    </rows>
-                                </grid>
-                            </hbox>
-                            <hbox disabled="!@sender">
-                                <description value="Sender" class="firstColumnTitle"/>
-                                <grid id="sender">
-                                    <columns>
-                                        <column/>
-                                    </columns>
-                                    <rows>
-                                        <row>
-                                            <et2-select-email id="${row}" readonly="true"></et2-select-email>
-                                        </row>
-                                    </rows>
-                                </grid>
-                            </hbox>
-                            <hbox disabled="!@to">
-                                <description value="To" class="firstColumnTitle"/>
-                                <grid id="to">
-                                    <columns>
-                                        <column/>
-                                    </columns>
-                                    <rows>
-                                        <row>
-                                            <et2-select-email id="${row}" readonly="true"></et2-select-email>
-                                        </row>
-                                    </rows>
-                                </grid>
-                            </hbox>
-                            <hbox disabled="!@cc">
-                                <description value="Cc" class="firstColumnTitle"/>
-                                <grid id="cc">
-                                    <columns>
-                                        <column/>
-                                    </columns>
-                                    <rows>
-                                        <row>
-                                            <et2-select-email id="${row}" readonly="true"></et2-select-email>
-                                        </row>
-                                    </rows>
-                                </grid>
-                            </hbox>
-                            <hbox disabled="!@bcc">
-                                <description value="Bcc" class="firstColumnTitle"/>
-                                <grid id="bcc">
-                                    <columns>
-                                        <column/>
-                                    </columns>
-                                    <rows>
-                                        <row>
-                                            <et2-select-email id="${row}" readonly="true"></et2-select-email>
-                                        </row>
-                                    </rows>
-                                </grid>
-                            </hbox> -->
-					</details>
-					<details  title="@attachmentsBlockTitle" toggle_align="left" class="attachments" disabled="!@mail_displayattachments">
-						<grid id="mail_displayattachments" 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%"/>
-								<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]"/>
-                                    <et2-dropdown-button id="${row}[actions]" label="$row_cont[actionsDefaultLabel]" readonly="false" onchange="app.mail.attachmentsBlockActions" onclick="app.mail.attachmentsBlockActions"/>
-								</row>
-							</rows>
-						</grid>
-					</details>
+					<et2-details class="details" title="details" toggleOnHover="true" hoist="true">
+                        <et2-select-email slot="summary" value="@from" readonly="true"/>
+                        <hbox  disabled="!@from">
+                            <description value="From" class="firstColumnTitle"/>
+                            <grid id="from">
+                                <columns>
+                                    <column/>
+                                </columns>
+                                <rows>
+                                    <row>
+                                        <et2-select-email id="${row}" readonly="true"></et2-select-email>
+                                    </row>
+                                </rows>
+                            </grid>
+                        </hbox>
+                        <hbox disabled="!@sender">
+                            <description value="Sender" class="firstColumnTitle"/>
+                            <grid id="sender">
+                                <columns>
+                                    <column/>
+                                </columns>
+                                <rows>
+                                    <row>
+                                        <et2-select-email id="${row}" readonly="true"></et2-select-email>
+                                    </row>
+                                </rows>
+                            </grid>
+                        </hbox>
+                        <hbox disabled="!@to">
+                            <description value="To" class="firstColumnTitle"/>
+                            <grid id="to">
+                                <columns>
+                                    <column/>
+                                </columns>
+                                <rows>
+                                    <row>
+                                        <et2-select-email id="${row}" readonly="true"></et2-select-email>
+                                    </row>
+                                </rows>
+                            </grid>
+                        </hbox>
+                        <hbox disabled="!@cc">
+                            <description value="Cc" class="firstColumnTitle"/>
+                            <grid id="cc">
+                                <columns>
+                                    <column/>
+                                </columns>
+                                <rows>
+                                    <row>
+                                        <et2-select-email id="${row}" readonly="true"></et2-select-email>
+                                    </row>
+                                </rows>
+                            </grid>
+                        </hbox>
+                        <hbox disabled="!@bcc">
+                            <description value="Bcc" class="firstColumnTitle"/>
+                            <grid id="bcc">
+                                <columns>
+                                    <column/>
+                                </columns>
+                                <rows>
+                                    <row>
+                                        <et2-select-email id="${row}" readonly="true"></et2-select-email>
+                                    </row>
+                                </rows>
+                            </grid>
+                        </hbox>
+					</et2-details>
+
 				</vbox>
 				<date-time-today align="right" id="mail_displaydate" readonly="true"/>
 			</hbox>
+            <et2-details  title="@attachmentsBlockTitle" toggleOnHover="true" class="attachments" hoist="true" disabled="!@mail_displayattachments">
+                <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="mail_displayattachments[0][attachment_number]" />
+                                <description id="mail_displayattachments[0][partID]" />
+                                <description id="mail_displayattachments[0][type]" />
+                                <description id="mail_displayattachments[0][winmailFlag]" />
+                                <description class="et2_link useEllipsis" id="mail_displayattachments[0][filename]" no_lang="1" expose_view="true" mime="0[type]" mime_data="mail_displayattachments[0][mime_data]" href="mail_displayattachments[0][mime_url]"/>
+                                <description align="right" id="mail_displayattachments[0][size]"/>
+                            </row>
+                        </rows>
+                    </grid>
+                </hbox>
+                <grid id="mail_displayattachments" 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%"/>
+                        <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]"/>
+                            <et2-dropdown-button id="${row}[actions]" label="$row_cont[actionsDefaultLabel]" readonly="false" onchange="app.mail.attachmentsBlockActions" onclick="app.mail.attachmentsBlockActions"/>
+                        </row>
+                    </rows>
+                </grid>
+            </et2-details>
 			<box class="mailDisplayContainer">
 				<iframe frameborder="1" class="mail_displaybody" id="mailDisplayBodySrc" name="mailDisplayBodySrc" scrolling="auto" width="100%"/>
 			</box>
diff --git a/mail/templates/default/index.xet b/mail/templates/default/index.xet
index c9749f08b4..d78f1782dd 100644
--- a/mail/templates/default/index.xet
+++ b/mail/templates/default/index.xet
@@ -38,9 +38,10 @@
                             </hbox>
                         </hbox>
                         <hbox width="100%" class="mailPreviewHeaders">
-                                <lavatar src="@avatar" lname="@address" shape="rounded"/>
+                                <lavatar src="@avatar" lname="@address" shape="rounded" size="2.45em"/>
                                 <vbox>
-                                    <details class="details" title="details" toggle_align="left">
+                                    <et2-details class="details" toggleOnHover="true" hoist="true">
+                                        <et2-select-email slot="summary" id="fromaddress" readonly="true"/>
                                         <hbox>
                                             <description value="From" class="firstColumnTitle"/>
                                             <grid id="additionalfromaddress">
@@ -80,37 +81,59 @@
                                                 </rows>
                                             </grid>
                                         </hbox>
-                                    </details>
-                                    <details  title="@attachmentsBlockTitle" toggle_align="left" class="attachments" disabled="!@attachmentsBlock">
-                                        <grid 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="10%"/>
-                                            </columns>
-                                            <rows>
-                                                <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>
-                                    </details>
+                                    </et2-details>
                                 </vbox>
-
                                 <date-time-today align="right" id="date" readonly="true"/>
                             </hbox>
                         <hbox>
+                            <et2-details  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="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 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" 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>
+                            </et2-details>
                         </hbox>
                         <box id="mailPreviewContainer">
                             <iframe frameborder="1" id="messageIFRAME" scrolling="auto"/>
diff --git a/mail/templates/pixelegg/app.css b/mail/templates/pixelegg/app.css
index a71c61f2c2..2e12125f09 100755
--- a/mail/templates/pixelegg/app.css
+++ b/mail/templates/pixelegg/app.css
@@ -167,7 +167,7 @@ A.sieveRowInActive {
   bottom: 80px;
 }
 table tr.attachmentRow > td {
-  padding: 0 !important;
+  vertical-align: middle;
 }
 table tr.attachmentRow > td > img {
   background: transparent;