Cleanup CSS and drop bMobileDevice detection.

Touch devices can be any size and can use (bluetooth/usb-c mouse/keyboard) these days.
It's all about pixels and currently if the mode is mobile/no-mobile (this can be improved later).

dev/App/Abstract.js

@@ -3,8 +3,7 @@ import ko from 'ko';
 import {
 	$htmlCL,
 	leftPanelDisabled,
-	leftPanelType,
-	bMobileDevice
+	leftPanelType
 } from 'Common/Globals';
 
 import { KeyState } from 'Common/Enums';
@@ -58,7 +57,7 @@ class AbstractApp {
 	 * @returns {boolean}
 	 */
 	download(link) {
-		if (bMobileDevice) {
+		if (rl.settings.app('mobile')) {
 			open(link, '_self');
 			focus();
 		} else {
@@ -99,7 +98,7 @@ class AbstractApp {
 		ko.components.register('Select', require('Component/Select').default);
 		ko.components.register('TextArea', require('Component/TextArea').default);
 
-		if (Settings.app('materialDesign') && !bMobileDevice) {
+		if (Settings.app('materialDesign') && !rl.settings.app('mobile')) {
 			ko.components.register('Checkbox', require('Component/MaterialDesign/Checkbox').default);
 			ko.components.register('CheckboxSimple', require('Component/Checkbox').default);
 		} else {

dev/App/User.js

@@ -17,7 +17,7 @@ import {
 	ClientSideKeyName
 } from 'Common/Enums';
 
-import { $htmlCL, leftPanelDisabled, bMobileDevice } from 'Common/Globals';
+import { $htmlCL, leftPanelDisabled } from 'Common/Globals';
 
 import { UNUSED_OPTION_VALUE } from 'Common/Consts';
 
@@ -1048,9 +1048,8 @@ class AppUser extends AbstractApp {
 							}, 500);
 						}
 
-						if (!bMobileDevice) {
-							const o = this;
-							setTimeout(() => o.initVerticalLayoutResizer(ClientSideKeyName.FolderListSize), 1);
+						if (!Settings.app('mobile')) {
+							setTimeout(() => this.initVerticalLayoutResizer(ClientSideKeyName.FolderListSize), 1);
 						}
 					} else {
 						this.logout();

dev/Common/Globals.js

@@ -9,13 +9,6 @@ export const $htmlCL = $html.classList;
  */
 export const dropdownVisibility = ko.observable(false).extend({ rateLimit: 0 });
 
-/**
- * @type {boolean}
- */
-export const bMobileDevice = (/android|iphone|ipod|ipad|blackberry|mobile/i).test(
-	(navigator.userAgent && navigator.userAgent.toLowerCase()) || ''
-);
-
 export const VIEW_MODELS = {
 	settings: [],
 	'settings-removed': [],

dev/External/SquireUI.js

@@ -147,6 +147,12 @@ class SquireUI
 {
 	constructor(container) {
 		const
+			doClr = fn => () => {
+				clr.value = '';
+				clr.onchange = () => squire[fn](clr.value);
+				clr.click();
+			},
+
 			actions = {
 				mode: {
 					plain: {
@@ -185,18 +191,12 @@ class SquireUI
 				colors: {
 					textColor: {
 						html: 'A<sub>▾</sub>',
-						cmd: () => {
-							clr.onchange = () => squire.setTextColour(clr.value);
-							clr.click();
-						},
+						cmd: doClr('setTextColour'),
 						hint: 'Text color'
 					},
 					backgroundColor: {
 						html: '🎨', /* ▧ */
-						cmd: () => {
-							clr.onchange = () => squire.setHighlightColour(clr.value);
-							clr.click();
-						},
+						cmd: doClr('setHighlightColour'),
 						hint: 'Background color'
 					},
 				},

dev/External/ko.js

@@ -3,39 +3,32 @@ const
 	ko = window.ko,
 	Translator = () => require('Common/Translator'),
 	Globals = () => require('Common/Globals'),
-	isFunction = v => typeof v === 'function';
+	isFunction = v => typeof v === 'function',
+	koValue = value => !ko.isObservable(value) && isFunction(value) ? value() : ko.unwrap(value);
 
 ko.bindingHandlers.tooltip = {
 	init: (element, fValueAccessor) => {
-		const fValue = fValueAccessor(),
-			Global = Globals();
+		const Global = Globals();
+		const sValue = koValue(fValueAccessor());
 
-		if (!Global.bMobileDevice || 'on' === element.dataset.tooltipMobile) {
-			const sValue = !ko.isObservable(fValue) && isFunction(fValue) ? fValue() : ko.unwrap(fValue);
-
-			if ('off' === element.dataset.tooltipI18n) {
-				element.title = sValue;
-			} else {
-				element.title = Translator().i18n(sValue);
-				Translator().trigger.subscribe(() =>
-					element.title = Translator().i18n(sValue)
-				);
-				Global.dropdownVisibility.subscribe(() =>
-					element.title = Translator().i18n(sValue)
-				);
-			}
+		if ('off' === element.dataset.tooltipI18n) {
+			element.title = sValue;
+		} else {
+			element.title = Translator().i18n(sValue);
+			Translator().trigger.subscribe(() =>
+				element.title = Translator().i18n(sValue)
+			);
+			Global.dropdownVisibility.subscribe(() =>
+				element.title = Translator().i18n(sValue)
+			);
 		}
 	},
 	update: (element, fValueAccessor) => {
-		const fValue = fValueAccessor();
-
-		if (!Globals().bMobileDevice || 'on' === element.dataset.tooltipMobile) {
-			const sValue = !ko.isObservable(fValue) && isFunction(fValue) ? fValue() : ko.unwrap(fValue);
-			if (sValue) {
-				element.title = 'off' === element.dataset.tooltipI18n ? sValue : Translator().i18n(sValue);
-			} else {
-				element.title = '';
-			}
+		const sValue = koValue(fValueAccessor());
+		if (sValue) {
+			element.title = 'off' === element.dataset.tooltipI18n ? sValue : Translator().i18n(sValue);
+		} else {
+			element.title = '';
 		}
 	}
 };
@@ -46,9 +39,7 @@ ko.bindingHandlers.tooltipErrorTip = {
 		ko.utils.domNodeDisposal.addDisposeCallback(element, () => element.removeAttribute('data-rainloopErrorTip'));
 	},
 	update: (element, fValueAccessor) => {
-		const fValue = fValueAccessor(),
-			value = !ko.isObservable(fValue) && isFunction(fValue) ? fValue() : ko.unwrap(fValue);
-
+		const value = koValue(fValueAccessor());
 		if (value) {
 			setTimeout(() => element.setAttribute('data-rainloopErrorTip', value), 100);
 		} else {
@@ -110,9 +101,8 @@ ko.bindingHandlers.onSpace = {
 
 ko.bindingHandlers.modal = {
 	init: (element, fValueAccessor) => {
-		element.classList.toggle('fade', !Globals().bMobileDevice);
-
-		const close = element.querySelector('.close'), click = () => fValueAccessor()(false);
+		const close = element.querySelector('.close'),
+			click = () => fValueAccessor()(false);
 		close && close.addEventListener('click.koModal', click);
 
 		ko.utils.domNodeDisposal.addDisposeCallback(element, () =>

dev/Knoin/Knoin.js

@@ -2,8 +2,6 @@ import ko from 'ko';
 
 import { $htmlCL, VIEW_MODELS } from 'Common/Globals';
 
-//import { bMobileDevice } from 'Common/Globals';
-
 let currentScreen = null,
 	defaultScreenName = '',
 	popupVisibilityNames = [];
@@ -11,7 +9,7 @@ let currentScreen = null,
 const SCREENS = {},
 	isNonEmptyArray = Array.isNotEmpty,
 	autofocus = dom => {
-//		if (!bMobileDevice) {
+//		if (!rl.settings.app('mobile')) {
 		const af = dom.querySelector('[autofocus]');
 		af && af.focus();
 	};

dev/Model/Attachment.js

@@ -1,7 +1,6 @@
 import ko from 'ko';
 
 import { FileType } from 'Common/Enums';
-import { bMobileDevice } from 'Common/Globals';
 import { pInt, getFileExtension, friendlySize } from 'Common/Utils';
 import {
 	attachmentDownload,
@@ -15,7 +14,7 @@ import { AbstractModel } from 'Knoin/AbstractModel';
 
 import Audio from 'Common/Audio';
 
-const bAllowPdfPreview = !bMobileDevice && undefined !== navigator.mimeTypes['application/pdf'];
+const bAllowPdfPreview = undefined !== navigator.mimeTypes['application/pdf'];
 
 /**
  * @param {string} sExt

dev/Screen/User/MailBox.js

@@ -1,5 +1,5 @@
 import { Focused, Capa, ClientSideKeyName } from 'Common/Enums';
-import { leftPanelDisabled, leftPanelType, moveAction, bMobileDevice } from 'Common/Globals';
+import { leftPanelDisabled, leftPanelType, moveAction } from 'Common/Globals';
 import { pString, pInt } from 'Common/Utils';
 import { getFolderFromCacheList, getFolderFullNameRaw, getFolderInboxName } from 'Common/Cache';
 import { i18n } from 'Common/Translator';
@@ -120,7 +120,7 @@ class MailBoxUserScreen extends AbstractScreen {
 	 * @returns {void}
 	 */
 	onBuild() {
-		if (!bMobileDevice && !Settings.app('mobile')) {
+		if (!Settings.app('mobile')) {
 			setTimeout(() =>
 				rl.app.initHorizontalLayoutResizer(ClientSideKeyName.MessageListSize)
 			, 1);

dev/Styles/Identity.less

@@ -22,6 +22,8 @@
 		}
 
 		.e-signature-place {
+			border: 1px solid #ccc;
+			border-radius: 3px;
 			height: 200px;
 		}
 

dev/Styles/Layout.less

@@ -280,6 +280,8 @@ html:not(.rl-left-panel-disabled) #rl-left.resizable > .resizer,
 	}
 }
 
+.visible-on-ctrl,
+.visible-on-ctrl-btn,
 .show-on-panel-disabled {
 	display: none;
 }
@@ -388,10 +390,6 @@ html.rl-bottom-preview-pane {
 	}
 }
 
-.visible-on-ctrl, .visible-on-ctrl-btn {
-	display: none;
-}
-
 .hidden-on-ctrl-btn {
 	display: inline-block;
 }

dev/Styles/Main.less

@@ -58,8 +58,3 @@ html.mobile *, html.rl-mobile * {
 input[type="search"]{
 	box-sizing: content-box;
 }
-
-input::-ms-clear,
-input::-ms-reveal {
-	display: none;
-}

dev/Styles/SettingsOpenPGP.less

@@ -21,14 +21,8 @@
 		}
 
 		.open-pgp-key-img {
-
 			margin-right: 10px;
 			vertical-align: top;
-
-			.svg-icon {
-				width: 12px;
-				height: 12px;
-			}
 		}
 
 		.open-pgp-key-id, .open-pgp-key-user {

dev/Styles/SquireUI.less

@@ -10,8 +10,7 @@
 }
 
 .squire-toolgroup > button,
-.squire-toolgroup > select,
-.squire-toolgroup > input[type="color"] {
+.squire-toolgroup > select {
 	background: transparent;
 	border: 0;
 	box-shadow: none;
@@ -104,8 +103,7 @@ Secondly, we can't rely on MUA's what to do with :empty
 	right: 0;
 }
 .rl-mobile .squire-toolgroup > button,
-.rl-mobile .squire-toolgroup > select,
-.rl-mobile .squire-toolgroup > input[type="color"] {
+.rl-mobile .squire-toolgroup > select {
 	height: 2.5em;
 	line-height: 2.8;
 	width: 3em;

dev/Styles/Ui.less

@@ -183,6 +183,7 @@
 	}
 }
 
+html.mobile .hide-mobile,
 .command.command-disabled.hide-on-disabled-command {
 	display:none;
 }

dev/Styles/_BootstrapFix.less

@@ -67,10 +67,6 @@ select {
 	width: 223px;
 }
 
-.btn .svg-icon {
-	vertical-align: middle;
-}
-
 .btn-small.btn-small-small {
 	padding: 3px 9px;
 	font-size: 11px;

dev/Styles/_CkeFix.less

@@ -16,7 +16,7 @@
 }
 
 .cke_top {
-	padding: 6px 4px 1px 6px;
+	padding: 2px;
 	box-shadow: none !important;
 	border-bottom: 1px solid #b6b6b6 !important;
 	background: #F0F0F0 !important;

dev/Styles/_End.less

@@ -73,25 +73,6 @@
 	z-index: 2002;
 }
 
-svg-icon {
-	display: none;
-}
-
-.svg-icon {
-	border: 0;
-	outline: 0;
-
-	height: 16px;
-	width: 16px;
-	display: inline-block;
-	fill: #333;
-
-	&.svg-icon-archive {
-		height: 14px;
-		width: 14px;
-	}
-}
-
 .lg-backdrop.in {
 	opacity: 0.8;
 }
@@ -116,3 +97,23 @@ html.glass {
 		transition: color 9999s ease-out, background-color 9999s ease-out;
 	}
 }
+
+/*
+@media (pointer: coarse), (hover: none) {
+	[title] {
+		position: relative;
+		display: inline-flex;
+		justify-content: center;
+	}
+	[title]:focus::after {
+		content: attr(title);
+		position: absolute;
+		top: 90%;
+		color: #000;
+		background-color: #fff;
+		border: 1px solid;
+		width: fit-content;
+		padding: 3px;
+	}
+}
+*/

dev/Styles/_InputosaurusFix.less

@@ -1,77 +1,10 @@
 
 .inputosaurus-container {
 
-	width: 99%;
-	line-height: 20px;
-	padding: 2px;
-	border: 1px solid #cccccc;
-	border-radius: 3px;
-
-	box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
-	transition: border linear .2s, box-shadow linear .2s;
-
 	&.inputosaurus-focused {
 		background-color: #fff;
 		border: @rlInputBorderSize solid darken(@inputBorder, 20%);
 		box-shadow: none;
 	}
 
-	li {
-		max-width: 500px;
-		background-color: #eee;
-		border: 1px solid #aaa;
-		line-height: 18px;
-		padding: 2px 15px 2px 5px;
-		margin: 2px 2px 2px;
-		color: #555;
-		z-index: 100;
-
-		position: relative;
-
-		a {
-			color: #999;
-			font-size: 12px;
-			position: absolute;
-			top: 1px;
-			right: 2px;
-
-			&:hover {
-				color: #666;
-			}
-		}
-
-		span {
-			padding-right: 3px;
-		}
-
-		&.inputosaurus-required {
-			padding-right: 5px;
-		}
-
-		&.inputosaurus-selected {
-			background-color: #ddd;
-		}
-
-		&.pgp {
-			background-color: #E5F3E2;
-		}
-	}
-
-	.inputosaurus-input {
-
-		margin: 1px 10px 1px 0;
-		height: 22px;
-
-		input {
-			border: 0;
-			height : 21px;
-			padding-left: 0;
-		}
-	}
-}
-
-.inputosaurus-fake-span {
-	position: absolute;
-	top: 0;
-	left: -5000px;
 }

dev/View/Popup/Compose.js

@@ -26,7 +26,6 @@ import { format as momentorFormat } from 'Common/Momentor';
 import { getMessageFlagsFromCache, setMessageFlagsToCache, setFolderHash } from 'Common/Cache';
 
 import { HtmlEditor } from 'Common/HtmlEditor';
-import { bMobileDevice } from 'Common/Globals';
 
 import AppStore from 'Stores/User/App';
 import SettingsStore from 'Stores/User/Settings';
@@ -1080,17 +1079,16 @@ class ComposePopupView extends AbstractViewNext {
 	}
 
 	setFocusInPopup() {
-		if (!bMobileDevice) {
-			setTimeout(() => {
-				if (!this.to()) {
-					this.to.focused(true);
-				} else if (this.oEditor) {
-					if (!this.to.focused()) {
-						this.oEditor.focus();
-					}
+//		rl.settings.app('mobile') ||
+		setTimeout(() => {
+			if (!this.to()) {
+				this.to.focused(true);
+			} else if (this.oEditor) {
+				if (!this.to.focused()) {
+					this.oEditor.focus();
 				}
-			}, 100);
-		}
+			}
+		}, 100);
 	}
 
 	tryToClosePopup() {

dev/View/Popup/Contacts.js

@@ -18,7 +18,6 @@ import {
 } from 'Common/Utils';
 
 import { CONTACTS_PER_PAGE } from 'Common/Consts';
-import { bMobileDevice } from 'Common/Globals';
 
 import { Selector } from 'Common/Selector';
 import { exportContactsVcf, exportContactsCsv, uploadContacts } from 'Common/Links';
@@ -58,7 +57,6 @@ class ContactsPopupView extends AbstractViewNext {
 
 		this.allowContactsSync = ContactStore.allowContactsSync;
 		this.enableContactsSync = ContactStore.enableContactsSync;
-		this.allowExport = !bMobileDevice;
 
 		this.search = ko.observable('');
 		this.contactsCount = ko.observable(0);

dev/View/Popup/Filter.js

@@ -1,7 +1,6 @@
 import ko from 'ko';
 
 import { FiltersAction, FilterConditionField, FilterConditionType } from 'Common/Enums';
-import { bMobileDevice } from 'Common/Globals';
 import { defautOptionsAfterRender } from 'Common/Utils';
 import { i18n, initOnStartOrLangChange } from 'Common/Translator';
 
@@ -163,7 +162,7 @@ class FilterPopupView extends AbstractViewNext {
 	}
 
 	onShowWithDelay() {
-		if (this.isNew() && this.filter() && !bMobileDevice) {
+		if (this.isNew() && this.filter()/* && !rl.settings.app('mobile')*/) {
 			this.filter().name.focused(true);
 		}
 	}

dev/View/Popup/FolderCreate.js

@@ -2,7 +2,6 @@ import ko from 'ko';
 
 import { Notification } from 'Common/Enums';
 import { UNUSED_OPTION_VALUE } from 'Common/Consts';
-import { bMobileDevice } from 'Common/Globals';
 import { defautOptionsAfterRender, folderListOptionsBuilder } from 'Common/Utils';
 
 import FolderStore from 'Stores/User/Folder';
@@ -74,9 +73,8 @@ class FolderCreateView extends AbstractViewNext {
 	}
 
 	onShowWithDelay() {
-		if (!bMobileDevice) {
-			this.folderName.focused(true);
-		}
+//		rl.settings.app('mobile') ||
+		this.folderName.focused(true);
 	}
 }
 

dev/View/Popup/Identity.js

@@ -1,7 +1,6 @@
 import ko from 'ko';
 
 import { StorageResultType, Notification } from 'Common/Enums';
-import { bMobileDevice } from 'Common/Globals';
 import { fakeMd5 } from 'Common/Utils';
 import { getNotification } from 'Common/Translator';
 
@@ -164,7 +163,7 @@ class IdentityPopupView extends AbstractViewNext {
 	}
 
 	onShowWithDelay() {
-		if (!this.owner() && !bMobileDevice) {
+		if (!this.owner()/* && !rl.settings.app('mobile')*/) {
 			this.email.focused(true);
 		}
 	}

dev/View/Popup/TwoFactorTest.js

@@ -1,7 +1,6 @@
 import ko from 'ko';
 
 import { StorageResultType } from 'Common/Enums';
-import { bMobileDevice } from 'Common/Globals';
 
 import Remote from 'Remote/User/Fetch';
 
@@ -54,9 +53,8 @@ class TwoFactorTestPopupView extends AbstractViewNext {
 	}
 
 	onShowWithDelay() {
-		if (!bMobileDevice) {
-			this.code.focused(true);
-		}
+//		rl.settings.app('mobile') ||
+		this.code.focused(true);
 	}
 }
 

dev/View/User/MailBox/MessageList.js

@@ -13,7 +13,7 @@ import {
 
 import { UNUSED_OPTION_VALUE } from 'Common/Consts';
 
-import { bMobileDevice, leftPanelDisabled, moveAction } from 'Common/Globals';
+import { leftPanelDisabled, moveAction } from 'Common/Globals';
 
 import { computedPagenatorHelper, friendlySize } from 'Common/Utils';
 
@@ -736,7 +736,7 @@ class MessageListMailBoxUserView extends AbstractViewNext {
 		this.initUploaderForAppend();
 		this.initShortcuts();
 
-		if (!bMobileDevice && ifvisible && Settings.capa(Capa.Prefetch)) {
+		if (ifvisible && !rl.settings.app('mobile') && Settings.capa(Capa.Prefetch)) {
 			ifvisible.idle(this.prefetchNextTick.bind(this));
 		}
 	}