mirror of
https://github.com/naturalcrit/homebrewery.git
synced 2026-01-01 15:12:40 +00:00
initial commit
This commit is contained in:
@@ -117,6 +117,13 @@ const BrewRenderer = (props)=>{
|
|||||||
pageShadows : true
|
pageShadows : true
|
||||||
});
|
});
|
||||||
|
|
||||||
|
//useEffect to store or gather toolbar state from storage
|
||||||
|
useEffect(()=>{
|
||||||
|
const toolbarState = JSON.parse(window.localStorage.getItem('hb_toolbarState'));
|
||||||
|
console.log('toolbar state:', toolbarState);
|
||||||
|
toolbarState && setDisplayOptions(toolbarState);
|
||||||
|
}, []);
|
||||||
|
|
||||||
const [headerState, setHeaderState] = useState(false);
|
const [headerState, setHeaderState] = useState(false);
|
||||||
|
|
||||||
const mainRef = useRef(null);
|
const mainRef = useRef(null);
|
||||||
@@ -271,6 +278,7 @@ const BrewRenderer = (props)=>{
|
|||||||
|
|
||||||
const handleDisplayOptionsChange = (newDisplayOptions)=>{
|
const handleDisplayOptionsChange = (newDisplayOptions)=>{
|
||||||
setDisplayOptions(newDisplayOptions);
|
setDisplayOptions(newDisplayOptions);
|
||||||
|
localStorage.setItem('hb_toolbarState', JSON.stringify(newDisplayOptions));
|
||||||
};
|
};
|
||||||
|
|
||||||
const pagesStyle = {
|
const pagesStyle = {
|
||||||
|
|||||||
@@ -20,6 +20,11 @@ const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPa
|
|||||||
setPageNum(pageRange);
|
setPageNum(pageRange);
|
||||||
}, [visiblePages]);
|
}, [visiblePages]);
|
||||||
|
|
||||||
|
useEffect(()=>{
|
||||||
|
const visibility = localStorage.getItem('hb_toolbarVisibility');
|
||||||
|
setToolsVisible(visibility);
|
||||||
|
}, []);
|
||||||
|
|
||||||
const handleZoomButton = (zoom)=>{
|
const handleZoomButton = (zoom)=>{
|
||||||
handleOptionChange('zoomLevel', _.round(_.clamp(zoom, MIN_ZOOM, MAX_ZOOM)));
|
handleOptionChange('zoomLevel', _.round(_.clamp(zoom, MIN_ZOOM, MAX_ZOOM)));
|
||||||
};
|
};
|
||||||
@@ -77,7 +82,10 @@ const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPa
|
|||||||
return (
|
return (
|
||||||
<div id='preview-toolbar' className={`toolBar ${toolsVisible ? 'visible' : 'hidden'}`} role='toolbar'>
|
<div id='preview-toolbar' className={`toolBar ${toolsVisible ? 'visible' : 'hidden'}`} role='toolbar'>
|
||||||
<div className='toggleButton'>
|
<div className='toggleButton'>
|
||||||
<button title={`${toolsVisible ? 'Hide' : 'Show'} Preview Toolbar`} onClick={()=>{setToolsVisible(!toolsVisible);}}><i className='fas fa-glasses' /></button>
|
<button title={`${toolsVisible ? 'Hide' : 'Show'} Preview Toolbar`} onClick={()=>{
|
||||||
|
setToolsVisible(!toolsVisible);
|
||||||
|
localStorage.setItem('hb_toolbarVisibility', !toolsVisible);
|
||||||
|
}}><i className='fas fa-glasses' /></button>
|
||||||
<button title={`${headerState ? 'Hide' : 'Show'} Header Navigation`} onClick={()=>{setHeaderState(!headerState);}}><i className='fas fa-rectangle-list' /></button>
|
<button title={`${headerState ? 'Hide' : 'Show'} Header Navigation`} onClick={()=>{setHeaderState(!headerState);}}><i className='fas fa-rectangle-list' /></button>
|
||||||
</div>
|
</div>
|
||||||
{/*v=====----------------------< Zoom Controls >---------------------=====v*/}
|
{/*v=====----------------------< Zoom Controls >---------------------=====v*/}
|
||||||
@@ -167,11 +175,11 @@ const ToolBar = ({ displayOptions, onDisplayOptionsChange, visiblePages, totalPa
|
|||||||
<h1>Options</h1>
|
<h1>Options</h1>
|
||||||
<label title='Modify the horizontal space between pages.'>
|
<label title='Modify the horizontal space between pages.'>
|
||||||
Column gap
|
Column gap
|
||||||
<input type='range' min={0} max={200} defaultValue={10} className='range-input' onChange={(evt)=>handleOptionChange('columnGap', evt.target.value)} />
|
<input type='range' min={0} max={200} defaultValue={displayOptions.colGap || 10} className='range-input' onChange={(evt)=>handleOptionChange('columnGap', evt.target.value)} />
|
||||||
</label>
|
</label>
|
||||||
<label title='Modify the vertical space between rows of pages.'>
|
<label title='Modify the vertical space between rows of pages.'>
|
||||||
Row gap
|
Row gap
|
||||||
<input type='range' min={0} max={200} defaultValue={10} className='range-input' onChange={(evt)=>handleOptionChange('rowGap', evt.target.value)} />
|
<input type='range' min={0} max={200} defaultValue={displayOptions.rowGap || 10} className='range-input' onChange={(evt)=>handleOptionChange('rowGap', evt.target.value)} />
|
||||||
</label>
|
</label>
|
||||||
<label title='Start 1st page on the right side, such as if you have cover page.'>
|
<label title='Start 1st page on the right side, such as if you have cover page.'>
|
||||||
Start on right
|
Start on right
|
||||||
|
|||||||
Reference in New Issue
Block a user