f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-01-02 21:32:42 +00:00
Code Wiki Activity

Add button to toggle Preview tools

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

6
client/homebrew/brewRenderer/toolBar/toolBar.jsx
View File

@@ -11,6 +11,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
const [zoomLevel, setZoomLevel] = useState(100); const [zoomLevel, setZoomLevel] = useState(100);
const [pageNum, setPageNum] = useState(currentPage); const [pageNum, setPageNum] = useState(currentPage);
const [toolsVisible, setToolsVisible] = useState(true);
useEffect(()=>{ useEffect(()=>{
onZoomChange(zoomLevel); onZoomChange(zoomLevel);
@@ -66,8 +67,9 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
return deltaZoom; return deltaZoom;
}; };
return ( return (
<div className='toolBar'> <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*/} {/*v=====----------------------< Zoom Controls >---------------------=====v*/}
<div className='group'> <div className='group'>
<button <button

25
client/homebrew/brewRenderer/toolBar/toolBar.less
View File

@@ -15,6 +15,10 @@
font-family : 'Open Sans', sans-serif; font-family : 'Open Sans', sans-serif;
color : #CCCCCC; color : #CCCCCC;
background-color : #555555; background-color : #555555;
& > *:not(.toggleButton) {
opacity: 1;
transition: all .2s ease;
}
.group { .group {
box-sizing : border-box; box-sizing : border-box;
@@ -100,4 +104,25 @@
font-size:1.2em; font-size:1.2em;
} }
} }
&.hidden {
width: 32px;
transition: all .3s ease;
flex-wrap:nowrap;
overflow: hidden;
background-color: unset;
opacity: .5;
& > *:not(.toggleButton) {
opacity: 0;
transition: all .2s ease;
}
}
}
button.toggleButton {
z-index : 5;
position:absolute;
left: 0;
width: 32px;
min-width: unset;
} }