Dropdown menu keyboard navigation

Keyboard shortcuts help popup (Shift + / )

dev/Admin/Contacts.js

@@ -54,7 +54,7 @@ function AdminContacts()
 		return {
 			'id': sValue,
 			'name': getTypeName(sValue) + (bDisabled ? ' (not supported)' : ''),
-			'disable': bDisabled
+			'disabled': bDisabled
 		};
 	});
 

dev/Admin/Plugins.js

@@ -47,7 +47,7 @@ AdminPlugins.prototype.onBuild = function (oDom)
 				self.configurePlugin(oPlugin);
 			}
 		})
-		.on('click', '.e-item .disable-plugin', function () {
+		.on('click', '.e-item .disabled-plugin', function () {
 			var oPlugin = ko.dataFor(this);
 			if (oPlugin)
 			{

dev/Boots/RainLoopApp.js

@@ -820,7 +820,7 @@ RainLoopApp.prototype.folderListOptionsBuilder = function (aSystem, aList, aDisa
 		aResult.push({
 			'id': aHeaderLines[iIndex][0],
 			'name': aHeaderLines[iIndex][1],
-			'disable': false
+			'disabled': false
 		});
 	}
 
@@ -833,7 +833,7 @@ RainLoopApp.prototype.folderListOptionsBuilder = function (aSystem, aList, aDisa
 				'id': oItem.fullNameRaw,
 				'system': true,
 				'name': fRenameCallback ? fRenameCallback.call(null, oItem) : oItem.name(),
-				'disable': !oItem.selectable || -1 < Utils.inArray(oItem.fullNameRaw, aDisabled) ||
+				'disabled': !oItem.selectable || -1 < Utils.inArray(oItem.fullNameRaw, aDisabled) ||
 					(fDisableCallback ? fDisableCallback.call(null, oItem) : false)
 			});
 		}
@@ -853,7 +853,7 @@ RainLoopApp.prototype.folderListOptionsBuilder = function (aSystem, aList, aDisa
 						'system': false,
 						'name': (new window.Array(oItem.deep + 1 - iUnDeep)).join(sDeepPrefix) + 
 							(fRenameCallback ? fRenameCallback.call(null, oItem) : oItem.name()),
-						'disable': !oItem.selectable || -1 < Utils.inArray(oItem.fullNameRaw, aDisabled) ||
+						'disabled': !oItem.selectable || -1 < Utils.inArray(oItem.fullNameRaw, aDisabled) ||
 							(Enums.FolderType.User !== oItem.type()) ||
 							(fDisableCallback ? fDisableCallback.call(null, oItem) : false)
 					});

dev/Common/Enums.js

@@ -37,6 +37,7 @@ Enums.KeyState = {
 	'MessageList': 'message-list',
 	'MessageView': 'message-view',
 	'Compose': 'compose',
+	'Settings': 'settings',
 	'Menu': 'menu',
 	'PopupComposeOpenPGP': 'compose-open-pgp',
 	'PopupAsk': 'popup-ask'

dev/Common/Globals.js

@@ -10,6 +10,11 @@ Globals.now = (new Date()).getTime();
  */
 Globals.momentTrigger = ko.observable(true);
 
+/**
+ * @type {?}
+ */
+Globals.dropdownVisibility = ko.observable(false);
+
 /**
  * @type {?}
  */

dev/Common/Knockout.js

@@ -8,7 +8,7 @@ ko.bindingHandlers.tooltip = {
 				sClass = $(oElement).data('tooltip-class') || '',
 				sPlacement = $(oElement).data('tooltip-placement') || 'top'
 			;
-			
+
 			$(oElement).tooltip({
 				'delay': {
 					'show': 500,
@@ -46,7 +46,54 @@ ko.bindingHandlers.tooltip2 = {
 	}
 };
 
-ko.bindingHandlers.dropdown = {
+ko.__detectDropdownVisibility = _.debounce(function ($el) {
+	Globals.dropdownVisibility(!!$el.hasClass('open'));
+}, 50);
+
+ko.bindingHandlers.dropdownOpenStatus = {
+	'init': function (oElement) {
+		var $el = $(oElement);
+
+		$el.find('.dropdown-toggle').click(function () {
+			ko.__detectDropdownVisibility($el);
+		});
+		
+//		$el.on('.dropdown-menu .menuitem', 'click', function () {
+//			$el.removeClass('open');
+//			ko.__detectDropdownVisibility($el);
+//		});
+
+//		$el.on('.dropdown-menu .menuitem', 'keydown', function (oEvent) {
+//			if (oEvent && Enums.EventKeyCode.Esc === oEvent.keyCode)
+//			{
+//				$el.removeClass('open');
+//				ko.__detectDropdownVisibility($el);
+//			}
+//		});
+		
+		$html.on('click.dropdown.data-api', function () {
+			ko.__detectDropdownVisibility($el);
+		});
+	}
+};
+
+ko.bindingHandlers.openDropdownTrigger = {
+	'update': function (oElement, fValueAccessor) {
+		if (ko.utils.unwrapObservable(fValueAccessor()))
+		{
+			var $el = $(oElement);
+			if (!$el.hasClass('open'))
+			{
+				$el.find('.dropdown-toggle').dropdown('toggle');
+				ko.__detectDropdownVisibility($el);
+			}
+			
+			fValueAccessor()(false);
+		}
+	}
+};
+
+ko.bindingHandlers.dropdownCloser = {
 	'init': function (oElement) {
 		$(oElement).closest('.dropdown').on('click', '.e-item', function () {
 			$(oElement).dropdown('toggle');

dev/Common/Utils.js

@@ -1370,10 +1370,10 @@ Utils.draggeblePlace = function ()
 
 Utils.defautOptionsAfterRender = function (oOption, oItem)
 {
-	if (oItem && !Utils.isUnd(oItem.disable))
+	if (oItem && !Utils.isUnd(oItem.disabled))
 	{
 		ko.applyBindingsToNode(oOption, {
-			'disable': oItem.disable
+			'disabled': oItem.disabled
 		}, oItem);
 	}
 };

dev/Screens/MailBox.js

@@ -40,11 +40,6 @@ MailBoxScreen.prototype.onShow = function ()
 	RL.data().keyScope(Enums.KeyState.MessageList);
 };
 
-MailBoxScreen.prototype.onHide = function ()
-{
-	RL.data().keyScope(Enums.KeyState.All);
-};
-
 /**
  * @param {string} sFolderHash
  * @param {number} iPage
@@ -131,17 +126,6 @@ MailBoxScreen.prototype.onStart = function ()
 	}, this);
 };
 
-//MailBoxScreen.prototype.onBuild = function ()
-//{
-//	if (!Globals.bMobileDevice)
-//	{
-//		_.defer(function () {
-//			Utils.initLayoutResizer('#rl-resizer-left', '#rl-resizer-right', '#rl-right',
-//				350, 800, 350, 350, Enums.ClientSideKeyName.MailBoxListSize);
-//		});
-//	}
-//};
-
 /**
  * @return {Array}
  */

dev/Screens/Settings.js

@@ -24,6 +24,7 @@ _.extend(SettingsScreen.prototype, AbstractSettings.prototype);
 SettingsScreen.prototype.onShow = function ()
 {
 //	AbstractSettings.prototype.onShow.call(this);
-	
+
 	RL.setTitle(this.sSettingsTitle);
+	RL.data().keyScope(Enums.KeyState.Settings);
 };

dev/Storages/AbstractData.js

@@ -5,22 +5,55 @@
  */
 function AbstractData()
 {
-	this.keyScope = ko.observable(Enums.KeyState.All);
-	this.keyScope.subscribe(function (sValue) {
+	this.keyScopeReal = ko.observable(Enums.KeyState.All);
+	this.keyScopeFake = ko.observable(Enums.KeyState.All);
+	
+	this.keyScope = ko.computed({
+		'owner': this,
+		'read': function () {
+			return this.keyScopeFake();
+		},
+		'write': function (sValue) {
 
-		if (Enums.KeyState.Compose === sValue)
-		{
-			Utils.disableKeyFilter();
-		}
-		else
-		{
-			Utils.restoreKeyFilter();
-		}
+			if (Enums.KeyState.Menu !== sValue)
+			{
+				if (Enums.KeyState.Compose === sValue)
+				{
+					Utils.disableKeyFilter();
+				}
+				else
+				{
+					Utils.restoreKeyFilter();
+				}
 
-//		window.console.log(sValue);
+				this.keyScopeFake(sValue);
+				if (Globals.dropdownVisibility())
+				{
+					sValue = Enums.KeyState.Menu;
+				}
+			}
+			
+//			window.console.log(sValue + '/' + this.keyScopeFake());
+			this.keyScopeReal(sValue);
+		}
+	});
+	
+	this.keyScopeReal.subscribe(function (sValue) {
+		window.console.log(sValue);
 		key.setScope(sValue);
 	});
 
+	Globals.dropdownVisibility.subscribe(function (bValue) {
+		if (bValue)
+		{
+			this.keyScope(Enums.KeyState.Menu);
+		}
+		else if (Enums.KeyState.Menu === key.getScope())
+		{
+			this.keyScope(this.keyScopeFake());
+		}
+	}, this);
+
 	Utils.initDataConstructorBySettings(this);
 }
 

dev/Storages/WebMailData.js

@@ -39,17 +39,6 @@ function WebMailDataStorage()
 	this.projectHash = ko.observable('');
 	this.threading = ko.observable(false);
 
-	this.accountMenuFocus = ko.observable(false);
-	this.accountMenuFocus.sKeyState = Enums.KeyState.All;
-	
-	this.accountMenuFocus.subscribe(function (bValue) {
-		if (bValue)
-		{
-			this.accountMenuFocus.sKeyState = RL.data().keyScope();
-		}
-		RL.data().keyScope(bValue ? Enums.KeyState.Menu : this.accountMenuFocus.sKeyState);
-	}, this);
-
 	this.lastFoldersHash = '';
 	this.remoteSuggestions = false;
 
@@ -288,7 +277,14 @@ function WebMailDataStorage()
 	}, this);
 
 	this.message.focused.subscribe(function (bValue) {
-		RL.data().keyScope(bValue ? Enums.KeyState.MessageView : Enums.KeyState.MessageList);
+		if (bValue)
+		{
+			RL.data().keyScope(Enums.KeyState.MessageView);
+		}
+		else if (Enums.KeyState.MessageView === RL.data().keyScope())
+		{
+			RL.data().keyScope(Enums.KeyState.MessageList);
+		}
 	});
 	
 	this.messageLoading.subscribe(function (bValue) {

dev/Styles/AdminDomains.less

@@ -1,60 +1,60 @@
-
-.b-admin-domains {
-	.process-place {
-		width: 600px;
-		padding: 14px 0;
-		text-align: center;
-		visibility: hidden;
-	}
-}
-
-.b-admin-domains-list-table {
-
-	width: 600px;
-
-	.e-item {
-
-		.e-action {
-			cursor: pointer;
-		}
-
-		.domain-name {
-			display: inline-block;
-			word-break: break-all;
-			.box-sizing(border-box);
-		}
-
-		&.disabled .domain-name {
-			color: #bbb;
-		}
-
-		.button-delete {
-			margin-right: 15px;
-			visibility: hidden;
-			.opacity(0);
-		}
-
-		.delete-access {
-			&.button-delete {
-				visibility: visible;
-				margin-right: 0;
-				.opacity(100);
-			}
-		}
-
-		.delete-domain, .disable-domain {
-			cursor: pointer;
-			.opacity(50);
-		}
-
-		&.disabled .disable-domain {
-			.opacity(50);
-		}
-
-		.delete-domain, .disable-domain {
-			&:hover {
-				.opacity(100);
-			}
-		}
-	}
-}
+
+.b-admin-domains {
+	.process-place {
+		width: 600px;
+		padding: 14px 0;
+		text-align: center;
+		visibility: hidden;
+	}
+}
+
+.b-admin-domains-list-table {
+
+	width: 600px;
+
+	.e-item {
+
+		.e-action {
+			cursor: pointer;
+		}
+
+		.domain-name {
+			display: inline-block;
+			word-break: break-all;
+			.box-sizing(border-box);
+		}
+
+		&.disabled .domain-name {
+			color: #bbb;
+		}
+
+		.button-delete {
+			margin-right: 15px;
+			visibility: hidden;
+			.opacity(0);
+		}
+
+		.delete-access {
+			&.button-delete {
+				visibility: visible;
+				margin-right: 0;
+				.opacity(100);
+			}
+		}
+
+		.delete-domain, .disabled-domain {
+			cursor: pointer;
+			.opacity(50);
+		}
+
+		&.disabled .disabled-domain {
+			.opacity(50);
+		}
+
+		.delete-domain, .disabled-domain {
+			&:hover {
+				.opacity(100);
+			}
+		}
+	}
+}

dev/Styles/AdminPlugins.less

@@ -26,7 +26,7 @@
 			.plugin-img, .plugin-name {
 				color: #bbb;
 			}
-			.disable-plugin {
+			.disabled-plugin {
 				.opacity(50);
 			}
 		}

dev/Styles/Compose.less

@@ -31,7 +31,7 @@
 			.opacity(100);
 		}
 
-		.btn.disable {
+		.btn.disabled {
 			&.button-delete {
 				visibility: hidden;
 			}
@@ -41,7 +41,7 @@
 			margin-left: 8px;
 		}
 
-		.disable.button-delete {
+		.disabled.button-delete {
 			margin-left: 0px;
 		}
 	}

dev/Styles/Shortcuts.less

@@ -1,5 +1,10 @@
 .popups {
 	.b-shortcuts-content {
+
+		&.modal {
+			width: 1025px;
+		}
+
 		.modal-header {
 			background-color: #fff;
 		}

dev/Styles/Ui.less

@@ -69,14 +69,14 @@
 		color: #fff;
 	}
 
-	.e-item.disable > .e-link {
+	.e-item.disabled > .e-link {
 		cursor: not-allowed;
 		background-color: #fff;
 		background-image: none;
 		color: grey;
 	}
 
-	.e-item.disable [class^="icon-"] {
+	.e-item.disabled [class^="icon-"] {
 		color: grey;
 	}
 }

dev/ViewModels/AbstractSystemDropDownViewModel.js

@@ -13,8 +13,9 @@ function AbstractSystemDropDownViewModel()
 	this.accounts = oData.accounts;
 	this.accountEmail = oData.accountEmail;
 	this.accountsLoading = oData.accountsLoading;
-	this.accountMenuFocus = oData.accountMenuFocus;
-	
+
+	this.accountMenuDropdownTrigger = ko.observable(false);
+
 	this.allowAddAccount = RL.settingsGet('AllowAdditionalAccounts');
 
 	this.loading = ko.computed(function () {
@@ -22,14 +23,6 @@ function AbstractSystemDropDownViewModel()
 	}, this);
 
 	this.accountClick = _.bind(this.accountClick, this);
-
-	key('`', function () {
-		if (oData.useKeyboardShortcuts() && !RL.popupVisibility() &&
-			!oData.accountMenuFocus())
-		{
-			oData.accountMenuFocus(true);
-		}
-	});
 }
 
 _.extend(AbstractSystemDropDownViewModel.prototype, KnoinAbstractViewModel.prototype);
@@ -76,4 +69,15 @@ AbstractSystemDropDownViewModel.prototype.logoutClick = function ()
 
 		RL.loginAndLogoutReload(true, RL.settingsGet('ParentEmail') && 0 < RL.settingsGet('ParentEmail').length);
 	});
-};
+};
+
+AbstractSystemDropDownViewModel.prototype.onBuild = function ()
+{
+	var self = this;
+	key('`', [Enums.KeyState.MessageList, Enums.KeyState.MessageView, Enums.KeyState.Settings], function () {
+		if (RL.data().useKeyboardShortcuts() && !RL.popupVisibility() && !Globals.dropdownVisibility() && self.viewModelVisibility())
+		{
+			self.accountMenuDropdownTrigger(true);
+		}
+	});
+};

dev/ViewModels/MailBoxMessageListViewModel.js

@@ -42,6 +42,9 @@ function MailBoxMessageListViewModel()
 	this.userUsageSize = oData.userUsageSize;
 	this.userUsageProc = oData.userUsageProc;
 
+	this.moveDropdownTrigger = ko.observable(false);
+	this.moreDropdownTrigger = ko.observable(false);
+
 	// append drag and drop
 	this.dragOver = ko.observable(false).extend({'throttle': 1});
 	this.dragOverEnter = ko.observable(false).extend({'throttle': 1});
@@ -518,7 +521,7 @@ MailBoxMessageListViewModel.prototype.flagMessages = function (oCurrentMessage)
 	}
 };
 
-MailBoxMessageListViewModel.prototype.flagMessagesFast = function ()
+MailBoxMessageListViewModel.prototype.flagMessagesFast = function (bFlag)
 {
 	var
 		aChecked = this.messageListCheckedOrSelected(),
@@ -531,24 +534,43 @@ MailBoxMessageListViewModel.prototype.flagMessagesFast = function ()
 			return oMessage.flagged();
 		});
 
-		this.setAction(aChecked[0].folderFullNameRaw,
-			aChecked.length === aFlagged.length ? Enums.MessageSetAction.UnsetFlag : Enums.MessageSetAction.SetFlag, aChecked);
+		if (Utils.isUnd(bFlag))
+		{
+			this.setAction(aChecked[0].folderFullNameRaw,
+				aChecked.length === aFlagged.length ? Enums.MessageSetAction.UnsetFlag : Enums.MessageSetAction.SetFlag, aChecked);
+		}
+		else
+		{
+			this.setAction(aChecked[0].folderFullNameRaw,
+				!bFlag ? Enums.MessageSetAction.UnsetFlag : Enums.MessageSetAction.SetFlag, aChecked);
+		}
 	}
 };
 
-MailBoxMessageListViewModel.prototype.seenMessagesFast = function ()
+MailBoxMessageListViewModel.prototype.seenMessagesFast = function (bSeen)
 {
 	var
 		aChecked = this.messageListCheckedOrSelected(),
 		aUnseen = []
 	;
 
-	aUnseen = _.filter(aChecked, function (oMessage) {
-		return oMessage.unseen();
-	});
+	if (0 < aChecked.length)
+	{
+		aUnseen = _.filter(aChecked, function (oMessage) {
+			return oMessage.unseen();
+		});
 
-	this.setAction(aChecked[0].folderFullNameRaw,
-		0 < aUnseen.length ? Enums.MessageSetAction.SetSeen : Enums.MessageSetAction.UnsetSeen, aChecked);
+		if (Utils.isUnd(bSeen))
+		{
+			this.setAction(aChecked[0].folderFullNameRaw,
+				0 < aUnseen.length ? Enums.MessageSetAction.SetSeen : Enums.MessageSetAction.UnsetSeen, aChecked);
+		}
+		else
+		{
+			this.setAction(aChecked[0].folderFullNameRaw,
+				bSeen ? Enums.MessageSetAction.SetSeen : Enums.MessageSetAction.UnsetSeen, aChecked);
+		}
+	}
 };
 
 MailBoxMessageListViewModel.prototype.onBuild = function (oDom)
@@ -648,6 +670,14 @@ MailBoxMessageListViewModel.prototype.initShortcuts = function ()
 		}
 	});
 
+	key('z', [Enums.KeyState.MessageList, Enums.KeyState.MessageView], function () {
+		if (oData.useKeyboardShortcuts())
+		{
+			self.moreDropdownTrigger(true);
+			return false;
+		}
+	});
+
 	// delete
 	key('delete, shift+delete', Enums.KeyState.MessageList, function (event, handler) {
 		if (oData.useKeyboardShortcuts() && event)
@@ -677,8 +707,8 @@ MailBoxMessageListViewModel.prototype.initShortcuts = function ()
 		}
 	});
 
