0
0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-05 03:42:38 +00:00

Add button to toggle Preview tools

Toggles a state variable to either visible or hidden which is used to set a related class on the toolbar.  The hiding is done with CSS, just reducing the width of the toolbar and the opacity of the tools.
This commit is contained in:
Gazook89
2024-09-04 13:54:55 -05:00
parent 321b8a0696
commit 49e072f03f
2 changed files with 29 additions and 2 deletions

View File

@@ -11,6 +11,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
const [zoomLevel, setZoomLevel] = useState(100);
const [pageNum, setPageNum] = useState(currentPage);
const [toolsVisible, setToolsVisible] = useState(true);
useEffect(()=>{
onZoomChange(zoomLevel);
@@ -66,8 +67,9 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
return deltaZoom;
};
return (
<div className='toolBar'>
return (
<div className={`toolBar ${toolsVisible ? 'visible' : 'hidden'}`}>
<button class='toggleButton' title={`${toolsVisible ? 'Hide' : 'Show'} Preview Toolbar`} onClick={()=>{setToolsVisible(!toolsVisible)}}><i className='fas fa-glasses' /></button>
{/*v=====----------------------< Zoom Controls >---------------------=====v*/}
<div className='group'>
<button