New Message View (with attachments thumbnails)

dev/Common/Links.js

@@ -57,6 +57,15 @@
 		return this.sServer + '/Raw/' + this.sSubQuery + this.sSpecSuffix + '/View/' + this.sSubSubQuery + sDownload;
 	};
 
+	/**
+	 * @param {string} sDownload
+	 * @return {string}
+	 */
+	Links.prototype.attachmentThumbnailPreview = function (sDownload)
+	{
+		return this.sServer + '/Raw/' + this.sSubQuery + this.sSpecSuffix + '/ViewThumbnail/' + this.sSubSubQuery + sDownload;
+	};
+
 	/**
 	 * @param {string} sDownload
 	 * @return {string}

dev/Model/Attachment.js

@@ -27,6 +27,7 @@
 		this.friendlySize = '';
 		this.isInline = false;
 		this.isLinked = false;
+		this.isThumbnail = false;
 		this.cid = '';
 		this.cidWithOutTags = '';
 		this.contentLocation = '';
@@ -56,6 +57,7 @@
 	AttachmentModel.prototype.friendlySize = '';
 	AttachmentModel.prototype.isInline = false;
 	AttachmentModel.prototype.isLinked = false;
+	AttachmentModel.prototype.isThumbnail = false;
 	AttachmentModel.prototype.cid = '';
 	AttachmentModel.prototype.cidWithOutTags = '';
 	AttachmentModel.prototype.contentLocation = '';
@@ -78,6 +80,7 @@
 			this.estimatedSize = Utils.pInt(oJsonAttachment.EstimatedSize);
 			this.isInline = !!oJsonAttachment.IsInline;
 			this.isLinked = !!oJsonAttachment.IsLinked;
+			this.isThumbnail = !!oJsonAttachment.IsThumbnail;
 			this.cid = oJsonAttachment.CID;
 			this.contentLocation = oJsonAttachment.ContentLocation;
 			this.download = oJsonAttachment.Download;
@@ -106,6 +109,14 @@
 		);
 	};
 
+	/**
+	 * @return {boolean}
+	 */
+	AttachmentModel.prototype.hasThumbnail = function ()
+	{
+		return this.isThumbnail;
+	};
+
 	/**
 	 * @return {boolean}
 	 */
@@ -132,6 +143,14 @@
 			!this.isPdf() && !this.isText() && !this.isImage();
 	};
 
+	/**
+	 * @return {boolean}
+	 */
+	AttachmentModel.prototype.hasPreview = function ()
+	{
+		return this.isImage() || this.isPdf() || this.isText() || this.isFramed();
+	};
+
 	/**
 	 * @return {string}
 	 */
@@ -148,6 +167,15 @@
 		return Links.attachmentPreview(this.download);
 	};
 
+	/**
+	 * @return {string}
+	 */
+	AttachmentModel.prototype.linkThumbnailPreviewStyle = function ()
+	{
+		return !this.hasThumbnail() ? '' :
+			'background:url(' + Links.attachmentThumbnailPreview(this.download) + ')';
+	};
+
 	/**
 	 * @return {string}
 	 */

dev/Styles/MessageList.less

@@ -52,7 +52,7 @@ html.rl-no-preview-pane {
 		padding-left: 8px;
 		padding-right: 8px;
 	}
