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

Add toggle for Page Shadows

Browse Source 
Reworks the pagesStyles to a broader object previewStyles.  This new object has this structure:

```
{
  targetElement : { cssProperty: value }
}
```
This commit is contained in:
Gazook89
2024-10-12 11:05:23 -05:00
parent 6fca21b6ed
commit ba0b3e7d93
2 changed files with 14 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -15,6 +15,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages, onStyleC
const [pageNum, setPageNum] = useState(currentPage);
const [arrangement, setArrangement] = useState('single');
const [startOnRight, setStartOnRight] = useState(true);
const [pageShadows, setPageShadows] = useState(true);
const [pagesStyle, setPagesStyle] = useState({});
const [toolsVisible, setToolsVisible] = useState(true);
const modes = ['single', 'facing', 'flow'];
@@ -41,6 +42,10 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages, onStyleC
}
}, [arrangement, startOnRight]);
useEffect(()=>{
onStyleChange({ '.page': pageShadows ? {} : { boxShadow: 'none' } });
}, [pageShadows]);
const handleZoomButton = (zoom)=>{
setZoomLevel(_.round(_.clamp(zoom, MIN_ZOOM, MAX_ZOOM)));
@@ -156,17 +161,15 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages, onStyleC
{arrangement}
</button>
<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} defaultValue={10} 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} defaultValue={10} className='range-input' onChange={(evt)=>onStyleChange({ rowGap: `${evt.target.value}px` })} /></label>
<h2>Facing</h2>
<label title='Modify the horizontal space between pages.'>Column gap<input type='range' min={0} max={200} defaultValue={10} className='range-input' onChange={(evt)=>onStyleChange({ '.pages': { 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} defaultValue={10} className='range-input' onChange={(evt)=>onStyleChange({ '.pages': { rowGap: `${evt.target.value}px` } })} /></label>
<label title='Start 1st page on the right side, such as if you have cover page.'>Start on right
<input type='checkbox'
onChange={()=>setStartOnRight(!startOnRight)}
checked={startOnRight}
disabled={arrangement !== 'facing' ? true : false}
title={arrangement !== 'facing' ? 'Switch to Facing to enable toggle.' : null} />
</label>
<label title='Remove the page shadow from every page.'>Page shadow<input type='checkbox' checked={pageShadows} onChange={()=>setPageShadows(!pageShadows)} /></label>
</AnchoredBox>
</div>