Release fixes

dev/App/User.js

@@ -1202,13 +1202,94 @@
 		Local.set(Enums.ClientSideKeyName.ExpandedFolders, aExpandedList);
 	};
 
-	AppUser.prototype.initLayoutResizer = function (sLeft, sRight, sClientSideKeyName)
+	AppUser.prototype.initHorizontalLayoutResizer = function (sClientSideKeyName)
+	{
+		var
+			iMinHeight = 200,
+			iMaxHeight = 500,
+			oTop = null,
+			oBottom = null,
+
+			fResizeFunction = function (oEvent, oObject) {
+				if (oObject && oObject.size && oObject.size.height)
+				{
+					Local.set(sClientSideKeyName, oObject.size.height);
+
+					fSetHeight(oObject.size.height);
+
+					Utils.windowResize();
+				}
+			},
+
+			oOptions = {
+				'helper': 'ui-resizable-helper-h',
+				'minHeight': iMinHeight,
+				'maxHeight': iMaxHeight,
+				'handles': 's',
+				'stop': fResizeFunction
+			},
+
+			fSetHeight = function (iHeight) {
+				if (iHeight)
+				{
+					if (oTop)
+					{
+						oTop.attr('style', 'height:' + iHeight + 'px');
+					}
+
+					if (oBottom)
+					{
+						oBottom.attr('style', 'top:' + (55 /* top toolbar */ + iHeight) + 'px');
+					}
+				}
+			},
+
+			fDisable = function (bDisable) {
+				if (bDisable)
+				{
+					if (oTop && oTop.hasClass('ui-resizable'))
+					{
+						oTop
+							.resizable('destroy')
+							.removeAttr('style')
+						;
+					}
+
+					if (oBottom)
+					{
+						oBottom.removeAttr('style');
+					}
+				}
+				else if (Globals.$html.hasClass('rl-bottom-preview-pane'))
+				{
+					oTop = $('.b-message-list-wrapper');
+					oBottom = $('.b-message-view-wrapper');
+
+					if (!oTop.hasClass('ui-resizable'))
+					{
+						oTop.resizable(oOptions);
+					}
+
+					var iHeight = Utils.pInt(Local.get(sClientSideKeyName)) || 300;
+					fSetHeight(iHeight > iMinHeight ? iHeight : iMinHeight);
+				}
+			}
+		;
+
+		fDisable(false);
+
+		Events.sub('layout', function (sLayout) {
+			fDisable(Enums.Layout.BottomPreview !== sLayout);
+		});
+	};
+
+	AppUser.prototype.initVerticalLayoutResizer = function (sClientSideKeyName)
 	{
 		var
 			iDisabledWidth = 60,
 			iMinWidth = 155,
-			oLeft = $(sLeft),
+			oLeft = $('#rl-left'),
-			oRight = $(sRight),
+			oRight = $('#rl-right'),
 
 			mLeftWidth = Local.get(sClientSideKeyName) || null,
 
@@ -1257,7 +1338,7 @@
 		}
 
 		oLeft.resizable({
-			'helper': 'ui-resizable-helper',
+			'helper': 'ui-resizable-helper-w',
 			'minWidth': iMinWidth,
 			'maxWidth': 350,
 			'handles': 'e',
@@ -1461,7 +1542,7 @@
 					if (!Globals.bMobileDevice)
 					{
 						_.defer(function () {
-							self.initLayoutResizer('#rl-left', '#rl-right', Enums.ClientSideKeyName.FolderListSize);
+							self.initVerticalLayoutResizer(Enums.ClientSideKeyName.FolderListSize);
 						});
 					}
 				}

dev/Common/Enums.js

@@ -154,7 +154,8 @@
 		'MessagesInboxLastHash': 1,
 		'MailBoxListSize': 2,
 		'ExpandedFolders': 3,
-		'FolderListSize': 4
+		'FolderListSize': 4,
+		'MessageListSize': 5
 	};
 
 	/**

dev/External/ko.js

@@ -325,6 +325,33 @@
 		}
 	};
 
+	ko.bindingHandlers.initFixedTrigger = {
+		'init': function (oElement, fValueAccessor) {
+			var
+				aValues = ko.unwrap(fValueAccessor()),
+				$oContainer = null,
+				$oElement = $(oElement),
+				oOffset = null,
+
+				iTop = aValues[1] || 0
+			;
+
+			$oContainer = $(aValues[0] || null);
+			$oContainer = $oContainer[0] ? $oContainer : null;
+
+			if ($oContainer)
+			{
+				$(window).resize(function () {
+					oOffset = $oContainer.offset();
+					if (oOffset && oOffset.top)
+					{
+						$oElement.css('top', oOffset.top + iTop);
+					}
+				});
+			}
+		}
+	};
+
 	ko.bindingHandlers.initResizeTrigger = {
 		'init': function (oElement, fValueAccessor) {
 			var aValues = ko.unwrap(fValueAccessor());

dev/Model/ComposeAttachment.js

@@ -108,9 +108,16 @@
 	 */
 	ComposeAttachmentModel.prototype.iconClass = function ()
 	{
-		return AttachmentModel.staticIconClassHelper(this.mimeType());
+		return AttachmentModel.staticIconClassHelper(this.mimeType())[0];
 	};
 
