From 8a9df4a1b30766c4b366db0c587ecda0dcc770b0 Mon Sep 17 00:00:00 2001
From: Martynas Bagdonas <git.martynas@gmail.com>
Date: Thu, 1 Feb 2024 14:48:31 +0800
Subject: [PATCH] Move context pane toggle into reader toolbar

Related #3648
---
 chrome/content/zotero/contextPane.js          | 32 +++++++++----------
 .../zotero/elements/itemPaneSidenav.js        |  3 +-
 chrome/content/zotero/xpcom/reader.js         |  6 ++++
 chrome/content/zotero/zoteroPane.xhtml        |  5 ++-
 scss/abstracts/_variables.scss                |  1 +
 scss/components/_contextPane.scss             |  2 +-
 6 files changed, 26 insertions(+), 23 deletions(-)

diff --git a/chrome/content/zotero/contextPane.js b/chrome/content/zotero/contextPane.js
index 5b325d4467..8b7bd1d048 100644
--- a/chrome/content/zotero/contextPane.js
+++ b/chrome/content/zotero/contextPane.js
@@ -46,6 +46,7 @@ var ZoteroContextPane = new function () {
 	this.update = _update;
 	this.getActiveEditor = _getActiveEditor;
 	this.focus = _focus;
+	this.togglePane = _togglePane;
 
 	this.init = function () {
 		if (!Zotero) {
@@ -335,7 +336,7 @@ var ZoteroContextPane = new function () {
 			_contextPane.classList.add('stacked');
 			_contextPane.classList.remove('standard');
 			_sidenav.classList.add('stacked');
-			_contextPaneInner.after(_sidenav);
+			_contextPaneInner.append(_sidenav);
 		}
 		else {
 			_contextPaneSplitter.setAttribute('hidden', false);
@@ -344,14 +345,16 @@ var ZoteroContextPane = new function () {
 			_contextPane.classList.add('standard');
 			_contextPane.classList.remove('stacked');
 			_sidenav.classList.remove('stacked');
-			_contextPane.after(_sidenav);
+			_contextPane.append(_sidenav);
 		}
 		
 		if (Zotero_Tabs.selectedIndex > 0) {
-			var height = 0;
-			if (Zotero.Prefs.get('layout') == 'stacked'
-				&& _contextPane.getAttribute('collapsed') != 'true') {
-				height = _contextPaneInner.getBoundingClientRect().height;
+			var height = null;
+			if (Zotero.Prefs.get('layout') == 'stacked') {
+				height = 0;
+				if (_contextPane.getAttribute('collapsed') != 'true') {
+					height = _contextPaneInner.getBoundingClientRect().height;
+				}
 			}
 			Zotero.Reader.setBottomPlaceholderHeight(height);
 		}
@@ -361,24 +364,19 @@ var ZoteroContextPane = new function () {
 		_sidenav.showPendingPane();
 	}
 
-	function _togglePane(paneIndex) {
+	function _togglePane() {
 		var splitter = Zotero.Prefs.get('layout') == 'stacked'
 			? _contextPaneSplitterStacked : _contextPaneSplitter;
 
-		var isOpen = splitter.getAttribute('state') != 'collapsed';
-		var hide = false;
-		var currentPane = _panesDeck.selectedIndex;
-		if (isOpen && currentPane == paneIndex) {
-			hide = true;
-		}
-		else {
-			_panesDeck.setAttribute('selectedIndex', paneIndex);
+		var open = true;
+		if (splitter.getAttribute('state') != 'collapsed') {
+			open = false;
 		}
 		
-		splitter.setAttribute('state', hide ? 'collapsed' : 'open');
+		splitter.setAttribute('state', open ? 'open' : 'collapsed');
 		_update();
 
-		if (!hide) {
+		if (open) {
 			ZoteroContextPane.focus();
 		}
 	}
diff --git a/chrome/content/zotero/elements/itemPaneSidenav.js b/chrome/content/zotero/elements/itemPaneSidenav.js
index db60de16be..e4bfba6f94 100644
--- a/chrome/content/zotero/elements/itemPaneSidenav.js
+++ b/chrome/content/zotero/elements/itemPaneSidenav.js
@@ -189,8 +189,7 @@
 		}
 		
 		get _showCollapseButton() {
-			// Only show in reader
-			return !!this._contextNotesPane;
+			return false;
 		}
 		
 		get _collapsed() {
diff --git a/chrome/content/zotero/xpcom/reader.js b/chrome/content/zotero/xpcom/reader.js
index 000ecc67d4..e09b2d55ca 100644
--- a/chrome/content/zotero/xpcom/reader.js
+++ b/chrome/content/zotero/xpcom/reader.js
@@ -497,6 +497,12 @@ class ReaderInstance {
 					await this.reload();
 					this._internalReader.unfreeze();
 				}
+			},
+			onToggleContextPane: () => {
+				Zotero.debug('toggle context pane')
+				let win = Zotero.getMainWindow();
+				win.ZoteroContextPane.togglePane();
+
 			}
 		}, this._iframeWindow, { cloneFunctions: true }));
 
diff --git a/chrome/content/zotero/zoteroPane.xhtml b/chrome/content/zotero/zoteroPane.xhtml
index ef7df189e9..5fe992a56d 100644
--- a/chrome/content/zotero/zoteroPane.xhtml
+++ b/chrome/content/zotero/zoteroPane.xhtml
@@ -1325,11 +1325,10 @@
 							>
 								<grippy/>
 							</splitter>
-							<hbox id="zotero-context-pane-inner" flex="1" zotero-persist="height"/>
+							<vbox id="zotero-context-pane-inner" flex="1" zotero-persist="height"/>
 						</vbox>
+						<item-pane-sidenav id="zotero-context-pane-sidenav" class="zotero-view-item-sidenav" hidden="true"/>
 					</box>
-					
-					<item-pane-sidenav id="zotero-context-pane-sidenav" class="zotero-view-item-sidenav" hidden="true"/>
 
 					<popupset>
 						<menupopup id="context-pane-add-child-note-button-popup">
diff --git a/scss/abstracts/_variables.scss b/scss/abstracts/_variables.scss
index c88ac65bfe..ee4833ec6c 100644
--- a/scss/abstracts/_variables.scss
+++ b/scss/abstracts/_variables.scss
@@ -110,4 +110,5 @@ $tagColorsLookup: (
 $min-width-collections-pane: 200px;
 $min-width-items-pane: 370px;
 $min-width-item-pane: 300px;
+$min-width-context-pane: 340px;
 $width-sidenav: 37px;
diff --git a/scss/components/_contextPane.scss b/scss/components/_contextPane.scss
index 12c1c5fcb1..9ad6ff7302 100644
--- a/scss/components/_contextPane.scss
+++ b/scss/components/_contextPane.scss
@@ -4,7 +4,7 @@
 
 #zotero-context-pane {
 	display: flex;
-	min-width: $min-width-item-pane;
+	min-width: $min-width-context-pane;
 
 	.divider {
 		border-bottom: 1px solid var(--fill-quinary);