Merge branch 'master' into dependabot/npm_and_yarn/googleapis/drive-12.0.0

client/homebrew/brewRenderer/brewRenderer.jsx

@@ -116,6 +116,13 @@ const BrewRenderer = (props)=>{
 		pageShadows  : true
 	});
 
+	//useEffect to store or gather toolbar state from storage
+	useEffect(()=>{
+		const toolbarState = JSON.parse(window.localStorage.getItem('hb_toolbarState'));
+		console.log('toolbar state:', toolbarState);
+		toolbarState &&	setDisplayOptions(toolbarState);
+	}, []);
+
 	const [headerState, setHeaderState] = useState(false);
 
 	const mainRef  = useRef(null);
@@ -270,6 +277,7 @@ const BrewRenderer = (props)=>{
 
 	const handleDisplayOptionsChange = (newDisplayOptions)=>{
 		setDisplayOptions(newDisplayOptions);
+		localStorage.setItem('hb_toolbarState', JSON.stringify(newDisplayOptions));
 	};
 
 	const pagesStyle = {

client/homebrew/brewRenderer/toolBar/toolBar.jsx

@@ -20,6 +20,11 @@ const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPa
 		setPageNum(pageRange);
 	}, [visiblePages]);
 
+	useEffect(()=>{
+		const visibility = localStorage.getItem('hb_toolbarVisibility') === 'true';
+		setToolsVisible(visibility);
+	}, []);
+
 	const handleZoomButton = (zoom)=>{
 		handleOptionChange('zoomLevel', _.round(_.clamp(zoom, MIN_ZOOM, MAX_ZOOM)));
 	};
@@ -55,15 +60,30 @@ const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPa
 			// find widest page, in case pages are different widths, so that the zoom is adapted to not cut the widest page off screen.
 			const widestPage = _.maxBy([...pages], 'offsetWidth').offsetWidth;
 
-			desiredZoom = (iframeWidth / widestPage) * 100;
+			if(displayOptions.spread === 'facing')
+				desiredZoom = (iframeWidth / ((widestPage * 2) + parseInt(displayOptions.columnGap))) * 100;
+			else
+				desiredZoom = (iframeWidth / (widestPage + 20)) * 100;
 
 		} else if(mode == 'fit'){
-			let minDimRatio;
 			// find the page with the largest single dim (height or width) so that zoom can be adapted to fit it.
-			if(displayOptions.spread === 'facing')
+			let minDimRatio;
-				minDimRatio = [...pages].reduce((minRatio, page)=>Math.min(minRatio, iframeWidth / page.offsetWidth / 2), Infinity);    // if 'facing' spread, fit two pages in view
+			if(displayOptions.spread === 'active')
+				minDimRatio = [...pages].reduce(
+					(minRatio, page)=>Math.min(minRatio,
+						iframeWidth / page.offsetWidth,
+						iframeHeight / page.offsetHeight
+					),
+					Infinity
+				);
 			else
-				minDimRatio = [...pages].reduce((minRatio, page)=>Math.min(minRatio, iframeWidth / page.offsetWidth, iframeHeight / page.offsetHeight), Infinity);
+				minDimRatio = [...pages].reduce(
+					(minRatio, page)=>Math.min(minRatio,
+						iframeWidth / ((page.offsetWidth * 2) + parseInt(displayOptions.columnGap)),
+						iframeHeight / page.offsetHeight
+					),
+					Infinity
+				);
 
 			desiredZoom = minDimRatio * 100;
 		}
@@ -77,7 +97,10 @@ const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPa
 	return (
 		<div id='preview-toolbar' className={`toolBar ${toolsVisible ? 'visible' : 'hidden'}`} role='toolbar'>
 			<div className='toggleButton'>
-				<button title={`${toolsVisible ? 'Hide' : 'Show'} Preview Toolbar`} onClick={()=>{setToolsVisible(!toolsVisible);}}><i className='fas fa-glasses' /></button>
+				<button title={`${toolsVisible ? 'Hide' : 'Show'} Preview Toolbar`} onClick={()=>{
+					setToolsVisible(!toolsVisible);
+					localStorage.setItem('hb_toolbarVisibility', !toolsVisible);
+				}}><i className='fas fa-glasses' /></button>
 				<button title={`${headerState ? 'Hide' : 'Show'} Header Navigation`} onClick={()=>{setHeaderState(!headerState);}}><i className='fas fa-rectangle-list' /></button>
 			</div>
 			{/*v=====----------------------< Zoom Controls >---------------------=====v*/}
@@ -167,11 +190,11 @@ const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPa
 						<h1>Options</h1>
 						<label title='Modify the horizontal space between pages.'>
 							Column gap
-							<input type='range' min={0} max={200} defaultValue={10} className='range-input' onChange={(evt)=>handleOptionChange('columnGap', evt.target.value)} />
+							<input type='range' min={0} max={200} defaultValue={displayOptions.columnGap || 10} className='range-input' onChange={(evt)=>handleOptionChange('columnGap', evt.target.value)} />
 						</label>
 						<label title='Modify the vertical space between rows of pages.'>
 							Row gap
-							<input type='range' min={0} max={200} defaultValue={10} className='range-input' onChange={(evt)=>handleOptionChange('rowGap', evt.target.value)} />
+							<input type='range' min={0} max={200} defaultValue={displayOptions.rowGap || 10} className='range-input' onChange={(evt)=>handleOptionChange('rowGap', evt.target.value)} />
 						</label>
 						<label title='Start 1st page on the right side, such as if you have cover page.'>
 							Start on right

client/homebrew/brewRenderer/toolBar/toolBar.less

@@ -6,12 +6,12 @@
 	box-sizing       : border-box;
 	display          : flex;
 	flex-wrap        : wrap;
-	gap              : 8px 30px;
+	gap              : 8px 20px;
 	align-items      : center;
 	justify-content  : center;
 	width            : 100%;
 	height           : auto;
-	padding          : 2px 0;
+	padding          : 2px 10px 2px 90px;
 	font-family      : 'Open Sans', sans-serif;
 	font-size        : 13px;
 	color            : #CCCCCC;
@@ -153,7 +153,7 @@
 		align-items      : center;
 		justify-content  : center;
 		width            : auto;
-		min-width        : 46px;
+		min-width        : 40px;
 		height           : 100%;
 		&:hover { background-color : #444444; }
 		&:focus {outline : none; border  : 1px solid #D3D3D3;}
@@ -169,7 +169,7 @@
 		width            : 92px;
 		overflow         : hidden;
 		background-color : unset;
-		opacity          : 0.5;
+		opacity          : 0.7;
 		transition       : all 0.3s ease;
 		& > *:not(.toggleButton) {
 			opacity    : 0;
@@ -183,7 +183,10 @@
 	left      : 0;
 	z-index   : 5;
 	display   : flex;
-	width     : 32px;
-	min-width : unset;
 	height    : 100%;
+
+	button i {
+		filter: drop-shadow(0 0 2px black) drop-shadow(0 0 1px black);
+
+	}
 }

client/homebrew/editor/editor.less

@@ -110,6 +110,7 @@
 
 }
 
-@container editor (width < 553px) {
+@container editor (width < 683px) {
 	.editor .codeEditor .CodeMirror { height : calc(100% - 51px);}
+	.homePage .editor .codeEditor .CodeMirror { height : calc(100% - 25px);}
 }