diff --git a/client/components/anchoredBox.jsx b/client/components/Anchored.jsx similarity index 99% rename from client/components/anchoredBox.jsx rename to client/components/Anchored.jsx index 2f1735ebb..8d6d3327a 100644 --- a/client/components/anchoredBox.jsx +++ b/client/components/Anchored.jsx @@ -1,5 +1,5 @@ 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 and a component. // AnchoredTrigger must have a unique `id` prop, which is passed up to Anchored, saved in state on mount, and diff --git a/client/components/anchoredBox.less b/client/components/Anchored.less similarity index 100% rename from client/components/anchoredBox.less rename to client/components/Anchored.less diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.jsx b/client/homebrew/brewRenderer/toolBar/toolBar.jsx index bab33433f..f86a9ad7f 100644 --- a/client/homebrew/brewRenderer/toolBar/toolBar.jsx +++ b/client/homebrew/brewRenderer/toolBar/toolBar.jsx @@ -3,7 +3,7 @@ const React = require('react'); const { useState, useEffect } = React; 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'; const MAX_ZOOM = 300; @@ -13,12 +13,12 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages, onStyleC const [zoomLevel, setZoomLevel] = useState(100); const [pageNum, setPageNum] = useState(currentPage); - const [arrangement, setArrangement] = useState('single'); + const [spread, setSpread] = 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']; + const spreads = ['single', 'facing', 'flow']; useEffect(()=>{ onZoomChange(zoomLevel); @@ -35,12 +35,12 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages, onStyleC const pagesContainer = iframe?.contentWindow?.document.querySelector('.pages'); if(pagesContainer) { - modes.forEach((mode)=>pagesContainer.classList.remove(mode)); - pagesContainer.classList.add(arrangement); + spreads.forEach((spread)=>pagesContainer.classList.remove(spread)); + pagesContainer.classList.add(spread); ['recto', 'verso'].forEach((leaf)=>pagesContainer.classList.remove(leaf)); pagesContainer.classList.add(startOnRight ? 'recto' : 'verso'); } - }, [arrangement, startOnRight]); + }, [spread, startOnRight]); useEffect(()=>{ onStyleChange({ '.page': pageShadows ? {} : { boxShadow: 'none' } }); @@ -93,11 +93,6 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages, onStyleC return deltaZoom; }; - const setBookMode = (view)=>{ - // const nextMode = modes[(modes.indexOf(arrangement) + 1) % modes.length]; - setArrangement(view); - }; - return (
@@ -155,27 +150,27 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages, onStyleC
+ onClick={()=>setSpread('single')} + > + onClick={()=>setSpread('facing')} + > + onClick={()=>setSpread('flow')} + >
- +

Options

@@ -184,7 +179,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages, onStyleC setStartOnRight(!startOnRight)} checked={startOnRight} - title={arrangement !== 'facing' ? 'Switch to Facing to enable toggle.' : null} /> + title={spread !== 'facing' ? 'Switch to Facing to enable toggle.' : null} /> diff --git a/client/icons/FacingView.svg b/client/icons/FacingView.svg deleted file mode 100644 index cc97162ac..000000000 --- a/client/icons/FacingView.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/client/icons/FlowView.svg b/client/icons/FlowView.svg deleted file mode 100644 index a1c8249ca..000000000 --- a/client/icons/FlowView.svg +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/client/icons/SingleView.svg b/client/icons/SingleView.svg deleted file mode 100644 index c885529ab..000000000 --- a/client/icons/SingleView.svg +++ /dev/null @@ -1,7 +0,0 @@ - - - - - - - diff --git a/client/icons/customIcons.less b/client/icons/customIcons.less index 4ba0c1a53..1c8d1bd47 100644 --- a/client/icons/customIcons.less +++ b/client/icons/customIcons.less @@ -73,21 +73,12 @@ .fit-width { mask-image: url('../icons/fit-width.svg'); } -.single-view { - mask-image: url('../icons/SingleView.svg'); +.single-spread { + mask-image: url('../icons/single-spread.svg'); } -.facing-view { - mask-image: url('../icons/FacingView.svg'); +.facing-spread { + mask-image: url('../icons/facing-spread.svg'); } -.flow-view { - mask-image: url('../icons/FlowView.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'); +.flow-spread { + mask-image: url('../icons/flow-spread.svg'); } diff --git a/client/icons/FacingView-alt.svg b/client/icons/facing-spread.svg similarity index 100% rename from client/icons/FacingView-alt.svg rename to client/icons/facing-spread.svg diff --git a/client/icons/FlowView-alt.svg b/client/icons/flow-spread.svg similarity index 100% rename from client/icons/FlowView-alt.svg rename to client/icons/flow-spread.svg diff --git a/client/icons/SingleView-alt.svg b/client/icons/single-spread.svg similarity index 100% rename from client/icons/SingleView-alt.svg rename to client/icons/single-spread.svg