-	// new message (open compose popup)
-	key('c,n', [Enums.KeyState.MessageList, Enums.KeyState.MessageView], function () {
+	// write/compose (open compose popup)
+	key('w,c', [Enums.KeyState.MessageList, Enums.KeyState.MessageView], function () {
 		if (oData.useKeyboardShortcuts())
 		{
 			kn.showScreenPopup(PopupsComposeViewModel);
@@ -686,8 +716,8 @@ MailBoxMessageListViewModel.prototype.initShortcuts = function ()
 		}
 	});
 
-	// star/flag messages
-	key('s', [Enums.KeyState.MessageList, Enums.KeyState.MessageView], function () {
+	// important - star/flag messages
+	key('i', [Enums.KeyState.MessageList, Enums.KeyState.MessageView], function () {
 		if (oData.useKeyboardShortcuts())
 		{
 			self.flagMessagesFast();
@@ -695,11 +725,29 @@ MailBoxMessageListViewModel.prototype.initShortcuts = function ()
 		}
 	});
 
-	// mark as read/unread
-	key('m', [Enums.KeyState.MessageList, Enums.KeyState.MessageView], function () {
+	// move
+	key('m', Enums.KeyState.MessageList, function () {
 		if (oData.useKeyboardShortcuts())
 		{
-			self.seenMessagesFast();
+			self.moveDropdownTrigger(true);
+			return false;
+		}
+	});
+
+	// read
+	key('q', [Enums.KeyState.MessageList, Enums.KeyState.MessageView], function () {
+		if (oData.useKeyboardShortcuts())
+		{
+			self.seenMessagesFast(true);
+			return false;
+		}
+	});
+
+	// unread
+	key('u', [Enums.KeyState.MessageList, Enums.KeyState.MessageView], function () {
+		if (oData.useKeyboardShortcuts())
+		{
+			self.seenMessagesFast(false);
 			return false;
 		}
 	});

dev/ViewModels/MailBoxMessageViewViewModel.js

@@ -40,6 +40,7 @@ function MailBoxMessageViewViewModel()
 	this.fullScreenMode = oData.messageFullScreenMode;
 
 	this.showFullInfo = ko.observable(false);
+	this.moreDropdownTrigger = ko.observable(false);
 	this.messageDomFocused = ko.observable(false).extend({'rateLimit': 0});
 
 	this.messageVisibility = ko.computed(function () {
@@ -360,6 +361,13 @@ MailBoxMessageViewViewModel.prototype.onBuild = function (oDom)
 		this.messageDomFocused(!!bValue);
 	}, this);
 
+	this.messageDomFocused.subscribe(function (bValue) {
+		if (!bValue && Enums.KeyState.MessageView === this.keyScope())
+		{
+			this.message.focused(false);
+		}
+	}, this);
+
 	this.keyScope.subscribe(function (sValue) {
 		if (Enums.KeyState.MessageView === sValue && this.message.focused())
 		{
@@ -384,10 +392,14 @@ MailBoxMessageViewViewModel.prototype.escShortcuts = function ()
 		{
 			this.fullScreenMode(false);
 		}
-		else
+		else if (Enums.Layout.NoPreview === RL.data().layout())
 		{
 			this.message(null);
 		}
+		else
+		{
+			this.message.focused(false);
+		}
 
 		return false;
 	}
@@ -412,6 +424,14 @@ MailBoxMessageViewViewModel.prototype.initShortcuts = function ()
 		}
 	});
 
+	key('x', [Enums.KeyState.MessageList, Enums.KeyState.MessageView], function () {
+		if (oData.useKeyboardShortcuts())
+		{
+			self.moreDropdownTrigger(true);
+			return false;
+		}
+	});
+
 	// reply
 	key('r', [Enums.KeyState.MessageList, Enums.KeyState.MessageView], function () {
 		if (oData.useKeyboardShortcuts() && oData.message())
@@ -440,13 +460,13 @@ MailBoxMessageViewViewModel.prototype.initShortcuts = function ()
 	});
 
 	// message information
-	key('i', [Enums.KeyState.MessageList, Enums.KeyState.MessageView], function () {
-		if (oData.useKeyboardShortcuts())
-		{
-			self.showFullInfo(!self.showFullInfo());
-			return false;
-		}
-	});
+//	key('i', [Enums.KeyState.MessageList, Enums.KeyState.MessageView], function () {
+//		if (oData.useKeyboardShortcuts())
+//		{
+//			self.showFullInfo(!self.showFullInfo());
+//			return false;
+//		}
+//	});
 
 	// toggle message blockquotes
 	key('b', [Enums.KeyState.MessageList, Enums.KeyState.MessageView], function () {

dev/ViewModels/SettingsPaneViewModel.js

@@ -13,6 +13,17 @@ function SettingsPaneViewModel()
 
 Utils.extendAsViewModel('SettingsPaneViewModel', SettingsPaneViewModel);
 
+SettingsPaneViewModel.prototype.onBuild = function ()
+{
+	var self = this;
+	key('esc', Enums.KeyState.Settings, function () {
+		if (RL.data().useKeyboardShortcuts())
+		{
+			self.backToMailBoxClick();
+		}
+	});
+};
+
 SettingsPaneViewModel.prototype.onShow = function ()
 {
 	RL.data().message(null);

rainloop/v/0.0.0/app/templates/Themes/custom-values-dark.less

@@ -21,7 +21,7 @@
 @dropdown-menu-background-color: #fff;
 @dropdown-menu-hover-background-color: #48525C;
 @dropdown-menu-hover-color: #eee;
-@dropdown-menu-disable-color: #999;
+@dropdown-menu-disabled-color: #999;
 
 // FOLDERS
 @folders-color: #fff;

rainloop/v/0.0.0/app/templates/Themes/custom-values-light.less

@@ -20,7 +20,7 @@
 @dropdown-menu-background-color: #fff;
 @dropdown-menu-hover-background-color: #757575;
 @dropdown-menu-hover-color: #eee;
-@dropdown-menu-disable-color: #999;
+@dropdown-menu-disabled-color: #999;
 
 // FOLDERS
 @folders-color: #000;

rainloop/v/0.0.0/app/templates/Themes/template.less

@@ -98,12 +98,12 @@
 	}
 }
 
-.g-ui-menu .e-item.disable > .e-link, .g-ui-menu .e-item.disable > .e-link:hover {
-	color: @dropdown-menu-disable-color !important;
+.g-ui-menu .e-item.disabled > .e-link, .g-ui-menu .e-item.disabled > .e-link:hover {
+	color: @dropdown-menu-disabled-color !important;
 	background-color: @dropdown-menu-background-color !important;
 
 	> i {
-		color: @dropdown-menu-disable-color !important;
+		color: @dropdown-menu-disabled-color !important;
 	}
 }
 

rainloop/v/0.0.0/app/templates/Themes/values.less

@@ -24,7 +24,7 @@
 @dropdown-menu-background-color: #fff;
 @dropdown-menu-hover-background-color: #444;
 @dropdown-menu-hover-color: #eee;
-@dropdown-menu-disable-color: #999;
+@dropdown-menu-disabled-color: #999;
 @dropdown-menu-selected-background-color: #eee;
 
 // FOLDERS

rainloop/v/0.0.0/app/templates/Views/AdminSettingsDomainListItem.html

@@ -1,20 +1,20 @@
-<tr class="e-item" data-bind="css: {'disabled': disabled }">
-	<td class="e-action">
-		<span class="domain-name" data-bind="text: name"></span>
-	</td>
-	<td>
-		<a class="btn btn-small btn-small-small btn-danger pull-right button-delete" data-bind="css: {'delete-access': deleteAccess()}, click: function(oDomain) { $root.deleteDomain(oDomain); }">
-			<span>Are you sure?</span>
-		</a>
-	</td>
-	<td>
-		<span class="delete-domain" data-bind="visible: !deleteAccess(), click: function (oDomain) { $root.domainForDeletion(oDomain); }">
-			<i class="icon-trash"></i>
-		</span>
-	</td>
-	<td>
-		<span class="disable-domain" data-bind="click: function (oDomain) { $root.disableDomain(oDomain); }">
-			<i data-bind="css: {'icon-checkbox-checked': !disabled(), 'icon-checkbox-unchecked': disabled}"></i>
-		</span>
-	</td>
+<tr class="e-item" data-bind="css: {'disabled': disabled }">
+	<td class="e-action">
+		<span class="domain-name" data-bind="text: name"></span>
+	</td>
+	<td>
+		<a class="btn btn-small btn-small-small btn-danger pull-right button-delete" data-bind="css: {'delete-access': deleteAccess()}, click: function(oDomain) { $root.deleteDomain(oDomain); }">
+			<span>Are you sure?</span>
+		</a>
+	</td>
+	<td>
+		<span class="delete-domain" data-bind="visible: !deleteAccess(), click: function (oDomain) { $root.domainForDeletion(oDomain); }">
+			<i class="icon-trash"></i>
+		</span>
+	</td>
+	<td>
+		<span class="disabled-domain" data-bind="click: function (oDomain) { $root.disableDomain(oDomain); }">
+			<i data-bind="css: {'icon-checkbox-checked': !disabled(), 'icon-checkbox-unchecked': disabled}"></i>
+		</span>
+	</td>
 </tr>

rainloop/v/0.0.0/app/templates/Views/AdminSettingsPluginListItem.html

@@ -4,7 +4,7 @@
 		<span class="plugin-name" data-bind="text: name"></span>
 	</td>
 	<td>
-		<span class="disable-plugin">
+		<span class="disabled-plugin">
 			<i data-bind="css: {'e-action icon-checkbox-checked': !disabled(), 'e-action icon-checkbox-unchecked': disabled}"></i>
 		</span>
 	</td>

rainloop/v/0.0.0/app/templates/Views/MailFolderList.html

@@ -1,9 +1,9 @@
 <div class="b-folders g-ui-user-select-none thm-folders">
 	<div class="b-toolbar btn-toolbar">
-		<a class="btn buttonCompose" data-placement="bottom" data-bind="click: composeClick, tooltip: 'FOLDER_LIST/BUTTON_COMPOSE'">
+		<a class="btn buttonCompose" data-tooltip-placement="bottom" data-bind="click: composeClick, tooltip: 'FOLDER_LIST/BUTTON_COMPOSE'">
 			<i class="icon-paper-plane"></i>
 		</a>
-		<a class="btn buttonContacts" data-placement="bottom" data-bind="visible: allowContacts, click: contactsClick, tooltip: 'FOLDER_LIST/BUTTON_CONTACTS'">
+		<a class="btn buttonContacts" data-tooltip-placement="bottom" data-bind="visible: allowContacts, click: contactsClick, tooltip: 'FOLDER_LIST/BUTTON_CONTACTS'">
 			<i class="icon-address-book"></i>
 		</a>
 	</div>

rainloop/v/0.0.0/app/templates/Views/MailMessageList.html

@@ -4,95 +4,95 @@
 		<div class="toolbar">
 			<div class="btn-toolbar">
 				<div class="btn-group">
-					<a class="btn buttonReload" data-placement="bottom" data-bind="command: reloadCommand, tooltip: 'MESSAGE_LIST/BUTTON_RELOAD'">
+					<a class="btn buttonReload" data-tooltip-placement="bottom" data-bind="command: reloadCommand, tooltip: 'MESSAGE_LIST/BUTTON_RELOAD'">
 						<i class="icon-spinner" data-bind="css: {'animated': messageListCompleteLoadingThrottle}"></i>
 					</a>
 				</div>
 				<div class="btn-group">&nbsp;</div>
-				<div class="btn-group">
-					<a class="btn dropdown-toggle buttonMove" data-toggle="dropdown" data-placement="bottom" data-bind="command: moveCommand, tooltip: 'MESSAGE_LIST/BUTTON_MOVE_TO'">
+				<div class="btn-group dropdown" data-bind="dropdownOpenStatus: true, openDropdownTrigger: moveDropdownTrigger">
+					<a id="move-dropdown-id" href="#" tabindex="-1" class="btn dropdown-toggle buttonMove" data-toggle="dropdown" data-tooltip-placement="bottom" data-bind="command: moveCommand, tooltip: 'MESSAGE_LIST/BUTTON_MOVE_TO'">
 						<i class="icon-folder"></i>
 						&nbsp;&nbsp;
 						<span class="caret"></span>
 					</a>
-					<ul class="dropdown-menu g-ui-menu" role="menu" data-bind="foreach: folderMenuForMove">
-						<li class="e-item" data-bind="css: { 'disable': disable }, click: function () { if (!disable) $root.moveSelectedMessagesToFolder(id); }">
-							<a class="e-link" data-bind="text: name"></a>
+					<ul class="dropdown-menu g-ui-menu" role="menu" aria-labelledby="move-dropdown-id" role="menu" data-bind="foreach: folderMenuForMove">
+						<li class="e-item" role="presentation" data-bind="css: { 'disabled': disabled }, click: function () { if (!disabled) $root.moveSelectedMessagesToFolder(id); }">
+							<a class="e-link menuitem" href="#" tabindex="-1" data-bind="text: name"></a>
 						</li>
 					</ul>
 				</div>
 				<div class="btn-group">&nbsp;</div>
 				<div class="btn-group">
-					<a class="btn btn-dark-disabled-border button-archive" data-placement="bottom" data-bind="visible: !isArchiveFolder() && !isArchiveDisabled() && !isDraftFolder(), command: archiveCommand, tooltip: 'MESSAGE_LIST/BUTTON_ARCHIVE'">
+					<a class="btn btn-dark-disabled-border button-archive" data-tooltip-placement="bottom" data-bind="visible: !isArchiveFolder() && !isArchiveDisabled() && !isDraftFolder(), command: archiveCommand, tooltip: 'MESSAGE_LIST/BUTTON_ARCHIVE'">
 						<i class="icon-archive"></i>
 					</a>
-					<a class="btn btn-dark-disabled-border button-spam" data-placement="bottom" data-bind="visible: !isSpamFolder() && !isSpamDisabled() && !isDraftFolder() && !isSentFolder(), command: spamCommand, tooltip: 'MESSAGE_LIST/BUTTON_SPAM'">
+					<a class="btn btn-dark-disabled-border button-spam" data-tooltip-placement="bottom" data-bind="visible: !isSpamFolder() && !isSpamDisabled() && !isDraftFolder() && !isSentFolder(), command: spamCommand, tooltip: 'MESSAGE_LIST/BUTTON_SPAM'">
 						<i class="icon-bug"></i>
 					</a>
-					<a class="btn btn-dark-disabled-border button-delete" data-placement="bottom" data-bind="command: deleteCommand, tooltip: 'MESSAGE_LIST/BUTTON_DELETE'">
+					<a class="btn btn-dark-disabled-border button-delete" data-tooltip-placement="bottom" data-bind="command: deleteCommand, tooltip: 'MESSAGE_LIST/BUTTON_DELETE'">
 						<i class="icon-trash"></i>
 						<span data-bind="text: printableMessageCountForDeletion()"></span>
 					</a>
 				</div>
 				<div class="btn-group">&nbsp;</div>
-				<div class="btn-group">
-					<a class="btn dropdown-toggle buttonMore" data-toggle="dropdown" data-placement="bottom" data-bind="tooltip: 'MESSAGE_LIST/BUTTON_MORE'">
+				<div class="btn-group dropdown" data-bind="dropdownOpenStatus: true, openDropdownTrigger: moreDropdownTrigger">
+					<a class="btn dropdown-toggle buttonMore" href="#" tabindex="-1" data-toggle="dropdown" data-tooltip-placement="bottom" data-bind="tooltip: 'MESSAGE_LIST/BUTTON_MORE'">
 						<i class="icon-list"></i>
 					</a>
 					<ul class="dropdown-menu g-ui-menu" role="menu">
-						<li class="e-item" data-bind="click: listUnsetSeen, css: {'disable': !hasCheckedOrSelectedLines()}">
-							<a class="e-link">
+						<li class="e-item" role="presentation" data-bind="click: listUnsetSeen, css: {'disabled': !hasCheckedOrSelectedLines()}">
+							<a class="e-link menuitem" href="#" tabindex="-1">
 								<i class="icon-none"></i>
 								&nbsp;&nbsp;
 								<span class="i18n" data-i18n-text="MESSAGE_LIST/MENU_UNSET_SEEN"></span>
 							</a>
 						</li>
-						<li class="e-item" data-bind="click: listSetSeen, css: {'disable': !hasCheckedOrSelectedLines()}">
-							<a class="e-link">
+						<li class="e-item" role="presentation" data-bind="click: listSetSeen, css: {'disabled': !hasCheckedOrSelectedLines()}">
+							<a class="e-link menuitem" href="#" tabindex="-1">
 								<i class="icon-none"></i>
 								&nbsp;&nbsp;
 								<span class="i18n" data-i18n-text="MESSAGE_LIST/MENU_SET_SEEN"></span>
 							</a>
 						</li>
-						<li class="e-item" data-bind="click: listSetFlags, css: {'disable': !hasCheckedOrSelectedLines()}">
-							<a class="e-link">
+						<li class="e-item" role="presentation" data-bind="click: listSetFlags, css: {'disabled': !hasCheckedOrSelectedLines()}">
+							<a class="e-link menuitem" href="#" tabindex="-1">
 								<i class="icon-none"></i>
 								&nbsp;&nbsp;
 								<span class="i18n" data-i18n-text="MESSAGE_LIST/MENU_SET_FLAG"></span>
 							</a>
 						</li>
-						<li class="e-item" data-bind="click: listUnsetFlags, css: {'disable': !hasCheckedOrSelectedLines()}">
-							<a class="e-link">
+						<li class="e-item" role="presentation" data-bind="click: listUnsetFlags, css: {'disabled': !hasCheckedOrSelectedLines()}">
+							<a class="e-link menuitem" href="#" tabindex="-1">
 								<i class="icon-none"></i>
 								&nbsp;&nbsp;
 								<span class="i18n" data-i18n-text="MESSAGE_LIST/MENU_UNSET_FLAG"></span>
 							</a>
 						</li>
-						<li class="e-item" data-bind="click: listSetAllSeen, css: {'disable': !hasMessages()}">
-							<a class="e-link">
+						<li class="e-item" role="presentation" data-bind="click: listSetAllSeen, css: {'disabled': !hasMessages()}">
+							<a class="e-link menuitem" href="#" tabindex="-1">
 								<i class="icon-none"></i>
 								&nbsp;&nbsp;
 								<span class="i18n" data-i18n-text="MESSAGE_LIST/MENU_SET_ALL_SEEN"></span>
 							</a>
 						</li>
-						<li class="divider"></li>
-						<li class="e-item" data-bind="command: multyForwardCommand">
-							<a class="e-link">
+						<li class="divider" role="presentation"></li>
+						<li class="e-item" role="presentation" data-bind="command: multyForwardCommand">
+							<a class="e-link menuitem" href="#" tabindex="-1">
 								<i class="icon-reply-all"></i>
 								&nbsp;&nbsp;
 								<span class="i18n" data-i18n-text="MESSAGE_LIST/BUTTON_MULTY_FORWARD"></span>
 							</a>
 						</li>
-						<li class="divider"></li>
-						<li class="e-item" data-bind="command: deleteWithoutMoveCommand">
-							<a class="e-link">
+						<li class="divider" role="presentation"></li>
+						<li class="e-item" role="presentation" data-bind="command: deleteWithoutMoveCommand">
+							<a class="e-link menuitem" href="#" tabindex="-1">
 								<i class="icon-trash"></i>
 								&nbsp;&nbsp;
 								<span class="i18n" data-i18n-text="MESSAGE_LIST/BUTTON_DELETE_WITHOUT_MOVE"></span>
 							</a>
 						</li>
-						<li class="e-item" data-bind="command: clearCommand">
-							<a class="e-link">
+						<li class="e-item" role="presentation" data-bind="command: clearCommand">
+							<a class="e-link menuitem" href="#" tabindex="-1">
 								<i class="icon-fire"></i>
 								&nbsp;&nbsp;
 								<span class="i18n" data-i18n-text="MESSAGE_LIST/BUTTON_EMPTY_FOLDER"></span>
@@ -153,11 +153,6 @@
 			</div>
 			<div class="mainDelimiter footerDelimiter"></div>
 			<div class="b-footer thm-message-list-bottom-toolbar">
-<!--
-				<a class="btn buttonReload" data-placement="right" data-bind="command: reloadCommand, tooltip: 'MESSAGE_LIST/BUTTON_RELOAD'">
-					<i class="icon-spinner" data-bind="css: {'animated': messageListCompleteLoadingThrottle}"></i>
-				</a>
--->
 				<span data-bind="visible: 0 < userUsageProc(), tooltip2: quotaTooltip" class="e-quota">
 					<span data-bind="text: userUsageProc"></span>%
 				</span>

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

@@ -2,107 +2,107 @@
 	<div class="messageView" data-bind="css: {'message-selected': isMessageSelected, 'message-focused': message.focused}">
 		<div class="toolbar g-ui-user-select-none">
 			<div class="messageButtons btn-toolbar">
-				<div class="btn-group" data-placement="bottom" data-bind="visible: !usePreviewPane(), tooltip: 'MESSAGE/BUTTON_CLOSE'">
+				<div class="btn-group" data-tooltip-placement="bottom" data-bind="visible: !usePreviewPane(), tooltip: 'MESSAGE/BUTTON_CLOSE'">
 					<a class="btn buttonClose" data-bind="command: closeMessage">
 						<i class="icon-remove"></i>
 					</a>
 				</div>
 				<div class="btn-group">&nbsp;</div>
-				<div class="btn-group" data-placement="bottom" data-bind="visible: isDraftFolder(), tooltip: 'MESSAGE/BUTTON_EDIT'">
+				<div class="btn-group" data-tooltip-placement="bottom" data-bind="visible: isDraftFolder(), tooltip: 'MESSAGE/BUTTON_EDIT'">
 					<a class="btn btn-success buttonEdit" data-bind="command: messageEditCommand">
 						<i class="icon-pencil icon-white"></i>
 					</a>
 				</div>
 				<div class="btn-group" data-bind="visible: !isDraftFolder()">
-					<a class="btn btn-dark-disabled-border buttonReply" data-placement="bottom" data-bind="command: replyCommand, tooltip: 'MESSAGE/BUTTON_REPLY'">
+					<a class="btn btn-dark-disabled-border buttonReply" data-tooltip-placement="bottom" data-bind="command: replyCommand, tooltip: 'MESSAGE/BUTTON_REPLY'">
 						<i class="icon-reply"></i>
 					</a>
-					<a class="btn btn-dark-disabled-border buttonReplyAll" data-placement="bottom" data-bind="command: replyAllCommand, tooltip: 'MESSAGE/BUTTON_REPLY_ALL'">
+					<a class="btn btn-dark-disabled-border buttonReplyAll" data-tooltip-placement="bottom" data-bind="command: replyAllCommand, tooltip: 'MESSAGE/BUTTON_REPLY_ALL'">
 						<i class="icon-reply-all"></i>
 					</a>
-					<a class="btn btn-dark-disabled-border buttonForward" data-placement="bottom" data-bind=" command: forwardCommand, tooltip: 'MESSAGE/BUTTON_FORWARD'">
+					<a class="btn btn-dark-disabled-border buttonForward" data-tooltip-placement="bottom" data-bind=" command: forwardCommand, tooltip: 'MESSAGE/BUTTON_FORWARD'">
 						<i class="icon-forward"></i>
 					</a>
 				</div>
 				<div class="btn-group" data-bind="visible: !usePreviewPane()">&nbsp;</div>
 				<div class="btn-group" data-bind="visible: !usePreviewPane()">
-					<a class="btn btn-dark-disabled-border button-archive" data-placement="bottom" data-bind="visible: !isDraftFolder() && !isArchiveFolder() && !isArchiveDisabled(), command: archiveCommand, tooltip: 'MESSAGE/BUTTON_ARCHIVE'">
+					<a class="btn btn-dark-disabled-border button-archive" data-tooltip-placement="bottom" data-bind="visible: !isDraftFolder() && !isArchiveFolder() && !isArchiveDisabled(), command: archiveCommand, tooltip: 'MESSAGE/BUTTON_ARCHIVE'">
 						<i class="icon-archive"></i>
 					</a>
-					<a class="btn btn-dark-disabled-border button-spam" data-placement="bottom" data-bind="visible: !isDraftFolder() && !isSentFolder() && !isSpamFolder() && !isSpamDisabled(), command: spamCommand, tooltip: 'MESSAGE/BUTTON_SPAM'">
+					<a class="btn btn-dark-disabled-border button-spam" data-tooltip-placement="bottom" data-bind="visible: !isDraftFolder() && !isSentFolder() && !isSpamFolder() && !isSpamDisabled(), command: spamCommand, tooltip: 'MESSAGE/BUTTON_SPAM'">
 						<i class="icon-bug"></i>
 					</a>
-					<a class="btn btn-dark-disabled-border button-delete" data-placement="bottom" data-bind="command: deleteCommand, tooltip: 'MESSAGE/BUTTON_DELETE'">
+					<a class="btn btn-dark-disabled-border button-delete" data-tooltip-placement="bottom" data-bind="command: deleteCommand, tooltip: 'MESSAGE/BUTTON_DELETE'">
 						<i class="icon-trash"></i>
 					</a>
 				</div>
 				<div class="btn-group">&nbsp;</div>
-				<div class="btn-group">
-					<a class="btn dropdown-toggle buttonMore" data-placement="bottom" data-toggle="dropdown" data-bind="command: messageVisibilityCommand, tooltip: 'MESSAGE/BUTTON_MORE'">
+				<div class="btn-group dropdown" data-bind="dropdownOpenStatus: true, openDropdownTrigger: moreDropdownTrigger"">
+					<a class="btn dropdown-toggle buttonMore" href="#" tabindex="-1" data-toggle="dropdown" data-tooltip-placement="bottom" data-bind="command: messageVisibilityCommand, tooltip: 'MESSAGE/BUTTON_MORE'">
 						<i class="icon-list"></i>
 					</a>
 					<ul class="dropdown-menu g-ui-menu" role="menu">
-						<li class="e-item" data-bind="visible: !isDraftFolder()">
-							<a class="e-link" data-bind="command: forwardAsAttachmentCommand">
+						<li class="e-item" role="presentation" data-bind="visible: !isDraftFolder()">
+							<a class="e-link menuitem" href="#" tabindex="-1" data-bind="command: forwardAsAttachmentCommand">
 								<i class="icon-reply"></i>
 								&nbsp;&nbsp;
 								<span class="i18n" data-i18n-text="MESSAGE/BUTTON_FORWARD_AS_ATTACHMENT"></span>
 							</a>
 						</li>
-						<li class="e-item" data-bind="visible: !isDraftFolder()">
-							<a class="e-link" data-bind="command: editAsNewCommand">
+						<li class="e-item" role="presentation" data-bind="visible: !isDraftFolder()">
+							<a class="e-link menuitem" href="#" tabindex="-1" data-bind="command: editAsNewCommand">
 								<i class="icon-pencil"></i>
 								&nbsp;&nbsp;
 								<span class="i18n" data-i18n-text="MESSAGE/BUTTON_EDIT_AS_NEW"></span>
 							</a>
 						</li>
-						<li class="divider" data-bind="visible: !isDraftFolder()"></li>
-						<li class="e-item" data-bind="visible: usePreviewPane() && !isDraftFolder() && !isArchiveFolder() && !isArchiveDisabled()">
-							<a target="_blank" class="e-link" data-bind="command: archiveCommand">
+						<li class="divider" role="presentation" data-bind="visible: !isDraftFolder()"></li>
+						<li class="e-item" role="presentation" data-bind="visible: usePreviewPane() && !isDraftFolder() && !isArchiveFolder() && !isArchiveDisabled()">
+							<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="command: archiveCommand">
 								<i class="icon-archive"></i>
 								&nbsp;&nbsp;
 								<span class="i18n" data-i18n-text="MESSAGE/BUTTON_ARCHIVE"></span>
 							</a>
 						</li>
-						<li class="e-item" data-bind="visible: usePreviewPane() && !isDraftFolder() && !isSentFolder() && !isSpamFolder() && !isSpamDisabled()">
-							<a target="_blank" class="e-link" data-bind="command: spamCommand">
+						<li class="e-item" role="presentation" data-bind="visible: usePreviewPane() && !isDraftFolder() && !isSentFolder() && !isSpamFolder() && !isSpamDisabled()">
+							<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="command: spamCommand">
 								<i class="icon-bug"></i>
 								&nbsp;&nbsp;
 								<span class="i18n" data-i18n-text="MESSAGE/BUTTON_SPAM"></span>
 							</a>
 						</li>
-						<li class="e-item" data-bind="visible: usePreviewPane()">
-							<a target="_blank" class="e-link" data-bind="command: deleteCommand">
+						<li class="e-item" role="presentation" data-bind="visible: usePreviewPane()">
+							<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="command: deleteCommand">
 								<i class="icon-trash"></i>
 								&nbsp;&nbsp;
 								<span class="i18n" data-i18n-text="MESSAGE/BUTTON_DELETE"></span>
 							</a>
 						</li>
-						<li class="divider" data-bind="visible: usePreviewPane()"></li>
-						<li class="e-item">
-							<a target="_blank" class="e-link" data-bind="click: function () { if (message()) { message().printMessage(); }} ">
+						<li class="divider" role="presentation" data-bind="visible: usePreviewPane()"></li>
+						<li class="e-item" role="presentation">
+							<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="click: function () { if (message()) { message().printMessage(); }} ">
 								<i class="icon-print"></i>
 								&nbsp;&nbsp;
 								<span class="i18n" data-i18n-text="MESSAGE/MENU_PRINT"></span>
 							</a>
 						</li>
-						<li class="e-item">
-							<a target="_blank" class="e-link" data-bind="click: function () { if (message()) { message().viewPopupMessage(); }}">
+						<li class="e-item" role="presentation">
+							<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="click: function () { if (message()) { message().viewPopupMessage(); }}">
 								<i class="icon-popup"></i>
 								&nbsp;&nbsp;
 								<span class="i18n" data-i18n-text="MESSAGE/BUTTON_IN_NEW_WINDOW"></span>
 							</a>
 						</li>
-						<li class="divider"></li>
-						<li class="e-item">
-							<a target="_blank" class="e-link" data-bind="link: viewViewLink()">
+						<li class="divider" role="presentation"></li>
+						<li class="e-item" role="presentation">
+							<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="link: viewViewLink()">
 								<i class="icon-file-code"></i>
 								&nbsp;&nbsp;
 								<span class="i18n" data-i18n-text="MESSAGE/MENU_VIEW_ORIGINAL"></span>
 							</a>
 						</li>
-						<li class="e-item">
-							<a target="_blank" class="e-link" data-bind="link: viewDownloadLink()">
+						<li class="e-item" role="presentation">
+							<a target="_blank" class="e-link menuitem" href="#" tabindex="-1" data-bind="link: viewDownloadLink()">
 								<i class="icon-download"></i>
 								&nbsp;&nbsp;
 								<span class="i18n" data-i18n-text="MESSAGE/MENU_DOWNLOAD_ORIGINAL"></span>

rainloop/v/0.0.0/app/templates/Views/PopupsCompose.html

@@ -31,13 +31,13 @@
 								<div class="dropdown pull-left">
 									<span class="dropdown-toggle g-ui-dropdown e-identity" 
 										id="IdentityLabel" role="button" data-toggle="dropdown"
-										data-bind="text: currentIdentityString, dropdown: true, css: {'multiply': 1 < identitiesOptions().length }">
+										data-bind="text: currentIdentityString, dropdownCloser: true, css: {'multiply': 1 < identitiesOptions().length }">
 									</span>
 									<!-- ko if: 1 < identitiesOptions().length -->
 										<ul class="dropdown-menu g-ui-menu" role="menu" aria-labelledby="IdentityLabel">
 											<!-- ko foreach: identitiesOptions -->
 												<li class="e-item">
-													<a class="e-link"  data-bind="click: function (oIdentity) { $root.selectIdentity(oIdentity); return true; }">
+													<a class="e-link" tabindex="-1" href="#" data-bind="click: function (oIdentity) { $root.selectIdentity(oIdentity); return true; }">
 														<span data-bind="text: optText"></span>
 													</a>
 												</li>
@@ -108,7 +108,7 @@
 									</div>
 									<div class="pull-right">
 										<div class="btn-group pull-right">
-											<a class="btn dropdown-toggle buttonMore" data-placement="bottom" data-toggle="dropdown">
+											<a class="btn dropdown-toggle buttonMore" data-toggle="dropdown">
 												<i class="icon-list"></i>
 											</a>
 											<ul class="dropdown-menu g-ui-menu" role="menu">
@@ -120,7 +120,7 @@
 													</a>
 												</li>
 												<li class="divider"></li>
-												<li class="e-item" data-bind="visible: allowOpenPGP, click: openOpenPgpPopup, css: {'disable': isHtml()}">
+												<li class="e-item" data-bind="visible: allowOpenPGP, click: openOpenPgpPopup, css: {'disabled': isHtml()}">
 													<a class="e-link">
 														<i class="icon-key"></i>
 														&nbsp;&nbsp;
@@ -131,13 +131,13 @@
 										</div>
 										<div class="btn-group pull-right">&nbsp;</div>
 										<div class="btn-group pull-right">
-											<a class="btn" data-placement="top" data-bind="visible: addAttachmentEnabled(), initDom: composeUploaderButton, tooltip: 'COMPOSE/ATTACH_FILES'">
+											<a class="btn" data-tooltip-placement="top" data-bind="visible: addAttachmentEnabled(), initDom: composeUploaderButton, tooltip: 'COMPOSE/ATTACH_FILES'">
 												<i class="icon-attachment"></i>
 											</a>
-											<a class="btn" data-placement="top" data-bind="visible: dropboxEnabled, command: dropboxCommand, tooltip: 'COMPOSE/DROPBOX'">
+											<a class="btn" data-tooltip-placement="top" data-bind="visible: dropboxEnabled, command: dropboxCommand, tooltip: 'COMPOSE/DROPBOX'">
 												<i class="icon-dropbox"></i>
 											</a>
-											<a class="btn" data-placement="top" data-bind="visible: driveEnabled, command: driveCommand, tooltip: 'COMPOSE/GOOGLE_DRIVE'">
+											<a class="btn" data-tooltip-placement="top" data-bind="visible: driveEnabled, command: driveCommand, tooltip: 'COMPOSE/GOOGLE_DRIVE'">
 												<i class="icon-google-drive"></i>
 											</a>
 										</div>

rainloop/v/0.0.0/app/templates/Views/PopupsContacts.html

@@ -109,7 +109,7 @@
 								</div>
 								<div class="control-group" data-bind="visible: !viewReadOnly() || 0 < viewPropertiesEmails().length">
 									<label class="control-label remove-padding-top fix-width">
-										<i class="icon-at iconsize24" data-placement="left" data-bind="tooltip: 'CONTACTS/LABEL_EMAIL'"></i>
+										<i class="icon-at iconsize24" data-tooltip-placement="left" data-bind="tooltip: 'CONTACTS/LABEL_EMAIL'"></i>
 									</label>
 									<div class="controls fix-width">
 										<div data-bind="foreach: viewPropertiesEmails">
@@ -123,7 +123,7 @@
 								</div>
 								<div class="control-group" data-bind="visible: !viewReadOnly() || 0 < viewPropertiesPhones().length">
 									<label class="control-label remove-padding-top fix-width">
-										<i class="icon-telephone iconsize24" data-placement="left" data-bind="tooltip: 'CONTACTS/LABEL_PHONE'"></i>
+										<i class="icon-telephone iconsize24" data-tooltip-placement="left" data-bind="tooltip: 'CONTACTS/LABEL_PHONE'"></i>
 									</label>
 									<div class="controls fix-width">
 										<div data-bind="foreach: viewPropertiesPhones">
@@ -144,12 +144,12 @@
 							</div>
 							
 							<div class="e-read-only-sign">
-								<i class="icon-lock iconsize24" data-placement="left" data-bind="tooltip: 'CONTACTS/LABEL_READ_ONLY'"></i>
+								<i class="icon-lock iconsize24" data-tooltip-placement="left" data-bind="tooltip: 'CONTACTS/LABEL_READ_ONLY'"></i>
 							</div>
 
 							<div class="e-share-sign" data-bind="visible: contactsSharingIsAllowed">
 								<div class="btn-group pull-right">
-									<a class="btn dropdown-toggle" data-placement="left" data-toggle="dropdown" data-bind="tooltip: 'CONTACTS/LABEL_SHARE'">
+									<a class="btn dropdown-toggle" data-tooltip-placement="left" data-toggle="dropdown" data-bind="tooltip: 'CONTACTS/LABEL_SHARE'">
 										<i data-bind="css: shareIcon"></i>
 										&nbsp;&nbsp;
 										<span class="caret"></span>

rainloop/v/0.0.0/app/templates/Views/PopupsKeyboardShortcutsHelp.html

@@ -7,11 +7,58 @@
 			</h3>
 		</div>
 		<div class="modal-body">
-			<br />
-			Coming soon!
-			<br />
-			<br />
-			<br />
+			<div class="row" style="margin-left: 0">
+				<div class="span6">
+
+<table class="table table-condensed table-striped">
+<thead><tr><th>Mailbox</th></tr></thead>
+<tbody>
+	<tr><td>Open user dropdown</td><td>`</td></tr>
+	<tr><td>Compose popup</td><td>W, C</td></tr>
+	<tr><td>Open message list more dropdown</td><td>Z</td></tr>
+	<tr><td>Open message view  more dropdown</td><td>X</td></tr>
+	<tr><td>Help</td><td>?, Shift + /</td></tr>
+</tbody>
+</table>
+
+<table class="table table-condensed table-striped">
+<thead><tr><th>Message view (focused)</th></tr></thead>
+<tbody>
+	<tr><td>Toggle fullscreen mode</td><td>Enter</td></tr>
+	<tr><td>Toggle message blockquotes</td><td>B</td></tr>
+	<tr><td>Print</td><td>Ctrl + P, Command + P</td></tr>
+	<tr><td>Exit fullscreen mode</td><td>Esc</td></tr>
+	<tr><td>Close message (No preview pane layout)</td><td>Esc</td></tr>
+	<tr><td>Switch focus back to message list</td><td>Tab, Shift + Tab</td></tr>
+</tbody>
+</table>
+
+				</div>
+				<div class="span6">
+
+<table class="table table-condensed table-striped">
+<thead><tr><th>Message list</th></tr></thead>
+<tbody>
+	<tr><td>Check All</td><td>Ctrl + A, Command + A</td></tr>
+	<tr><td>Delete selected messages</td><td>Delete, Shift + delete</td></tr>
+	<tr><td>Reply selected message</td><td>R</td></tr>
+	<tr><td>Reply All selected message</td><td>A</td></tr>
+	<tr><td>Froward selected message</td><td>F</td></tr>
+	<tr><td>Froward (multiply) selected messages</td><td>Shift + F</td></tr>
+	<tr><td>Move selected messages</td><td>M</td></tr>
+	<tr><td>Read selected messages</td><td>R</td></tr>
+	<tr><td>UnRead selected messages</td><td>U</td></tr>
+	<tr><td>Important, star/flag selected messages</td><td>I</td></tr>
+	<tr><td>Search</td><td>/</td></tr>
+	<tr><td>Cancel search</td><td>Esc</td></tr>
+	<tr><td>View message (No preview pane layout)</td><td>Enter</td></tr>
+	<tr><td>Switch focus to selected message</td><td>Tab, Shift + Tab</td></tr>
+</tbody>
+</table>
+
+				</div>
+			</div>
+
 		</div>
 	</div>
 </div>

rainloop/v/0.0.0/app/templates/Views/SystemDropDown.html

@@ -9,10 +9,10 @@
 			<div class="btn-group pull-right">
 				&nbsp;&nbsp;&nbsp;
 			</div>-->
-			<div class="btn-group pull-right">
+			<div class="btn-group pull-right dropdown" data-bind="dropdownOpenStatus: true, openDropdownTrigger: accountMenuDropdownTrigger">
 				<a id="top-system-dropdown-id" href="#" tabindex="-1" class="btn btn-ellipsis btn-block dropdown-toggle system-dropdown"
-					data-placement="left" data-toggle="dropdown"
-					data-tooltip-class="tooltip-big" data-bind="tooltip2: emailTitle, hasfocus: accountMenuFocus">
+					data-toggle="dropdown" data-tooltip-placement="left"
+					data-tooltip-class="tooltip-big" data-bind="tooltip2: emailTitle">
 
 					<i data-bind="css: {'icon-user': !loading(), 'icon-spinner animated': loading()}"></i>
 					&nbsp;&nbsp;

rainloop/v/0.0.0/static/css/app.css

@@ -637,7 +637,7 @@
 	border-radius: 8px;
 }
 
-
+
 /*! normalize.css 2012-03-11T12:53 UTC - http://github.com/necolas/normalize.css */
 
 /* =============================================================================
@@ -1142,7 +1142,7 @@ table {
     border-collapse: collapse;
     border-spacing: 0;
 }
-
+
 @charset "UTF-8";
 
 @font-face {
@@ -1483,7 +1483,7 @@ table {
 .icon-filter:before {
   content: "\e063";
 }
-
+
 /** initial setup **/
 .nano {
 /*
@@ -1535,7 +1535,7 @@ table {
   -moz-border-radius    : 5px;
   -webkit-border-radius : 5px;
   border-radius         : 5px;
-  z-index: 10000;
+  z-index: 102;
   margin                : 2px;
 }
 
@@ -1600,7 +1600,7 @@ table {
 .nano > .pane2:hover > .slider2, .nano > .pane2.active > .slider2 {
 	background-color: rgba(0, 0, 0, 0.4);
 }
-
+
 /* Magnific Popup CSS */
 .mfp-bg {
   top: 0;
@@ -1965,7 +1965,7 @@ img.mfp-img {
   right: 0;
   padding-top: 0; }
 
-
+
 
 /* overlay at start */
 .mfp-fade.mfp-bg {
@@ -2011,7 +2011,7 @@ img.mfp-img {
   -moz-transform: translateX(50px);
   transform: translateX(50px);
 }
-
+
 .simple-pace {
 	-webkit-pointer-events: none;
 	pointer-events: none;
@@ -2082,7 +2082,7 @@ img.mfp-img {
 @keyframes simple-pace-stripe-animation {
 	0% { transform: none; transform: none; }
 	100% { transform: translate(-32px, 0); transform: translate(-32px, 0); }
-}
+}
 .inputosaurus-container {
 	background-color:#fff;
 	border:1px solid #bcbec0;
@@ -2150,7 +2150,7 @@ img.mfp-img {
 	box-shadow:none;
 }
 .inputosaurus-input-hidden { display:none; }
-
+
 .flag-wrapper {
 	width: 24px;
 	height: 16px;
@@ -2194,7 +2194,7 @@ img.mfp-img {
 .flag.flag-pt-br {background-position: -192px -11px}
 
 .flag.flag-cn, .flag.flag-zh-tw, .flag.flag-zh-cn, .flag.flag-zh-hk {background-position: -208px -22px}
-
+
 /* RainLoop Webmail (c) RainLoop Team | Licensed under CC BY-NC-SA 3.0 */
 .clearfix {
   *zoom: 1;
@@ -5869,13 +5869,13 @@ html.no-rgba .modal {
   background-image: none;
   color: #fff;
 }
-.g-ui-menu .e-item.disable > .e-link {
+.g-ui-menu .e-item.disabled > .e-link {
   cursor: not-allowed;
   background-color: #fff;
   background-image: none;
   color: grey;
 }
-.g-ui-menu .e-item.disable [class^="icon-"] {
+.g-ui-menu .e-item.disabled [class^="icon-"] {
   color: grey;
 }
 .g-ui-table {
@@ -6417,6 +6417,9 @@ html.rl-no-preview-pane #rl-right .ui-resizable-handle {
 .popups .b-ask-content .desc-place {
   font-size: 18px;
 }
+.popups .b-shortcuts-content.modal {
+  width: 1025px;
+}
 .popups .b-shortcuts-content .modal-header {
   background-color: #fff;
 }
@@ -7850,7 +7853,7 @@ html.rl-message-fullscreen .messageView .b-content .buttonFull {
   opacity: 1;
   filter: alpha(opacity=100);
 }
-.b-compose .b-header-toolbar .btn.disable.button-delete {
+.b-compose .b-header-toolbar .btn.disabled.button-delete {
   visibility: hidden;
 }
 .b-compose .b-header-toolbar .button-save,
@@ -7858,7 +7861,7 @@ html.rl-message-fullscreen .messageView .b-content .buttonFull {
 .b-compose .b-header-toolbar .saved-text {
   margin-left: 8px;
 }
-.b-compose .b-header-toolbar .disable.button-delete {
+.b-compose .b-header-toolbar .disabled.button-delete {
   margin-left: 0px;
 }
 .b-compose .b-header {
@@ -8064,17 +8067,17 @@ html.rl-message-fullscreen .messageView .b-content .buttonFull {
   filter: alpha(opacity=100);
 }
 .b-admin-domains-list-table .e-item .delete-domain,
-.b-admin-domains-list-table .e-item .disable-domain {
+.b-admin-domains-list-table .e-item .disabled-domain {
   cursor: pointer;
   opacity: 0.5;
   filter: alpha(opacity=50);
 }
-.b-admin-domains-list-table .e-item.disabled .disable-domain {
+.b-admin-domains-list-table .e-item.disabled .disabled-domain {
   opacity: 0.5;
   filter: alpha(opacity=50);
 }
 .b-admin-domains-list-table .e-item .delete-domain:hover,
-.b-admin-domains-list-table .e-item .disable-domain:hover {
+.b-admin-domains-list-table .e-item .disabled-domain:hover {
   opacity: 1;
   filter: alpha(opacity=100);
 }
@@ -8159,7 +8162,7 @@ html.rl-message-fullscreen .messageView .b-content .buttonFull {
 .b-admin-plugins-list-table .e-item.disabled .plugin-name {
   color: #bbb;
 }
-.b-admin-plugins-list-table .e-item.disabled .disable-plugin {
+.b-admin-plugins-list-table .e-item.disabled .disabled-plugin {
   opacity: 0.5;
   filter: alpha(opacity=50);
 }

rainloop/v/0.0.0/static/js/admin.js

@@ -1,5 +1,5 @@
-/*! RainLoop Webmail Admin Module (c) RainLoop Team | Licensed under CC BY-NC-SA 3.0 */
-(function (window, $, ko, crossroads, hasher, _) {
+/*! RainLoop Webmail Admin Module (c) RainLoop Team | Licensed under CC BY-NC-SA 3.0 */
+(function (window, $, ko, crossroads, hasher, _) {
 
 'use strict';
 
@@ -70,14 +70,14 @@ var
 	$document = $(window.document),
 
 	NotificationClass = window.Notification && window.Notification.requestPermission ? window.Notification : null
-;
+;
 /*jshint onevar: false*/
 /**
  * @type {?AdminApp}
  */
 var RL = null;
 /*jshint onevar: true*/
-
+
 /**
  * @type {?}
  */
@@ -88,6 +88,11 @@ Globals.now = (new Date()).getTime();
  */
 Globals.momentTrigger = ko.observable(true);
 
+/**
+ * @type {?}
+ */
+Globals.dropdownVisibility = ko.observable(false);
+
 /**
  * @type {?}
  */
@@ -221,7 +226,7 @@ if (Globals.bAllowPdfPreview && navigator && navigator.mimeTypes)
 		return oType && 'application/pdf' === oType.type;
 	});
 }
-
+
 Consts.Defaults = {};
 Consts.Values = {};
 Consts.DataImages = {};
@@ -339,7 +344,7 @@ Consts.DataImages.UserDotPic = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA
  * @type {string}
  */
 Consts.DataImages.TranspPic = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQIW2NkAAIAAAoAAggA9GkAAAAASUVORK5CYII=';
-
+
 /**
  * @enum {string}
  */
@@ -377,6 +382,7 @@ Enums.KeyState = {
 	'MessageList': 'message-list',
 	'MessageView': 'message-view',
 	'Compose': 'compose',
+	'Settings': 'settings',
 	'Menu': 'menu',
 	'PopupComposeOpenPGP': 'compose-open-pgp',
 	'PopupAsk': 'popup-ask'
@@ -716,7 +722,7 @@ Enums.Notification = {
 	'UnknownNotification': 999,
 	'UnknownError': 999
 };
-
+
 Utils.trim = $.trim;
 Utils.inArray = $.inArray;
 Utils.isArray = _.isArray;
@@ -2087,10 +2093,10 @@ Utils.draggeblePlace = function ()
 
 Utils.defautOptionsAfterRender = function (oOption, oItem)
 {
-	if (oItem && !Utils.isUnd(oItem.disable))
+	if (oItem && !Utils.isUnd(oItem.disabled))
 	{
 		ko.applyBindingsToNode(oOption, {
-			'disable': oItem.disable
+			'disabled': oItem.disabled
 		}, oItem);
 	}
 };
@@ -2475,7 +2481,7 @@ Utils.restoreKeyFilter = function ()
 		};
 	}
 };
-
+
 // Base64 encode / decode
 // http://www.webtoolkit.info/
  
@@ -2638,7 +2644,7 @@ Base64 = {
 	}
 };
 
-/*jslint bitwise: false*/
+/*jslint bitwise: false*/
 ko.bindingHandlers.tooltip = {
 	'init': function (oElement, fValueAccessor) {
 		if (!Globals.bMobileDevice)
@@ -2647,7 +2653,7 @@ ko.bindingHandlers.tooltip = {
 				sClass = $(oElement).data('tooltip-class') || '',
 				sPlacement = $(oElement).data('tooltip-placement') || 'top'
 			;
-			
+
 			$(oElement).tooltip({
 				'delay': {
 					'show': 500,
@@ -2685,7 +2691,54 @@ ko.bindingHandlers.tooltip2 = {
 	}
 };
 
-ko.bindingHandlers.dropdown = {
+ko.__detectDropdownVisibility = _.debounce(function ($el) {
+	Globals.dropdownVisibility(!!$el.hasClass('open'));
+}, 50);
+
+ko.bindingHandlers.dropdownOpenStatus = {
+	'init': function (oElement) {
+		var $el = $(oElement);
+
+		$el.find('.dropdown-toggle').click(function () {
+			ko.__detectDropdownVisibility($el);
+		});
+		
+//		$el.on('.dropdown-menu .menuitem', 'click', function () {
+//			$el.removeClass('open');
+//			ko.__detectDropdownVisibility($el);
+//		});
+
+//		$el.on('.dropdown-menu .menuitem', 'keydown', function (oEvent) {
+//			if (oEvent && Enums.EventKeyCode.Esc === oEvent.keyCode)
+//			{
+//				$el.removeClass('open');
+//				ko.__detectDropdownVisibility($el);
+//			}
+//		});
+		
+		$html.on('click.dropdown.data-api', function () {
+			ko.__detectDropdownVisibility($el);
+		});
+	}
+};
+
+ko.bindingHandlers.openDropdownTrigger = {
+	'update': function (oElement, fValueAccessor) {
+		if (ko.utils.unwrapObservable(fValueAccessor()))
+		{
+			var $el = $(oElement);
+			if (!$el.hasClass('open'))
+			{
+				$el.find('.dropdown-toggle').dropdown('toggle');
+				ko.__detectDropdownVisibility($el);
+			}
+			
+			fValueAccessor()(false);
+		}
+	}
+};
+
+ko.bindingHandlers.dropdownCloser = {
 	'init': function (oElement) {
 		$(oElement).closest('.dropdown').on('click', '.e-item', function () {
 			$(oElement).dropdown('toggle');
@@ -3296,7 +3349,7 @@ ko.observable.fn.validateFunc = function (fFunc)
 	return this;
 };
 
-
+
 /**
  * @constructor
  */
@@ -3594,7 +3647,7 @@ LinkBuilder.prototype.socialFacebook = function ()
 {
 	return this.sServer + 'SocialFacebook' + ('' !== this.sSpecSuffix ? '/' + this.sSpecSuffix + '/' : '');
 };
-
+
 /**
  * @type {Object}
  */
@@ -3688,7 +3741,7 @@ Plugins.settingsGet = function (sPluginSection, sName)
 };
 
 
-
+
 /**
  * @constructor
  */
@@ -3762,7 +3815,7 @@ CookieDriver.prototype.get = function (sKey)
 
 	return mResult;
 };
-
+
 /**
  * @constructor
  */
@@ -3833,7 +3886,7 @@ LocalStorageDriver.prototype.get = function (sKey)
 
 	return mResult;
 };
-
+
 /**
  * @constructor
  */
@@ -3876,7 +3929,7 @@ LocalStorage.prototype.get = function (iKey)
 {
 	return this.oDriver ? this.oDriver.get('p' + iKey) : null;
 };
-
+
 /**
  * @constructor
  */
@@ -3889,7 +3942,7 @@ KnoinAbstractBoot.prototype.bootstart = function ()
 {
 
 };
-
+
 /**
  * @param {string=} sPosition = ''
  * @param {string=} sTemplate = ''
@@ -3978,7 +4031,7 @@ KnoinAbstractViewModel.prototype.registerPopupEscapeKey = function ()
 		return true;
 	});
 };
-
+
 /**
  * @param {string} sScreenName
  * @param {?=} aViewModels = []
@@ -4054,7 +4107,7 @@ KnoinAbstractScreen.prototype.__start = function ()
 		this.oCross = oRoute;
 	}
 };
-
+
 /**
  * @constructor
  */
@@ -4443,7 +4496,7 @@ Knoin.prototype.bootstart = function ()
 };
 
 kn = new Knoin();
-
+
 /**
  * @param {string=} sEmail
  * @param {string=} sName
@@ -4807,7 +4860,7 @@ EmailModel.prototype.inputoTagLine = function ()
 {
 	return 0 < this.name.length ? this.name + ' (' + this.email + ')' : this.email;
 };
-
+
 /**
  * @constructor
  * @extends KnoinAbstractViewModel
@@ -5025,7 +5078,7 @@ PopupsDomainViewModel.prototype.clearForm = function ()
 	this.smtpAuth(true);
 	this.whiteList('');
 };
-
+
 /**
  * @constructor
  * @extends KnoinAbstractViewModel
@@ -5162,7 +5215,7 @@ PopupsPluginViewModel.prototype.onBuild = function ()
 		}
 	}, this));
 };
-
+
 /**
  * @constructor
  * @extends KnoinAbstractViewModel
@@ -5278,7 +5331,7 @@ PopupsActivateViewModel.prototype.validateSubscriptionKey = function ()
 {
 	var sValue = this.key();
 	return '' === sValue || !!/^RL[\d]+-[A-Z0-9\-]+Z$/.test(Utils.trim(sValue));
-};
+};
 /**
  * @constructor
  * @extends KnoinAbstractViewModel
@@ -5338,7 +5391,7 @@ PopupsLanguagesViewModel.prototype.changeLanguage = function (sLang)
 	RL.data().mainLanguage(sLang);
 	this.cancelCommand();
 };
-
+
 /**
  * @constructor
  * @extends KnoinAbstractViewModel
@@ -5446,7 +5499,7 @@ PopupsAskViewModel.prototype.onBuild = function ()
 	}, this));
 };
 
-
+
 /**
  * @constructor
  * @extends KnoinAbstractViewModel
@@ -5533,7 +5586,7 @@ AdminLoginViewModel.prototype.onHide = function ()
 {
 	this.loginFocus(false);
 };
-
+
 /**
  * @param {?} oScreen
  *
@@ -5555,7 +5608,7 @@ AdminMenuViewModel.prototype.link = function (sRoute)
 {
 	return '#/' + sRoute;
 };
-
+
 /**
  * @constructor
  * @extends KnoinAbstractViewModel
@@ -5577,7 +5630,7 @@ AdminPaneViewModel.prototype.logoutClick = function ()
 	RL.remote().adminLogout(function () {
 		RL.loginAndLogoutReload();
 	});
-};
+};
 /**
  * @constructor
  */
@@ -5677,7 +5730,7 @@ AdminGeneral.prototype.selectLanguage = function ()
 {
 	kn.showScreenPopup(PopupsLanguagesViewModel);
 };
-
+
 /**
  * @constructor
  */
@@ -5729,7 +5782,7 @@ AdminLogin.prototype.onBuild = function ()
 
 	}, 50);
 };
-
+
 /**
  * @constructor
  */
@@ -5798,7 +5851,7 @@ AdminBranding.prototype.onBuild = function ()
 
 	}, 50);
 };
-
+
 /**
  * @constructor
  */
@@ -5853,7 +5906,7 @@ function AdminContacts()
 		return {
 			'id': sValue,
 			'name': getTypeName(sValue) + (bDisabled ? ' (not supported)' : ''),
-			'disable': bDisabled
+			'disabled': bDisabled
 		};
 	});
 
@@ -6018,7 +6071,7 @@ AdminContacts.prototype.onBuild = function ()
 
 	}, 50);
 };
-
+
 /**
  * @constructor
  */
@@ -6107,7 +6160,7 @@ AdminDomains.prototype.onDomainListChangeRequest = function ()
 {
 	RL.reloadDomainList();
 };
-
+
 /**
  * @constructor
  */
@@ -6202,7 +6255,7 @@ AdminSecurity.prototype.phpInfoLink = function ()
 {
 	return RL.link().phpInfo();
 };
-
+
 /**
  * @constructor
  */
@@ -6318,7 +6371,7 @@ AdminSocial.prototype.onBuild = function ()
 
 	}, 50);
 };
-
+
 /**
  * @constructor
  */
@@ -6366,7 +6419,7 @@ AdminPlugins.prototype.onBuild = function (oDom)
 				self.configurePlugin(oPlugin);
 			}
 		})
-		.on('click', '.e-item .disable-plugin', function () {
+		.on('click', '.e-item .disabled-plugin', function () {
 			var oPlugin = ko.dataFor(this);
 			if (oPlugin)
 			{
@@ -6415,7 +6468,7 @@ AdminPlugins.prototype.onPluginDisableRequest = function (sResult, oData)
 
 	RL.reloadPluginList();
 };
-
+
 /**
  * @constructor
  */
@@ -6513,7 +6566,7 @@ AdminPackages.prototype.installPackage = function (oPackage)
 		RL.remote().packageInstall(this.requestHelper(oPackage, true), oPackage);
 	}
 };
-
+
 /**
  * @constructor
  */
@@ -6564,28 +6617,61 @@ AdminLicensing.prototype.licenseExpiredMomentValue = function ()
 {
 	var oDate = moment.unix(this.licenseExpired());
 	return oDate.format('LL') + ' (' + oDate.from(moment()) + ')';
-};
+};
 /**
  * @constructor
  */
 function AbstractData()
 {
-	this.keyScope = ko.observable(Enums.KeyState.All);
-	this.keyScope.subscribe(function (sValue) {
+	this.keyScopeReal = ko.observable(Enums.KeyState.All);
+	this.keyScopeFake = ko.observable(Enums.KeyState.All);
+	
+	this.keyScope = ko.computed({
+		'owner': this,
+		'read': function () {
+			return this.keyScopeFake();
+		},
+		'write': function (sValue) {
 
-		if (Enums.KeyState.Compose === sValue)
-		{
-			Utils.disableKeyFilter();
-		}
-		else
-		{
-			Utils.restoreKeyFilter();
-		}
+			if (Enums.KeyState.Menu !== sValue)
+			{
+				if (Enums.KeyState.Compose === sValue)
+				{
+					Utils.disableKeyFilter();
+				}
+				else
+				{
+					Utils.restoreKeyFilter();
+				}
 
-//		window.console.log(sValue);
+				this.keyScopeFake(sValue);
+				if (Globals.dropdownVisibility())
+				{
+					sValue = Enums.KeyState.Menu;
+				}
+			}
+			
+//			window.console.log(sValue + '/' + this.keyScopeFake());
+			this.keyScopeReal(sValue);
+		}
+	});
+	
+	this.keyScopeReal.subscribe(function (sValue) {
+		window.console.log(sValue);
 		key.setScope(sValue);
 	});
 
+	Globals.dropdownVisibility.subscribe(function (bValue) {
+		if (bValue)
+		{
+			this.keyScope(Enums.KeyState.Menu);
+		}
+		else if (Enums.KeyState.Menu === key.getScope())
+		{
+			this.keyScope(this.keyScopeFake());
+		}
+	}, this);
+
 	Utils.initDataConstructorBySettings(this);
 }
 
@@ -6655,7 +6741,7 @@ AbstractData.prototype.populateDataOnStart = function()
 
 	this.contactsIsAllowed(!!RL.settingsGet('ContactsIsAllowed'));
 };
-
+
 /**
  * @constructor
  * @extends AbstractData
@@ -6689,7 +6775,7 @@ _.extend(AdminDataStorage.prototype, AbstractData.prototype);
 AdminDataStorage.prototype.populateDataOnStart = function()
 {
 	AbstractData.prototype.populateDataOnStart.call(this);
-};
+};
 /**
  * @constructor
  */
@@ -6963,7 +7049,7 @@ AbstractAjaxRemoteStorage.prototype.jsVersion = function (fCallback, sVersion)
 		'Version': sVersion
 	});
 };
-
+
 /**
  * @constructor
  * @extends AbstractAjaxRemoteStorage
@@ -7207,7 +7293,7 @@ AdminAjaxRemoteStorage.prototype.adminPing = function (fCallback)
 {
 	this.defaultRequest(fCallback, 'AdminPing');
 };
-
+
 /**
  * @constructor
  */
@@ -7273,7 +7359,7 @@ AbstractCacheStorage.prototype.setEmailsPicsHashesData = function (oData)
 {
 	this.oEmailsPicsHashes = oData;
 };
-
+
 /**
  * @constructor
  * @extends AbstractCacheStorage
@@ -7284,7 +7370,7 @@ function AdminCacheStorage()
 }
 
 _.extend(AdminCacheStorage.prototype, AbstractCacheStorage.prototype);
-
+
 /**
  * @param {Array} aViewModels
  * @constructor
@@ -7462,7 +7548,7 @@ AbstractSettings.prototype.routes = function ()
 		['', oRules]
 	];
 };
-
+
 /**
  * @constructor
  * @extends KnoinAbstractScreen
@@ -7477,7 +7563,7 @@ _.extend(AdminLoginScreen.prototype, KnoinAbstractScreen.prototype);
 AdminLoginScreen.prototype.onShow = function ()
 {
 	RL.setTitle('');
-};
+};
 /**
  * @constructor
  * @extends AbstractSettings
@@ -7497,7 +7583,7 @@ AdminSettingsScreen.prototype.onShow = function ()
 //	AbstractSettings.prototype.onShow.call(this);
 	
 	RL.setTitle('');
-};
+};
 /**
  * @constructor
  * @extends KnoinAbstractBoot
@@ -7817,7 +7903,7 @@ AbstractApp.prototype.bootstart = function ()
 
 	ssm.ready();
 };
-
+
 /**
  * @constructor
  * @extends AbstractApp
@@ -8056,7 +8142,7 @@ AdminApp.prototype.bootstart = function ()
  * @type {AdminApp}
  */
 RL = new AdminApp();
-
+
 $html.addClass(Globals.bMobileDevice ? 'mobile' : 'no-mobile');
 
 $window.keydown(Utils.killCtrlAandS).keyup(Utils.killCtrlAandS);
@@ -8103,9 +8189,9 @@ window['__RLBOOT'] = function (fCall) {
 		window['__RLBOOT'] = null;
 	});
 };
-
+
 if (window.SimplePace) {
 	window.SimplePace.add(10);
-}
-
+}
+
 }(window, jQuery, ko, crossroads, hasher, _));

vendors/jquery-nanoscroller/nanoscroller.css

@@ -49,7 +49,7 @@
   -moz-border-radius    : 5px;
   -webkit-border-radius : 5px;
   border-radius         : 5px;
-  z-index: 10000;
+  z-index: 102;
   margin                : 2px;
 }