+	/**
+	 * @return {string}
+	 */
+	ComposeAttachmentModel.prototype.iconText = function ()
+	{
+		return AttachmentModel.staticIconClassHelper(this.mimeType())[1];
+	};
 
 	module.exports = ComposeAttachmentModel;
 

dev/Screen/User/MailBox.js

@@ -105,18 +105,21 @@
 			}
 		;
 
-		Globals.$html.toggleClass('rl-no-preview-pane', Enums.Layout.NoPreview === Data.layout());
-		Globals.$html.toggleClass('rl-bottom-preview-pane', Enums.Layout.BottomPreview === Data.layout());
-
 		Data.folderList.subscribe(fResizeFunction);
 		Data.messageList.subscribe(fResizeFunction);
 		Data.message.subscribe(fResizeFunction);
 
 		Data.layout.subscribe(function (nValue) {
+
 			Globals.$html.toggleClass('rl-no-preview-pane', Enums.Layout.NoPreview === nValue);
+			Globals.$html.toggleClass('rl-side-preview-pane', Enums.Layout.SidePreview === nValue);
 			Globals.$html.toggleClass('rl-bottom-preview-pane', Enums.Layout.BottomPreview === nValue);
+
+			Events.pub('layout', [nValue]);
 		});
 
+		Data.layout.valueHasMutated();
+
 		Events.sub('mailbox.inbox-unread-count', function (nCount) {
 			Data.foldersInboxUnreadCount(nCount);
 		});
@@ -124,6 +127,17 @@
 		Data.foldersInboxUnreadCount.subscribe(function () {
 			this.setNewTitle();
 		}, this);
