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

Merge branch 'View-Modes-Radio-Options' into View-Modes

Browse Source
This commit is contained in:
Gazook89
2024-10-12 11:06:09 -05:00
parent ba0b3e7d93 a3dbaf9e6a
commit b58b9ca8f0
10 changed files with 170 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -93,13 +93,13 @@ 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 (
<div className={`toolBar ${toolsVisible ? 'visible' : 'hidden'}`}>
<div className={`toolBar ${toolsVisible ? 'visible' : 'hidden'}`} role='toolbar'>
<button className='toggleButton' title={`${toolsVisible ? 'Hide' : 'Show'} Preview Toolbar`} onClick={()=>{setToolsVisible(!toolsVisible);}}><i className='fas fa-glasses' /></button>
{/*v=====----------------------< Zoom Controls >---------------------=====v*/}
<div className='group'>
@@ -153,13 +153,27 @@ 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'}`}
title='Single Page'
onClick={()=>setBookMode('single')}
><i className='fac single-view-alt' /></button>
<button role='radio'
id='facing-view'
className={`tool${arrangement === 'facing' && ' active'}`}
title='Facing Pages'
onClick={()=>setBookMode('facing')}
><i className='fac facing-view-alt' /></button>
<button role='radio'
id='flow-view'
className={`tool${arrangement === 'flow' && ' active'}`}
title='Flow Pages'
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} 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>

14
client/homebrew/brewRenderer/toolBar/toolBar.less
View File

@@ -34,6 +34,10 @@
align-items : center;
}
.active {
background-color: #444;
}
.anchored-box {
color: #CCCCCC;
input[type='number']{
@@ -41,6 +45,12 @@
}
}
.radio-group:has(button[role='radio']){
display: flex;
border: 1px solid #333;
height: 100%;
}
input {
position : relative;
height : 1.5em;
@@ -90,7 +100,7 @@
}
button {
box-sizing : content-box;
box-sizing : border-box;
display : flex;
align-items : center;
justify-content : center;
@@ -107,7 +117,7 @@
}
&:hover { background-color : #444444; }
&:focus { outline : 1px solid #D3D3D3; }
&:focus { border : 1px solid #D3D3D3;outline: none;}
&:disabled {
color : #777777;
background-color : unset !important;