Improve GUI (#1014)

dev/App/Abstract.jsx

@@ -348,6 +348,7 @@ class AbstractApp extends AbstractBoot
 
 		Globals.leftPanelDisabled.subscribe((bValue) => {
 			Globals.$html.toggleClass('rl-left-panel-disabled', bValue);
+			Globals.$html.toggleClass('rl-left-panel-enabled', !bValue);
 		});
 
 		Globals.leftPanelType.subscribe((sValue) => {
@@ -355,6 +356,8 @@ class AbstractApp extends AbstractBoot
 			Globals.$html.toggleClass('rl-left-panel-short', 'short' === sValue);
 		});
 
+		Globals.leftPanelDisabled.valueHasMutated();
+
 		ssm.ready();
 
 		require('Stores/Language').populate();

dev/App/User.jsx

@@ -1072,6 +1072,10 @@ class AppUser extends AbstractApp
 			fSetWidth = (iWidth) => {
 				if (iWidth)
 				{
+					Globals.leftPanelWidth(iWidth);
+
+					Globals.$html.removeClass('rl-resizer');
+
 					oLeft.css({
 						width: '' + iWidth + 'px'
 					});
@@ -1095,6 +1099,7 @@ class AppUser extends AbstractApp
 					fSetWidth(iWidth > iMinWidth ? iWidth : iMinWidth);
 				}
 			},
+
 			fResizeCreateFunction = (oEvent) => {
 				if (oEvent && oEvent.target)
 				{
@@ -1120,9 +1125,18 @@ class AppUser extends AbstractApp
 				{
 					Local.set(sClientSideKeyName, oObject.size.width);
 
+					Globals.leftPanelWidth(oObject.size.width);
+
 					oRight.css({
 						left: '' + oObject.size.width + 'px'
 					});
+
+					oLeft.css({
+						position: '',
+						top: '',
+						left: '',
+						height: ''
+					});
 				}
 			}
 		;

dev/Common/Globals.js

@@ -211,6 +211,7 @@
 
 	Globals.leftPanelDisabled = ko.observable(false);
 	Globals.leftPanelType = ko.observable('');
+	Globals.leftPanelWidth = ko.observable(0);
 
 	// popups
 	Globals.popupVisibilityNames = ko.observableArray([]);

dev/External/ko.js

@@ -20,6 +20,29 @@
 		}
 	;
 
+	ko.bindingHandlers.updateWidth = {
+		'init': function (oElement, fValueAccessor) {
+			var
+				$w = $(window),
+				$oEl = $(oElement),
+				fValue = fValueAccessor(),
+				fInit = function(){
+					fValue($oEl.width());
+					window.setTimeout(function(){
+						fValue($oEl.width());
+					}, 500);
+				};
+			;
+
+			$w.on('resize', fInit);
+			fInit();
+
+			ko.utils.domNodeDisposal.addDisposeCallback(oElement, function () {
+				$w.off('resize', fInit);
+			});
+		}
+	};
+
 	ko.bindingHandlers.editor = {
 		'init': function (oElement, fValueAccessor) {
 

dev/Styles/FolderList.less

@@ -22,16 +22,24 @@
 		padding: 10px 10px 0 @rlLowMargin;
 		color: #fff;
 		z-index: 101;
+
+		html.rl-left-panel-enabled &{
+			overflow: hidden;
+			white-space: nowrap;
+		}
 	}
 
 	.b-footer {
 		position: absolute;
-		bottom: 20px;
+		bottom: 10px;
 		right: 0;
 		left: 0;
-		height: 20px;
+		height: 30px;
 		padding: 0 10px 0 5px;
 		z-index: 101;
+
+		overflow: hidden;
+		white-space: nowrap;
 	}
 
 	.b-content {
@@ -83,6 +91,22 @@
 				left: 0;
 			}
 
+			.inbox-star-icon {
+				display: none;
+				margin-left: 7px;
+
+				.icon-star {
+					display: none;
+				}
+				.icon-star-empty {
+					opacity: .5;
+				}
+			}
+
+			&.is-inbox .inbox-star-icon {
+				display: inline;
+			}
+
 			padding: 0;
 			padding-left: @folderItemPadding;
 			padding-right: @folderItemPadding;
@@ -158,6 +182,16 @@
 		}
 	}
 
+	&.inbox-is-starred {
+		.icon-star {
+			color: orange;
+			display: inline-block !important;
+		}
+		.icon-star-empty {
+			display: none;
+		}
+	}
+
 	.b-folder-system-item {
 		font-weight: bold;
 	}