+
+	};
+
+	MailBoxUserScreen.prototype.onBuild = function ()
+	{
+		if (!Globals.bMobileDevice)
+		{
+			_.defer(function () {
+				require('App/User').initHorizontalLayoutResizer(Enums.ClientSideKeyName.MessageListSize);
+			});
+		}
 	};
 
 	/**

dev/Styles/@Main.less

@@ -68,6 +68,7 @@
 @import "TwoFactor.less";
 @import "Identity.less";
 @import "AdvancedSearch.less";
+@import "Attachmnets.less";
 @import "MessageList.less";
 @import "MessageView.less";
 @import "Contacts.less";

dev/Styles/Attachmnets.less

@@ -0,0 +1,138 @@
+.attachmentItem {
+
+	display: inline-block;
+	margin: 5px;
+	max-width: 200px;
+	min-width: 60px;
+	overflow: hidden;
+	list-style: none;
+	line-height: 24px;
+	border: 0;
+	background-color: #fff;
+	box-shadow: 0 1px 5px #ccc;
+	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
+	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 1px 5px rgba(0, 0, 0, 0.1);
+
+	border-radius: 2px;
+
+	&.waiting {
+		opacity: 0.6;
+	}
+
+	&.error {
+		.attachmentIcon, .attachmentSize, .attachmentName {
+			color: red;
+		}
+	}
+
+	.attachmentIconParent {
+
+		position: relative;
+
+		height: 56px;
+		width: 60px;
+
+		background: none;
+
+		.iconPreview, .iconBG, .iconMain, .iconProgress {
+			position: absolute;
+			top: 0;
+			left: 0;
+
+			display: inline-block;
+			width: 100%;
+			height: 100%;
+		}
+
+		.iconProgress {
+			background: #eee;
+			width: 0%;
+		}
+
+		.iconBG {
+			font-size: 18px;
+			text-align: center;
+			color: #999;
+			font-weight: bold;
+			line-height: 55px;
+
+			text-shadow: 0 1px 0 #FFF;
+			text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
+		}
+
+		.iconPreview {
+			display: none;
+
+			background: #555;
+			background-image: none;
+			background: rgba(0, 0, 0, .5) !important;
+
+			.attachmentIcon {
+				color: #fff;
+				text-shadow: 0 1px 0 #000;
+			}
+		}
+	}
+
+	.attachmentNameParent {
+
+		position: relative;
+
+		margin-left: 60px;
+		padding: 4px;
+		padding-left: 6px;
+		min-width: 90px;
+
+		cursor: pointer;
+
+		color: #333;
+		background: #fafafa;
+		border-left: 1px solid #ddd;
+	}
+
+	.attachmentIcon {
+		margin: 6px 0 0 13px;
+		font-size: 36px;
+		width: 36px;
+		height: 36px;
+		color: #aaa;
+	}
+
+	.attachmentIconText {
+		display: inline-block;
+		font-size: 28px;
+		width: 60px;
+		height: 56px;
+		color: #aaa;
+		line-height: 56px;
+		text-align: center;
+		font-style: normal;
+	}
+
+	.attachmentIcon.icon-none {
+		display: none;
+	}
+
+	.attachmentIconParent.hasPreview:hover {
+		.iconPreview {
+			display: inline-block;
+		}
+		.iconMain {
+			display: none;
+		}
+	}
+
+	.showPreview {
+		display: none;
+	}
+
+	.attachmentIconParent.hasPreview {
+		.showPreview {
+			display: inline;
+		}
+
+		.hidePreview {
+			display: none;
+		}
+	}
+}

dev/Styles/Compose.less

@@ -37,132 +37,8 @@
 		}
 
 		.attachmentList {
-
 			margin: 0;
 			padding: 10px;
-
-			.attachmentItem {
-
-				display: inline-block;
-				margin: 3px 6px;;
-				max-width: 200px;
-				min-width: 60px;
-				overflow: hidden;
-				/*cursor: pointer;*/
-				list-style: none;
-				line-height: 24px;
-				border: 0;
-				background-color: #fff;
-				box-shadow: 0 1px 5px #ccc;
-				box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
-				box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 1px 5px rgba(0, 0, 0, 0.1);
-
-				border-radius: 2px;
-
-				&.waiting {
-					opacity: 0.6;
-				}
-
-				&.error {
-					.attachmentIcon, .attachmentSize, .attachmentName {
-						color: red;
-					}
-				}
-
-				.attachmentIconParent {
-
-					position: relative;
-
-					height: 56px;
-					width: 60px;
-
-					background: none;
-
-					.iconPreview, .iconBG, .iconMain, .iconProgress {
-						position: absolute;
-						top: 0;
-						left: 0;
-
-						display: inline-block;
-						width: 100%;
-						height: 100%;
-					}
-
-					.iconProgress {
-						background: #eee;
-						width: 0%;
-					}
-
-					.iconBG {
-						font-size: 18px;
-						text-align: center;
-						color: #999;
-						font-weight: bold;
-						line-height: 55px;
-
-						text-shadow: 0 1px 0 #FFF;
-						text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8);
-					}
-
-					.iconPreview {
-						display: none;
-
-						background: #555;
-						background-image: none;
-						background: rgba(0, 0, 0, .5) !important;
-
-						.attachmentIcon {
-							color: #fff;
-							text-shadow: 0 1px 0 #000;
-						}
-					}
-				}
-
-				.attachmentNameParent {
-
-					position: relative;
-
-					margin-left: 60px;
-					padding: 4px;
-					padding-left: 6px;
-					min-width: 90px;
-
-					color: #333;
-					background: #fafafa;
-					border-left: 1px solid #ddd;
-				}
-
-				.attachmentIcon {
-					margin: 6px 0 0 13px;
-					font-size: 36px;
-					width: 36px;
-					height: 36px;
-					color: #aaa;
-				}
-
-				.attachmentIconParent.hasPreview:hover {
-					.iconPreview {
-						display: inline-block;
-					}
-					.iconMain {
-						display: none;
-					}
-				}
-
-				.showPreview {
-					display: none;
-				}
-
-				.attachmentIconParent.hasPreview {
-					.showPreview {
-						display: inline;
-					}
-
-					.hidePreview {
-						display: none;
-					}
-				}
-			}
 		}
 	}
 

