Improved AbstractScreen properties

Improved settings screens
Views:
* sDefaultScope & sCurrentScope to sub-class keyScope
* drop viewModelVisible
* rename viewModelTemplateID to templateID
* rename viewModelPosition to viewType

dev/Knoin/AbstractScreen.js

@@ -2,23 +2,9 @@ import { isArray, arrayLength } from 'Common/Utils';
 
 export class AbstractScreen {
 	constructor(screenName, viewModels = []) {
-		this.oCross = null;
+		this.__cross = null;
-		this.sScreenName = screenName;
+		this.screenName = screenName;
-		this.aViewModels = isArray(viewModels) ? viewModels : [];
+		this.viewModels = isArray(viewModels) ? viewModels : [];
-	}
-
-	/**
-	 * @returns {Array}
-	 */
-	get viewModels() {
-		return this.aViewModels;
-	}
-
-	/**
-	 * @returns {string}
-	 */
-	screenName() {
-		return this.sScreenName;
 	}
 
 	/**
@@ -28,12 +14,13 @@ export class AbstractScreen {
 		return null;
 	}
 
-	/**
+/*
-	 * @returns {?Object}
+	onBuild(viewModelDom) {}
-	 */
+	onShow() {}
-	get __cross() {
+	onHide() {}
-		return this.oCross;
+	__started
-	}
+	__builded
+*/
 
 	/**
 	 * @returns {void}
@@ -48,7 +35,7 @@ export class AbstractScreen {
 
 				routes.forEach(item => item && route && (route.addRoute(item[0], fMatcher).rules = item[1]));
 
-				this.oCross = route;
+				this.__cross = route;
 			}
 		}
 	}

dev/Knoin/AbstractViews.js

@@ -8,32 +8,32 @@ import { ViewType } from 'Knoin/Knoin';
 class AbstractView {
 	constructor(name, templateID, type)
 	{
-		this.viewModelTemplateID = templateID;
+//		Object.defineProperty(this, 'templateId', { value: templateID });
-		this.viewModelPosition = type;
+		this.templateId = templateID;
+		this.viewType = type;
+		this.viewModelDom = null;
 
-		this.sDefaultScope = Scope.None;
-		this.sCurrentScope = Scope.None;
-
-		this.viewModelVisible = false;
 		this.modalVisibility = ko.observable(false).extend({ rateLimit: 0 });
 
-		this.viewModelDom = null;
+		this.keyScope = {
+			scope: Scope.None,
+			previous: Scope.None,
+			set: function() {
+				this.previous = keyScope();
+				keyScope(this.scope);
+			},
+			unset: function() {
+				keyScope(this.previous);
+			}
+		};
 	}
 
-	/**
+/*
-	 * @returns {void}
+	onBuild() {}
-	 */
+	onBeforeShow() {}
-	storeAndSetScope() {
+	onShow() {}
-		this.sCurrentScope = keyScope();
+	onHide() {}
-		keyScope(this.sDefaultScope);
+*/
-	}
-
-	/**
-	 * @returns {void}
-	 */
-	restoreScope() {
-		keyScope(this.sCurrentScope);
-	}
 
 	querySelector(selectors) {
 		return this.viewModelDom.querySelector(selectors);
@@ -59,11 +59,14 @@ export class AbstractViewPopup extends AbstractView
 	{
 		super('Popup/' + name, 'Popups' + name, ViewType.Popup);
 		if (name in Scope) {
-			this.sDefaultScope = Scope[name];
+			this.keyScope.scope = Scope[name];
 		}
 		this.bDisabeCloseOnEsc = false;
 	}
 /*
+	onShowWithDelay() {}
+	onHideWithDelay() {}
+
 	cancelCommand() {}
 	closeCommand() {}
 */
@@ -109,3 +112,14 @@ export class AbstractViewRight extends AbstractView
 		super(name, templateID, ViewType.Right);
 	}
 }
+
+/*
+export class AbstractViewSettings
+{
+	onBuild(viewModelDom) {}
+	onBeforeShow() {}
+	onShow() {}
+	onHide() {}
+	viewModelDom
+}
+*/

dev/Knoin/Knoin.js