dev/Styles/_BootstrapFix.less

@@ -81,6 +81,10 @@ select {
 	padding: 4px 9px;
 }
 
+.btn.btn-nowrap {
+	white-space: nowrap;
+}
+
 .btn.btn-ellipsis {
 	text-overflow: ellipsis;
 	overflow: hidden;
@@ -140,11 +144,15 @@ select {
 //}
 
 html.rgba.textshadow {
-	.btn.btn-danger, .btn.btn-success, .btn.btn-primary {
+	.btn.btn-danger, .btn.btn-success, .btn.btn-primary, .btn.btn-warning {
 		text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
 	}
 }
 
+.btn.btn-success {
+    background-color:#84AB04;
+}
+
 .btn-toolbar {
 	margin-top: 0;
 	margin-bottom: 0;

dev/View/Popup/Compose.js

@@ -136,6 +136,10 @@
 		this.sendSuccessButSaveError = ko.observable(false);
 		this.savedError = ko.observable(false);
 
+		this.sendButtonSuccess = ko.computed(function () {
+			return !this.sendError() && !this.sendSuccessButSaveError();
+		}, this);
+
 		this.sendErrorDesc = ko.observable('');
 		this.savedErrorDesc = ko.observable('');
 

dev/View/User/MailBox/FolderList.js

@@ -60,6 +60,21 @@
 			return Enums.Focused.FolderList === AppStore.focusedState();
 		});
 
+		this.isInboxStarred = ko.computed(function () {
+			return FolderStore.currentFolder() &&
+				FolderStore.currentFolder().isInbox() &&
+				'is:flagged' === MessageStore.messageListSearch()
+			;
+		});
+
+		this.displayNewText = ko.observable(false);
+		this.displayNewMessageText = ko.observable(false);
+
+		Globals.leftPanelWidth.subscribe(function(v){
+			this.displayNewText(170 < v && 230 >= v);
+			this.displayNewMessageText(230 < v);
+		}, this);
+
 		kn.constructorEnd(this);
 	}
 
@@ -71,7 +86,44 @@
 		this.oContentVisible = $('.b-content', oDom);
 		this.oContentScrollable = $('.content', this.oContentVisible);
 
-		var self = this;
+		var
+			self = this,
+			fSelectFolder = function (oEvent, bStarred) {
+
+				oEvent.preventDefault();
+
+				if (bStarred)
+				{
+					oEvent.stopPropagation();
+				}
+
+				var
+					oFolder = ko.dataFor(this)
+				;
+
+				if (oFolder)
+				{
+					if (Enums.Layout.NoPreview === SettingsStore.layout())
+					{
+						MessageStore.message(null);
+					}
+
+					if (oFolder.fullNameRaw === FolderStore.currentFolderFullNameRaw())
+					{
+						Cache.setFolderHash(oFolder.fullNameRaw, '');
+					}
+
+					if (bStarred)
+					{
+						kn.setHash(Links.mailBox(oFolder.fullNameHash, 1, 'is:flagged'));
+					}
+					else
+					{
+						kn.setHash(Links.mailBox(oFolder.fullNameHash));
+					}
+				}
+			}
+		;
 
 		oDom
 			.on('click', '.b-folders .e-item .e-link .e-collapsed-sign', function (oEvent) {
@@ -91,28 +143,11 @@
 					oEvent.stopPropagation();
 				}
 			})
+			.on('click', '.b-folders .e-item .e-link.selectable .inbox-star-icon', function (oEvent) {
+				fSelectFolder.call(this, oEvent, !self.isInboxStarred());
+			})
 			.on('click', '.b-folders .e-item .e-link.selectable', function (oEvent) {
-
-				oEvent.preventDefault();
-
-				var
-					oFolder = ko.dataFor(this)
-				;
-
-				if (oFolder)
-				{
-					if (Enums.Layout.NoPreview === SettingsStore.layout())
-					{
-						MessageStore.message(null);
-					}
-
-					if (oFolder.fullNameRaw === FolderStore.currentFolderFullNameRaw())
-					{
-						Cache.setFolderHash(oFolder.fullNameRaw, '');
-					}
-
-					kn.setHash(Links.mailBox(oFolder.fullNameHash));
-				}
+				fSelectFolder.call(this, oEvent, false);
 			})
 		;
 
@@ -240,7 +275,6 @@
 	};
 
 	/**
-	 *
 	 * @param {FolderModel} oToFolder
 	 * @param {{helper:jQuery}} oUi
 	 */