Add context pane toggle button

src/common/components/reader-ui.js

@@ -115,6 +115,7 @@ const ReaderUI = React.forwardRef((props, ref) => {
 					findPopupOpen={findState.popupOpen}
 					tool={state.tool}
 					readOnly={state.readOnly}
+					stackedView={state.bottomPlaceholderHeight !== null}
 					onToggleSidebar={props.onToggleSidebar}
 					onZoomIn={props.onZoomIn}
 					onZoomOut={props.onZoomOut}
@@ -126,6 +127,7 @@ const ReaderUI = React.forwardRef((props, ref) => {
 					onChangeTool={props.onChangeTool}
 					onOpenColorContextMenu={props.onOpenColorContextMenu}
 					onToggleFind={props.onToggleFind}
+					onToggleContextPane={props.onToggleContextPane}
 				/>
 				<div>
 					{state.sidebarOpen === true &&

src/common/components/toolbar.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useContext } from 'react';
+import React, { useEffect, useRef, useContext, Fragment } from 'react';
 import { useIntl } from 'react-intl';
 import cx from 'classnames';
 import CustomSections from './common/custom-sections';
@@ -7,6 +7,7 @@ import { ReaderContext } from '../reader';
 import { IconColor20 } from './common/icons';
 
 import IconSidebar from '../../../res/icons/20/sidebar.svg';
+import IconSidebarBottom from '../../../res/icons/20/sidebar-bottom.svg';
 import IconZoomIn from '../../../res/icons/20/zoom-in.svg';
 import IconZoomOut from '../../../res/icons/20/zoom-out.svg';
 import IconAutoWidth from '../../../res/icons/20/auto-width.svg';
@@ -75,7 +76,7 @@ function Toolbar(props) {
 			<div className="start">
 				<button
 					id="sidebarToggle"
-					className="toolbar-button"
+					className="toolbar-button sidebar-toggle"
 					title="Toggle Sidebar"
 					tabIndex={-1}
 					onClick={handleSidebarButtonClick}
@@ -237,6 +238,17 @@ function Toolbar(props) {
 					tabIndex={-1}
 					onClick={handleFindClick}
 				><IconFind/></button>
+				{platform === 'zotero' && (
+					<Fragment>
+						<div className="divider"/>
+						<button
+							className="toolbar-button context-pane-toggle"
+							title="Toggle Context Pane"
+							tabIndex={-1}
+							onClick={props.onToggleContextPane}
+						>{props.stackedView ? <IconSidebarBottom/> : <IconSidebar className="standard-view"/>}</button>
+					</Fragment>
+				)}
 			</div>
 		</div>
 	);

src/common/reader.js

@@ -54,6 +54,7 @@ class Reader {
 		this._onConfirm = options.onConfirm;
 		this._onRotatePages = options.onRotatePages;
 		this._onDeletePages = options.onDeletePages;
+		this._onToggleContextPane = options.onToggleContextPane;
 		// Only used on Zotero client, sets text/plain and text/html values from Note Markdown and Note HTML translators
 		this._onSetDataTransferAnnotations = options.onSetDataTransferAnnotations;
 
@@ -139,7 +140,7 @@ class Reader {
 			sidebarOpen: options.sidebarOpen !== undefined ? options.sidebarOpen : true,
 			sidebarWidth: options.sidebarWidth !== undefined ? options.sidebarWidth : 240,
 			sidebarView: 'annotations',
-			bottomPlaceholderHeight: options.bottomPlaceholderHeight || 0,
+			bottomPlaceholderHeight: options.bottomPlaceholderHeight || null,
 			toolbarPlaceholderWidth: options.toolbarPlaceholderWidth || 0,
 			enableAddToNote: false,
 			labelPopup: null,
@@ -256,12 +257,11 @@ class Reader {
 						onRenderThumbnails={(pageIndexes) => this._primaryView._pdfThumbnails.render(pageIndexes)}
 						onSetDataTransferAnnotations={this._handleSetDataTransferAnnotations.bind(this)}
 						onOpenLink={this._onOpenLink}
-
 						onChangeFindState={this._handleFindStateChange.bind(this)}
 						onFindNext={this.findNext.bind(this)}
 						onFindPrevious={this.findPrevious.bind(this)}
 						onToggleFindPopup={this.toggleFindPopup.bind(this)}
-
+						onToggleContextPane={this._onToggleContextPane}
 						ref={this._readerRef}
 					/>
 				</ReaderContext.Provider>
@@ -435,7 +435,7 @@ class Reader {
 
 		if (init || this._state.bottomPlaceholderHeight !== previousState.bottomPlaceholderHeight) {
 			let root = document.documentElement;
-			root.style.setProperty('--bottom-placeholder-height', this._state.bottomPlaceholderHeight + 'px');
+			root.style.setProperty('--bottom-placeholder-height', (this._state.bottomPlaceholderHeight || 0) + 'px');
 		}
 
 		if (init || this._state.toolbarPlaceholderWidth !== previousState.toolbarPlaceholderWidth) {

src/common/stylesheets/components/_toolbar.scss

@@ -55,6 +55,18 @@
 	@include macOS-inactive-opacity;
 }
 
+[dir=rtl] .toolbar {
+	.sidebar-toggle {
+		transform: scaleX(-1);
+	}
+}
+
+[dir=ltr] .toolbar {
+	.context-pane-toggle .standard-view {
+		transform: scaleX(-1);
+	}
+}
+
 .divider {
 	width: 1px;
 	height: 20px;

src/index.dev.js

@@ -36,7 +36,7 @@ async function createReader() {
 		annotations: demo.annotations,
 		primaryViewState: demo.state,
 		sidebarWidth: 240,
-		bottomPlaceholderHeight: 0,
+		bottomPlaceholderHeight: null,
 		toolbarPlaceholderWidth: 0,
 		authorName: 'John',
 		showAnnotations: true,
@@ -83,6 +83,9 @@ async function createReader() {
 		},
 		onDeletePages(pageIndexes, degrees) {
 			console.log('Deleting pages', pageIndexes, degrees);
+		},
+		onToggleContextPane() {
+			console.log('Toggle context pane');
 		}
 	});
 	reader.enableAddToNote(true);