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

change view mode toggles to indiv buttons

Browse Source 
Rather than a single button with three states, it is three buttons.  Went with buttons with `role='radio'` rather than true radios mostly because that is what Radix does.
This commit is contained in:
Gazook89
2024-10-11 22:06:41 -05:00
parent 6cabdc0a67
commit 395f2d16fa
2 changed files with 33 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -88,9 +88,9 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages, onStyleC
return deltaZoom;
};
const setBookMode = ()=>{
const nextMode = modes[(modes.indexOf(arrangement) + 1) % modes.length];
setArrangement(nextMode);
const setBookMode = (view)=>{
// const nextMode = modes[(modes.indexOf(arrangement) + 1) % modes.length];
setArrangement(view);
};
return (
@@ -148,13 +148,24 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages, onStyleC
{/*v=====----------------------< Page Controls >---------------------=====v*/}
<div className='group'>
<button
id='book-mode'
className='tool'
onClick={()=>setBookMode()}
>
{arrangement}
</button>
<div className='radio-group' role='group'>
<button role='radio'
id='single-view'
className={`tool${arrangement === 'single' && ' active'}`}
onClick={()=>setBookMode('single')}
><i className='fac single-view-alt' /></button>
<button role='radio'
id='facing-view'
className={`tool${arrangement === 'facing' && ' active'}`}
onClick={()=>setBookMode('facing')}
><i className='fac facing-view-alt' /></button>
<button role='radio'
id='flow-view'
className={`tool${arrangement === 'flow' && ' active'}`}
onClick={()=>setBookMode('flow')}
><i className='fac flow-view-alt' /></button>
</div>
<AnchoredBox id='view-mode-options' className='tool' title='Options'>
<label title='Modify the horizontal space between pages.'>Column gap<input type='range' min={0} max={200} className='range-input' onChange={(evt)=>onStyleChange({ columnGap: `${evt.target.value}px` })} /></label>
<label title='Modify the vertical space between rows of pages.'>Row gap<input type='range' min={0} max={200} className='range-input' onChange={(evt)=>onStyleChange({ rowGap: `${evt.target.value}px` })} /></label>