dev/Styles/Layout.less

@@ -205,11 +205,20 @@ html.rl-left-panel-disabled {
 	}
 }
 
-.ui-resizable-helper {
+.ui-resizable-helper-w {
 	border-right: 5px solid #777;
 	border-right-color: rgba(255,255,255,0.7);
 }
 
+.ui-resizable-helper-h {
+	border-bottom: 5px solid #ccc;
+	border-bottom-color: rgba(0,0,0,0.3);
+}
+
+.ui-resizable-handle {
+	/*background: red;*/
+}
+
 html.rl-no-preview-pane {
 
 	#rl-sub-left {
@@ -230,6 +239,10 @@ html.rl-no-preview-pane {
 	}
 }
 
+html.rl-side-preview-pane #rl-right .ui-resizable-handle {
+	display: none !important;
+}
+
 html.rl-bottom-preview-pane {
 
 	#rl-sub-left {
@@ -264,14 +277,6 @@ html.rl-bottom-preview-pane {
 
 			box-shadow: none;
 		}
-
-		.message-fixed-button-toolbar {
-			top: 370px;
-		}
-	}
-
-	#rl-right .ui-resizable-handle {
-		display: none !important;
 	}
 }
 

dev/Styles/MessageView.less

@@ -70,13 +70,10 @@ html.rl-no-preview-pane {
 		}
 
 		.message-fixed-button-toolbar {
-
-			float: right;
-
 			z-index: 100;
-			position: fixed;
+			position: absolute;
-			top: 70px;
+			top: 20px;
-			right: 25px;
+			right: 20px;
 		}
 
 		.messageItem {
@@ -232,121 +229,7 @@ html.rl-no-preview-pane {
 				border-bottom: 1px solid #ddd;
 
 				.attachmentList {
-
 					margin: 0;
-
-					.attachmentItem {
-
-						display: inline-block;
-						margin: 5px;
-						max-width: 200px;
-						min-width: 60px;
-						overflow: hidden;
-						list-style: none;
-						line-height: 24px;
-						border: 0;
-						background-color: #fff;
-						box-shadow: 0 1px 5px #ccc;
-						box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
-						box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 1px 5px rgba(0, 0, 0, 0.1);
-
-						border-radius: 2px;
-
-						.attachmentIconParent {
-
-							position: relative;
-
-							height: 56px;
-							width: 60px;
-
-							background: none;
-
-							.iconPreview, .iconBG, .iconMain {
-								position: absolute;
-								top: 0;
-								left: 0;
-
-								display: inline-block;
-								width: 100%;
-								height: 100%;
-							}
-
-							.iconPreview {
-								display: none;
-
-								background: #555;
-								background-image: none;
-								background: rgba(0, 0, 0, .5) !important;
-
-								.attachmentIcon {
-									color: #fff;
-									text-shadow: 0 1px 0 #000;
-								}
-							}
-						}
-
-						.attachmentNameParent {
-
-							position: relative;
-
-							margin-left: 60px;
-							padding: 4px;
-							padding-left: 6px;
-							min-width: 90px;
-
-							cursor: pointer;
-
-							color: #333;
-							background: #fafafa;
-							border-left: 1px solid #ddd;
-						}
-
-						.attachmentIcon {
-							margin: 6px 0 0 13px;
-							font-size: 36px;
-							width: 36px;
-							height: 36px;
-							color: #aaa;
-						}
-
-						.attachmentIconText {
-							display: inline-block;
-							font-size: 28px;
-							width: 60px;
-							height: 56px;
-							color: #aaa;
-							line-height: 56px;
-							text-align: center;
-							font-style: normal;
-						}
-
-						.attachmentIcon.icon-none {
-							display: none;
-						}
-
-						.attachmentIconParent.hasPreview:hover {
-							.iconPreview {
-								display: inline-block;
-							}
-							.iconMain {
-								display: none;
-							}
-						}
-
-						.showPreview {
-							display: none;
-						}
-
-						.attachmentIconParent.hasPreview {
-							.showPreview {
-								display: inline;
-							}
-
-							.hidePreview {
-								display: none;
-							}
-						}
-					}
 				}
 			}
 
@@ -506,10 +389,6 @@ html.rl-message-fullscreen {
 		border: @rlLowBorderSize solid @rlMainDarkColor  !important;
 		border-radius: @rlLowBorderRadius  !important;
 
-		.message-fixed-button-toolbar {
-			top: 20px !important;
-		}
-
 		.buttonUnFull {
 			display: inline-block !important;
 		}

dev/Styles/Scroll.less

@@ -9,6 +9,10 @@
 	box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3);
 }
 
