Merge branch 'Fill-Pane-Buttons' into View-Modes

client/homebrew/brewRenderer/toolBar/toolBar.jsx

@@ -1,7 +1,7 @@
 require('./toolBar.less');
 const React = require('react');
 const { useState, useEffect } = React;
-const _ = require('lodash')
+const _ = require('lodash');
 
 import * as ZoomIcons from '../../../icons/icon-components/zoomIcons.jsx';
 
@@ -11,7 +11,7 @@ const MIN_ZOOM = 10;
 const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 
 	const [zoomLevel, setZoomLevel] = useState(100);
-	const [pageInput, setPageInput] = useState(currentPage);
+	const [pageNum, setPageNum] = useState(currentPage);
 	const [arrangement, setArrangement] = useState('single');
 	const modes = ['single', 'facing', 'flow'];
 
@@ -20,8 +20,8 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 	}, [zoomLevel]);
 
 	useEffect(()=>{
-		setPageInput(currentPage);
-	}, [currentPage]);
+		setPageNum(currentPage);
+	}, [currentPage]);;
 
 	// update display arrangement when arrangement state is changed.
 	useEffect(()=>{
@@ -35,17 +35,12 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 	}, [arrangement]);
 
 
-	const handleZoomChange = (delta)=>{
-		const zoomChange = _.clamp(zoomLevel + delta, MIN_ZOOM, MAX_ZOOM);
-
-		setZoomLevel(zoomChange);
+	const handleZoomButton = (delta)=>{
+		const newZoomLevel = _.round(_.clamp(zoomLevel + delta, MIN_ZOOM, MAX_ZOOM));
+		setZoomLevel(newZoomLevel);
 	};
 
-	const handlePageChange = (page)=>{
-		setPageInput(page);
-	};
-
-	const scrollToPage = (pageNumber) => {
+	const scrollToPage = (pageNumber)=>{
 		pageNumber = _.clamp(pageNumber - 1, 0, totalPages - 1);
 		const iframe = document.getElementById('BrewRenderer');
 		if(iframe && iframe.contentWindow) {
@@ -111,21 +106,21 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 				<button
 					id='zoom-to-fill'
 					className='tool'
-					onClick={()=>handleZoomChange(calculateZoom('fill'))}
+					onClick={()=>handleZoomButton(calculateZoom('fill'))}
 				>
 					<ZoomIcons.FitWidth title='Fit to Width' style={{ width: '1.5em' }} />
 				</button>
 				<button
 					id='zoom-to-fit'
 					className='tool'
-					onClick={()=>handleZoomChange(calculateZoom('fit'))}
+					onClick={()=>handleZoomButton(calculateZoom('fit'))}
 				>
 					<ZoomIcons.FitAll title='Zoom to Fit' style={{ width: '1.5em' }} />
 				</button>
 				<button
 					id='zoom-out'
 					className='tool'
-					onClick={()=>handleZoomChange(-20)}
+					onClick={()=>handleZoomButton(-20)}
 					disabled={zoomLevel <= MIN_ZOOM}
 				>
 					<i className='fas fa-magnifying-glass-minus' />
@@ -149,7 +144,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 				<button
 					id='zoom-in'
 					className='tool'
-					onClick={()=>handleZoomChange(20)}
+					onClick={()=>handleZoomButton(20)}
 					disabled={zoomLevel >= MAX_ZOOM}
 				>
 					<i className='fas fa-magnifying-glass-plus' />
@@ -170,8 +165,8 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 				<button
 					id='previous-page'
 					className='previousPage tool'
-					onClick={()=>scrollToPage(pageInput - 1)}
-					disabled={pageInput <= 1}
+					onClick={()=>scrollToPage(pageNum - 1)}
+					disabled={pageNum <= 1}
 				>
 					<i className='fas fa-arrow-left'></i>
 				</button>
@@ -184,13 +179,11 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 						name='page'
 						inputMode='numeric'
 						pattern='[0-9]'
-						value={pageInput}
-						onChange={(e)=>{
-							handlePageChange(e.target.value == false ? e.target.value : parseInt(e.target.value));}}
-						onBlur={()=>scrollToPage(pageInput)}
-						onKeyDown={(e)=>{e.key == 'Enter' ? scrollToPage(pageInput) : null;}}
+						value={pageNum}
+						onChange={(e)=>{setPageNum(parseInt(e.target.value));}}
+						onBlur={()=>scrollToPage(pageNum)}
+						onKeyDown={(e)=>{e.key == 'Enter' ? scrollToPage(pageNum) : null;}}
 					/>
-
 					<span id='page-count'>/ {totalPages}</span>
 				</div>
 
@@ -198,8 +191,8 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
 				<button
 					id='next-page'
 					className='tool'
-					onClick={()=>scrollToPage(pageInput + 1)}
-					disabled={pageInput >= totalPages}
+					onClick={()=>scrollToPage(pageNum + 1)}
+					disabled={pageNum >= totalPages}
 				>
 					<i className='fas fa-arrow-right'></i>
 				</button>

client/homebrew/brewRenderer/toolBar/toolBar.less

@@ -1,12 +1,12 @@
 .toolBar {
 	position         : absolute;
 	z-index          : 1;
+	box-sizing       : border-box;
 	display          : flex;
 	flex-wrap        : wrap;
 	gap              : 8px 30px;
 	align-items      : center;
-	justify-content  : space-around;
-	box-sizing       : border-box;
+	justify-content  : center;
 	width            : 100%;
 	height           : auto;
 	padding          : 2px 0;
@@ -15,17 +15,17 @@
 	background-color : #555555;
 
 	.group {
+		box-sizing       : border-box;
 		display          : flex;
-		gap: 0 3px;
+		gap              : 0 3px;
 		align-items      : center;
 		justify-content  : center;
-		box-sizing       : border-box;
-		height: 28px;
+		height           : 28px;
 	}
 
 	.tool {
-		display: flex;
-		align-items: center;
+		display     : flex;
+		align-items : center;
 	}
 
 	input {
@@ -35,20 +35,20 @@
 		font-family    : 'Open Sans', sans-serif;
 		color          : #000000;
 		background     : #EEEEEE;
-		border : 1px solid gray;
-		&:focus { outline : 1px solid #d3d3d3; }
+		border         : 1px solid gray;
+		&:focus { outline : 1px solid #D3D3D3; }
 
 		// `.range-input` if generic to all range inputs, or `#zoom-input` if only for zoom slider
 		&.range-input {
-			color: #D3D3D3;
-			accent-color: #d3d3d3;
-			padding: 2px 0;
+			padding      : 2px 0;
+			color        : #D3D3D3;
+			accent-color : #D3D3D3;
   
-			&::-webkit-slider-thumb, &::-moz-slider-thumb {
-				cursor           : pointer; 
-				width: 5px;
-				height: 5px;
-				outline: none;
+			&::-webkit-slider-thumb, &::-moz-slider-thumb { 
+				width            : 5px;
+				height           : 5px;
+				cursor           : pointer;
+				outline          : none;
 			}
 
 			&:hover::after {
@@ -70,9 +70,9 @@
 
 		// `.text-input` if generic to all range inputs, or `#page-input` if only for current page input
 		&#page-input {
-			width: 4ch;
-			text-align: center;
-			margin-right: 1ch;
+			width        : 4ch;
+			margin-right : 1ch;
+			text-align   : center;
 
 		}
 
@@ -80,21 +80,21 @@
 
 
 	button {
-		display     : flex;
-		align-items : center;
-		justify-content: center;
-		height           : 100%;
+		box-sizing       : content-box;
+		display          : flex;
+		align-items      : center;
+		justify-content  : center;
 		width            : auto;
 		min-width        : 46px;
+		height           : 100%;
 		padding          : 0 0px;
 		font-weight      : unset;
 		color            : inherit;
 		background-color : unset;
-		box-sizing: content-box;
 
 		&:hover { background-color : #444444; }
 
-		&:focus { outline : 1px solid #d3d3d3; }
+		&:focus { outline : 1px solid #D3D3D3; }
 
 		&:disabled {
 			color            : #777777;