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

unify terms to 'spreads'

Browse Source 
This commit only renames things, changes no logic.  Any mention of "book", "view", or "mode" is renamed in relation to "spreads".

The AnchoredBox.jsx file is renamed to Anchored.jsx

Extra icons are deleted, and the remaining ones are renamed.
This commit is contained in:
Gazook89
2024-10-12 23:25:14 -05:00
parent 0855c5c181
commit b33d9264d3
10 changed files with 27 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
client/components/anchoredBox.jsx → client/components/Anchored.jsx
View File

@@ -1,5 +1,5 @@
import React, { useState, useRef, forwardRef, useEffect, cloneElement, Children } from 'react'; import React, { useState, useRef, forwardRef, useEffect, cloneElement, Children } from 'react';
import './anchoredBox.less'; import './Anchored.less';
// Anchored is a wrapper component that must have as children an <AnchoredTrigger> and a <AnchoredBox> component. // Anchored is a wrapper component that must have as children an <AnchoredTrigger> and a <AnchoredBox> component.
// AnchoredTrigger must have a unique `id` prop, which is passed up to Anchored, saved in state on mount, and // AnchoredTrigger must have a unique `id` prop, which is passed up to Anchored, saved in state on mount, and

0
client/components/anchoredBox.less → client/components/Anchored.less
View File

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