@@ -1,7 +1,7 @@
 import ko from 'ko';
 
 import { doc, $htmlCL } from 'Common/Globals';
-import { arrayLength, isFunction } from 'Common/Utils';
+import { isFunction } from 'Common/Utils';
 
 let currentScreen = null,
 	defaultScreenName = '';
@@ -29,14 +29,14 @@ const SCREENS = {},
 		if (ViewModelClass && !ViewModelClass.__builded) {
 			let vmDom = null;
 			const vm = new ViewModelClass(vmScreen),
-				position = vm.viewModelPosition || '',
+				position = vm.viewType || '',
 				vmPlace = position ? doc.getElementById('rl-' + position.toLowerCase()) : null;
 
 			ViewModelClass.__builded = true;
 			ViewModelClass.__vm = vm;
 
 			if (vmPlace) {
-				vmDom = Element.fromHTML('<div class="rl-view-model RL-' + vm.viewModelTemplateID + '" hidden=""></div>');
+				vmDom = Element.fromHTML('<div class="rl-view-model RL-' + vm.templateId + '" hidden=""></div>');
 				vmPlace.append(vmDom);
 
 				vm.viewModelDom = vmDom;
@@ -65,7 +65,7 @@ const SCREENS = {},
 							visiblePopups.add(vm);
 							vmDom.style.zIndex = 3000 + visiblePopups.size + 10;
 							vmDom.hidden = false;
-							vm.storeAndSetScope();
+							vm.keyScope.set();
 							arePopupsVisible(true);
 							requestAnimationFrame(() => { // wait just before the next paint
 								vmDom.offsetHeight; // force a reflow
@@ -75,7 +75,7 @@ const SCREENS = {},
 							visiblePopups.delete(vm);
 							vm.onHide && vm.onHide();
 							vmDom.classList.remove('show');
-							vm.restoreScope();
+							vm.keyScope.unset();
 							arePopupsVisible(0 < visiblePopups.size);
 						}
 						vmDom.setAttribute('aria-hidden', !value);
@@ -92,7 +92,7 @@ const SCREENS = {},
 					vmDom,
 					{
 						i18nInit: true,
-						template: () => ({ name: vm.viewModelTemplateID })
+						template: () => ({ name: vm.templateId })
 					},
 					vm
 				);
@@ -111,6 +111,18 @@ const SCREENS = {},
 		return ViewModelClass && ViewModelClass.__vm;
 	},
 
+	forEachViewModel = (screen, fn) => {
+		screen.viewModels.forEach(ViewModelClass => {
+			if (
+				ViewModelClass.__vm &&
+				ViewModelClass.__dom &&
+				ViewType.Popup !== ViewModelClass.__vm.viewType
+			) {
+				fn(ViewModelClass.__vm, ViewModelClass.__dom);
+			}
+		});
+	},
+
 	/**
 	 * @param {string} screenName
 	 * @param {string} subPart
@@ -156,56 +168,30 @@ const SCREENS = {},
 					// hide screen
 					if (currentScreen && !isSameScreen) {
 						currentScreen.onHide && currentScreen.onHide();
-						currentScreen.onHideWithDelay && setTimeout(()=>currentScreen.onHideWithDelay(), 500);
 
-						if (arrayLength(currentScreen.viewModels)) {
+						forEachViewModel(currentScreen, (vm, dom) => {
-							currentScreen.viewModels.forEach(ViewModelClass => {
+							dom.hidden = true;
-								if (
+							vm.onHide && vm.onHide();
-									ViewModelClass.__vm &&
+						});
-									ViewModelClass.__dom &&
-									ViewType.Popup !== ViewModelClass.__vm.viewModelPosition
-								) {
-									ViewModelClass.__dom.hidden = true;
-									ViewModelClass.__vm.viewModelVisible = false;
-
-									ViewModelClass.__vm.onHide && ViewModelClass.__vm.onHide();
-									ViewModelClass.__vm.onHideWithDelay && setTimeout(()=>ViewModelClass.__vm.onHideWithDelay(), 500);
-								}
-							});
-						}
 					}
 					// --
 
 					currentScreen = vmScreen;
 
 					// show screen
-					if (currentScreen && !isSameScreen) {
+					if (!isSameScreen) {
-						currentScreen.onShow && currentScreen.onShow();
+						vmScreen.onShow && vmScreen.onShow();
 
-						if (arrayLength(currentScreen.viewModels)) {
+						forEachViewModel(vmScreen, (vm, dom) => {
-							currentScreen.viewModels.forEach(ViewModelClass => {
+							vm.onBeforeShow && vm.onBeforeShow();
-								if (
+							dom.hidden = false;
-									ViewModelClass.__vm &&
+							vm.onShow && vm.onShow();
-									ViewModelClass.__dom &&
+							autofocus(dom);
-									ViewType.Popup !== ViewModelClass.__vm.viewModelPosition
+						});
-								) {
-									ViewModelClass.__vm.onBeforeShow && ViewModelClass.__vm.onBeforeShow();
-
-									ViewModelClass.__dom.hidden = false;
-									ViewModelClass.__vm.viewModelVisible = true;
-
-									ViewModelClass.__vm.onShow && ViewModelClass.__vm.onShow();
-
-									autofocus(ViewModelClass.__dom);
-
-									ViewModelClass.__vm.onShowWithDelay && setTimeout(()=>ViewModelClass.__vm.onShowWithDelay, 200);
-								}
-							});
-						}
 					}
 					// --
 
-					vmScreen && vmScreen.__cross && vmScreen.__cross.parse(subPart);
+					vmScreen.__cross && vmScreen.__cross.parse(subPart);
 				}, 1);
 			}
 		}
@@ -292,19 +278,13 @@ export const
 		screensClasses.forEach(CScreen => {
 			if (CScreen) {
 				const vmScreen = new CScreen(),
-					screenName = vmScreen && vmScreen.screenName();
+					screenName = vmScreen.screenName;
-
+				defaultScreenName || (defaultScreenName = screenName);
-				if (screenName) {
+				SCREENS[screenName] = vmScreen;
-					defaultScreenName || (defaultScreenName = screenName);
-
-					SCREENS[screenName] = vmScreen;
-				}
 			}
 		});
 
-		Object.values(SCREENS).forEach(vmScreen =>
+		Object.values(SCREENS).forEach(vmScreen => vmScreen.onStart());
-			vmScreen && vmScreen.onStart && vmScreen.onStart()
-		);
 
 		const cross = new Crossroads();
 		cross.addRoute(/^([a-zA-Z0-9-]*)\/?(.*)$/, screenOnRoute);

dev/Screen/AbstractSettings.js

@@ -22,22 +22,14 @@ export class AbstractSettingsScreen extends AbstractScreen {
 		this.setupSettings();
 	}
 
-	/**
+	setupSettings() {}
-	 * @param {Function=} fCallback
-	 */
-	setupSettings(fCallback = null) {
-		fCallback && fCallback();
-	}
 
 	onRoute(subName) {
 		let settingsScreen = null,
-			RoutedSettingsViewModel = null,
+			viewModelDom = null,
-			viewModelDom = null;
+			RoutedSettingsViewModel = VIEW_MODELS.find(
-
+				SettingsViewModel => subName === SettingsViewModel.__rlSettingsData.route
-		RoutedSettingsViewModel = VIEW_MODELS.find(
+			);
-			SettingsViewModel =>
-				SettingsViewModel && SettingsViewModel.__rlSettingsData && subName === SettingsViewModel.__rlSettingsData.Route
-		);
 
 		if (RoutedSettingsViewModel) {
 			if (RoutedSettingsViewModel.__builded && RoutedSettingsViewModel.__vm) {
@@ -47,23 +39,20 @@ export class AbstractSettingsScreen extends AbstractScreen {
 				if (vmPlace) {
 					settingsScreen = new RoutedSettingsViewModel();
 
-					viewModelDom = Element.fromHTML('<div class="rl-settings-view-model" hidden=""></div>');
+					viewModelDom = Element.fromHTML('<div hidden=""></div>');
 					vmPlace.append(viewModelDom);
 
 					settingsScreen.viewModelDom = viewModelDom;
 
-					settingsScreen.__rlSettingsData = RoutedSettingsViewModel.__rlSettingsData;
-
 					RoutedSettingsViewModel.__dom = viewModelDom;
 					RoutedSettingsViewModel.__builded = true;
 					RoutedSettingsViewModel.__vm = settingsScreen;
 
-					const tmpl = { name: RoutedSettingsViewModel.__rlSettingsData.Template };
 					ko.applyBindingAccessorsToNode(
 						viewModelDom,
 						{
 							i18nInit: true,
-							template: () => tmpl
+							template: () => ({ name: RoutedSettingsViewModel.__rlSettingsData.template })
 						},
 						settingsScreen
 					);
@@ -75,33 +64,25 @@ export class AbstractSettingsScreen extends AbstractScreen {
 			}
 
 			if (settingsScreen) {
-				const o = this;
 				setTimeout(() => {
 					// hide
-					if (o.oCurrentSubScreen) {
+					this.onHide();
-						o.oCurrentSubScreen.onHide && o.oCurrentSubScreen.onHide();
-						o.oCurrentSubScreen.viewModelDom.hidden = true;
-					}
 					// --
 
-					o.oCurrentSubScreen = settingsScreen;
+					this.oCurrentSubScreen = settingsScreen;
 
 					// show
-					if (o.oCurrentSubScreen) {
+					settingsScreen.onBeforeShow && settingsScreen.onBeforeShow();
-						o.oCurrentSubScreen.onBeforeShow && o.oCurrentSubScreen.onBeforeShow();
+					settingsScreen.viewModelDom.hidden = false;
-						o.oCurrentSubScreen.viewModelDom.hidden = false;
+					settingsScreen.onShow && settingsScreen.onShow();
-						o.oCurrentSubScreen.onShow && o.oCurrentSubScreen.onShow();
 
-						o.menu.forEach(item => {
+					this.menu.forEach(item => {
-							item.selected(
+						item.selected(
-								settingsScreen &&
+							item.route === RoutedSettingsViewModel.__rlSettingsData.route
-									settingsScreen.__rlSettingsData &&
+						);
-									item.route === settingsScreen.__rlSettingsData.Route
+					});
-							);
-						});
 
-						doc.querySelector('#rl-content .b-settings .b-content').scrollTop = 0;
+					doc.querySelector('#rl-content .b-settings .b-content').scrollTop = 0;
-					}
 					// --
 				}, 1);
 			}
@@ -111,34 +92,23 @@ export class AbstractSettingsScreen extends AbstractScreen {
 	}
 
 	onHide() {
-		if (this.oCurrentSubScreen && this.oCurrentSubScreen.viewModelDom) {
+		let subScreen = this.oCurrentSubScreen;
-			this.oCurrentSubScreen.onHide && this.oCurrentSubScreen.onHide();
+		if (subScreen) {
-			this.oCurrentSubScreen.viewModelDom.hidden = true;
+			subScreen.onHide && subScreen.onHide();
+			subScreen.viewModelDom.hidden = true;
 		}
 	}
 
 	onBuild() {
-		VIEW_MODELS.forEach(SettingsViewModel => {
+		VIEW_MODELS.forEach(SettingsViewModel => this.menu.push(SettingsViewModel.__rlSettingsData));
-			if (
-				SettingsViewModel &&
-				SettingsViewModel.__rlSettingsData
-			) {
-				this.menu.push({
-					route: SettingsViewModel.__rlSettingsData.Route,
-					label: SettingsViewModel.__rlSettingsData.Label,
-					selected: ko.observable(false)
-				});
-			}
-		});
 	}
 
 	routes() {
 		const DefaultViewModel = VIEW_MODELS.find(
-				SettingsViewModel =>
+				SettingsViewModel => SettingsViewModel.__rlSettingsData.isDefault
-					SettingsViewModel && SettingsViewModel.__rlSettingsData && SettingsViewModel.__rlSettingsData.IsDefault
 			),
 			defaultRoute =
-				DefaultViewModel && DefaultViewModel.__rlSettingsData ? DefaultViewModel.__rlSettingsData.Route : 'general',
+				DefaultViewModel ? DefaultViewModel.__rlSettingsData.route : 'general',
 			rules = {
 				subname: /^(.*)$/,
 				normalize_: (rquest, vals) => {
@@ -165,10 +135,11 @@ export class AbstractSettingsScreen extends AbstractScreen {
  */
 export function settingsAddViewModel(SettingsViewModelClass, template, labelName, route, isDefault = false) {
 	SettingsViewModelClass.__rlSettingsData = {
-		Label: labelName,
+		label: labelName,
-		Template: template,
+		route: route,
-		Route: route,
+		selected: ko.observable(false),
-		IsDefault: !!isDefault
+		template: template,
+		isDefault: !!isDefault
 	};
 
 	VIEW_MODELS.push(SettingsViewModelClass);

dev/Screen/Admin/Settings.js

@@ -19,10 +19,7 @@ export class SettingsAdminScreen extends AbstractSettingsScreen {
 		super([MenuSettingsAdminView, PaneSettingsAdminView]);
 	}
 
-	/**
+	setupSettings() {
-	 * @param {Function=} fCallback = null
-	 */
-	setupSettings(fCallback = null) {
 		settingsAddViewModel(
 			GeneralAdminSettings,
 			'AdminSettingsGeneral',
@@ -49,8 +46,6 @@ export class SettingsAdminScreen extends AbstractSettingsScreen {
 		);
 
 		runSettingsViewModelHooks(true);
-
-		fCallback && fCallback();
 	}
 
 	onShow() {

dev/Screen/User/Settings.js

@@ -32,13 +32,8 @@ export class SettingsUserScreen extends AbstractSettingsScreen {
 		);
 	}
 
-	/**
+	setupSettings() {
-	 * @param {Function=} fCallback
-	 */
-	setupSettings(fCallback = null) {
 		if (!Settings.capa(Capa.Settings)) {
-			fCallback && fCallback();
-
 			return false;
 		}
 
@@ -79,8 +74,6 @@ export class SettingsUserScreen extends AbstractSettingsScreen {
 
 		runSettingsViewModelHooks(false);
 
-		fCallback && fCallback();
-
 		return true;
 	}
 

dev/Settings/Admin/About.js

@@ -1,7 +1,7 @@
 import ko from 'ko';
 import { Settings } from 'Common/Globals';
 
-export class AboutAdminSettings {
+export class AboutAdminSettings /*extends AbstractViewSettings*/ {
 	constructor() {
 		this.version = ko.observable(Settings.app('version'));
 	}

dev/Settings/Admin/Branding.js

@@ -5,7 +5,7 @@ import { settingsSaveHelperSimpleFunction } from 'Common/Utils';
 
 import Remote from 'Remote/Admin/Fetch';
 
-export class BrandingAdminSettings {
+export class BrandingAdminSettings /*extends AbstractViewSettings*/ {
 	constructor() {
 		this.title = ko.observable(SettingsGet('Title')).idleTrigger();
 		this.loadingDesc = ko.observable(SettingsGet('LoadingDescription')).idleTrigger();

dev/Settings/Admin/Contacts.js

@@ -12,7 +12,7 @@ import {
 import Remote from 'Remote/Admin/Fetch';
 import { decorateKoCommands } from 'Knoin/Knoin';
 
-export class ContactsAdminSettings {
+export class ContactsAdminSettings /*extends AbstractViewSettings*/ {
 	constructor() {
 		this.defaultOptionsAfterRender = defaultOptionsAfterRender;
 

dev/Settings/Admin/Domains.js

@@ -8,7 +8,7 @@ import Remote from 'Remote/Admin/Fetch';
 import { DomainPopupView } from 'View/Popup/Domain';
 import { DomainAliasPopupView } from 'View/Popup/DomainAlias';
 
-export class DomainsAdminSettings {
+export class DomainsAdminSettings /*extends AbstractViewSettings*/ {
 	constructor() {
 		this.domains = DomainAdminStore;
 

dev/Settings/Admin/General.js

@@ -23,7 +23,7 @@ import { ThemeStore } from 'Stores/Theme';
 import { LanguageStore } from 'Stores/Language';
 import LanguagesPopupView from 'View/Popup/Languages';
 
-export class GeneralAdminSettings {
+export class GeneralAdminSettings /*extends AbstractViewSettings*/ {
 	constructor() {
 		this.language = LanguageStore.language;
 		this.languages = LanguageStore.languages;

dev/Settings/Admin/Login.js

@@ -5,7 +5,7 @@ import { settingsSaveHelperSimpleFunction, addObservablesTo, addSubscribablesTo
 
 import Remote from 'Remote/Admin/Fetch';
 
-export class LoginAdminSettings {
+export class LoginAdminSettings /*extends AbstractViewSettings*/ {
 	constructor() {
 		addObservablesTo(this, {
 			determineUserLanguage: !!SettingsGet('DetermineUserLanguage'),

dev/Settings/Admin/Packages.js

@@ -11,7 +11,7 @@ import { PluginPopupView } from 'View/Popup/Plugin';
 import { SettingsGet } from 'Common/Globals';
 import { addComputablesTo } from 'Common/Utils';
 
-export class PackagesAdminSettings {
+export class PackagesAdminSettings /*extends AbstractViewSettings*/ {
 	constructor() {
 		this.packagesError = ko.observable('');
 

dev/Settings/Admin/Security.js

@@ -6,7 +6,7 @@ import Remote from 'Remote/Admin/Fetch';
 
 import { decorateKoCommands } from 'Knoin/Knoin';
 
-export class SecurityAdminSettings {
+export class SecurityAdminSettings /*extends AbstractViewSettings*/ {
 	constructor() {
 		this.weakPassword = rl.app.weakPassword;
 

dev/Settings/User/Accounts.js

@@ -12,7 +12,7 @@ import { showScreenPopup } from 'Knoin/Knoin';
 import { AccountPopupView } from 'View/Popup/Account';
 import { IdentityPopupView } from 'View/Popup/Identity';
 
-export class AccountsUserSettings {
+export class AccountsUserSettings /*extends AbstractViewSettings*/ {
 	constructor() {
 		this.allowAdditionalAccount = Settings.capa(Capa.AdditionalAccounts);
 		this.allowIdentities = Settings.capa(Capa.Identities);

dev/Settings/User/Contacts.js

@@ -4,7 +4,7 @@ import { SettingsGet } from 'Common/Globals';
 import { ContactUserStore } from 'Stores/User/Contact';
 import Remote from 'Remote/User/Fetch';
 
-export class ContactsUserSettings {
+export class ContactsUserSettings /*extends AbstractViewSettings*/ {
 	constructor() {
 		this.contactsAutosave = ko.observable(!!SettingsGet('ContactsAutosave'));
 

dev/Settings/User/Filters.js

@@ -13,7 +13,7 @@ import { showScreenPopup } from 'Knoin/Knoin';
 
 import { SieveScriptPopupView } from 'View/Popup/SieveScript';
 
-export class FiltersUserSettings {
+export class FiltersUserSettings /*extends AbstractViewSettings*/ {
 	constructor() {
 		this.scripts = SieveUserStore.scripts;
 		this.loading = ko.observable(false).extend({ debounce: 200 });

dev/Settings/User/Folders.js

@@ -19,7 +19,7 @@ import { showScreenPopup } from 'Knoin/Knoin';
 import { FolderCreatePopupView } from 'View/Popup/FolderCreate';
 import { FolderSystemPopupView } from 'View/Popup/FolderSystem';
 
-export class FoldersUserSettings {
+export class FoldersUserSettings /*extends AbstractViewSettings*/ {
 	constructor() {
 		this.displaySpecSetting = FolderUserStore.displaySpecSetting;
 		this.folderList = FolderUserStore.folderList;

dev/Settings/User/General.js

@@ -20,7 +20,7 @@ import Remote from 'Remote/User/Fetch';
 import { IdentityPopupView } from 'View/Popup/Identity';
 import { LanguagesPopupView } from 'View/Popup/Languages';
 
-export class GeneralUserSettings {
+export class GeneralUserSettings /*extends AbstractViewSettings*/ {
 	constructor() {
 		this.language = LanguageStore.language;
 		this.languages = LanguageStore.languages;

dev/Settings/User/OpenPgp.js

@@ -13,7 +13,7 @@ import { AddOpenPgpKeyPopupView } from 'View/Popup/AddOpenPgpKey';
 import { NewOpenPgpKeyPopupView } from 'View/Popup/NewOpenPgpKey';
 import { ViewOpenPgpKeyPopupView } from 'View/Popup/ViewOpenPgpKey';
 
-export class OpenPgpUserSettings {
+export class OpenPgpUserSettings /*extends AbstractViewSettings*/ {
 	constructor() {
 		this.openpgpkeys = PgpUserStore.openpgpkeys;
 		this.openpgpkeysPublic = PgpUserStore.openpgpkeysPublic;

dev/Settings/User/Security.js

@@ -9,7 +9,7 @@ import { SettingsUserStore } from 'Stores/User/Settings';
 
 import Remote from 'Remote/User/Fetch';
 
-export class SecurityUserSettings {
+export class SecurityUserSettings /*extends AbstractViewSettings*/ {
 	constructor() {
 		this.capaAutoLogout = Settings.capa(Capa.AutoLogout);
 

dev/Settings/User/Themes.js

@@ -10,7 +10,7 @@ import { ThemeStore } from 'Stores/Theme';
 
 import Remote from 'Remote/User/Fetch';
 
-export class ThemesUserSettings {
+export class ThemesUserSettings /*extends AbstractViewSettings*/ {
 	constructor() {
 		this.theme = ThemeStore.theme;
 		this.themes = ThemeStore.themes;

dev/Styles/User/Settings.less

@@ -80,7 +80,7 @@
 	}
 }
 
-html.rl-mobile .rl-settings-view-model {
+html.rl-mobile #rl-settings-subscreen > * {
 	margin-right: 15px;
 }
 

dev/View/Popup/Plugin.js

@@ -29,7 +29,7 @@ class PluginPopupView extends AbstractViewPopup {
 		});
 
 		this.bDisabeCloseOnEsc = true;
-		this.sDefaultScope = Scope.All;
+		this.keyScope.scope = Scope.All;
 
 		this.tryToClosePopup = this.tryToClosePopup.debounce(200);
 

dev/View/User/AbstractSystemDropDown.js

@@ -88,7 +88,7 @@ export class AbstractSystemDropDownUserView extends AbstractViewRight {
 
 	onBuild() {
 		shortcuts.add('m,contextmenu', '', [Scope.MessageList, Scope.MessageView, Scope.Settings], () => {
-			if (this.viewModelVisible) {
+			if (!this.viewModelDom.hidden) {
 				MessageUserStore.messageFullScreenMode(false);
 				this.accountMenuDropdownTrigger(true);
 				return false;
@@ -97,7 +97,7 @@ export class AbstractSystemDropDownUserView extends AbstractViewRight {
 
 		// shortcuts help
 		shortcuts.add('?,f1,help', '', [Scope.MessageList, Scope.MessageView, Scope.Settings], () => {
-			if (this.viewModelVisible) {
+			if (!this.viewModelDom.hidden) {
 				showScreenPopup(KeyboardShortcutsHelpPopupView);
 				return false;
 			}

dev/View/User/MailBox/MessageList.js

@@ -877,7 +877,7 @@ export class MessageListMailBoxUserView extends AbstractViewRight {
 	}
 
 	prefetchNextTick() {
-		if (!this.bPrefetch && !ifvisible.now() && this.viewModelVisible) {
+		if (!this.bPrefetch && !ifvisible.now() && !this.viewModelDom.hidden) {
 			const message = MessageUserStore.list.find(
 				item => item && !hasRequestedMessage(item.folder, item.uid)
 			);

dev/View/User/MailBox/MessageView.js

@@ -419,7 +419,7 @@ class MessageViewMailBoxUserView extends AbstractViewRight {
 
 		// exit fullscreen, back
 		shortcuts.add('escape,backspace', '', Scope.MessageView, () => {
-			if (this.viewModelVisible && MessageUserStore.message()) {
+			if (!this.viewModelDom.hidden && MessageUserStore.message()) {
 				const preview = SettingsUserStore.usePreviewPane();
 				if (this.fullScreenMode()) {
 					this.fullScreenMode(false);