From 9ec84baa32e117dccc9a86c4a8015f66530fc734 Mon Sep 17 00:00:00 2001
From: djmaze <djmaze@djmaze.lan>
Date: Fri, 23 Apr 2021 10:12:06 +0200
Subject: [PATCH] Cleanup attachments design

---
 dev/Styles/Attachmnets.less                   | 11 +++++-----
 .../templates/Views/User/MailMessageView.html | 20 ++++++-------------
 .../templates/Views/User/PopupsCompose.html   |  4 +---
 3 files changed, 12 insertions(+), 23 deletions(-)

diff --git a/dev/Styles/Attachmnets.less b/dev/Styles/Attachmnets.less
index 85ddab889..fa3b94f52 100644
--- a/dev/Styles/Attachmnets.less
+++ b/dev/Styles/Attachmnets.less
@@ -41,7 +41,7 @@
 	}
 
 	&.error {
-		.attachmentIcon, .attachmentSize, .attachmentName {
+		.iconMain, .iconPreview, .attachmentSize, .attachmentName {
 			color: red;
 		}
 	}
@@ -91,11 +91,10 @@
 		border-left: 1px solid #ddd;
 	}
 
-	.attachmentIcon {
-		margin: 6px 0 0;
+	.iconMain, .iconPreview {
+		box-sizing: border-box;
+		padding: 6px 0 0;
 		font-size: 36px;
-		width: 36px;
-		height: 36px;
 		color: #aaa;
 
 		&.icon-none {
@@ -125,7 +124,7 @@
 	}
 
 	.attachmentIconParent.hasPreview .showPreview,
-	.attachmentIconParent.hasPreplay .showPreview {
+	.attachmentIconParent.hasPreplay .showPreplay {
 		display: inline;
 		cursor: pointer;
 	}
diff --git a/snappymail/v/0.0.0/app/templates/Views/User/MailMessageView.html b/snappymail/v/0.0.0/app/templates/Views/User/MailMessageView.html
index 30ad24e94..de7b03f9b 100644
--- a/snappymail/v/0.0.0/app/templates/Views/User/MailMessageView.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/MailMessageView.html
@@ -276,25 +276,17 @@
 												<li class="attachmentItem" draggable="true"
 														data-bind="visible: !isLinked, event: { 'dragstart': eventDragStart }, attr: { 'title': fileName }, css: {'checked': checked}">
 													<div class="attachmentIconParent" data-bind="css: { 'hasPreview': hasPreview(), 'hasPreplay': hasPreplay(), 'isImage': isImage() }">
-														<div class="hidePreview">
-															<div class="iconMain">
-																<i class="attachmentIcon" data-bind="css: iconClass()"></i>
-															</div>
-														</div>
+														<i class="hidePreview iconMain" data-bind="css: iconClass()"></i>
 														<div class="showPreview">
-															<a data-bind="click: $root.attachmentPreview, css: {'attachmentImagePreview': isImage(), 'visible': !isLinked}, attr: { 'title': fileName, 'href': linkPreviewMain() }" target="_blank">
-																<div class="iconMain">
-																	<i class="attachmentIcon" data-bind="css: iconClass()"></i>
-																</div>
+															<a data-bind="css: {'attachmentImagePreview': isImage()}, attr: { 'title': fileName, 'href': linkPreviewMain() }" target="_blank">
+																<i class="iconMain" data-bind="css: iconClass()"></i>
 																<div class="iconBG" data-bind="attr: { 'style': linkThumbnailPreviewStyle() }"></div>
-																<div class="iconPreview attachmentIcon fontastic show-hover">👁</div>
+																<div class="iconPreview fontastic">👁</div>
 															</a>
 														</div>
 														<div class="showPreplay">
-															<div class="iconMain">
-																<i class="attachmentIcon" data-bind="css: iconClass()"></i>
-															</div>
-															<div class="iconPreview attachmentIcon fontastic show-hover">▶</div>
+															<i class="iconMain" data-bind="css: iconClass()"></i>
+															<div class="iconPreview fontastic">▶</div>
 														</div>
 													</div>
 													<div class="attachmentNameParent">
diff --git a/snappymail/v/0.0.0/app/templates/Views/User/PopupsCompose.html b/snappymail/v/0.0.0/app/templates/Views/User/PopupsCompose.html
index be21211f8..ccf3cc823 100644
--- a/snappymail/v/0.0.0/app/templates/Views/User/PopupsCompose.html
+++ b/snappymail/v/0.0.0/app/templates/Views/User/PopupsCompose.html
@@ -168,9 +168,7 @@
 					<ul class="attachmentList" data-bind="foreach: attachments">
 						<li class="attachmentItem" data-bind="attr: { 'title': title }, css: { 'waiting': waiting, 'error': '' !== error() }">
 							<div class="attachmentIconParent">
-								<div class="iconMain">
-									<i class="attachmentIcon" data-bind="css: iconClass(), visible: !uploading() || 0 === progress()"></i>
-								</div>
+								<i class="iconMain" data-bind="css: iconClass(), visible: !uploading() || 0 === progress()"></i>
 								<div class="iconProgress" data-bind="attr: { 'style': progressStyle }, visible: uploading"></div>
 								<div class="iconBG" data-bind="text: progressText, visible: uploading"></div>
 							</div>