f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2025-12-26 03:02:40 +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

11
client/homebrew/brewRenderer/brewRenderer.jsx
View File

@@ -37,7 +37,7 @@ const BrewPage = (props)=>{
...props
};
const cleanText = props.contents; //DOMPurify.sanitize(props.contents, purifyConfig);
return <div className={props.className} id={`p${props.index + 1}`} >
return <div className={props.className} id={`p${props.index + 1}`} style={props.style}>
<div className='columnWrapper' dangerouslySetInnerHTML={{ __html: cleanText }} />
</div>;
};
@@ -67,7 +67,7 @@ const BrewRenderer = (props)=>{
isMounted : false,
visibility : 'hidden',
zoom : 100,
pagesStyle : null
previewStyles : {}
});
const mainRef = useRef(null);
@@ -118,7 +118,7 @@ const BrewRenderer = (props)=>{
} else {
pageText += `\n\n&nbsp;\n\\column\n&nbsp;`; //Artificial column break at page end to emulate column-fill:auto (until `wide` is used, when column-fill:balance will reappear)
const html = Markdown.render(pageText, index);
return <BrewPage className='page' index={index} key={index} contents={html} />;
return <BrewPage className='page' index={index} key={index} contents={html} style={ state.previewStyles['.page']} />;
}
};
@@ -177,7 +177,7 @@ const BrewRenderer = (props)=>{
const handleStyle = (newStyle)=>{
setState((prevState)=>({
...prevState,
pagesStyle : { ...prevState.pagesStyle, ...newStyle },
previewStyles : { ...prevState.previewStyles, ...newStyle },
}));
};
@@ -223,7 +223,8 @@ const BrewRenderer = (props)=>{
&&
<>
{renderStyle()}
<div className='pages' lang={`${props.lang || 'en'}`} style={{ zoom: `${state.zoom}%`, ...state.pagesStyle }}>
{console.log(state.previewStyles)}
<div className='pages' lang={`${props.lang || 'en'}`} style={{ zoom: `${state.zoom}%`, ...state.previewStyles['.pages'] }}>
{renderPages()}
</div>
</>

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>