+.fixIndex.nano:before, .fixIndex.nano:after {
+	z-index: 98;
+}
+
 .nano:before {
 	top: -10px;
 }

dev/Styles/_BootstrapFix.less

@@ -62,6 +62,10 @@ select {
 	margin-left: 0px;
 }
 
+.btn.btn-large {
+	font-size: 17px;
+}
+
 .dropdown-menu {
 	border-radius: @btnBorderRadius;
 }

rainloop/v/0.0.0/app/templates/Views/User/ComposeAttachment.html

@@ -1,7 +1,8 @@
-<li class="attachmentItem clearfix" data-tooltip-placement="bottom" data-bind="attr: { 'title': title }, css: {'waiting': waiting, 'error': '' !== error()}">
+<li class="attachmentItem clearfix" data-tooltip-placement="bottom" data-bind="attr: { 'title': title }, css: { 'waiting': waiting, 'error': '' !== error() }">
 	<div class="attachmentIconParent pull-left">
 		<div class="iconMain">
 			<i class="attachmentIcon attachmentMainIcon" data-bind="css: iconClass(), visible: !uploading() || 0 === progress()"></i>
+			<i class="attachmentIconText attachmentMainIconText" data-bind="text: iconText(), visible: !uploading() || 0 === progress()"></i>
 		</div>
 		<div class="iconProgress" data-bind="attr: { 'style': progressStyle }, visible: uploading"></div>
 		<div class="iconBG" data-bind="text: progressText, visible: uploading"></div>

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

@@ -48,16 +48,18 @@
 					<span data-bind="text: printableCheckedMessageCount()"></span>
 					<i class="icon-mail"></i>
 				</div>
+
 				<div class="b-message-view-desc" data-bind="visible: !message() && '' === messageError() && !hasCheckedMessages()">
 					<span class="i18n" data-i18n-text="MESSAGE/MESSAGE_VIEW_DESC"></span>
 				</div>
+
 				<div class="b-message-view-desc error" data-bind="visible: !message() && '' !== messageError()">
 					<span class="text" data-bind="text: messageError()"></span>
 				</div>
 
-				<div data-bind="visible: message">
+				<div class="message-fixed-button-toolbar clearfix" data-bind="visible: message">
-
+				<!--<div class="message-fixed-button-toolbar clearfix" data-bind="visible: message, initFixedTrigger: ['.b-message-view-wrapper', 20]">-->
-					<div class="message-fixed-button-toolbar clearfix">
+					<nobr>
 						<div class="btn-group colored-toggle pull-right">
 							<a class="btn btn-dark-disabled-border buttonReply" data-tooltip-placement="bottom"
 								data-bind="command: replyCommand, tooltip: 'MESSAGE/BUTTON_REPLY'">
@@ -182,9 +184,11 @@
 								<i class="icon-pencil icon-white"></i>
 							</a>
 						</div>
-					</div>
+					</nobr>
+				</div>
 
-					<div class="messageItem" data-bind="css: viewLineAsCcc(), nano: true">
+				<div data-bind="visible: message">
+					<div class="messageItem fixIndex" data-bind="css: viewLineAsCcc(), nano: true">
 						<div class="content g-scrollbox" tabindex="0" data-bind="hasfocus: messageDomFocused">
 							<div class="content-wrapper">
 								<div>
@@ -312,7 +316,7 @@
 														</div>
 													</div>
 													<div class="showPreview">
-														<a data-bind="css: {'attachmentImagePreview': isImage()}, attr: {'href': linkPreviewMain(), 'data-index': $index}" target="_blank">
+														<a data-bind="css: {'attachmentImagePreview': isImage()}, attr: { 'title': fileName, 'href': linkPreviewMain(), 'data-index': $index }" target="_blank">
 															<div class="iconMain">
 																<i class="attachmentIcon attachmentMainIcon" data-bind="css: iconClass()"></i>
 																<i class="attachmentIconText attachmentMainIconText" data-bind="text: iconText()"></i>