Changes for idea in #1150 (isSmall not active yet)

dev/Knoin/AbstractViews.js

@@ -1,7 +1,7 @@
 import ko from 'ko';
 
 import { addObservablesTo, addComputablesTo, addSubscribablesTo } from 'External/ko';
-import { keyScope, addShortcut, SettingsGet, leftPanelDisabled, toggleLeftPanel, elementById } from 'Common/Globals';
+import { keyScope, addShortcut, SettingsGet, toggleLeftPanel, elementById } from 'Common/Globals';
 import { ViewTypePopup, showScreenPopup } from 'Knoin/Knoin';
 
 import { SaveSettingStatus } from 'Common/Enums';
@@ -95,7 +95,6 @@ export class AbstractViewLeft extends AbstractView
 	constructor(templateID)
 	{
 		super(templateID, 'left');
-		this.leftPanelDisabled = leftPanelDisabled;
 		this.toggleLeftPanel = toggleLeftPanel;
 	}
 }

dev/Stores/Theme.js

@@ -10,6 +10,8 @@ let __themeTimer = 0;
 export const
 	// Also see Styles/_Values.less @maxMobileWidth
 	isMobile = matchMedia('(max-width: 799px)'),
+	// https://github.com/the-djmaze/snappymail/issues/1150
+//	isSmall = matchMedia('(max-width: 1400px)'),
 
 	ThemeStore = {
 		theme: ko.observable(''),
@@ -104,6 +106,9 @@ addSubscribablesTo(ThemeStore, {
 isMobile.onchange = e => {
 	ThemeStore.isMobile(e.matches);
 	$htmlCL.toggle('rl-mobile', e.matches);
-	leftPanelDisabled(e.matches);
+	/*$htmlCL.contains('sm-msgView-side') || */leftPanelDisabled(e.matches);
 };
 isMobile.onchange(isMobile);
+
+//isSmall.onchange = e => $htmlCL.contains('sm-msgView-side') && leftPanelDisabled(e.matches);
+//isSmall.onchange(isSmall);

dev/Styles/Main.less

@@ -4,6 +4,13 @@ html.list-loading body {
 	cursor: progress;
 }
 
+.toggleLeft::before {
+	content: '❮';
+}
+html.rl-left-panel-disabled .toggleLeft::before {
+	content: '❯';
+}
+
 @media screen and (min-width: @maxMobileWidth + 1px) {
 	#rl-app {
 		background-image: var(--main-bg-image);

dev/Styles/User/Layout.less

@@ -15,6 +15,7 @@
 
 	.b-toolbar {
 		padding: 10px 0 10px @rlLowMargin;
+		white-space: nowrap;
 	}
 }
 
@@ -189,7 +190,7 @@ html.rl-left-panel-disabled {
 
 /* desktop */
 @media screen and (min-width: @maxMobileWidth + 1px) {
-	.toggleLeft,
+	#rl-right .toggleLeft,
 	#V-MailMessageList .buttonCompose {
 		display: none !important;
 	}

dev/View/Admin/Settings/Pane.js

@@ -2,12 +2,11 @@ import Remote from 'Remote/Admin/Fetch';
 
 import { AbstractViewRight } from 'Knoin/AbstractViews';
 
-import { leftPanelDisabled, toggleLeftPanel } from 'Common/Globals';
+import { toggleLeftPanel } from 'Common/Globals';
 
 export class PaneSettingsAdminView extends AbstractViewRight {
 	constructor() {
 		super('AdminPane');
-		this.leftPanelDisabled = leftPanelDisabled;
 		this.toggleLeftPanel = toggleLeftPanel;
 	}
 

dev/View/User/MailBox/MessageList.js

@@ -88,8 +88,6 @@ export class MailMessageList extends AbstractViewRight {
 		this.composeInEdit = ComposePopupView.inEdit;
 
 		this.isMobile = ThemeStore.isMobile; // Obsolete
-		this.leftPanelDisabled = leftPanelDisabled;
-		this.toggleLeftPanel = toggleLeftPanel;
 
 		this.popupVisibility = arePopupsVisible;
 
@@ -582,7 +580,11 @@ export class MailMessageList extends AbstractViewRight {
 
 		addEventsListeners(dom, {
 			click: event => {
-				ThemeStore.isMobile() && !eqs(event, '.toggleLeft') && leftPanelDisabled(true);
+				if (eqs(event, '.toggleLeft')) {
+					toggleLeftPanel();
+				} else {
+					ThemeStore.isMobile() && leftPanelDisabled(true);
+				}
 
 				if (eqs(event, '.messageList') && ScopeMessageView === AppUserStore.focusedState()) {
 					AppUserStore.focusedState(ScopeMessageList);

dev/View/User/Settings/Pane.js

@@ -8,9 +8,6 @@ import { AbstractViewRight } from 'Knoin/AbstractViews';
 export class SettingsPaneUserView extends AbstractViewRight {
 	constructor() {
 		super();
-
-		this.leftPanelDisabled = leftPanelDisabled;
-		this.toggleLeftPanel = toggleLeftPanel;
 	}
 
 	onShow() {
@@ -18,8 +15,12 @@ export class SettingsPaneUserView extends AbstractViewRight {
 	}
 
 	onBuild(dom) {
-		dom.addEventListener('click', () =>
-			ThemeStore.isMobile() && !event.target.closestWithin('.toggleLeft', dom) && leftPanelDisabled(true)
-		);
+		dom.addEventListener('click', () => {
+			if (event.target.closestWithin('.toggleLeft', dom)) {
+				toggleLeftPanel();
+			} else {
+				ThemeStore.isMobile() && leftPanelDisabled(true);
+			}
+		});
 	}
 }