From 12e09b3c26937f2bcd2c636bfb3a36f9a6b164e7 Mon Sep 17 00:00:00 2001
From: zelfroster <sumitkumarsoni123@gmail.com>
Date: Fri, 17 Mar 2023 06:22:33 +0530
Subject: [PATCH] fix: for more than 1 recipient, recipient name was getting
 added on next line

---
 webui-src/app/mail/mail.css     | 22 ++++++++++++++++++++--
 webui-src/app/mail/mail_util.js | 20 +++++++++++++++++++-
 2 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/webui-src/app/mail/mail.css b/webui-src/app/mail/mail.css
index 9e6647d..cb8e37a 100644
--- a/webui-src/app/mail/mail.css
+++ b/webui-src/app/mail/mail.css
@@ -61,6 +61,24 @@ input.star-check:checked + label.star-check {
   color: #fcba03;
 }
 
+/* mail_util.js styles */
+.button-container {
+  display: flex;
+}
+.truncate {
+  display: flex;
+  width: 70vw;
+  height: 1rem;
+  flex-wrap: wrap;
+  gap: 4px;
+  overflow: hidden;
+}
+#show-more, #show-less {
+  font-size: 0.8em;
+  width: 100px;
+  height: max-content;
+}
+
 iframe.msg {
   border: 0;
   width: 100%;
@@ -89,11 +107,11 @@ iframe.msg {
   width: 70%;
   bottom: 50%;
   right: 58%;
-  
+
 }
 .mail-node-panel {
   position: relative;
   bottom: 680px;
   margin-left: 200px;
   animation: fadein 0.5s;
-}
\ No newline at end of file
+}
diff --git a/webui-src/app/mail/mail_util.js b/webui-src/app/mail/mail_util.js
index bd5b35a..748375d 100644
--- a/webui-src/app/mail/mail_util.js
+++ b/webui-src/app/mail/mail_util.js
@@ -177,9 +177,27 @@ const MessageView = () => {
           ]),
           toList &&
           Object.keys(toList).length > 0 &&
+          // TODO: optimize javascript for show-more and show-less working
           m('to', { style: { display: 'block ruby' } }, [
             m('p', { style: { fontWeight: 'bold' } }, 'To: '),
-            Object.keys(toList).map((key, index) => m('p', rs.userList.userMap[key] + ', ')),
+            m('div.truncate[id=truncate]',
+              Object.keys(toList).map((key, index) => m('p', rs.userList.userMap[key] + ', ')),
+            ),
+            m('button[id=show-more]', {
+              style: { display: Object.keys(toList).length > 10 ? 'block' : 'none' },
+              onclick: () => {
+                document.querySelector('#show-more').style.display = 'none';
+                document.querySelector('#truncate').style.height = 'max-content';
+                document.querySelector('#show-less').style.display = 'block';
+              }
+            }, 'Show More'),
+            m('button[id=show-less][style="display: none;"]', {
+              onclick: () => {
+                document.querySelector('#show-more').style.display = 'block';
+                document.querySelector('#truncate').style.height = '1rem';
+                document.querySelector('#show-less').style.display = 'none';
+              }
+            }, 'Show Less'),
           ]),
           ccList &&
           Object.keys(ccList).length > 0 &&