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:
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user