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);
+			}
+		});
 	}
 }

snappymail/v/0.0.0/app/templates/Views/Admin/AdminPane.html

@@ -1,5 +1,5 @@
 <div class="b-toolbar g-ui-user-select-none">
-	<a class="btn btn-thin fontastic toggleLeft" data-bind="click: toggleLeftPanel, text: leftPanelDisabled() ? '❯' : '❮'">❮</a>
+	<a class="btn btn-thin fontastic toggleLeft" data-bind="click: toggleLeftPanel"></a>
 	<h4>SnappyMail - <span data-i18n="TOP_PANEL/LABEL_ADMIN_PANEL"></span></h4>
 	<a class="btn btn-logout fontastic" data-bind="click: logoutClick">⏻</a>
 </div>

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

@@ -29,7 +29,7 @@
 	</div>
 	<div class="b-footer btn-toolbar">
 		<div class="btn-group">
-			<a class="btn fontastic" data-bind="click: toggleLeftPanel, text: leftPanelDisabled() ? '❯' : '❮'"></a>
+			<a class="btn fontastic toggleLeft" data-bind="click: toggleLeftPanel"></a>
 		</div>
 		<div class="btn-group hide-on-panel-disabled">
 			<a class="btn icon-folder-add" data-bind="click: createFolder" data-i18n="[title]POPUPS_CREATE_FOLDER/TITLE_CREATE_FOLDER"></a>

snappymail/v/0.0.0/app/templates/Views/User/MailMessageList.html

@@ -1,5 +1,5 @@
 <div class="btn-toolbar" data-bind="css: {'hasChecked':checkAll}">
-	<a class="btn btn-thin fontastic toggleLeft" data-bind="click: toggleLeftPanel, text: leftPanelDisabled() ? '❯' : '❮'">❮</a>
+	<a class="btn btn-thin fontastic toggleLeft"></a>
 	<a class="btn buttonCompose onCheckedHide" data-bind="click: composeClick, css: {'btn-warning': composeInEdit, 'btn-success': !composeInEdit()}" data-i18n="[title]FOLDER_LIST/BUTTON_NEW_MESSAGE">
 		<i class="icon-paper-plane"></i>
 	</a>

snappymail/v/0.0.0/app/templates/Views/User/SettingsMenu.html

@@ -1,5 +1,5 @@
 <div class="b-toolbar btn-toolbar">
-	<a class="btn btn-thin fontastic toggleLeft" data-bind="click: toggleLeftPanel, text: leftPanelDisabled() ? '❯' : '❮'"></a>
+	<a class="btn btn-thin fontastic toggleLeft" data-bind="click: toggleLeftPanel"></a>
 	<a class="btn" data-bind="click: backToInbox" data-icon="⬅" data-i18n="GLOBAL/BACK"></a>
 </div>
 <nav data-bind="foreach: menu">

snappymail/v/0.0.0/app/templates/Views/User/SettingsPane.html

@@ -1,3 +1,3 @@
-<div class="btn-toolbar" data-bind="visible: leftPanelDisabled">
-	<a class="btn btn-thin fontastic toggleLeft" data-bind="click: toggleLeftPanel">❯</a>
+<div class="btn-toolbar">
+	<a class="btn btn-thin fontastic toggleLeft"></a>
 </div>