From 46531c78319cff529d991a0467708033984aa850 Mon Sep 17 00:00:00 2001
From: djmaze <djmaze@djmaze.lan>
Date: Fri, 19 Mar 2021 10:09:30 +0100
Subject: [PATCH] Bugfix and improve layout change handling

---
 dev/App/User.js             | 17 +++++++++--------
 dev/Stores/User/Settings.js | 10 +++++++---
 2 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/dev/App/User.js b/dev/App/User.js
index 6c0371a38..0bc53147f 100644
--- a/dev/App/User.js
+++ b/dev/App/User.js
@@ -845,24 +845,25 @@ class AppUser extends AbstractApp {
 	initHorizontalLayoutResizer() {
 		const top = doc.querySelector('.b-message-list-wrapper'),
 			bottom = doc.querySelector('.b-message-view-wrapper'),
-			fDisable = bDisable => {
+			fToggle = () => {
 				this.setLayoutResizer(top, bottom, ClientSideKeyName.MessageListSize,
-					(bDisable || !$htmlCL.contains('rl-bottom-preview-pane')) ? null : 'height');
+					(ThemeStore.isMobile() || Layout.BottomPreview !== SettingsUserStore.layout()) ? null : 'height');
 			};
 		if (top && bottom) {
-			fDisable(ThemeStore.isMobile());
-			addEventListener('rl-layout', e => fDisable(Layout.BottomPreview !== e.detail));
+			fToggle();
+			addEventListener('rl-layout', fToggle);
 		}
 	}
 
 	initVerticalLayoutResizer() {
 		const left = elementById('rl-left'),
 			right = elementById('rl-right'),
-			fDisable = bDisable =>
-				this.setLayoutResizer(left, right, ClientSideKeyName.FolderListSize, bDisable ? null : 'width');
+			fToggle = () =>
+				this.setLayoutResizer(left, right, ClientSideKeyName.FolderListSize,
+					(ThemeStore.isMobile() || leftPanelDisabled()) ? null : 'width');
 		if (left && right) {
-			fDisable(ThemeStore.isMobile());
-			leftPanelDisabled.subscribe(value => fDisable(value));
+			fToggle();
+			leftPanelDisabled.subscribe(fToggle);
 		}
 	}
 
diff --git a/dev/Stores/User/Settings.js b/dev/Stores/User/Settings.js
index c8a09b11b..cd157fb65 100644
--- a/dev/Stores/User/Settings.js
+++ b/dev/Stores/User/Settings.js
@@ -10,7 +10,7 @@ export const SettingsUserStore = new class {
 	constructor() {
 		this.layout = ko
 			.observable(pInt(SettingsGet('Layout')))
-			.extend({ limitedList: [Layout.SidePreview, Layout.BottomPreview, Layout.NoPreview] });
+			.extend({ limitedList: Object.values(Layout) });
 
 		this.editorDefaultType = ko.observable(SettingsGet('EditorDefaultType')).extend({
 			limitedList: [
@@ -36,12 +36,16 @@ export const SettingsUserStore = new class {
 
 		this.usePreviewPane = ko.computed(() => Layout.NoPreview !== this.layout() && !ThemeStore.isMobile());
 
-		this.layout.subscribe(value => {
+		const toggleLayout = () => {
+			const value = ThemeStore.isMobile() ? Layout.NoPreview : this.layout();
 			$htmlCL.toggle('rl-no-preview-pane', Layout.NoPreview === value);
 			$htmlCL.toggle('rl-side-preview-pane', Layout.SidePreview === value);
 			$htmlCL.toggle('rl-bottom-preview-pane', Layout.BottomPreview === value);
 			dispatchEvent(new CustomEvent('rl-layout', {detail:value}));
-		});
+		};
+		this.layout.subscribe(toggleLayout);
+		ThemeStore.isMobile.subscribe(toggleLayout);
+		toggleLayout();
 
 		let iAutoLogoutTimer;
 		this.delayLogout = (() => {