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

wrap each set of toolbars into groups

Browse Source 
Allows more styling options, including flex wrapping by group rather than individual button.
This commit is contained in:
Gazook89
2024-08-19 23:14:45 -05:00
parent 37c8ea4fd7
commit 9510b4d097
1 changed files with 67 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -31,75 +31,80 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
return ( return (
<div className='toolBar'> <div className='toolBar'>
<div className='tool'> <div className='group'>
<button <div className='tool'>
onClick={()=>handleZoomChange(-20)} <button
disabled={zoomLevel <= MIN_ZOOM} onClick={()=>handleZoomChange(-20)}
> disabled={zoomLevel <= MIN_ZOOM}
<i className='fas fa-magnifying-glass-minus' /> >
</button> <i className='fas fa-magnifying-glass-minus' />
</button>
</div>
<div className='tool'>
<input
className='slider'
type='range'
name='zoom'
list='zoomLevels'
min={MIN_ZOOM}
max={MAX_ZOOM}
step='1'
value={zoomLevel}
onChange={(e)=>{setZoomLevel(parseInt(e.target.value));}}
/>
<datalist id='zoomLevels'>
<option value='100' />
</datalist>
</div>
<div className='tool'>
<button
onClick={()=>handleZoomChange(20)}
disabled={zoomLevel >= MAX_ZOOM}
>
<i className='fas fa-magnifying-glass-plus' />
</button>
</div>
</div> </div>
<div className='tool'>
<div className='group'>
<div className='tool'>
<button
className='previousPage'
onClick={()=>onPageChange(pageInput - 1)}
disabled={pageInput <= 1}
>
<i className='fas fa-arrow-left'></i>
</button>
</div>
<input <input
className='slider' type='text'
type='range' name='page'
name='zoom' inputMode='numeric'
list='zoomLevels' pattern='[0-9]'
min={MIN_ZOOM} id='pageInput'
max={MAX_ZOOM} value={pageInput}
step='1' onChange={(e)=>{
value={zoomLevel} handlePageChange(e.target.value == false ? e.target.value : parseInt(e.target.value));}}
onChange={(e)=>{setZoomLevel(parseInt(e.target.value));}} onBlur={()=>onPageChange(pageInput)}
/> />
<datalist id='zoomLevels'>
<option value='100' />
</datalist>
</div>
<div className='tool'> <span id='page-count'>/ {totalPages}</span>
<button
onClick={()=>handleZoomChange(20)}
disabled={zoomLevel >= MAX_ZOOM}
>
<i className='fas fa-magnifying-glass-plus' />
</button>
</div>
<div className='tool'> <div className='tool'>
<button <button
className='previousPage' className='nextPage'
onClick={()=>onPageChange(pageInput - 1)} // onClick={()=>{setPageInput((pageInput)=>parseInt(pageInput) + 1)}}
disabled={pageInput <= 1} onClick={()=>onPageChange(pageInput + 1)}
> disabled={pageInput >= totalPages}
<i className='fas fa-arrow-left'></i> >
</button> <i className='fas fa-arrow-right'></i>
</div> </button>
</div>
<input
type='text'
name='page'
inputMode='numeric'
pattern='[0-9]'
id='pageInput'
value={pageInput}
onChange={(e)=>{
handlePageChange(e.target.value == false ? e.target.value : parseInt(e.target.value));}}
onBlur={()=>onPageChange(pageInput)}
/>
<span id='page-count'>/ {totalPages}</span>
<div className='tool'>
<button
className='nextPage'
// onClick={()=>{setPageInput((pageInput)=>parseInt(pageInput) + 1)}}
onClick={()=>onPageChange(pageInput + 1)}
disabled={pageInput >= totalPages}
>
<i className='fas fa-arrow-right'></i>
</button>
</div> </div>
</div> </div>
); );
}; };