New styles for toltips (Opentip)

Selector new functionality
x-script tag support for templates

dev/App/Abstract.js

@@ -47,7 +47,7 @@
 					oEvent.originalEvent.lineno,
 					window.location && window.location.toString ? window.location.toString() : '',
 					Globals.$html.attr('class'),
-					Utils.microtime() - Globals.now
+					Utils.microtime() - Globals.startMicrotime
 				);
 			}
 		});
@@ -282,6 +282,8 @@
 		ko.components.register('TextArea', require('Component/TextArea'));
 		ko.components.register('Radio', require('Component/Radio'));
 
+		ko.components.register('x-script', require('Component/Script'));
+
 		if (Settings.settingsGet('MaterialDesign') && Globals.bAnimationSupported)
 		{
 			ko.components.register('Checkbox', require('Component/MaterialDesign/Checkbox'));

dev/Common/Enums.js

@@ -15,6 +15,16 @@
 		'Unload': 'unload'
 	};
 
+	/**
+	 * @enum {string}
+	 */
+	Enums.Focused = {
+		'None': 'none',
+		'MessageList': 'message-list',
+		'MessageView': 'message-view',
+		'FolderList': 'folder-list'
+	};
+
 	/**
 	 * @enum {number}
 	 */

dev/Common/Globals.js

@@ -25,18 +25,13 @@
 	/**
 	 * @type {?}
 	 */
-	Globals.now = (new window.Date()).getTime();
+	Globals.startMicrotime = (new window.Date()).getTime();
 
 	/**
 	 * @type {?}
 	 */
 	Globals.dropdownVisibility = ko.observable(false).extend({'rateLimit': 0});
 
-	/**
-	 * @type {?}
-	 */
-	Globals.tooltipTrigger = ko.observable(false).extend({'rateLimit': 0});
-
 	/**
 	 * @type {boolean}
 	 */