@@ -3,7 +3,7 @@ const React = require('react');
const { useState, useEffect } = React; const { useState, useEffect } = React;
const _ = require('lodash'); const _ = require('lodash');
import { Anchored, AnchoredBox, AnchoredTrigger} from '../../../components/anchoredBox.jsx'; import { Anchored, AnchoredBox, AnchoredTrigger } from '../../../components/Anchored.jsx';
// import * as ZoomIcons from '../../../icons/icon-components/zoomIcons.jsx'; // import * as ZoomIcons from '../../../icons/icon-components/zoomIcons.jsx';
const MAX_ZOOM = 300; const MAX_ZOOM = 300;
@@ -13,12 +13,12 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages, onStyleC
const [zoomLevel, setZoomLevel] = useState(100); const [zoomLevel, setZoomLevel] = useState(100);
const [pageNum, setPageNum] = useState(currentPage); const [pageNum, setPageNum] = useState(currentPage);
const [arrangement, setArrangement] = useState('single'); const [spread, setSpread] = useState('single');
const [startOnRight, setStartOnRight] = useState(true); const [startOnRight, setStartOnRight] = useState(true);
const [pageShadows, setPageShadows] = useState(true); const [pageShadows, setPageShadows] = useState(true);
const [pagesStyle, setPagesStyle] = useState({}); const [pagesStyle, setPagesStyle] = useState({});
const [toolsVisible, setToolsVisible] = useState(true); const [toolsVisible, setToolsVisible] = useState(true);
const modes = ['single', 'facing', 'flow']; const spreads = ['single', 'facing', 'flow'];
useEffect(()=>{ useEffect(()=>{
onZoomChange(zoomLevel); onZoomChange(zoomLevel);
@@ -35,12 +35,12 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages, onStyleC
const pagesContainer = iframe?.contentWindow?.document.querySelector('.pages'); const pagesContainer = iframe?.contentWindow?.document.querySelector('.pages');
if(pagesContainer) { if(pagesContainer) {
modes.forEach((mode)=>pagesContainer.classList.remove(mode)); spreads.forEach((spread)=>pagesContainer.classList.remove(spread));
pagesContainer.classList.add(arrangement); pagesContainer.classList.add(spread);
['recto', 'verso'].forEach((leaf)=>pagesContainer.classList.remove(leaf)); ['recto', 'verso'].forEach((leaf)=>pagesContainer.classList.remove(leaf));
pagesContainer.classList.add(startOnRight ? 'recto' : 'verso'); pagesContainer.classList.add(startOnRight ? 'recto' : 'verso');
} }
}, [arrangement, startOnRight]); }, [spread, startOnRight]);
useEffect(()=>{ useEffect(()=>{
onStyleChange({ '.page': pageShadows ? {} : { boxShadow: 'none' } }); onStyleChange({ '.page': pageShadows ? {} : { boxShadow: 'none' } });
@@ -93,11 +93,6 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages, onStyleC
return deltaZoom; return deltaZoom;
}; };
const setBookMode = (view)=>{
// const nextMode = modes[(modes.indexOf(arrangement) + 1) % modes.length];
setArrangement(view);
};
return ( return (
<div className={`toolBar ${toolsVisible ? 'visible' : 'hidden'}`} role='toolbar'> <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> <button className='toggleButton' title={`${toolsVisible ? 'Hide' : 'Show'} Preview Toolbar`} onClick={()=>{setToolsVisible(!toolsVisible);}}><i className='fas fa-glasses' /></button>
@@ -155,27 +150,27 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages, onStyleC
<div className='group'> <div className='group'>
<div className='radio-group' role='group'> <div className='radio-group' role='group'>
<button role='radio' <button role='radio'
id='single-view' id='single-spread'
className={`tool${arrangement === 'single' && ' active'}`} className={`tool${spread === 'single' && ' active'}`}
title='Single Page' title='Single Page'
onClick={()=>setBookMode('single')} onClick={()=>setSpread('single')}
><i className='fac single-view-alt' /></button> ><i className='fac single-spread' /></button>
<button role='radio' <button role='radio'
id='facing-view' id='facing-spread'
className={`tool${arrangement === 'facing' && ' active'}`} className={`tool${spread === 'facing' && ' active'}`}
title='Facing Pages' title='Facing Pages'
onClick={()=>setBookMode('facing')} onClick={()=>setSpread('facing')}
><i className='fac facing-view-alt' /></button> ><i className='fac facing-spread' /></button>
<button role='radio' <button role='radio'
id='flow-view' id='flow-spread'
className={`tool${arrangement === 'flow' && ' active'}`} className={`tool${spread === 'flow' && ' active'}`}
title='Flow Pages' title='Flow Pages'
onClick={()=>setBookMode('flow')} onClick={()=>setSpread('flow')}
><i className='fac flow-view-alt' /></button> ><i className='fac flow-spread' /></button>
</div> </div>
<Anchored> <Anchored>
<AnchoredTrigger id='view-settings' className='tool' title='Spread options'><i className='fas fa-gear' /></AnchoredTrigger> <AnchoredTrigger id='spread-settings' className='tool' title='Spread options'><i className='fas fa-gear' /></AnchoredTrigger>
<AnchoredBox title='Options'> <AnchoredBox title='Options'>
<h1>Options</h1> <h1>Options</h1>
<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 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>
@@ -184,7 +179,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages, onStyleC
<input type='checkbox' <input type='checkbox'
onChange={()=>setStartOnRight(!startOnRight)} onChange={()=>setStartOnRight(!startOnRight)}
checked={startOnRight} checked={startOnRight}
title={arrangement !== 'facing' ? 'Switch to Facing to enable toggle.' : null} /> title={spread !== 'facing' ? 'Switch to Facing to enable toggle.' : null} />
</label> </label>
<label title='Toggle the page shadow on every page.'>Page shadows<input type='checkbox' checked={pageShadows} onChange={()=>setPageShadows(!pageShadows)} /></label> <label title='Toggle the page shadow on every page.'>Page shadows<input type='checkbox' checked={pageShadows} onChange={()=>setPageShadows(!pageShadows)} /></label>
</AnchoredBox> </AnchoredBox>

10
client/icons/FacingView.svg
View File

@@ -1,10 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(0.599577,0,0,0.562812,1.57652,20.5943)">
<path d="M78.584,16.13C78.584,15.335 78.164,14.69 77.647,14.69L30.632,14.69C30.115,14.69 29.695,15.335 29.695,16.13L29.695,88.365C29.695,89.16 30.115,89.805 30.632,89.805L77.647,89.805C78.164,89.805 78.584,89.16 78.584,88.365L78.584,16.13Z"/>
</g>
<g transform="matrix(0.599577,0,0,0.562812,33.5014,20.5943)">
<path d="M78.584,16.13C78.584,15.335 78.164,14.69 77.647,14.69L30.632,14.69C30.115,14.69 29.695,15.335 29.695,16.13L29.695,88.365C29.695,89.16 30.115,89.805 30.632,89.805L77.647,89.805C78.164,89.805 78.584,89.16 78.584,88.365L78.584,16.13Z"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 1.1 KiB

24
client/icons/FlowView.svg
View File

@@ -1,24 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(1.0781,0,0,1.0781,-3.90545,-3.90502)">
<g transform="matrix(0.556142,0,0,0.522041,-10.2271,0.807124)">
<path d="M78.584,16.13C78.584,15.335 78.164,14.69 77.647,14.69L30.632,14.69C30.115,14.69 29.695,15.335 29.695,16.13L29.695,88.365C29.695,89.16 30.115,89.805 30.632,89.805L77.647,89.805C78.164,89.805 78.584,89.16 78.584,88.365L78.584,16.13Z"/>
</g>
<g transform="matrix(0.556142,0,0,0.522041,-10.2271,44.6419)">
<path d="M78.584,16.13C78.584,15.335 78.164,14.69 77.647,14.69L30.632,14.69C30.115,14.69 29.695,15.335 29.695,16.13L29.695,88.365C29.695,89.16 30.115,89.805 30.632,89.805L77.647,89.805C78.164,89.805 78.584,89.16 78.584,88.365L78.584,16.13Z"/>
</g>
<g transform="matrix(0.556142,0,0,0.522041,19.3851,0.807124)">
<path d="M78.584,16.13C78.584,15.335 78.164,14.69 77.647,14.69L30.632,14.69C30.115,14.69 29.695,15.335 29.695,16.13L29.695,88.365C29.695,89.16 30.115,89.805 30.632,89.805L77.647,89.805C78.164,89.805 78.584,89.16 78.584,88.365L78.584,16.13Z"/>
</g>
<g transform="matrix(0.556142,0,0,0.522041,50.0089,0.807124)">
<path d="M78.584,16.13C78.584,15.335 78.164,14.69 77.647,14.69L30.632,14.69C30.115,14.69 29.695,15.335 29.695,16.13L29.695,88.365C29.695,89.16 30.115,89.805 30.632,89.805L77.647,89.805C78.164,89.805 78.584,89.16 78.584,88.365L78.584,16.13Z"/>
</g>
<g transform="matrix(0.556142,0,0,0.522041,19.3851,44.6419)">
<path d="M78.584,16.13C78.584,15.335 78.164,14.69 77.647,14.69L30.632,14.69C30.115,14.69 29.695,15.335 29.695,16.13L29.695,88.365C29.695,89.16 30.115,89.805 30.632,89.805L77.647,89.805C78.164,89.805 78.584,89.16 78.584,88.365L78.584,16.13Z"/>
</g>
<g transform="matrix(0.556142,0,0,0.522041,50.0089,44.6419)">
<path d="M78.584,16.13C78.584,15.335 78.164,14.69 77.647,14.69L30.632,14.69C30.115,14.69 29.695,15.335 29.695,16.13L29.695,88.365C29.695,89.16 30.115,89.805 30.632,89.805L77.647,89.805C78.164,89.805 78.584,89.16 78.584,88.365L78.584,16.13Z"/>
</g>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 2.5 KiB

7
client/icons/SingleView.svg
View File

@@ -1,7 +0,0 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
<g transform="matrix(0.599577,0,0,0.562812,17.539,20.5943)">
<path d="M78.584,16.13C78.584,15.335 78.164,14.69 77.647,14.69L30.632,14.69C30.115,14.69 29.695,15.335 29.695,16.13L29.695,88.365C29.695,89.16 30.115,89.805 30.632,89.805L77.647,89.805C78.164,89.805 78.584,89.16 78.584,88.365L78.584,16.13Z"/>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 777 B

21
client/icons/customIcons.less
View File

@@ -73,21 +73,12 @@
.fit-width { .fit-width {
mask-image: url('../icons/fit-width.svg'); mask-image: url('../icons/fit-width.svg');
} }
.single-view { .single-spread {
mask-image: url('../icons/SingleView.svg'); mask-image: url('../icons/single-spread.svg');
} }
.facing-view { .facing-spread {
mask-image: url('../icons/FacingView.svg'); mask-image: url('../icons/facing-spread.svg');
} }
.flow-view { .flow-spread {
mask-image: url('../icons/FlowView.svg'); mask-image: url('../icons/flow-spread.svg');
}
.single-view-alt {
mask-image: url('../icons/SingleView-alt.svg');
}
.facing-view-alt {
mask-image: url('../icons/FacingView-alt.svg');
}
.flow-view-alt {
mask-image: url('../icons/FlowView-alt.svg');
} }

0
client/icons/FacingView-alt.svg → client/icons/facing-spread.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

0
client/icons/FlowView-alt.svg → client/icons/flow-spread.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.5 KiB

0
client/icons/SingleView-alt.svg → client/icons/single-spread.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 777 B

After

Width:  |  Height:  |  Size: 777 B