Improved inline attachments visibility to prevent questions

dev/Model/Attachment.js

@@ -20,7 +20,6 @@ export class AttachmentModel extends AbstractModel {
 		this.fileName = '';
 		this.fileNameExt = '';
 		this.fileType = FileType.Unknown;
-		this.friendlySize = '';
 		this.isThumbnail = false;
 		this.cid = '';
 		this.contentLocation = '';
@@ -29,6 +28,7 @@ export class AttachmentModel extends AbstractModel {
 		this.uid = '';
 		this.url = '';
 		this.mimeIndex = '';
+		this.estimatedSize = 0;
 		this.framed = false;
 
 		this.addObservables({
@@ -45,14 +45,16 @@ export class AttachmentModel extends AbstractModel {
 	static reviveFromJson(json) {
 		const attachment = super.reviveFromJson(json);
 		if (attachment) {
-			attachment.friendlySize = FileInfo.friendlySize(json.EstimatedSize);
-
 			attachment.fileNameExt = FileInfo.getExtension(attachment.fileName);
 			attachment.fileType = FileInfo.getType(attachment.fileNameExt, attachment.mimeType);
 		}
 		return attachment;
 	}
 
+	friendlySize() {
+		return FileInfo.friendlySize(this.estimatedSize) + (this.isLinked() ? ' 🔗' : '');
+	}
+
 	contentId() {
 		return this.cid.replace(/^<+|>+$/g, '');
 	}
@@ -85,13 +87,6 @@ export class AttachmentModel extends AbstractModel {
 		return FileType.Audio === this.fileType && 'wav' === this.fileNameExt;
 	}
 
-	/**
-	 * @returns {boolean}
-	 */
-	hasThumbnail() {
-		return this.isThumbnail;
-	}
-
 	/**
 	 * @returns {boolean}
 	 */
@@ -142,7 +137,10 @@ export class AttachmentModel extends AbstractModel {
 	 * @returns {string}
 	 */
 	linkThumbnailPreviewStyle() {
-		return this.hasThumbnail() ? 'background:url(' + serverRequestRaw('ViewThumbnail', this.download) + ')' : '';
+//		return (this.isThumbnail && !this.isLinked())
+		return this.isThumbnail
+			? 'background:url(' + serverRequestRaw('ViewThumbnail', this.download) + ')'
+			: '';
 	}
 
 	/**

dev/Styles/User/Attachments.less

@@ -6,9 +6,9 @@
 	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 1px 5px rgba(0, 0, 0, 0.1);
 	display: inline-block;
 	list-style: none;
-	line-height: 24px;
+	line-height: 20px;
 	margin: 5px;
-	min-height: 50px;
+	min-height: 48px;
 	max-width: 200px;
 	min-width: 60px;
 	overflow: hidden;
@@ -33,8 +33,8 @@
 
 	.attachmentIconParent {
 		position: absolute;
-		height: 56px;
+		height: 48px;
-		width: 60px;
+		width: 48px;
 		text-align: center;
 	}
 
@@ -65,7 +65,7 @@
 	.attachmentNameParent {
 		border-left: 1px solid #ddd;
 		cursor: pointer;
-		margin-left: 60px;
+		margin-left: 48px;
 		min-width: 90px;
 		padding: 4px 4px 3px 6px;
 		position: relative;

snappymail/v/0.0.0/app/libraries/RainLoop/Actions/Raw.php

@@ -212,7 +212,7 @@ trait Raw
 						{
 							if ($bThumbnail)
 							{
-								$oImage = static::loadImage($rResource, $bDetectImageOrientation, 60);
+								$oImage = static::loadImage($rResource, $bDetectImageOrientation, 48);
 								\header('Content-Disposition: inline; '.
 									\trim(\MailSo\Base\Utils::EncodeHeaderUtf8AttributeValue('filename', $sFileName.'_thumb60x60.png')));
 								$oImage->show('png');

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

@@ -231,7 +231,7 @@
 											<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="css: iconClass()"></i>
+													<i class="iconMain" data-bind="visible: !isThumbnail, css: iconClass()"></i>
 													<div class="iconBG" data-bind="attr: { 'style': linkThumbnailPreviewStyle() }"></div>
 													<div class="iconPreview fontastic">👁</div>
 												</a>
@@ -243,7 +243,7 @@
 										</div>
 										<div class="attachmentNameParent">
 											<div style="white-space: nowrap; text-overflow: ellipsis; overflow: hidden;" class="attachmentName" data-bind="text: fileName"></div>
-											<div class="attachmentSize" data-bind="text: friendlySize"></div>
+											<div class="attachmentSize" data-bind="text: friendlySize()"></div>
 										</div>
 										<div class="checkboxAttachment fontastic"
 												data-bind="visible: download, text: checked() ? '☑' : '☐',