@@ -258,14 +253,13 @@
 	});
 
 	Globals.keyScopeReal.subscribe(function (sValue) {
-//		window.console.log(sValue);
+//		window.console.log('keyScope=' + sValue); // TODO
 		key.setScope(sValue);
 	});
 
 	Globals.dropdownVisibility.subscribe(function (bValue) {
 		if (bValue)
 		{
-			Globals.tooltipTrigger(!Globals.tooltipTrigger());
 			Globals.keyScope(Enums.KeyState.Menu);
 		}
 		else if (Enums.KeyState.Menu === key.getScope())

dev/Common/Links.js

@@ -208,14 +208,6 @@
 		return this.sBase + 'mailbox/' + sInboxFolderName;
 	};
 
-	/**
-	 * @return {string}
-	 */
-	Links.prototype.messagePreview = function ()
-	{
-		return this.sBase + 'mailbox/message-preview';
-	};
-
 	/**
 	 * @param {string=} sScreenName
 	 * @return {string}

dev/Common/Selector.js

@@ -88,7 +88,7 @@
 
 		}, this);
 
-		this.selectedItem.extend({'toggleSubscribe': [null,
+		this.selectedItem = this.selectedItem.extend({'toggleSubscribe': [null,
 			function (oPrev) {
 				if (oPrev)
 				{
@@ -102,7 +102,7 @@
 			}
 		]});
 
-		this.focusedItem.extend({'toggleSubscribe': [null,
+		this.focusedItem = this.focusedItem.extend({'toggleSubscribe': [null,
 			function (oPrev) {
 				if (oPrev)
 				{
@@ -116,6 +116,8 @@
 			}
 		]});
 
+		this.iSelectNextHelper = 0;
+		this.iFocusedNextHelper = 0;
 		this.oContentVisible = null;
 		this.oContentScrollable = null;
 
@@ -257,6 +259,39 @@
 						self.focusedItem(self.selectedItem());
 					}
 				}
+
+				if ((0 !== this.iSelectNextHelper || 0 !== this.iFocusedNextHelper) && 0 < aItems.length && !self.focusedItem())
+				{
+					oTemp = null;
+					if (0 !== this.iFocusedNextHelper)
+					{
+						oTemp = aItems[-1 === this.iFocusedNextHelper ? aItems.length - 1 : 0] || null;
+					}
+
+					if (!oTemp && 0 !== this.iSelectNextHelper)
+					{
+						oTemp = aItems[-1 === this.iSelectNextHelper ? aItems.length - 1 : 0] || null;
+					}
+
+					if (oTemp)
+					{
+						if (0 !== this.iSelectNextHelper)
+						{
+							self.selectedItem(oTemp || null);
+						}
+
+						self.focusedItem(oTemp || null);
+
+						self.scrollToFocused();
+
+						_.delay(function () {
+							self.scrollToFocused();
+						}, 100);
+					}
+
+					this.iSelectNextHelper = 0;
+					this.iFocusedNextHelper = 0;
+				}
 			}
 
 			aCache = [];
@@ -295,6 +330,12 @@
 		this.newSelectPosition(Enums.EventKeyCode.Up, false, bForceSelect);
 	};
 
+	Selector.prototype.unselect = function ()
+	{
+		this.selectedItem(null);
+		this.focusedItem(null);
+	};
+
 	Selector.prototype.init = function (oContentVisible, oContentScrollable, sKeyScope)
 	{
 		this.oContentVisible = oContentVisible;
@@ -493,7 +534,7 @@
 						}
 					});
 
-					if (!oResult && bForceSelect && (Enums.EventKeyCode.Down === iEventKeyCode || Enums.EventKeyCode.Up === iEventKeyCode))
+					if (!oResult && (Enums.EventKeyCode.Down === iEventKeyCode || Enums.EventKeyCode.Up === iEventKeyCode))
 					{
 						this.doUpUpOrDownDown(Enums.EventKeyCode.Up === iEventKeyCode);
 					}

dev/Component/Abstract.js

@@ -39,16 +39,17 @@
 	 * @return {Object}
 	 */
 	AbstractComponent.componentExportHelper = function (ClassObject, sTemplateID) {
-		return {
+		var oComponent = {
 			viewModel: {
-				createViewModel: function(oParams, oCmponentInfo) {
+				createViewModel: function(oParams, oComponentInfo) {
 
 					oParams = oParams || {};
 					oParams.element = null;
 
-					if (oCmponentInfo.element)
+					if (oComponentInfo.element)
 					{
-						oParams.element = $(oCmponentInfo.element);
+						oParams.component = oComponentInfo;
+						oParams.element = $(oComponentInfo.element);
 
 						require('Common/Translator').i18nToNodes(oParams.element);
 
@@ -60,11 +61,14 @@
 
 					return new ClassObject(oParams);
 				}
-			},
-			template: {
-				element: sTemplateID
 			}
 		};
+
+		oComponent['template'] = sTemplateID ? {
+			element: sTemplateID
+		} : '<b></b>';
+
+		return oComponent;
 	};
 
 	module.exports = AbstractComponent;

dev/Component/Script.js

@@ -0,0 +1,38 @@
+
+(function () {
+
+	'use strict';
+
+	var
+		_ = require('_'),
+
+		AbstractComponent = require('Component/Abstract')
+	;
+
+	/**
+	 * @constructor
+	 *
+	 * @param {Object} oParams
+	 *
+	 * @extends AbstractComponent
+	 */
+	function ScriptComponent(oParams)
+	{
+		AbstractComponent.call(this);
+
+		if (oParams.component && oParams.component.templateNodes && oParams.element)
+		{
+			oParams.element.text('');
+			if (oParams.component.templateNodes[0] && oParams.component.templateNodes[0].nodeValue)
+			{
+				oParams.element.replaceWith(
+					$('<script></script>').text(oParams.component.templateNodes[0].nodeValue));
+			}
+		}
+	}
+
+	_.extend(ScriptComponent.prototype, AbstractComponent.prototype);
+
+	module.exports = AbstractComponent.componentExportHelper(ScriptComponent);
+
+}());

dev/External/Opentip.js

@@ -0,0 +1,38 @@
+
+(function () {
+
+	'use strict';
+
+	var
+		window = require('window'),
+		Opentip = window.Opentip
+	;
+
+	Opentip.styles.rainloop = {
+		'extends': 'standard',
+		'group': 'rainloopTips',
+		'fixed': true,
+		'target': true,
+
+		'removeElementsOnHide': true,
+
+		'background': '#fff',
+		'shadow': false,
+
+		'borderColor': '#999',
+		'borderRadius': 2,
+		'borderWidth': 1
+	};
+
+	Opentip.styles.rainloopTip = {
+		'extends': 'rainloop',
+		'group': 'rainloopTips'
+	};
+
+	Opentip.styles.rainloopTestTip = {
+		'extends': 'rainloop'
+	};
+
+	module.exports = Opentip;
+
+}());

dev/External/ko.js

@@ -7,26 +7,15 @@
 		window = require('window'),
 		_ = require('_'),
 		$ = require('$'),
+		Opentip = require('Opentip'),
 
-		fDisposalTooltipHelper = function (oElement, $oEl, oSubscription) {
+		fDisposalTooltipHelper = function (oElement) {
 			ko.utils.domNodeDisposal.addDisposeCallback(oElement, function () {
 
-				if (oSubscription && oSubscription.dispose)
+				if (oElement && oElement.__opentip)
 				{
-					oSubscription.dispose();
+					oElement.__opentip.deactivate();
 				}
-
-				if ($oEl)
-				{
-					$oEl.off('click.koTooltip');
-
-					if ($oEl.tooltip)
-					{
-						$oEl.tooltip('destroy');
-					}
-				}
-
-				$oEl = null;
 			});
 		}
 	;
@@ -37,43 +26,80 @@
 			var
 				$oEl = null,
 				bi18n = true,
-				sClass  = '',
-				sPlacement  = '',
-				oSubscription = null,
-				Globals = require('Common/Globals'),
-				Translator = require('Common/Translator')
+				sValue = '',
+				Translator = null,
+				Globals = require('Common/Globals')
 			;
 
 			if (!Globals.bMobileDevice)
 			{
 				$oEl = $(oElement);
-				sClass = $oEl.data('tooltip-class') || '';
 				bi18n = 'on' === ($oEl.data('tooltip-i18n') || 'on');
-				sPlacement = $oEl.data('tooltip-placement') || 'top';
+				sValue = bi18n ? ko.unwrap(fValueAccessor()) : fValueAccessor()();
 
-				$oEl.tooltip({
-					'delay': {
-						'show': 500,
-						'hide': 100
-					},
-					'html': true,
-					'container': 'body',
-					'placement': sPlacement,
-					'trigger': 'hover',
-					'title': function () {
-						var sValue = bi18n ? ko.unwrap(fValueAccessor()) : fValueAccessor()();
-						return '' === sValue || $oEl.is('.disabled') || Globals.dropdownVisibility() ? '' :
-							'<span class="tooltip-class ' + sClass + '">' + (bi18n ? Translator.i18n(sValue) : sValue) + '</span>';
+				if (sValue)
+				{
+					oElement.__opentip = new Opentip(oElement, {
+						'style': 'rainloopTip',
+						'element': oElement,
+						'tipJoint': $oEl.data('tooltip-join') || 'bottom'
+					});
+
+					oElement.__opentip.setContent(
+						bi18n ? require('Common/Translator').i18n(sValue) : sValue);
+
+					Globals.dropdownVisibility.subscribe(function (bV) {
+						if (bV) {
+							oElement.__opentip.deactivate();
+						} else {
+							oElement.__opentip.activate();
 						}
-				}).on('click.koTooltip', function () {
-					$oEl.tooltip('hide');
 					});
 
-				oSubscription = Globals.tooltipTrigger.subscribe(function () {
-					$oEl.tooltip('hide');
+					if (bi18n)
+					{
+						Translator = require('Common/Translator');
+
+						oElement.__opentip.setContent(Translator.i18n(sValue));
+
+						Translator.trigger.subscribe(function () {
+							oElement.__opentip.setContent(Translator.i18n(sValue));
 						});
 
-				fDisposalTooltipHelper(oElement, $oEl, oSubscription);
+						Globals.dropdownVisibility.subscribe(function () {
+							if (oElement && oElement.__opentip)
+							{
+								oElement.__opentip.setContent(require('Common/Translator').i18n(sValue));
+							}
+						});
+					}
+					else
+					{
+						oElement.__opentip.setContent(sValue);
+					}
+
+					fDisposalTooltipHelper(oElement);
+				}
+			}
+		},
+		'update': function (oElement, fValueAccessor) {
+
+			var
+				bi18n = true,
+				sValue = '',
+				Globals = require('Common/Globals')
+			;
+
+			if (!Globals.bMobileDevice && oElement.__opentip)
+			{
+				bi18n = 'on' === ($(oElement).data('tooltip-i18n') || 'on');
+				sValue = bi18n ? ko.unwrap(fValueAccessor()) : fValueAccessor()();
+
+				if (sValue)
+				{
+					oElement.__opentip.setContent(
+						bi18n ? require('Common/Translator').i18n(sValue) : sValue);
+				}
 			}
 		}
 	};
@@ -81,47 +107,60 @@
 	ko.bindingHandlers.tooltipForTest = {
 		'init': function (oElement) {
 
-			var
-				$oEl = $(oElement),
-				oSubscription = null,
-				Globals = require('Common/Globals')
-			;
+			var $oEl = $(oElement);
 
-			$oEl.tooltip({
-				'container': 'body',
-				'trigger': 'hover manual',
-				'title': function () {
-					return $oEl.data('tooltip3-data') || '';
+			oElement.__opentip = new Opentip(oElement, {
+				'style': 'rainloopTestTip',
+				'element': oElement,
+				'tipJoint': $oEl.data('tooltip-join') || 'top'
+			});
+
+			oElement.__opentip.deactivate();
+
+			$(window.document).on('click', function () {
+				if (oElement && oElement.__opentip)
+				{
+					oElement.__opentip.hide();
 				}
 			});
 
-			$(window.document).on('click', function () {
-				$oEl.tooltip('hide');
-			});
-
-			oSubscription = Globals.tooltipTrigger.subscribe(function () {
-				$oEl.tooltip('hide');
-			});
-
-			fDisposalTooltipHelper(oElement, $oEl, oSubscription);
+			fDisposalTooltipHelper(oElement);
 		},
 		'update': function (oElement, fValueAccessor) {
-			var sValue = ko.unwrap(fValueAccessor());
+
+			var
+				$oEl = $(oElement),
+				sValue = ko.unwrap(fValueAccessor()),
+				oOpenTips = oElement.__opentip
+			;
+
+			if (oOpenTips)
+			{
 				if ('' === sValue)
 				{
-				$(oElement).data('tooltip3-data', '').tooltip('hide');
+					oOpenTips.hide();
+					oOpenTips.setContent('');
+					oOpenTips.deactivate();
 				}
 				else
 				{
-				$(oElement).data('tooltip3-data', sValue);
+					if ($oEl.is(':visible'))
+					{
+						oOpenTips.activate();
+						oOpenTips.setContent(sValue);
 
 						_.delay(function () {
-					if ($(oElement).is(':visible'))
-					{
-						$(oElement).tooltip('show');
-					}
+							oOpenTips.show();
 						}, 100);
 					}
+					else
+					{
+						oOpenTips.hide();
+						oOpenTips.setContent('');
+						oOpenTips.deactivate();
+					}
+				}
+			}
 		}
 	};
 
@@ -152,6 +191,8 @@
 					$oEl.find('.dropdown-toggle').dropdown('toggle');
 				}
 
+				$oEl.find('.dropdown-toggle').focus();
+
 				require('Common/Utils').detectDropdownVisibility();
 				fValueAccessor()(false);
 			}

dev/Knoin/Knoin.js

@@ -198,8 +198,6 @@
 							Globals.popupVisibilityNames.remove(this.viewModelName);
 							oViewModel.viewModelDom.css('z-index', 2000);
 
-							Globals.tooltipTrigger(!Globals.tooltipTrigger());
-
 							_.delay(function () {
 								self.viewModelDom.hide();
 							}, 300);
@@ -288,6 +286,7 @@
 		var
 			self = this,
 			oScreen = null,
+			bSameScreen= false,
 			oCross = null
 		;
 
@@ -311,6 +310,8 @@
 
 			if (oScreen && oScreen.__started)
 			{
+				bSameScreen = this.oCurrentScreen && oScreen === this.oCurrentScreen;
+
 				if (!oScreen.__builded)
 				{
 					oScreen.__builded = true;
@@ -328,7 +329,7 @@
 				_.defer(function () {
 
 					// hide screen
-					if (self.oCurrentScreen)
+					if (self.oCurrentScreen && !bSameScreen)
 					{
 						Utils.delegateRun(self.oCurrentScreen, 'onHide');
 						Utils.delegateRun(self.oCurrentScreen, 'onHideWithDelay', [], 500);
@@ -365,7 +366,7 @@
 					self.oCurrentScreen = oScreen;
 
 					// show screen
-					if (self.oCurrentScreen)
+					if (self.oCurrentScreen && !bSameScreen)
 					{
 						Utils.delegateRun(self.oCurrentScreen, 'onShow');
 						if (self.oCurrentScreen.onShowTrigger)

dev/Screen/User/MailBox.js

@@ -14,6 +14,7 @@
 
 		Cache = require('Common/Cache'),
 
+		AppStore = require('Stores/User/App'),
 		AccountStore = require('Stores/User/Account'),
 		SettingsStore = require('Stores/User/Settings'),
 		FolderStore = require('Stores/User/Folder'),
@@ -60,7 +61,9 @@
 	MailBoxUserScreen.prototype.onShow = function ()
 	{
 		this.updateWindowTitle();
-		Globals.keyScope(Enums.KeyState.MessageList);
+
+		AppStore.focusedState(Enums.Focused.None);
+		AppStore.focusedState(Enums.Focused.MessageList);
 	};
 
 	/**
@@ -69,16 +72,7 @@
 	 * @param {string} sSearch
 	 * @param {boolean=} bPreview = false
 	 */
-	MailBoxUserScreen.prototype.onRoute = function (sFolderHash, iPage, sSearch, bPreview)
-	{
-		if (Utils.isUnd(bPreview) ? false : !!bPreview)
-		{
-			if (Enums.Layout.NoPreview === SettingsStore.layout() && !MessageStore.message())
-			{
-				require('App/User').historyBack();
-			}
-		}
-		else
+	MailBoxUserScreen.prototype.onRoute = function (sFolderHash, iPage, sSearch)
 	{
 		var
 			sFolderFullNameRaw = Cache.getFolderFullNameRaw(sFolderHash),
@@ -91,14 +85,13 @@
 			MessageStore.messageListPage(iPage);
 			MessageStore.messageListSearch(sSearch);
 
-				if (Enums.Layout.NoPreview === SettingsStore.layout() && MessageStore.message())
-				{
-					MessageStore.message(null);
-				}
+//			if (Enums.Layout.NoPreview === SettingsStore.layout() && MessageStore.message())
+//			{
+//				MessageStore.message(null);
+//			}
 
 			require('App/User').reloadMessageList();
 		}
-		}
 	};
 
 	MailBoxUserScreen.prototype.onStart = function ()
@@ -147,9 +140,6 @@
 	{
 		var
 			sInboxFolderName = Cache.getFolderInboxName(),
-			fNormP = function () {
-				return [sInboxFolderName, 1, '', true];
-			},
 			fNormS = function (oRequest, oVals) {
 				oVals[0] = Utils.pString(oVals[0]);
 				oVals[1] = Utils.pInt(oVals[1]);
@@ -162,7 +152,7 @@
 					oVals[1] = 1;
 				}
 
-				return [decodeURI(oVals[0]), oVals[1], decodeURI(oVals[2]), false];
+				return [decodeURI(oVals[0]), oVals[1], decodeURI(oVals[2])];
 			},
 			fNormD = function (oRequest, oVals) {
 				oVals[0] = Utils.pString(oVals[0]);
@@ -173,7 +163,7 @@
 					oVals[0] = sInboxFolderName;
 				}
 
-				return [decodeURI(oVals[0]), 1, decodeURI(oVals[1]), false];
+				return [decodeURI(oVals[0]), 1, decodeURI(oVals[1])];
 			}
 		;
 
@@ -181,7 +171,6 @@
 			[/^([a-zA-Z0-9]+)\/p([1-9][0-9]*)\/(.+)\/?$/, {'normalize_': fNormS}],
 			[/^([a-zA-Z0-9]+)\/p([1-9][0-9]*)$/, {'normalize_': fNormS}],
 			[/^([a-zA-Z0-9]+)\/(.+)\/?$/, {'normalize_': fNormD}],
-			[/^message-preview$/,  {'normalize_': fNormP}],
 			[/^([^\/]*)$/,  {'normalize_': fNormS}]
 		];
 	};

dev/Settings/User/Filters.js

@@ -73,10 +73,13 @@
 						self.haveChanges(false);
 						self.updateList();
 					}
+					else if (oData && oData.ErrorCode)
+					{
+						self.saveErrorText(oData.ErrorMessageAdditional || Translator.getNotification(oData.ErrorCode));
+					}
 					else
 					{
-						self.saveErrorText(oData && oData.ErrorCode ? Translator.getNotification(oData.ErrorCode) :
-							Translator.getNotification(Enums.Notification.CantSaveFilters));
+						self.saveErrorText(Translator.getNotification(Enums.Notification.CantSaveFilters));
 					}
 
 				}, this.filters(), this.filterRaw(), this.filterRaw.active());
@@ -97,6 +100,10 @@
 			this.filterRaw.error(false);
 		}, this);
 
+		this.haveChanges.subscribe(function () {
+			this.saveErrorText('');
+		}, this);
+
 		this.filterRaw.active.subscribe(function () {
 			this.haveChanges(true);
 			this.filterRaw.error(false);

dev/Stores/User/App.js

@@ -6,6 +6,9 @@
 	var
 		ko = require('ko'),
 
+		Enums = require('Common/Enums'),
+		Globals = require('Common/Globals'),
+
 		Settings = require('Storage/Settings'),
 
 		AppStore = require('Stores/App')
@@ -18,6 +21,25 @@
 	{
 		AppStore.call(this);
 
+		this.focusedState = ko.observable(Enums.Focused.None);
+
+		this.focusedState.subscribe(function (mValue) {
+
+			switch (mValue)
+			{
+				case Enums.Focused.MessageList:
+					Globals.keyScope(Enums.KeyState.MessageList);
+					break;
+				case Enums.Focused.MessageView:
+					Globals.keyScope(Enums.KeyState.MessageView);
+					break;
+				case Enums.Focused.FolderList:
+					Globals.keyScope(Enums.KeyState.FolderList);
+					break;
+			}
+
+		}, this);
+
 		this.projectHash = ko.observable('');
 		this.threadsAllowed = ko.observable(false);
 

dev/Stores/User/Folder.js

@@ -9,7 +9,6 @@
 
 		Enums = require('Common/Enums'),
 		Consts = require('Common/Consts'),
-		Globals = require('Common/Globals'),
 		Utils = require('Common/Utils'),
 
 		Cache = require('Common/Cache')
@@ -29,7 +28,6 @@
 		this.namespace = '';
 
 		this.folderList = ko.observableArray([]);
-		this.folderList.focused = ko.observable(false);
 		this.folderList.optimized = ko.observable(false);
 		this.folderList.error = ko.observable('');
 
@@ -180,17 +178,6 @@
 		this.spamFolder.subscribe(fSetSystemFolderType(Enums.FolderType.Spam), this);
 		this.trashFolder.subscribe(fSetSystemFolderType(Enums.FolderType.Trash), this);
 		this.archiveFolder.subscribe(fSetSystemFolderType(Enums.FolderType.Archive), this);
-
-		this.folderList.focused.subscribe(function (bValue) {
-			if (bValue)
-			{
-				Globals.keyScope(Enums.KeyState.FolderList);
-			}
-			else if (Enums.KeyState.FolderList === Globals.keyScope())
-			{
-				Globals.keyScope(Enums.KeyState.MessageList);
-			}
-		});
 	};
 
 	/**

dev/Stores/User/Message.js

@@ -61,8 +61,6 @@
 		this.selectorMessageSelected = ko.observable(null);
 		this.selectorMessageFocused = ko.observable(null);
 
-		this.message.focused = ko.observable(false);
-
 		this.message.viewTrigger = ko.observable(false);
 
 		this.messageLastThreadUidsData = ko.observable(null);
@@ -180,41 +178,22 @@
 		}, 500));
 
 		this.message.subscribe(function (oMessage) {
-			if (!oMessage)
-			{
-				this.message.focused(false);
-				this.messageFullScreenMode(false);
-				this.hideMessageBodies();
 
-				if (Enums.Layout.NoPreview === SettingsStore.layout() &&
-					-1 < window.location.hash.indexOf('message-preview'))
+			if (oMessage)
 			{
-					require('App/User').historyBack();
+				 if (Enums.Layout.NoPreview === SettingsStore.layout())
+				{
+					AppStore.focusedState(Enums.Focused.MessageView);
 				}
 			}
-			else if (Enums.Layout.NoPreview === SettingsStore.layout())
-			{
-				this.message.focused(true);
-			}
-		}, this);
-
-		this.message.focused.subscribe(function (bValue) {
-			if (bValue)
-			{
-				FolderStore.folderList.focused(false);
-				Globals.keyScope(Enums.KeyState.MessageView);
-			}
-			else if (Enums.KeyState.MessageView === Globals.keyScope())
-			{
-				if (Enums.Layout.NoPreview === SettingsStore.layout() && this.message())
-				{
-					Globals.keyScope(Enums.KeyState.MessageView);
-				}
 			else
 			{
-					Globals.keyScope(Enums.KeyState.MessageList);
-				}
+				AppStore.focusedState(Enums.Focused.MessageList);
+
+				this.messageFullScreenMode(false);
+				this.hideMessageBodies();
 			}
+
 		}, this);
 
 		this.messageLoading.subscribe(function (bValue) {
@@ -671,12 +650,6 @@
 			this.message(this.staticMessage.populateByMessageListItem(oMessage));
 
 			this.populateMessageBody(this.message());
-
-			if (Enums.Layout.NoPreview === SettingsStore.layout())
-			{
-				kn.setHash(Links.messagePreview(), true);
-				this.message.focused(true);
-			}
 		}
 		else
 		{
@@ -690,12 +663,6 @@
 		{
 			this.messageThreadLoading(true);
 		}
-
-		if (Enums.Layout.NoPreview === SettingsStore.layout())
-		{
-			kn.setHash(Links.messagePreview(), true);
-			this.message.focused(true);
-		}
 	};
 
 	MessageUserStore.prototype.populateMessageBody = function (oMessage)

dev/Styles/MessageView.less

@@ -397,7 +397,7 @@ html.rl-no-preview-pane {
 			background-color: #F5F5F5;
 			color: #555;
 			text-decoration: underline;
-			border-bottom: 1px dashed #555;
+			border-top: 1px dashed #555;
 		}
 	}
 }

dev/Styles/_BootstrapFix.less

@@ -161,9 +161,6 @@ html.rgba.textshadow {
 		opacity: 1;
 	}
 
-	.tooltip-class {
-	}
-
 	.tooltip-inner {
 		max-width: 380px;
 		text-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);

dev/Styles/_End.less

@@ -31,3 +31,10 @@
 #rl-content {
 	display: block;
 }
+
+.opentip-container {
+	z-index: 2001 !important;
+	.ot-content {
+		font-size: 13px;
+	}
+}

dev/View/User/AbstractSystemDropDown.js

@@ -13,6 +13,7 @@
 		Links = require('Common/Links'),
 
 		AccountStore = require('Stores/User/Account'),
+		MessageStore = require('Stores/User/Message'),
 
 		Settings = require('Storage/Settings'),
 
@@ -88,6 +89,8 @@
 		key('`', [Enums.KeyState.MessageList, Enums.KeyState.MessageView, Enums.KeyState.Settings], function () {
 			if (self.viewModelVisibility())
 			{
+				MessageStore.messageFullScreenMode(false);
+
 				self.accountMenuDropdownTrigger(true);
 			}
 		});

dev/View/User/MailBox/FolderList.js

@@ -52,6 +52,10 @@
 
 		this.allowContacts = !!AppStore.contactsIsAllowed();
 
+		this.folderListFocused = ko.computed(function () {
+			return Enums.Focused.FolderList === AppStore.focusedState();
+		});
+
 		kn.constructorEnd(this);
 	}
 
@@ -144,7 +148,7 @@
 			var $items = $('.b-folders .e-item .e-link:not(.hidden).focused', oDom);
 			if ($items.length && $items[0])
 			{
-				FolderStore.folderList.focused(false);
+				AppStore.focusedState(Enums.Focused.MessageList);
 				$items.click();
 			}
 
@@ -168,13 +172,13 @@
 		});
 
 		key('esc, tab, shift+tab, right', Enums.KeyState.FolderList, function () {
-			FolderStore.folderList.focused(false);
+			AppStore.focusedState(Enums.Focused.MessageList);
 			return false;
 		});
 
-		FolderStore.folderList.focused.subscribe(function (bValue) {
+		AppStore.focusedState.subscribe(function (mValue) {
 			$('.b-folders .e-item .e-link.focused', oDom).removeClass('focused');
-			if (bValue)
+			if (Enums.Focused.FolderList === mValue)
 			{
 				$('.b-folders .e-item .e-link.selected', oDom).addClass('focused');
 			}

dev/View/User/MailBox/MessageList.js

@@ -4,6 +4,7 @@
 	'use strict';
 
 	var
+		window = require('window'),
 		_ = require('_'),
 		$ = require('$'),
 		ko = require('ko'),
@@ -22,6 +23,7 @@
 
 		Cache = require('Common/Cache'),
 
+		AppStore = require('Stores/User/App'),
 		QuotaStore = require('Stores/User/Quota'),
 		SettingsStore = require('Stores/User/Settings'),
 		FolderStore = require('Stores/User/Folder'),
@@ -53,7 +55,9 @@
 		this.message = MessageStore.message;
 		this.messageList = MessageStore.messageList;
 		this.messageListDisableAutoSelect = MessageStore.messageListDisableAutoSelect;
+
 		this.folderList = FolderStore.folderList;
+
 		this.selectorMessageSelected = MessageStore.selectorMessageSelected;
 		this.selectorMessageFocused = MessageStore.selectorMessageFocused;
 		this.isMessageSelected = MessageStore.isMessageSelected;
@@ -187,6 +191,10 @@
 			return this.isSpamFolder() && !this.isSpamDisabled() && !this.isDraftFolder() && !this.isSentFolder();
 		}, this);
 
+		this.messageListFocused = ko.computed(function () {
+			return Enums.Focused.MessageList === AppStore.focusedState();
+		});
+
 		this.canBeMoved = this.hasCheckedOrSelectedLines;
 
 		this.clearCommand = Utils.createCommand(this, function () {
@@ -255,15 +263,16 @@
 			return this.useAutoSelect();
 		}, this));
 
-//		this.selector.on('onUpUpOrDownDown', _.bind(function (bV) {
-//		}, this));
+		this.selector.on('onUpUpOrDownDown', _.bind(function (bV) {
+			this.goToUpUpOrDownDown(bV);
+		}, this));
 
 		Events
-			.sub('mailbox.message-list.selector.go-down', function () {
-				this.selector.goDown(true);
+			.sub('mailbox.message-list.selector.go-down', function (bSelect) {
+				this.selector.goDown(bSelect);
 			}, this)
-			.sub('mailbox.message-list.selector.go-up', function () {
-				this.selector.goUp(true);
+			.sub('mailbox.message-list.selector.go-up', function (bSelect) {
+				this.selector.goUp(bSelect);
 			}, this)
 		;
 
@@ -282,6 +291,67 @@
 	 */
 	MessageListMailBoxUserView.prototype.emptySubjectValue = '';
 
+	MessageListMailBoxUserView.prototype.iGoToUpUpOrDownDownTimeout = 0;
+
+	MessageListMailBoxUserView.prototype.goToUpUpOrDownDown = function (bUp)
+	{
+		var self = this;
+
+		window.clearTimeout(this.iGoToUpUpOrDownDownTimeout);
+		this.iGoToUpUpOrDownDownTimeout = window.setTimeout(function () {
+
+			var
+				oPrev = null,
+				oNext = null,
+				oTemp = null,
+				oCurrent = null,
+				aPages = self.messageListPagenator()
+			;
+
+			_.find(aPages, function (oItem) {
+
+				if (oItem)
+				{
+					if (oCurrent)
+					{
+						oNext = oItem;
+					}
+
+					if (oItem.current)
+					{
+						oCurrent = oItem;
+						oPrev = oTemp;
+					}
+
+					if (oNext)
+					{
+						return true;
+					}
+
+					oTemp = oItem;
+				}
+
+				return false;
+			});
+
+			if (Enums.Layout.NoPreview === SettingsStore.layout() && !self.message())
+			{
+				self.selector.iFocusedNextHelper = bUp ? -1 : 1;
+			}
+			else
+			{
+				self.selector.iSelectNextHelper = bUp ? -1 : 1;
+			}
+
+			if (bUp ? oPrev : oNext)
+			{
+				self.selector.unselect();
+				self.gotoPage(bUp ? oPrev : oNext);
+			}
+
+		}, 350);
+	};
+
 	MessageListMailBoxUserView.prototype.useAutoSelect = function ()
 	{
 		if (this.messageListDisableAutoSelect())
@@ -534,6 +604,18 @@
 		}
 	};
 
+	MessageListMailBoxUserView.prototype.gotoPage = function (oPage)
+	{
+		if (oPage)
+		{
+			kn.setHash(Links.mailBox(
+				FolderStore.currentFolderFullNameHash(),
+				oPage.value,
+				MessageStore.messageListSearch()
+			));
+		}
+	};
+
 	MessageListMailBoxUserView.prototype.onBuild = function (oDom)
 	{
 		var self = this;
@@ -545,21 +627,13 @@
 
 		oDom
 			.on('click', '.messageList .b-message-list-wrapper', function () {
-				if (self.message.focused())
+				if (Enums.Focused.MessageView === AppStore.focusedState())
 				{
-					self.message.focused(false);
+					AppStore.focusedState(Enums.Focused.MessageList);
 				}
 			})
 			.on('click', '.e-pagenator .e-page', function () {
-				var oPage = ko.dataFor(this);
-				if (oPage)
-				{
-					kn.setHash(Links.mailBox(
-						FolderStore.currentFolderFullNameHash(),
-						oPage.value,
-						MessageStore.messageListSearch()
-					));
-				}
+				self.gotoPage(ko.dataFor(this));
 			})
 			.on('click', '.messageList .checkboxCkeckAll', function () {
 				self.checkAll(!self.checkAll());
@@ -691,11 +765,11 @@
 		key('tab, shift+tab, left, right', Enums.KeyState.MessageList, function (event, handler) {
 			if (event && handler && ('shift+tab' === handler.shortcut || 'left' === handler.shortcut))
 			{
-				FolderStore.folderList.focused(true);
+				AppStore.focusedState(Enums.Focused.FolderList);
 			}
 			else if (self.message())
 			{
-				self.message.focused(true);
+				AppStore.focusedState(Enums.Focused.MessageView);
 			}
 
 			return false;

dev/View/User/MailBox/MessageView.js

@@ -21,6 +21,7 @@
 
 		Cache = require('Common/Cache'),
 
+		AppStore = require('Stores/User/App'),
 		SettingsStore = require('Stores/User/Settings'),
 		AccountStore = require('Stores/User/Account'),
 		FolderStore = require('Stores/User/Folder'),
@@ -98,6 +99,12 @@
 		this.moreDropdownTrigger = ko.observable(false);
 		this.messageDomFocused = ko.observable(false).extend({'rateLimit': 0});
 
+		// TODO
+//		ko.computed(function () {
+//			window.console.log('focus:' + AppStore.focusedState() + ', dom:' +
+//				this.messageDomFocused() + ', key:' + Globals.keyScope() + ' ~ ' + Globals.keyScopeReal());
+//		}, this).extend({'throttle': 1});
+
 		this.messageVisibility = ko.computed(function () {
 			return !this.messageLoadingThrottle() && !!this.message();
 		}, this);
@@ -341,13 +348,6 @@
 				!this.messageListOfThreadsLoading();
 		});
 
-		this.threadsDropdownTrigger.subscribe(function (bValue) {
-			if (bValue && this.message())
-			{
-				this.threadListCommand();
-			}
-		}, this);
-
 // PGP
 		this.viewPgpPassword = ko.observable('');
 		this.viewPgpSignedVerifyStatus = ko.computed(function () {
@@ -480,12 +480,28 @@
 
 		this.messageLoadingThrottle.subscribe(Utils.windowResizeCallback);
 
+		this.messageFocused = ko.computed(function () {
+			return Enums.Focused.MessageView === AppStore.focusedState();
+		});
+
+		this.messageListAndMessageViewLoading = ko.computed(function () {
+			return MessageStore.messageListCompleteLoadingThrottle() || MessageStore.messageLoadingThrottle();
+		});
+
 		this.goUpCommand = Utils.createCommand(this, function () {
-			Events.pub('mailbox.message-list.selector.go-up');
+			Events.pub('mailbox.message-list.selector.go-up', [
+				Enums.Layout.NoPreview === this.layout() ? !!this.message() : true
+			]);
+		}, function () {
+			return !this.messageListAndMessageViewLoading();
 		});
 
 		this.goDownCommand = Utils.createCommand(this, function () {
-			Events.pub('mailbox.message-list.selector.go-down');
+			Events.pub('mailbox.message-list.selector.go-down', [
+				Enums.Layout.NoPreview === this.layout() ? !!this.message() : true
+			]);
+		}, function () {
+			return !this.messageListAndMessageViewLoading();
 		});
 
 		Events.sub('mailbox.message-view.toggle-full-screen', function () {
@@ -604,9 +620,9 @@
 		;
 
 		this.fullScreenMode.subscribe(function (bValue) {
-			if (bValue)
+			if (bValue && self.message())
 			{
-				self.message.focused(true);
+				AppStore.focusedState(Enums.Focused.MessageView);
 			}
 		}, this);
 
@@ -718,8 +734,23 @@
 					oEvent.stopPropagation();
 				}
 			})
-			.on('click', '.thread-list .more-threads', function () {
+			.on('click', '.thread-list .more-threads', function (e) {
+
+				var oLast = null;
+				if (!e || 0 === e.clientX) // probably enter
+				{
+					// It's a bad bad hack :(
+					oLast = $('.thread-list .e-item.thread-list-message.real-msg.more-that:first a.e-link', oDom);
+				}
+
 				self.viewThreadMessages.showMore(true);
+				self.threadsDropdownTrigger(true);
+
+				if (oLast)
+				{
+					oLast.focus();
+				}
+
 				return false;
 			})
 			.on('click', '.thread-list .thread-list-message', function () {
@@ -745,28 +776,16 @@
 			})
 		;
 
-		this.message.focused.subscribe(function (bValue) {
-			if (bValue && !Utils.inFocus()) {
-				this.messageDomFocused(true);
-			} else {
-				this.messageDomFocused(false);
+		AppStore.focusedState.subscribe(function (sValue) {
+			if (Enums.Focused.MessageView !== sValue)
+			{
 				this.scrollMessageToTop();
 				this.scrollMessageToLeft();
 			}
 		}, this);
 
-		this.messageDomFocused.subscribe(function (bValue) {
-			if (!bValue && Enums.KeyState.MessageView === Globals.keyScope())
-			{
-				this.message.focused(false);
-			}
-		}, this);
-
-		Globals.keyScope.subscribe(function (sValue) {
-			if (Enums.KeyState.MessageView === sValue && this.message.focused())
-			{
-				this.messageDomFocused(true);
-			}
+		Globals.keyScopeReal.subscribe(function (sValue) {
+			this.messageDomFocused(Enums.KeyState.MessageView === sValue && !Utils.inFocus());
 		}, this);
 
 		this.oMessageScrollerDom = oDom.find('.messageItem .content');
@@ -801,7 +820,7 @@
 
 				if (Enums.Layout.NoPreview !== this.layout())
 				{
-					this.message.focused(false);
+					AppStore.focusedState(Enums.Focused.MessageList);
 				}
 			}
 			else if (Enums.Layout.NoPreview === this.layout())
@@ -810,7 +829,7 @@
 			}
 			else
 			{
-				this.message.focused(false);
+				AppStore.focusedState(Enums.Focused.MessageList);
 			}
 
 			return false;
@@ -878,9 +897,10 @@
 		});
 
 		key('t', [Enums.KeyState.MessageList, Enums.KeyState.MessageView], function () {
-			if (MessageStore.message())
+			if (MessageStore.message() && self.viewThreadsControlVisibility())
 			{
 				self.threadsDropdownTrigger(true);
+				self.threadListCommand();
 				return false;
 			}
 		});
@@ -943,11 +963,11 @@
 						return true;
 					}
 
-					self.message.focused(false);
+					AppStore.focusedState(Enums.Focused.MessageList);
 				}
 				else
 				{
-					self.message.focused(false);
+					AppStore.focusedState(Enums.Focused.MessageList);
 				}
 			}
 			else if (self.message() && Enums.Layout.NoPreview === self.layout() && event && handler && 'left' === handler.shortcut)

gulpfile.js

@@ -99,6 +99,7 @@ cfg.paths.css = {
 			'vendors/jquery-letterfx/jquery-letterfx.min.css',
 			'vendors/simple-pace/styles.css',
 			'vendors/inputosaurus/inputosaurus.css',
+			'vendors/opentip/opentip.css',
 			'vendors/photoswipe/photoswipe.css',
 			'vendors/photoswipe/default-skin/default-skin.css',
 			'vendors/flags/flags-fixed.css',
@@ -169,6 +170,7 @@ cfg.paths.js = {
 			'vendors/jua/jua.min.js',
 			'vendors/buzz/buzz.min.js',
 			'vendors/Q/q.min.js',
+			'vendors/opentip/opentip-jquery.min.js',
 			'vendors/Autolinker/Autolinker.min.js',
 			'vendors/photoswipe/photoswipe.min.js',
 			'vendors/photoswipe/photoswipe-ui-default.min.js',

package.json

@@ -1,8 +1,8 @@
 {
 	"name": "RainLoop",
 	"title": "RainLoop Webmail",
-	"version": "1.8.2",
-	"release": "291",
+	"version": "1.8.3",
+	"release": "292",
 	"description": "Simple, modern & fast web-based email client",
 	"homepage": "http://rainloop.net",
 	"main": "gulpfile.js",

rainloop/v/0.0.0/app/libraries/RainLoop/Actions.php

@@ -5418,7 +5418,7 @@ class Actions
 	 */
 	public function DoMessageList()
 	{
-//		\sleep(2);
+//		\sleep(1);
 //		throw new \RainLoop\Exceptions\ClientException(\RainLoop\Notifications::CantGetMessageList);
 
 		$sFolder = '';

rainloop/v/0.0.0/app/libraries/RainLoop/Providers/Filters.php

@@ -60,6 +60,12 @@ class Filters extends \RainLoop\Providers\AbstractProvider
 		{
 			throw new \RainLoop\Exceptions\ClientException(\RainLoop\Notifications::ConnectionError, $oException);
 		}
+		catch (\MailSo\Sieve\Exceptions\NegativeResponseException $oException)
+		{
+			throw new \RainLoop\Exceptions\ClientException(
+				\RainLoop\Notifications::ClientViewError, $oException,
+					\implode("\r\n", $oException->GetResponses()));
+		}
 		catch (\Exception $oException)
 		{
 			throw new \RainLoop\Exceptions\ClientException(\RainLoop\Notifications::CantSaveFilters, $oException);

rainloop/v/0.0.0/app/templates/Views/Common/PopupsLanguages.html

@@ -8,7 +8,7 @@
 		</div>
 		<div class="modal-body" style="min-height: 150px;">
 			<div data-bind="foreach: languages">
-				<label class="lang-item" data-tooltip-i18n="off" data-tooltip-placement="left" data-bind="click: function () { $root.changeLanguage(key); }, css: {'selected': selected, 'user': user},
+				<label class="lang-item" data-tooltip-i18n="off" data-tooltip-join="right" data-bind="click: function () { $root.changeLanguage(key); }, css: {'selected': selected, 'user': user},
 					tooltip: function () { return $root.languageTooltipName(key); }">
 					<span class="flag-wrapper">
 						<span data-bind="css: 'flag flag-' + key" style=""></span>

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

@@ -1,4 +1,4 @@
-<li class="attachmentItem clearfix" data-tooltip-placement="bottom" data-bind="attr: { 'title': title }, css: { 'waiting': waiting, 'error': '' !== error() }">
+<li class="attachmentItem clearfix" 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>

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

@@ -1,11 +1,11 @@
-<div class="b-folders g-ui-user-select-none thm-folders" data-bind="css: {'focused': folderList.focused,
+<div class="b-folders g-ui-user-select-none thm-folders" data-bind="css: {'focused': folderListFocused,
 	'single-root-inbox': foldersListWithSingleInboxRootFolder}">
     <div class="b-toolbar btn-toolbar">
-        <a class="btn buttonCompose pull-left" data-tooltip-placement="bottom"
+        <a class="btn buttonCompose pull-left" data-tooltip-join="top"
 			data-bind="click: composeClick, tooltip: 'FOLDER_LIST/BUTTON_COMPOSE', css: {'btn-warning': composeInEdit}">
             <i class="icon-paper-plane"></i>
         </a>
-        <a class="btn buttonContacts pull-left" data-tooltip-placement="bottom" data-bind="visible: allowContacts, click: contactsClick, tooltip: 'FOLDER_LIST/BUTTON_CONTACTS'">
+        <a class="btn buttonContacts pull-left" data-tooltip-join="top" 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/User/MailMessageList.html

@@ -1,16 +1,16 @@
 <div id="rl-sub-left">
 	<div class="messageList g-ui-user-select-none"
-		data-bind="css: {'message-selected': isMessageSelected, 'message-focused': message.focused, 'loading': messageListCompleteLoadingThrottle, 'hideMessageListCheckbox': !useCheckboxesInList() }">
+		data-bind="css: {'message-selected': isMessageSelected, 'message-focused': !messageListFocused(), 'loading': messageListCompleteLoadingThrottle, 'hideMessageListCheckbox': !useCheckboxesInList() }">
 		<div class="toolbar">
 			<div class="btn-toolbar">
 				<div class="btn-group">
-					<a class="btn single btn-dark-disabled-border buttonReload" data-tooltip-placement="bottom" data-bind="command: reloadCommand, tooltip: 'MESSAGE_LIST/BUTTON_RELOAD'">
+					<a class="btn single btn-dark-disabled-border buttonReload" data-tooltip-join="top" data-bind="command: reloadCommand, tooltip: 'MESSAGE_LIST/BUTTON_RELOAD'">
 						<i class="icon-spinner" data-bind="css: {'animated': messageListCompleteLoadingThrottleForAnimation}"></i>
 					</a>
 				</div>
 				<div class="btn-group">&nbsp;</div>
 				<div class="btn-group dropdown colored-toggle" data-bind="registrateBootstrapDropdown: true, openDropdownTrigger: moveDropdownTrigger">
-					<a id="move-dropdown-id" href="#" tabindex="-1" class="btn single btn-dark-disabled-border dropdown-toggle buttonMove" data-toggle="dropdown" data-tooltip-placement="bottom" data-bind="command: moveCommand, tooltip: 'MESSAGE_LIST/BUTTON_MOVE_TO'">
+					<a id="move-dropdown-id" href="#" tabindex="-1" class="btn single btn-dark-disabled-border dropdown-toggle buttonMove" data-toggle="dropdown" data-tooltip-join="top" data-bind="command: moveCommand, tooltip: 'MESSAGE_LIST/BUTTON_MOVE_TO'">
 						<i class="icon-copy visible-on-ctrl-btn"></i>
 						<i class="icon-folder hidden-on-ctrl-btn"></i>
 						&nbsp;&nbsp;
@@ -29,21 +29,21 @@
 				</div>
 				<div class="btn-group">&nbsp;</div>
 				<div class="btn-group">
-					<a class="btn first btn-dark-disabled-border button-archive" data-tooltip-placement="bottom"
+					<a class="btn first btn-dark-disabled-border button-archive" data-tooltip-join="top"
 						data-bind="visible: isArchiveVisible, command: archiveCommand, tooltip: 'MESSAGE_LIST/BUTTON_ARCHIVE'">
 						<i class="icon-archive"></i>
 					</a>
-					<a class="btn btn-dark-disabled-border button-spam" data-tooltip-placement="bottom"
+					<a class="btn btn-dark-disabled-border button-spam" data-tooltip-join="top"
 						data-bind="visible: isSpamVisible, command: spamCommand, tooltip: 'MESSAGE_LIST/BUTTON_SPAM',
 							css: {'first': !isArchiveVisible()}">
 						<i class="icon-angry-smiley"></i>
 					</a>
-					<a class="btn btn-dark-disabled-border button-not-spam" data-tooltip-placement="bottom"
+					<a class="btn btn-dark-disabled-border button-not-spam" data-tooltip-join="top"
 						data-bind="visible: isUnSpamVisible, command: notSpamCommand, tooltip: 'MESSAGE_LIST/BUTTON_NOT_SPAM',
 							css: {'first': !isArchiveVisible()}">
 						<i class="icon-happy-smiley"></i>
 					</a>
-					<a class="btn last btn-dark-disabled-border button-delete" data-tooltip-placement="bottom"
+					<a class="btn last btn-dark-disabled-border button-delete" data-tooltip-join="top"
 						data-bind="command: deleteCommand, tooltip: 'MESSAGE_LIST/BUTTON_DELETE',
 							css: {'first': !isArchiveVisible() && !isSpamVisible() && !isUnSpamVisible()}">
 						<i class="icon-trash"></i>
@@ -52,7 +52,7 @@
 				</div>
 				<div class="btn-group">&nbsp;</div>
 				<div class="btn-group dropdown colored-toggle" data-bind="registrateBootstrapDropdown: true, openDropdownTrigger: moreDropdownTrigger">
-					<a id="more-list-dropdown-id" class="btn single btn-dark-disabled-border dropdown-toggle buttonMore" href="#" tabindex="-1" data-toggle="dropdown" data-tooltip-placement="bottom" data-bind="tooltip: 'MESSAGE_LIST/BUTTON_MORE'">
+					<a id="more-list-dropdown-id" class="btn single btn-dark-disabled-border dropdown-toggle buttonMore" href="#" tabindex="-1" data-toggle="dropdown" data-tooltip-join="top" data-bind="tooltip: 'MESSAGE_LIST/BUTTON_MORE'">
 						<i class="icon-list animate-this-icon-on-open"></i>
 					</a>
 					<ul class="dropdown-menu g-ui-menu" role="menu" aria-labelledby="more-list-dropdown-id">

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

@@ -1,32 +1,32 @@
 <!-- ko template: { name: 'PhotoSwipe' } --><!-- /ko -->
 <div id="rl-sub-right">
-	<div class="messageView" data-bind="css: {'message-selected': isMessageSelected, 'message-focused': message.focused}">
+	<div class="messageView" data-bind="css: {'message-selected': isMessageSelected, 'message-focused': messageFocused}">
 		<div class="toolbar top-toolbar g-ui-user-select-none" data-bind="visible: !usePreviewPane()">
 			<nobr>
 			<div class="messageButtons btn-toolbar">
-				<div class="btn-group" data-tooltip-placement="bottom" data-bind="tooltip: 'MESSAGE/BUTTON_CLOSE'">
+				<div class="btn-group" data-tooltip-join="top" data-bind="tooltip: 'MESSAGE/BUTTON_CLOSE'">
 					<a class="btn single btn-dark-disabled-border buttonClose" data-bind="command: closeMessage">
 						<i class="icon-remove"></i>
 					</a>
 				</div>
 				<div class="btn-group">&nbsp;</div>
-				<div class="btn-group" data-tooltip-placement="bottom" data-bind="visible: isDraftFolder(), tooltip: 'MESSAGE/BUTTON_EDIT'">
+				<div class="btn-group" data-tooltip-join="top" data-bind="visible: isDraftFolder(), tooltip: 'MESSAGE/BUTTON_EDIT'">
 					<a class="btn single btn-success buttonEdit" data-bind="command: messageEditCommand">
 						<i class="icon-pencil icon-white"></i>
 					</a>
 				</div>
 				<div class="btn-group" data-bind="visible: !usePreviewPane()">&nbsp;</div>
 				<div class="btn-group" data-bind="visible: !usePreviewPane()">
-					<a class="btn first btn-dark-disabled-border button-archive" data-tooltip-placement="bottom" data-bind="visible: !isDraftFolder() && !isArchiveFolder() && !isArchiveDisabled(), command: archiveCommand, tooltip: 'MESSAGE/BUTTON_ARCHIVE'">
+					<a class="btn first btn-dark-disabled-border button-archive" data-tooltip-join="top" 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-tooltip-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-join="top" data-bind="visible: !isDraftFolder() && !isSentFolder() && !isSpamFolder() && !isSpamDisabled(), command: spamCommand, tooltip: 'MESSAGE/BUTTON_SPAM'">
 						<i class="icon-angry-smiley"></i>
 					</a>
-					<a class="btn btn-dark-disabled-border button-not-spam" data-tooltip-placement="bottom" data-bind="visible: !isDraftFolder() && !isSentFolder() && isSpamFolder() && !isSpamDisabled(), command: notSpamCommand, tooltip: 'MESSAGE/BUTTON_NOT_SPAM'">
+					<a class="btn btn-dark-disabled-border button-not-spam" data-tooltip-join="top" data-bind="visible: !isDraftFolder() && !isSentFolder() && isSpamFolder() && !isSpamDisabled(), command: notSpamCommand, tooltip: 'MESSAGE/BUTTON_NOT_SPAM'">
 						<i class="icon-happy-smiley"></i>
 					</a>
-					<a class="btn last btn-dark-disabled-border button-delete" data-tooltip-placement="bottom" data-bind="command: deleteCommand, tooltip: 'MESSAGE/BUTTON_DELETE'">
+					<a class="btn last btn-dark-disabled-border button-delete" data-tooltip-join="top" data-bind="command: deleteCommand, tooltip: 'MESSAGE/BUTTON_DELETE'">
 						<i class="icon-trash"></i>
 					</a>
 				</div>
@@ -63,7 +63,7 @@
 							<div class="btn-group pull-right" data-bind="registrateBootstrapDropdown: true">
 								<a class="btn btn-thin last btn-dark-disabled-border dropdown-toggle buttonMore"
 									id="more-view-dropdown-id" href="#" tabindex="-1"
-									data-toggle="dropdown" data-tooltip-placement="bottom"
+									data-toggle="dropdown" data-tooltip-join="bottom"
 									style="margin-left: -1px;"
 									data-bind="command: messageVisibilityCommand, tooltip: 'MESSAGE/BUTTON_MORE'">
 										<span class="caret"></span>
@@ -168,15 +168,15 @@
 									</li>
 								</ul>
 							</div>
-							<a class="btn first btn-dark-disabled-border buttonReply pull-right" data-tooltip-placement="bottom"
+							<a class="btn first btn-dark-disabled-border buttonReply pull-right" data-tooltip-join="bottom"
 								data-bind="visible: 'reply' === lastReplyAction(), command: replyCommand, tooltip: 'MESSAGE/BUTTON_REPLY'">
 								<i class="icon-reply"></i>
 							</a>
-							<a class="btn first btn-dark-disabled-border buttonReplyAll pull-right" data-tooltip-placement="bottom"
+							<a class="btn first btn-dark-disabled-border buttonReplyAll pull-right" data-tooltip-join="bottom"
 								data-bind="visible: 'replyall' === lastReplyAction(), command: replyAllCommand, tooltip: 'MESSAGE/BUTTON_REPLY_ALL'">
 								<i class="icon-reply-all"></i>
 							</a>
-							<a class="btn first btn-dark-disabled-border buttonForward pull-right" data-tooltip-placement="bottom"
+							<a class="btn first btn-dark-disabled-border buttonForward pull-right" data-tooltip-join="bottom"
 								data-bind="visible: 'forward' === lastReplyAction(), command: forwardCommand, tooltip: 'MESSAGE/BUTTON_FORWARD'">
 								<i class="icon-forward"></i>
 							</a>
@@ -191,13 +191,13 @@
 						<div class="btn-group thread-controls pull-right g-ui-user-select-none" style="margin-right: 5px"
 							data-bind="visible: viewThreadsControlVisibility">
 
-							<a class="btn last btn-thin pull-right" data-tooltip-placement="bottom"
+							<a class="btn last btn-thin pull-right" data-tooltip-join="bottom"
 								data-bind="command: threadBackCommand, tooltip: 'MESSAGE/BUTTON_THREAD_PREV'">
 								<i class="icon-right-middle"></i>
 							</a>
 							<div class="btn-group pull-right" data-bind="registrateBootstrapDropdown: true, openDropdownTrigger: threadsDropdownTrigger">
 								<a class="btn btn-thin btn-dark-disabled-border dropdown-toggle" id="thread-list-view-dropdown-id" data-toggle="dropdown"
-									href="#" tabindex="-1" data-tooltip-placement="bottom"
+									href="#" tabindex="-1" data-tooltip-join="bottom"
 									style="margin-left: -1px; margin-right: -1px;"
 									data-bind="command: threadListCommand, tooltip: 'MESSAGE/BUTTON_THREAD_LIST'"
 								>
@@ -217,7 +217,7 @@
 										<i class="icon-spinner animated" />
 									</div>
 									<div data-bind="foreach: viewThreadMessages, visible: !messageListOfThreadsLoading()">
-										<li class="e-item thread-list-message" role="presentation" data-bind="css: {'selected': selected, 'more-that': $parent.viewThreadMessages.limit < $index() }">
+										<li class="e-item thread-list-message real-msg" role="presentation" data-bind="css: {'selected': selected, 'more-that': $parent.viewThreadMessages.limit < $index() }">
 											<a class="e-link menuitem" href="#" tabindex="-1" onclick="return false;">
 												<span class="thread-date pull-right" data-moment-format="SHORT" data-bind="moment: timestamp"></span>
 												<div style="text-overflow: ellipsis; overflow: hidden;">
@@ -232,11 +232,15 @@
 										</li>
 									</div>
 									<div data-bind="visible: !viewThreadMessages.showMore() && !messageListOfThreadsLoading()">
-										<a class="more-threads" href="#" tabindex="-1" data-i18n="MESSAGE/BUTTON_THREAD_MORE"></a>
+										<li class="e-item thread-list-message" role="presentation">
+											<a class="e-link menuitem more-threads" href="#" tabindex="-1"
+											   onclick="return false"
+											   data-i18n="MESSAGE/BUTTON_THREAD_MORE"></a>
+										</li>
 									</div>
 								</ul>
 							</div>
-							<a class="btn first btn-thin pull-right" data-tooltip-placement="bottom"
+							<a class="btn first btn-thin pull-right" data-tooltip-join="bottom"
 								data-bind="command: threadForwardCommand, tooltip: 'MESSAGE/BUTTON_THREAD_NEXT'">
 								<i class="icon-left-middle"></i>
 							</a>
@@ -325,7 +329,7 @@
 						</div>
 					</div>
 					<div class="messageItem fixIndex" data-bind="css: viewLineAsCss(), nano: true, attr: {'style': 'top:' + viewBodyTopValue() + 'px' }">
-						<div class="content g-scrollbox" tabindex="0" data-bind="hasfocus: messageDomFocused">
+						<div class="content g-scrollbox" tabindex="0" data-bind="hasfocus: messageDomFocused, css: { 'focused': messageDomFocused }">
 							<div class="content-wrapper">
 								<div>
 
@@ -378,7 +382,7 @@
 									</div>
 									<div class="attachmentsPlace" data-bind="visible: message() && message().hasVisibleAttachments()">
 										<ul class="attachmentList" data-bind="foreach: message() ? message().attachments() : []">
-											<li class="attachmentItem clearfix" draggable="true" data-tooltip-placement="bottom"
+											<li class="attachmentItem clearfix" draggable="true" data-tooltip-join="top"
 													data-bind="visible: !isLinked, event: { 'dragstart': eventDragStart }, attr: { 'title': fileName }">
 												<div class="attachmentIconParent pull-left" data-bind="css: { 'hasPreview': hasPreview() }">
 													<div class="hidePreview">

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

@@ -12,8 +12,8 @@
 				<span class="i18n" data-i18n="COMPOSE/BUTTON_SAVE"></span>
 			</a>
 
-			<a class="close-custom" data-tooltip-placement="bottom" data-bind="click: tryToClosePopup, tooltip: 'COMPOSE/BUTTON_CANCEL'">&times;</a>
-			<a class="minimize-custom" data-tooltip-placement="bottom" data-bind="click: skipCommand, tooltip: 'COMPOSE/BUTTON_MINIMIZE'"></a>
+			<a class="close-custom" data-tooltip-join="top" data-bind="click: tryToClosePopup, tooltip: 'COMPOSE/BUTTON_CANCEL'">&times;</a>
+			<a class="minimize-custom" data-tooltip-join="top" data-bind="click: skipCommand, tooltip: 'COMPOSE/BUTTON_MINIMIZE'"></a>
 
 			<a class="btn btn-danger button-delete button-delete-transitions" data-bind="command: deleteCommand">
 				<i class="icon-trash icon-white"></i>
@@ -86,7 +86,7 @@
 								</div>
 								<div class="btn-group pull-right">&nbsp;</div>
 								<div class="btn-group pull-right">
-									<a class="btn single" data-tooltip-placement="bottom" data-bind="visible: allowContacts, command: contactsCommand, tooltip: 'FOLDER_LIST/BUTTON_CONTACTS'">
+									<a class="btn single" data-tooltip-join="top" data-bind="visible: allowContacts, command: contactsCommand, tooltip: 'FOLDER_LIST/BUTTON_CONTACTS'">
 										<i class="icon-address-book"></i>
 									</a>
 								</div>
@@ -179,16 +179,16 @@
 									</div>
 									<div class="pull-right" style="margin-right: 4px;">
 										<div class="btn-group pull-right">
-											<a class="btn first" data-tooltip-placement="top"
+											<a class="btn first" data-tooltip-join="bottom"
 												style="padding-left: 10px; padding-right: 10px;"
 												data-bind="visible: addAttachmentEnabled(), initDom: composeUploaderButton, tooltip: 'COMPOSE/ATTACH_FILES'">
 												<sup style="font-weight: bold; font-size: 100%; top: -0.3em;">+</sup><i class="icon-attachment"></i>
 											</a>
-											<a class="btn" data-tooltip-placement="top"
+											<a class="btn" data-tooltip-join="bottom"
 												data-bind="visible: dropboxEnabled, command: dropboxCommand, tooltip: 'COMPOSE/DROPBOX', css: {'first': !addAttachmentEnabled(), 'last': !driveEnabled()}">
 												<i class="icon-dropbox"></i>
 											</a>
-											<a class="btn last" data-tooltip-placement="top"
+											<a class="btn last" data-tooltip-join="bottom"
 												data-bind="visible: driveEnabled() && driveVisible(), command: driveCommand, tooltip: 'COMPOSE/GOOGLE_DRIVE'">
 												<i class="icon-google-drive"></i>
 											</a>

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

@@ -211,7 +211,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-tooltip-placement="left" data-bind="tooltip: 'CONTACTS/LABEL_EMAIL'"></i>
+										<i class="icon-at iconsize24" data-tooltip-join="right" data-bind="tooltip: 'CONTACTS/LABEL_EMAIL'"></i>
 									</label>
 									<div class="controls fix-width">
 										<div data-bind="foreach: viewPropertiesEmails">
@@ -227,7 +227,7 @@
 								</div>
 								<div class="control-group" data-bind="visible: 0 < viewPropertiesPhones().length">
 									<label class="control-label remove-padding-top fix-width">
-										<i class="icon-telephone iconsize24" data-tooltip-placement="left" data-bind="tooltip: 'CONTACTS/LABEL_PHONE'"></i>
+										<i class="icon-telephone iconsize24" data-tooltip-join="right" data-bind="tooltip: 'CONTACTS/LABEL_PHONE'"></i>
 									</label>
 									<div class="controls fix-width">
 										<div data-bind="foreach: viewPropertiesPhones">
@@ -242,7 +242,7 @@
 								</div>
 								<div class="control-group" data-bind="visible: 0 < viewPropertiesWeb().length">
 									<label class="control-label remove-padding-top fix-width">
-										<i class="icon-earth iconsize24" data-tooltip-placement="left" data-bind="tooltip: 'CONTACTS/LABEL_WEB'"></i>
+										<i class="icon-earth iconsize24" data-tooltip-join="right" data-bind="tooltip: 'CONTACTS/LABEL_WEB'"></i>
 									</label>
 									<div class="controls fix-width">
 										<div data-bind="foreach: viewPropertiesWeb">
@@ -264,7 +264,7 @@
 							</div>
 
 <!--							<div class="e-read-only-sign">
-								<i class="icon-lock iconsize24" data-tooltip-placement="left" data-bind="tooltip: 'CONTACTS/LABEL_READ_ONLY'"></i>
+								<i class="icon-lock iconsize24" data-tooltip-join="right" data-bind="tooltip: 'CONTACTS/LABEL_READ_ONLY'"></i>
 							</div>-->
 
 

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

@@ -14,20 +14,18 @@
 				<span class="i18n" data-i18n="SETTINGS_FILTERS/BUTTON_ADD_FILTER"></span>
 			</a>
 			&nbsp;&nbsp;
-			<a class="btn" data-bind="visible: filterRaw.allow, click: function () { filterRaw.active(!filterRaw.active()) },
+			<a class="btn" data-tooltip-join="top" data-bind="visible: filterRaw.allow, click: function () { filterRaw.active(!filterRaw.active()) },
 				css: {'active': filterRaw.active }, tooltip: 'SETTINGS_FILTERS/BUTTON_RAW_SCRIPT'">
 				<i class="icon-file-code"></i>
 			</a>
 			&nbsp;&nbsp;
-			<a class="btn hide-on-disabled-command" data-bind="command: saveChanges">
+			<a class="btn hide-on-disabled-command" data-placement="bottom" data-join="top"
+				data-bind="command: saveChanges, tooltipForTest: saveErrorText, css: {'btn-danger': '' !== saveErrorText()}">
 				<i data-bind="css: {'icon-floppy': !filters.saving(), 'icon-spinner animated': filters.saving()}"></i>
 				&nbsp;&nbsp;
 				<span class="i18n" data-i18n="SETTINGS_FILTERS/BUTTON_SAVE"></span>
 			</a>
 		</div>
-		<div class="span3" style="margin-left: 0;">
-			<span data-bind="text: saveErrorText"style="color:red"></span>
-		</div>
 	</div>
 	<div class="row" data-bind="visible: haveChanges">
 		<div class="span8">

rainloop/v/0.0.0/langs/en-gb.ini

@@ -593,7 +593,7 @@ LABEL_REPLY_ALL = "Reply All"
 LABEL_FORWARD = "Forward"
 LABEL_FORWARD_MULTIPLY = "Forward as attachment(s)"
 LABEL_HELP = "Help"
-LABEL_CHECK_ALL = "Check All messages"
+LABEL_CHECK_ALL = "Select all messages"
 LABEL_ARCHIVE = "Archive"
 LABEL_DELETE = "Delete"
 LABEL_MOVE = "Move"

rainloop/v/0.0.0/langs/en.ini

@@ -593,7 +593,7 @@ LABEL_REPLY_ALL = "Reply All"
 LABEL_FORWARD = "Forward"
 LABEL_FORWARD_MULTIPLY = "Forward as attachment(s)"
 LABEL_HELP = "Help"
-LABEL_CHECK_ALL = "Check All messages"
+LABEL_CHECK_ALL = "Select all messages"
 LABEL_ARCHIVE = "Archive"
 LABEL_DELETE = "Delete"
 LABEL_MOVE = "Move"

rainloop/v/0.0.0/langs/hu.ini

@@ -593,7 +593,7 @@ LABEL_REPLY_ALL = "Reply All"
 LABEL_FORWARD = "Forward"
 LABEL_FORWARD_MULTIPLY = "Forward (multiply)"
 LABEL_HELP = "Súgó"
-LABEL_CHECK_ALL = "Check All messages"
+LABEL_CHECK_ALL = "Select all messages"
 LABEL_ARCHIVE = "Archiválás"
 LABEL_DELETE = "Tőrlés"
 LABEL_MOVE = "Move"

rainloop/v/0.0.0/langs/is.ini

@@ -593,7 +593,7 @@ LABEL_REPLY_ALL = "Reply All"
 LABEL_FORWARD = "Forward"
 LABEL_FORWARD_MULTIPLY = "Forward (multiply)"
 LABEL_HELP = "Help"
-LABEL_CHECK_ALL = "Check All messages"
+LABEL_CHECK_ALL = "Select all messages"
 LABEL_ARCHIVE = "Archive"
 LABEL_DELETE = "Delete"
 LABEL_MOVE = "Move"

rainloop/v/0.0.0/langs/ja-jp.ini

@@ -593,7 +593,7 @@ LABEL_REPLY_ALL = "Reply All"
 LABEL_FORWARD = "Forward"
 LABEL_FORWARD_MULTIPLY = "Forward (multiply)"
 LABEL_HELP = "Help"
-LABEL_CHECK_ALL = "Check All messages"
+LABEL_CHECK_ALL = "Select all messages"
 LABEL_ARCHIVE = "Archive"
 LABEL_DELETE = "Delete"
 LABEL_MOVE = "Move"

rainloop/v/0.0.0/langs/ko-kr.ini

@@ -590,7 +590,7 @@ LABEL_REPLY_ALL = "Reply All"
 LABEL_FORWARD = "Forward"
 LABEL_FORWARD_MULTIPLY = "Forward (multiply)"
 LABEL_HELP = "Help"
-LABEL_CHECK_ALL = "Check All messages"
+LABEL_CHECK_ALL = "Select all messages"
 LABEL_ARCHIVE = "Archive"
 LABEL_DELETE = "Delete"
 LABEL_MOVE = "Move"

rainloop/v/0.0.0/langs/lv.ini

@@ -593,7 +593,7 @@ LABEL_REPLY_ALL = "Reply All"
 LABEL_FORWARD = "Forward"
 LABEL_FORWARD_MULTIPLY = "Forward (multiply)"
 LABEL_HELP = "Help"
-LABEL_CHECK_ALL = "Check All messages"
+LABEL_CHECK_ALL = "Select all messages"
 LABEL_ARCHIVE = "Archive"
 LABEL_DELETE = "Delete"
 LABEL_MOVE = "Move"

rainloop/v/0.0.0/langs/ro.ini

@@ -592,7 +592,7 @@ LABEL_REPLY_ALL = "Reply All"
 LABEL_FORWARD = "Forward"
 LABEL_FORWARD_MULTIPLY = "Forward (multiply)"
 LABEL_HELP = "Help"
-LABEL_CHECK_ALL = "Check All messages"
+LABEL_CHECK_ALL = "Select all messages"
 LABEL_ARCHIVE = "Archive"
 LABEL_DELETE = "Delete"
 LABEL_MOVE = "Move"

rainloop/v/0.0.0/langs/sk.ini

@@ -593,7 +593,7 @@ LABEL_REPLY_ALL = "Reply All"
 LABEL_FORWARD = "Forward"
 LABEL_FORWARD_MULTIPLY = "Forward (multiply)"
 LABEL_HELP = "Help"
-LABEL_CHECK_ALL = "Check All messages"
+LABEL_CHECK_ALL = "Select all messages"
 LABEL_ARCHIVE = "Archive"
 LABEL_DELETE = "Delete"
 LABEL_MOVE = "Move"

vendors/opentip/opentip.css

@@ -0,0 +1,278 @@
+.opentip-container,
+.opentip-container * {
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.opentip-container {
+  position: absolute;
+  max-width: 300px;
+  z-index: 100;
+  -webkit-transition: -webkit-transform 1s ease-in-out;
+  -moz-transition: -moz-transform 1s ease-in-out;
+  -o-transition: -o-transform 1s ease-in-out;
+  -ms-transition: -ms-transform 1s ease-in-out;
+  transition: transform 1s ease-in-out;
+  pointer-events: none;
+  -webkit-transform: translateX(0) translateY(0);
+  -moz-transform: translateX(0) translateY(0);
+  -o-transform: translateX(0) translateY(0);
+  -ms-transform: translateX(0) translateY(0);
+  transform: translateX(0) translateY(0);
+}
+.opentip-container.ot-fixed.ot-hidden.stem-top.stem-center,
+.opentip-container.ot-fixed.ot-going-to-show.stem-top.stem-center,
+.opentip-container.ot-fixed.ot-hiding.stem-top.stem-center {
+  -webkit-transform: translateY(-5px);
+  -moz-transform: translateY(-5px);
+  -o-transform: translateY(-5px);
+  -ms-transform: translateY(-5px);
+  transform: translateY(-5px);
+}
+.opentip-container.ot-fixed.ot-hidden.stem-top.stem-right,
+.opentip-container.ot-fixed.ot-going-to-show.stem-top.stem-right,
+.opentip-container.ot-fixed.ot-hiding.stem-top.stem-right {
+  -webkit-transform: translateY(-5px) translateX(5px);
+  -moz-transform: translateY(-5px) translateX(5px);
+  -o-transform: translateY(-5px) translateX(5px);
+  -ms-transform: translateY(-5px) translateX(5px);
+  transform: translateY(-5px) translateX(5px);
+}
+.opentip-container.ot-fixed.ot-hidden.stem-middle.stem-right,
+.opentip-container.ot-fixed.ot-going-to-show.stem-middle.stem-right,
+.opentip-container.ot-fixed.ot-hiding.stem-middle.stem-right {
+  -webkit-transform: translateX(5px);
+  -moz-transform: translateX(5px);
+  -o-transform: translateX(5px);
+  -ms-transform: translateX(5px);
+  transform: translateX(5px);
+}
+.opentip-container.ot-fixed.ot-hidden.stem-bottom.stem-right,
+.opentip-container.ot-fixed.ot-going-to-show.stem-bottom.stem-right,
+.opentip-container.ot-fixed.ot-hiding.stem-bottom.stem-right {
+  -webkit-transform: translateY(5px) translateX(5px);
+  -moz-transform: translateY(5px) translateX(5px);
+  -o-transform: translateY(5px) translateX(5px);
+  -ms-transform: translateY(5px) translateX(5px);
+  transform: translateY(5px) translateX(5px);
+}
+.opentip-container.ot-fixed.ot-hidden.stem-bottom.stem-center,
+.opentip-container.ot-fixed.ot-going-to-show.stem-bottom.stem-center,
+.opentip-container.ot-fixed.ot-hiding.stem-bottom.stem-center {
+  -webkit-transform: translateY(5px);
+  -moz-transform: translateY(5px);
+  -o-transform: translateY(5px);
+  -ms-transform: translateY(5px);
+  transform: translateY(5px);
+}
+.opentip-container.ot-fixed.ot-hidden.stem-bottom.stem-left,
+.opentip-container.ot-fixed.ot-going-to-show.stem-bottom.stem-left,
+.opentip-container.ot-fixed.ot-hiding.stem-bottom.stem-left {
+  -webkit-transform: translateY(5px) translateX(-5px);
+  -moz-transform: translateY(5px) translateX(-5px);
+  -o-transform: translateY(5px) translateX(-5px);
+  -ms-transform: translateY(5px) translateX(-5px);
+  transform: translateY(5px) translateX(-5px);
+}
+.opentip-container.ot-fixed.ot-hidden.stem-middle.stem-left,
+.opentip-container.ot-fixed.ot-going-to-show.stem-middle.stem-left,
+.opentip-container.ot-fixed.ot-hiding.stem-middle.stem-left {
+  -webkit-transform: translateX(-5px);
+  -moz-transform: translateX(-5px);
+  -o-transform: translateX(-5px);
+  -ms-transform: translateX(-5px);
+  transform: translateX(-5px);
+}
+.opentip-container.ot-fixed.ot-hidden.stem-top.stem-left,
+.opentip-container.ot-fixed.ot-going-to-show.stem-top.stem-left,
+.opentip-container.ot-fixed.ot-hiding.stem-top.stem-left {
+  -webkit-transform: translateY(-5px) translateX(-5px);
+  -moz-transform: translateY(-5px) translateX(-5px);
+  -o-transform: translateY(-5px) translateX(-5px);
+  -ms-transform: translateY(-5px) translateX(-5px);
+  transform: translateY(-5px) translateX(-5px);
+}
+.opentip-container.ot-fixed .opentip {
+  pointer-events: auto;
+}
+.opentip-container.ot-hidden {
+  display: none;
+}
+.opentip-container .opentip {
+  position: relative;
+  font-size: 13px;
+  line-height: 120%;
+  padding: 9px 14px;
+  color: #4f4b47;
+  text-shadow: -1px -1px 0px rgba(255,255,255,0.2);
+}
+.opentip-container .opentip .header {
+  margin: 0;
+  padding: 0;
+}
+.opentip-container .opentip .ot-close {
+  pointer-events: auto;
+  display: block;
+  position: absolute;
+  top: -12px;
+  left: 60px;
+  color: rgba(0,0,0,0.5);
+  background: rgba(0,0,0,0);
+  text-decoration: none;
+}
+.opentip-container .opentip .ot-close span {
+  display: none;
+}
+.opentip-container .opentip .ot-loading-indicator {
+  display: none;
+}
+.opentip-container.ot-loading .ot-loading-indicator {
+  width: 30px;
+  height: 30px;
+  font-size: 30px;
+  line-height: 30px;
+  font-weight: bold;
+  display: block;
+}
+.opentip-container.ot-loading .ot-loading-indicator span {
+  display: block;
+  -webkit-animation: otloading 2s linear infinite;
+  -moz-animation: otloading 2s linear infinite;
+  -o-animation: otloading 2s linear infinite;
+  -ms-animation: otloading 2s linear infinite;
+  animation: otloading 2s linear infinite;
+  text-align: center;
+}
+.opentip-container.style-dark .opentip,
+.opentip-container.style-alert .opentip {
+  color: #f8f8f8;
+  text-shadow: 1px 1px 0px rgba(0,0,0,0.2);
+}
+.opentip-container.style-glass .opentip {
+  padding: 15px 25px;
+  color: #317cc5;
+  text-shadow: 1px 1px 8px rgba(0,94,153,0.3);
+}
+.opentip-container.ot-hide-effect-fade {
+  -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 1s ease-in-out;
+  -moz-transition: -moz-transform 0.5s ease-in-out, opacity 1s ease-in-out;
+  -o-transition: -o-transform 0.5s ease-in-out, opacity 1s ease-in-out;
+  -ms-transition: -ms-transform 0.5s ease-in-out, opacity 1s ease-in-out;
+  transition: transform 0.5s ease-in-out, opacity 1s ease-in-out;
+  opacity: 1;
+  -ms-filter: none;
+  filter: none;
+}
+.opentip-container.ot-hide-effect-fade.ot-hiding {
+  opacity: 0;
+  filter: alpha(opacity=0);
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+}
+.opentip-container.ot-show-effect-appear.ot-going-to-show,
+.opentip-container.ot-show-effect-appear.ot-showing {
+  -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 1s ease-in-out;
+  -moz-transition: -moz-transform 0.5s ease-in-out, opacity 1s ease-in-out;
+  -o-transition: -o-transform 0.5s ease-in-out, opacity 1s ease-in-out;
+  -ms-transition: -ms-transform 0.5s ease-in-out, opacity 1s ease-in-out;
+  transition: transform 0.5s ease-in-out, opacity 1s ease-in-out;
+}
+.opentip-container.ot-show-effect-appear.ot-going-to-show {
+  opacity: 0;
+  filter: alpha(opacity=0);
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+}
+.opentip-container.ot-show-effect-appear.ot-showing {
+  opacity: 1;
+  -ms-filter: none;
+  filter: none;
+}
+.opentip-container.ot-show-effect-appear.ot-visible {
+  opacity: 1;
+  -ms-filter: none;
+  filter: none;
+}
+@-moz-keyframes otloading {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@-webkit-keyframes otloading {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@-o-keyframes otloading {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@-ms-keyframes otloading {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+@keyframes otloading {
+  0% {
+    -webkit-transform: rotate(0deg);
+    -moz-transform: rotate(0deg);
+    -o-transform: rotate(0deg);
+    -ms-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate(360deg);
+    -moz-transform: rotate(360deg);
+    -o-transform: rotate(360deg);
+    -ms-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}

webpack.config.js

@@ -20,6 +20,7 @@ module.exports = {
 		modulesDirectories: [__dirname + '/dev/'],
 		extensions: ['', '.js'],
 		alias: {
+			"Opentip": __dirname  + "/dev/External/Opentip.js",
 			"ko": __dirname  + "/dev/External/ko.js"
 		}
 	},