Improved attachment glyph handling

dev/Model/Attachment.js

@@ -163,7 +163,7 @@ export class AttachmentModel extends AbstractModel {
 	thumbnailStyle() {
 		return this.hasThumbnail()
 			? 'background:url(' + serverRequestRaw('ViewThumbnail', this.download) + ')'
-			: '';
+			: null;
 	}
 
 	/**

dev/Styles/User/Attachments.less

@@ -100,21 +100,21 @@
 	}
 */
 
-	.showPreview, .showPreplay,
+	.showPreview,
 	.hasPreview:hover .iconMain,
-	.hasPreplay:hover .iconMain,
-	.hasPreview .hidePreview,
-	.hasPreplay .hidePreview {
+	.hasPreview .hidePreview {
 		display: none;
 	}
 
-	.hasPreview:hover .iconPreview,
-	.hasPreplay:hover .iconPreview {
+	.hasPreview:hover .iconPreview {
 		display: inline-block;
 	}
 
-	.hasPreview .showPreview,
-	.hasPreplay .showPreplay {
+	.hasPreplay:hover .iconMain::before {
+		content: "▶";
+	}
+
+	.hasPreview .showPreview {
 		display: inline;
 		cursor: pointer;
 	}

snappymail/v/0.0.0/app/templates/Views/User/MailMessageView.html

@@ -231,19 +231,14 @@
 							<ul class="attachmentList" data-bind="foreach: listAttachments">
 								<li class="attachmentItem" draggable="true"
 										data-bind="event: { 'dragstart': eventDragStart }, attr: { 'title': fileName }, css: {'checked': checked}">
-									<div class="attachmentIconParent" data-bind="css: { 'hasPreview': hasPreview(), 'hasPreplay': hasPreplay(), 'isImage': isImage() }">
+									<div class="attachmentIconParent" data-bind="css: { 'hasPreview': hasPreview(), 'hasPreplay': hasPreplay(), 'isImage': isImage() }, attr: { 'style': thumbnailStyle() }">
 										<i class="hidePreview iconMain" data-bind="css: iconClass()"></i>
 										<div class="showPreview">
 											<a data-bind="css: {'attachmentImagePreview': isImage()}, attr: { 'title': fileName, 'href': linkPreviewMain() }" target="_blank">
 												<i class="iconMain" data-bind="visible: !hasThumbnail(), css: iconClass()"></i>
-												<div class="iconBG" data-bind="attr: { 'style': thumbnailStyle() }"></div>
 												<div class="iconPreview fontastic">👁</div>
 											</a>
 										</div>
-										<div class="showPreplay">
-											<i class="iconMain" data-bind="css: iconClass()"></i>
-											<div class="iconPreview fontastic">▶</div>
-										</div>
 									</div>
 									<div class="attachmentNameParent">
 										<div class="attachmentName" data-bind="text: fileName"></div>

vendors/fontastic/styles.css

@@ -38,7 +38,7 @@
   content: "\e005";
 }
 .icon-paper-plane::before {
-  content: "\e007";
+  content: "📧";
 }
 .icon-right-mini::before {
   content: "›";
@@ -59,31 +59,31 @@
   content: "\e030";
 }
 .icon-file-presentation::before {
-  content: "\e031"; /* 📊 */
+  content: "📊";
 }
 .icon-file-archive::before {
-  content: "\e032";
+  content: "📦";
 }
 .icon-file-audio::before {
-  content: "\e033";
+  content: "🔊";
 }
 .icon-file-text::before {
   content: "📄";
 }
 .icon-file-image::before {
-  content: "\e036"; /* 🖻 */
+  content: "🖻";
 }
 .icon-file-certificate::before {
-  content: "\e038";
+  content: "\e038"; /* 🔏 🔐 */
 }
 .icon-attachment::before {
   content: "📎";
 }
 .icon-file-spreadsheet::before {
-  content: "\e03a";
+  content: "▦";
 }
 .icon-file-video::before {
-  content: "\e03b";
+  content: "🎬";
 }
 .icon-folder-add::before {
   content: "\e03c";