-	
+
 	.b-message-list-wrapper {
 		position: absolute;
 		top: 50px;
@@ -275,7 +275,7 @@ html.rl-no-preview-pane {
 			.flagParent {
 				display: inline-block;
 				float: right;
-				padding: 0 8px 0 5px;
+				padding: 0 10px 0 5px;
 			}
 
 			&.e-single-line .flagParent {
@@ -299,7 +299,7 @@ html.rl-no-preview-pane {
 				display: inline-block;
 				float: right;
 				position: relative;
-				margin: 2px 8px 0 5px;
+				margin: 2px 10px 0 5px;
 			}
 
 			&.e-single-line .attachmentParent {
@@ -374,7 +374,7 @@ html.rl-no-preview-pane {
 				overflow: hidden;
 				text-overflow: ellipsis;
 			}
-			
+
 			.subject-prefix {
 				color: #888;
 				/*font-style: italic;*/
@@ -449,11 +449,11 @@ html.rl-no-preview-pane {
 				.sidebarParent {
 					background-color: #bdc3c7;
 				}
-				
+
 				&.focused .sidebarParent {
 					background-color: darken(#bdc3c7, 10%) !important;
 				}
-				
+
 				&.unseen {
 					background-color: darken(#ecf0f1, 5%);
 
@@ -489,13 +489,13 @@ html.rl-no-preview-pane {
 					background-color: #398CF2;
 					.opacity(20);
 				}
-				
+
 				+ .messageListItem .delimiter {
 					background-color: #398CF2;
 					opacity: 0.3;
 				}
 			}
-			
+
 			&.hasFlaggedSubMessage {
 				.flagOff, .flagOn {
 					display: none;

dev/Styles/MessageView.less

@@ -70,6 +70,13 @@ html.rl-no-preview-pane {
 			-webkit-overflow-scrolling: touch;
 		}
 
+		.messageItemDropdown {
+			z-index: 100;
+			position: fixed;
+			top: 70px;
+			right: 25px;
+		}
+
 		.messageItem {
 
 			position: absolute;
@@ -94,8 +101,8 @@ html.rl-no-preview-pane {
 			.buttonUp, .buttonUnFull, .buttonFull {
 				display: inline-block;
 				position: fixed;
-				right: 30px;
-				top: 90px;
+				right: 25px;
+				bottom: 25px;
 				height: 30px;
 				width: 30px;
 				text-align: center;
@@ -119,11 +126,11 @@ html.rl-no-preview-pane {
 			}
 
 			.buttonUp {
-				right: 70px;
+				right: 65px;
 				z-index: 0;
 			}
 
-			.buttonUnFull {
+			.buttonUp, .buttonUnFull {
 				display: none;
 			}
 
@@ -230,8 +237,7 @@ html.rl-no-preview-pane {
 
 						display: inline-block;
 						margin: 5px;
-						padding: 5px;
-						max-width: 170px;
+						max-width: 200px;
 						min-width: 60px;
 						overflow: hidden;
 						cursor: pointer;
@@ -246,19 +252,83 @@ html.rl-no-preview-pane {
 
 						border-radius: 2px;
 
-						.attachmentIcon {
-							font-size: 23px;
-							width: 23px;
-							height: 23px;
-							color: #666;
+						.attachmentIconParent {
+							height: 56px;
+							width: 60px;
+
+							background: none;
 						}
 
-						.attachmentPreview {
-							color: #999;
-							margin: 0px 5px;
-						}
-						.attachmentPreview:hover {
+						.attachmentNameParent {
+							margin-left: 60px;
+							padding: 4px;
+							padding-left: 6px;
+							min-width: 90px;
+
+							color: #fff;
+							background: #eee;
+
 							color: #333;
+							background: #fafafa;
+							border-left: 1px solid #ddd;
+						}
+
+						&.hasThumbnail .attachmentNameParent {
+							background: rgba(0, 0, 0, .6);
+
+							color: #fff;
+							text-shadow: 0 1px 0 #000;
+							border-left: 0px;
+						}
+
+						.attachmentIcon {
+							margin: 6px 0 0 13px;
+							font-size: 36px;
+							width: 36px;
+							height: 36px;
+							color: #aaa;
+						}
+
+						.attachmentIconParent.hasPreview {
+							.attachmentNonePreview {
+								display: none;
+							}
+						}
+
+						a.attachmentPreview {
+							display: inline-block;
+							height: 100%;
+							width: 100%;
+						}
+
+						.attachmentIconParent.hasPreview:hover {
+
+							background: #555 !important;
+							background-image: none !important;
+							background: rgba(0, 0, 0, .8) !important;
+
+							color: #fff;
+
+							.attachmentIcon {
+								color: #fff;
+								text-shadow: 0 1px 0 #000;
+							}
+						}
+
+						.attachmentIconParent.hasPreview .show-hover {
+							display: none;
+						}
+
+						.attachmentIconParent.hasPreview:hover .show-hover {
+							display: inline-block;
+						}
+
+						.attachmentIconParent.hasPreview:hover .hide-hover {
+							display: none;
+						}
+
+						&.hasThumbnail .attachmentMainIcon {
+							display: none;
 						}
 					}
 				}
@@ -382,6 +452,7 @@ html.rl-no-preview-pane .messageView {
 	.toolbar {
 		padding-left: @rlMainBorderSize;
 	}
+
 	.b-content {
 		top: 50px;
 		bottom: @rlBottomMargin;
@@ -389,10 +460,6 @@ html.rl-no-preview-pane .messageView {
 		border: @rlMainBorderSize solid @rlMainDarkColor;
 		box-shadow: @rlMainShadow;
 		border-radius: @rlMainBorderRadius;
-
-		.buttonUp, .buttonUnFull, .buttonFull {
-			top: 70px;
-		}
 	}
 }
 
@@ -423,9 +490,12 @@ html.rl-message-fullscreen {
 		border: @rlLowBorderSize solid @rlMainDarkColor;
 		border-radius: @rlLowBorderRadius;
 
-		.buttonUp, .buttonUnFull {
+		.messageItemDropdown {
+			top: 20px;
+		}
+
+		.buttonUnFull {
 			display: inline-block;
-			top: 36px;
 		}
 
 		.buttonFull {
@@ -433,3 +503,7 @@ html.rl-message-fullscreen {
 		}
 	}
 }
+
+.nano-scrolllimit-top .buttonUp {
+	display: inline-block !important;
+}

dev/View/User/MailBox/MessageView.js

@@ -81,7 +81,10 @@
 			}
 		}, this);
 
-		this.canBeRepliedOrForwarded = this.messageVisibility;
+		this.canBeRepliedOrForwarded = ko.computed(function () {
+			var bV = this.messageVisibility();
+			return !this.isDraftFolder() && bV;
+		}, this);
 
 		// commands
 		this.closeMessage = Utils.createCommand(this, function () {