From 375c54016cc24c5121d0d2ca1046cc6ee71f9db4 Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Fri, 23 Aug 2024 00:32:30 -0500 Subject: [PATCH 01/33] Get basic function worked out Adds `setBookMode()` which toggles a className on `.pages`. The `.book-mode` class sets display to grid, and the first child/page to start at the second slot of the book arrangement. --- client/homebrew/brewRenderer/brewRenderer.less | 8 ++++++++ .../homebrew/brewRenderer/toolBar/toolBar.jsx | 18 ++++++++++++++++++ 2 files changed, 26 insertions(+) diff --git a/client/homebrew/brewRenderer/brewRenderer.less b/client/homebrew/brewRenderer/brewRenderer.less index 83834eddb..3be34caad 100644 --- a/client/homebrew/brewRenderer/brewRenderer.less +++ b/client/homebrew/brewRenderer/brewRenderer.less @@ -8,6 +8,14 @@ :where(.pages) { margin : 30px 0px; + &.book-mode { + display: grid; + grid-template-columns: repeat(2, auto); + grid-template-rows: repeat(3, auto); + gap: 10px 10px; + justify-content: center; + } + & > :where(.page) { width : 215.9mm; height : 279.4mm; diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.jsx b/client/homebrew/brewRenderer/toolBar/toolBar.jsx index 07d6cfb70..7c3c8e68e 100644 --- a/client/homebrew/brewRenderer/toolBar/toolBar.jsx +++ b/client/homebrew/brewRenderer/toolBar/toolBar.jsx @@ -12,6 +12,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{ const [zoomLevel, setZoomLevel] = useState(100); const [pageInput, setPageInput] = useState(currentPage); + const [arrangement, setArrangement] = useState('single'); useEffect(()=>{ onZoomChange(zoomLevel); @@ -86,6 +87,13 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{ return deltaZoom; }; + const setBookMode = ()=>{ + const iframe = document.getElementById('BrewRenderer'); + const pagesContainer = iframe.contentWindow.document.getElementsByClassName('pages')[0]; + pagesContainer.classList.toggle('book-mode'); + pagesContainer.firstChild.style.gridColumnStart = '2' ; + }; + return (
@@ -137,6 +145,16 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{
+
+ +
+
+
+

{props.title}

+ {children} +
+ + ); +}; + +export default AnchoredBox; diff --git a/client/components/anchoredBox.less b/client/components/anchoredBox.less new file mode 100644 index 000000000..0f0042ee1 --- /dev/null +++ b/client/components/anchoredBox.less @@ -0,0 +1,57 @@ +.anchored-trigger { + anchor-name: --view-settings; + &.active { + background-color: #444444; + } + +} +.anchored-box { + position-anchor: --view-settings; + position:absolute; + inset-block-start: anchor(bottom); + justify-self: anchor-center; + visibility: hidden; + &.active { + visibility: visible; + } + padding : 15px; + color : white; + background-color : #555555; + border-radius : 5px; + font-size : .8em; + margin-top : 10px; + + h1 { + border-bottom: 1px solid currentColor; + margin-bottom: 0.5em; + padding-bottom: 0.3em; + } + + h2 { + color: lightgray; + border-bottom: 1px solid currentColor; + margin: 1em 0 0.5em 0; + padding-bottom: 0.3em; + } + + label { + display: flex; + align-items: center; + justify-content: space-between; + gap: 6px; + + } + + &:before { + content: ""; + width: 0px; + height: 0px; + position: absolute; + border: 10px solid transparent; + border-bottom: 10px solid #555555; + left: 50%; + transform: translateX(-50%); + top: -20px; + pointer-events: none; + } +} \ No newline at end of file diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx index 818445714..7b3bb5ad5 100644 --- a/client/homebrew/brewRenderer/brewRenderer.jsx +++ b/client/homebrew/brewRenderer/brewRenderer.jsx @@ -67,7 +67,8 @@ const BrewRenderer = (props)=>{ height : PAGE_HEIGHT, isMounted : false, visibility : 'hidden', - zoom : 100 + zoom : 100, + pagesStyle : null }); const mainRef = useRef(null); @@ -187,6 +188,13 @@ const BrewRenderer = (props)=>{ })); }; + const handleStyle = (newStyle)=>{ + setState((prevState)=>({ + ...prevState, + pagesStyle : { ...prevState.pagesStyle, ...newStyle }, + })); + }; + return ( <> {/*render dummy page while iFrame is mounting.*/} @@ -204,7 +212,7 @@ const BrewRenderer = (props)=>{
- + {/*render in iFrame so broken code doesn't crash the site.*/} { && <> {renderStyle()} -
+
{renderPages()}
diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.jsx b/client/homebrew/brewRenderer/toolBar/toolBar.jsx index 58071320e..af4d906c0 100644 --- a/client/homebrew/brewRenderer/toolBar/toolBar.jsx +++ b/client/homebrew/brewRenderer/toolBar/toolBar.jsx @@ -3,16 +3,19 @@ const React = require('react'); const { useState, useEffect } = React; const _ = require('lodash'); +import AnchoredBox from '../../../components/anchoredBox.jsx'; +// import * as ZoomIcons from '../../../icons/icon-components/zoomIcons.jsx'; const MAX_ZOOM = 300; const MIN_ZOOM = 10; -const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{ +const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages, onStyleChange })=>{ const [zoomLevel, setZoomLevel] = useState(100); const [pageNum, setPageNum] = useState(currentPage); const [arrangement, setArrangement] = useState('single'); const [startOnRight, setStartOnRight] = useState(true); + const [pagesStyle, setPagesStyle] = useState({}); const [toolsVisible, setToolsVisible] = useState(true); const modes = ['single', 'facing', 'flow']; @@ -25,6 +28,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{ }, [currentPage]);; // update display arrangement when arrangement state is changed. + // todo: do this the 'react' way, without querying the dom. useEffect(()=>{ const iframe = document.getElementById('BrewRenderer'); const pagesContainer = iframe?.contentWindow?.document.querySelector('.pages'); @@ -35,7 +39,6 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{ ['recto', 'verso'].forEach((leaf)=>pagesContainer.classList.remove(leaf)); pagesContainer.classList.add(startOnRight ? 'recto' : 'verso'); } - }, [arrangement]); }, [arrangement, startOnRight]); @@ -152,6 +155,19 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages })=>{ > {arrangement} + + + + +

Facing

+ +
diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.less b/client/homebrew/brewRenderer/toolBar/toolBar.less index e26197462..782730e54 100644 --- a/client/homebrew/brewRenderer/toolBar/toolBar.less +++ b/client/homebrew/brewRenderer/toolBar/toolBar.less @@ -34,6 +34,13 @@ align-items : center; } + .anchored-box { + color: #CCCCCC; + input[type='number']{ + width: 4ch; + } + } + input { position : relative; height : 1.5em; From 68c75fbfd2b7016446dd25b0e9ef388ed5729205 Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Sun, 6 Oct 2024 22:16:46 -0500 Subject: [PATCH 11/33] adjust CSS to support Firefox Set's a non-ideal but functional css style for the box when using Firefox so the box is at least visible. --- client/components/anchoredBox.less | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/client/components/anchoredBox.less b/client/components/anchoredBox.less index 0f0042ee1..153cf84a6 100644 --- a/client/components/anchoredBox.less +++ b/client/components/anchoredBox.less @@ -1,14 +1,19 @@ .anchored-trigger { - anchor-name: --view-settings; + @supports (anchor-name: --view-settings){ + anchor-name: --view-settings; + } &.active { background-color: #444444; } } .anchored-box { - position-anchor: --view-settings; position:absolute; - inset-block-start: anchor(bottom); + top: 30px; + @supports (position-anchor: --view-settings){ + position-anchor: --view-settings; + inset-block-start: anchor(bottom); + } justify-self: anchor-center; visibility: hidden; &.active { From 9c4b936ddd4e65308ef981ac5dc63b7048693c14 Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Fri, 11 Oct 2024 13:50:40 -0500 Subject: [PATCH 12/33] bump node to avoid experimental flag issues from another merge --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index f8007c608..0d9e751da 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "version": "3.15.0", "engines": { "npm": "^10.2.x", - "node": "^20.17.x" + "node": "^20.18.x" }, "repository": { "type": "git", From 73504a33866a130fa938f4ed41f43cac834edb30 Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Fri, 11 Oct 2024 13:51:06 -0500 Subject: [PATCH 13/33] Setting a padding-top to avoid pages hugging toolbar --- client/homebrew/brewRenderer/brewRenderer.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/homebrew/brewRenderer/brewRenderer.less b/client/homebrew/brewRenderer/brewRenderer.less index c5f840632..446e32464 100644 --- a/client/homebrew/brewRenderer/brewRenderer.less +++ b/client/homebrew/brewRenderer/brewRenderer.less @@ -3,7 +3,7 @@ .brewRenderer { overflow-y : scroll; will-change : transform; - padding-top : 30px; + padding-top : 60px; height : 100vh; &:has(.facing, .flow) { padding : 60px 30px; From e80588b234b48f4634bbfb6cb54f73678ffc7092 Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Fri, 11 Oct 2024 13:51:41 -0500 Subject: [PATCH 14/33] Add icons --- client/icons/FacingView.svg | 10 ++++++++++ client/icons/FlowView.svg | 24 ++++++++++++++++++++++++ client/icons/SingleView.svg | 7 +++++++ client/icons/customIcons.less | 10 ++++++++-- 4 files changed, 49 insertions(+), 2 deletions(-) create mode 100644 client/icons/FacingView.svg create mode 100644 client/icons/FlowView.svg create mode 100644 client/icons/SingleView.svg diff --git a/client/icons/FacingView.svg b/client/icons/FacingView.svg new file mode 100644 index 000000000..cc97162ac --- /dev/null +++ b/client/icons/FacingView.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/client/icons/FlowView.svg b/client/icons/FlowView.svg new file mode 100644 index 000000000..a1c8249ca --- /dev/null +++ b/client/icons/FlowView.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/client/icons/SingleView.svg b/client/icons/SingleView.svg new file mode 100644 index 000000000..c885529ab --- /dev/null +++ b/client/icons/SingleView.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/client/icons/customIcons.less b/client/icons/customIcons.less index 0d462833d..ed32129cf 100644 --- a/client/icons/customIcons.less +++ b/client/icons/customIcons.less @@ -70,6 +70,12 @@ .zoom-to-fit { mask-image: url('../icons/zoom-to-fit.svg'); } -.fit-width { - mask-image: url('../icons/fit-width.svg'); +.single-view { + mask-image: url('../icons/SingleView.svg'); +} +.facing-view { + mask-image: url('../icons/FacingView.svg'); +} +.flow-view { + mask-image: url('../icons/FlowView.svg'); } From 6cabdc0a67a6fe7cfa9dc1412df8684d6e2a68bf Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Fri, 11 Oct 2024 22:05:18 -0500 Subject: [PATCH 15/33] add alternative icons in the `-alt` icons have better sizing/readability than the originals. The originals likely will be removed. Also adds back in 'fit-width' icon which was mistakenly overwritten earlier. --- client/icons/FacingView-alt.svg | 10 ++++++++++ client/icons/FlowView-alt.svg | 24 ++++++++++++++++++++++++ client/icons/SingleView-alt.svg | 7 +++++++ client/icons/customIcons.less | 12 ++++++++++++ 4 files changed, 53 insertions(+) create mode 100644 client/icons/FacingView-alt.svg create mode 100644 client/icons/FlowView-alt.svg create mode 100644 client/icons/SingleView-alt.svg diff --git a/client/icons/FacingView-alt.svg b/client/icons/FacingView-alt.svg new file mode 100644 index 000000000..fbff1c948 --- /dev/null +++ b/client/icons/FacingView-alt.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/client/icons/FlowView-alt.svg b/client/icons/FlowView-alt.svg new file mode 100644 index 000000000..28193cb0b --- /dev/null +++ b/client/icons/FlowView-alt.svg @@ -0,0 +1,24 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/client/icons/SingleView-alt.svg b/client/icons/SingleView-alt.svg new file mode 100644 index 000000000..06396e589 --- /dev/null +++ b/client/icons/SingleView-alt.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/client/icons/customIcons.less b/client/icons/customIcons.less index ed32129cf..4ba0c1a53 100644 --- a/client/icons/customIcons.less +++ b/client/icons/customIcons.less @@ -70,6 +70,9 @@ .zoom-to-fit { mask-image: url('../icons/zoom-to-fit.svg'); } +.fit-width { + mask-image: url('../icons/fit-width.svg'); +} .single-view { mask-image: url('../icons/SingleView.svg'); } @@ -79,3 +82,12 @@ .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'); +} From 395f2d16fad62e9e73f83ad123675c74e97697e8 Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Fri, 11 Oct 2024 22:06:41 -0500 Subject: [PATCH 16/33] change view mode toggles to indiv buttons Rather than a single button with three states, it is three buttons. Went with buttons with `role='radio'` rather than true radios mostly because that is what Radix does. --- .../homebrew/brewRenderer/toolBar/toolBar.jsx | 31 +++++++++++++------ .../brewRenderer/toolBar/toolBar.less | 14 +++++++-- 2 files changed, 33 insertions(+), 12 deletions(-) diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.jsx b/client/homebrew/brewRenderer/toolBar/toolBar.jsx index af4d906c0..66fd46adc 100644 --- a/client/homebrew/brewRenderer/toolBar/toolBar.jsx +++ b/client/homebrew/brewRenderer/toolBar/toolBar.jsx @@ -88,9 +88,9 @@ 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 ( @@ -148,13 +148,24 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages, onStyleC {/*v=====----------------------< Page Controls >---------------------=====v*/}
- +
+ + + + +
diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.less b/client/homebrew/brewRenderer/toolBar/toolBar.less index 782730e54..2dc5e3097 100644 --- a/client/homebrew/brewRenderer/toolBar/toolBar.less +++ b/client/homebrew/brewRenderer/toolBar/toolBar.less @@ -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; From 835305bcf6f16595c829628553f8c402a5155dfe Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Fri, 11 Oct 2024 22:32:53 -0500 Subject: [PATCH 17/33] Add a title to each button add a role to the toolbr. --- client/homebrew/brewRenderer/toolBar/toolBar.jsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.jsx b/client/homebrew/brewRenderer/toolBar/toolBar.jsx index 66fd46adc..1d78c00ad 100644 --- a/client/homebrew/brewRenderer/toolBar/toolBar.jsx +++ b/client/homebrew/brewRenderer/toolBar/toolBar.jsx @@ -94,7 +94,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages, onStyleC }; return ( -
+
{/*v=====----------------------< Zoom Controls >---------------------=====v*/}
@@ -152,16 +152,19 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages, onStyleC From a3dbaf9e6a38d1e367fcea9aad95f8a3df5e7ba4 Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Fri, 11 Oct 2024 22:34:40 -0500 Subject: [PATCH 18/33] refactor anchoredBox to handle focus Refactoring the AnchoredBox component because I wanted to set focus on the trigger button when the expanded box was closed. Wrapping the trigger into it's own component, with forwardRef, allows for passing the `ref` to the actual DOM node. Then the `.focus()` method will work on it. --- client/components/anchoredBox.jsx | 44 +++++++++++++++++++++++-------- 1 file changed, 33 insertions(+), 11 deletions(-) diff --git a/client/components/anchoredBox.jsx b/client/components/anchoredBox.jsx index c7d79d2a1..7978e44d4 100644 --- a/client/components/anchoredBox.jsx +++ b/client/components/anchoredBox.jsx @@ -1,5 +1,5 @@ -require('./anchoredBox.less'); -import React, { useState, useRef, useEffect } from 'react'; +import React, { useState, useRef, useEffect, forwardRef } from 'react'; +import './anchoredBox.less'; const AnchoredBox = ({ anchorPoint = 'center', className, children, ...props })=>{ const [visible, setVisible] = useState(false); @@ -8,10 +8,12 @@ const AnchoredBox = ({ anchorPoint = 'center', className, children, ...props })= useEffect(()=>{ const handleClickOutside = (evt)=>{ - if(boxRef.current && - !boxRef.current.contains(evt.target) && - triggerRef.current && - !triggerRef.current.contains(evt.target)){ + if( + boxRef.current && + !boxRef.current.contains(evt.target) && + triggerRef.current && + !triggerRef.current.contains(evt.target) + ) { setVisible(false); } }; @@ -33,18 +35,32 @@ const AnchoredBox = ({ anchorPoint = 'center', className, children, ...props })= iframe.contentWindow.document.removeEventListener('click', handleClickOutside); } }; - }, []); // Empty dependency array to run effect on mount only + }, []); const handleClick = ()=>{ setVisible(!visible); + triggerRef.current?.focus(); + }; + + const handleKeyDown = (evt)=>{ + if(evt.key === 'Escape') { + setVisible(false); + triggerRef.current?.focus(); + } }; return ( <> - -
+ +
handleKeyDown(evt)} + >

{props.title}

{children}
@@ -52,4 +68,10 @@ const AnchoredBox = ({ anchorPoint = 'center', className, children, ...props })= ); }; +const TriggerButton = forwardRef((props, ref)=>( + +)); + export default AnchoredBox; From 6fca21b6ed9109995364df63047bf884107ce208 Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Fri, 11 Oct 2024 22:53:38 -0500 Subject: [PATCH 19/33] set defaultValue of gap sliders defaultValue matches the normal styled values of the gap property on the .pages element. removed the "tooltip" that showed the current value from the range sliders inside the anchoredbox (the gap sliders). --- client/homebrew/brewRenderer/toolBar/toolBar.jsx | 6 +++--- client/homebrew/brewRenderer/toolBar/toolBar.less | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.jsx b/client/homebrew/brewRenderer/toolBar/toolBar.jsx index af4d906c0..b137b18c3 100644 --- a/client/homebrew/brewRenderer/toolBar/toolBar.jsx +++ b/client/homebrew/brewRenderer/toolBar/toolBar.jsx @@ -122,7 +122,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages, onStyleC - - + +

Facing

From 0855c5c1817ff94956e278704e972bc373fa9c28 Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Sat, 12 Oct 2024 23:12:37 -0500 Subject: [PATCH 24/33] remove errant console.log --- client/homebrew/brewRenderer/brewRenderer.jsx | 1 - 1 file changed, 1 deletion(-) diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx index 34d16d09e..2d2616dd2 100644 --- a/client/homebrew/brewRenderer/brewRenderer.jsx +++ b/client/homebrew/brewRenderer/brewRenderer.jsx @@ -237,7 +237,6 @@ const BrewRenderer = (props)=>{ && <> {renderStyle()} - {console.log(state.previewStyles)}
{renderPages()}
From b33d9264d3b92ca9b83e2bcd21e4357f88716c91 Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Sat, 12 Oct 2024 23:25:14 -0500 Subject: [PATCH 25/33] unify terms to 'spreads' 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. --- .../{anchoredBox.jsx => Anchored.jsx} | 2 +- .../{anchoredBox.less => Anchored.less} | 0 .../homebrew/brewRenderer/toolBar/toolBar.jsx | 45 +++++++++---------- client/icons/FacingView.svg | 10 ----- client/icons/FlowView.svg | 24 ---------- client/icons/SingleView.svg | 7 --- client/icons/customIcons.less | 21 +++------ .../{FacingView-alt.svg => facing-spread.svg} | 0 .../{FlowView-alt.svg => flow-spread.svg} | 0 .../{SingleView-alt.svg => single-spread.svg} | 0 10 files changed, 27 insertions(+), 82 deletions(-) rename client/components/{anchoredBox.jsx => Anchored.jsx} (99%) rename client/components/{anchoredBox.less => Anchored.less} (100%) delete mode 100644 client/icons/FacingView.svg delete mode 100644 client/icons/FlowView.svg delete mode 100644 client/icons/SingleView.svg rename client/icons/{FacingView-alt.svg => facing-spread.svg} (100%) rename client/icons/{FlowView-alt.svg => flow-spread.svg} (100%) rename client/icons/{SingleView-alt.svg => single-spread.svg} (100%) 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 From 96ae07a456f96a1c57a8ce3460b73cafdcab702b Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Sun, 13 Oct 2024 09:39:41 -0500 Subject: [PATCH 26/33] Small style change on checkbox inputs --- client/homebrew/brewRenderer/toolBar/toolBar.less | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.less b/client/homebrew/brewRenderer/toolBar/toolBar.less index f2e7399ee..010964d7c 100644 --- a/client/homebrew/brewRenderer/toolBar/toolBar.less +++ b/client/homebrew/brewRenderer/toolBar/toolBar.less @@ -40,8 +40,14 @@ .anchored-box { color: #CCCCCC; - input[type='number']{ - width: 4ch; + display: flex; + flex-direction: column; + gap: 5px; + input{ + height: unset; + &[type='range'] { + padding: 0; + } } } From 810c2140c9f6d4a185e2f754099c43cc7658e90d Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Sun, 13 Oct 2024 20:45:05 -0500 Subject: [PATCH 27/33] move some toolbar specific styling to toolbar.less --- client/components/Anchored.less | 47 +--------------- .../brewRenderer/toolBar/toolBar.less | 55 +++++++++++++++++-- 2 files changed, 52 insertions(+), 50 deletions(-) diff --git a/client/components/Anchored.less b/client/components/Anchored.less index 69fa2d9c1..4f0e2fa8f 100644 --- a/client/components/Anchored.less +++ b/client/components/Anchored.less @@ -1,12 +1,7 @@ -.anchored-trigger { - &.active { - background-color: #444444; - } -} + .anchored-box { position:absolute; - top: 30px; @supports (inset-block-start: anchor(bottom)){ inset-block-start: anchor(bottom); } @@ -15,44 +10,4 @@ &.active { visibility: visible; } - padding : 15px; - color : white; - background-color : #555555; - border-radius : 5px; - font-size : .8em; - margin-top : 10px; - - h1 { - border-bottom: 1px solid currentColor; - margin-bottom: 0.5em; - padding-bottom: 0.3em; - } - - h2 { - color: lightgray; - border-bottom: 1px solid currentColor; - margin: 1em 0 0.5em 0; - padding-bottom: 0.3em; - } - - label { - display: flex; - align-items: center; - justify-content: space-between; - gap: 6px; - - } - - &:before { - content: ""; - width: 0px; - height: 0px; - position: absolute; - border: 10px solid transparent; - border-bottom: 10px solid #555555; - left: 50%; - transform: translateX(-50%); - top: -20px; - pointer-events: none; - } } \ No newline at end of file diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.less b/client/homebrew/brewRenderer/toolBar/toolBar.less index 010964d7c..aa0301320 100644 --- a/client/homebrew/brewRenderer/toolBar/toolBar.less +++ b/client/homebrew/brewRenderer/toolBar/toolBar.less @@ -38,17 +38,64 @@ background-color: #444; } + .anchored-trigger { + &.active { + background-color: #444444; + } + } + .anchored-box { - color: #CCCCCC; - display: flex; - flex-direction: column; - gap: 5px; + --box-color : #555555; + top : 30px; + display : flex; + flex-direction : column; + gap : 5px; + padding : 15px; + margin-top : 10px; + font-size : .8em; + color : #CCCCCC; + background-color : var(--box-color); + border-radius : 5px; + + h1 { + border-bottom: 1px solid currentColor; + margin-bottom: 0.5em; + padding-bottom: 0.3em; + } + + h2 { + color: lightgray; + border-bottom: 1px solid currentColor; + margin: 1em 0 0.5em 0; + padding-bottom: 0.3em; + } + + label { + display: flex; + align-items: center; + justify-content: space-between; + gap: 6px; + + } input{ height: unset; &[type='range'] { padding: 0; } } + &:before { + content: ""; + width: 0px; + height: 0px; + position: absolute; + border: 10px solid transparent; + border-bottom: 10px solid var(--box-color); + left: 50%; + transform: translateX(-50%); + top: -20px; + pointer-events: none; + } + } .radio-group:has(button[role='radio']){ From 3d7d90104b20849f76dde1c5ea3527e5cc5bfafc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Fri, 1 Nov 2024 20:37:28 +0100 Subject: [PATCH 28/33] revert content deletion --- client/homebrew/pages/editPage/editPage.jsx | 2 ++ client/homebrew/pages/homePage/homePage.jsx | 2 ++ client/homebrew/pages/newPage/newPage.jsx | 2 ++ client/homebrew/pages/vaultPage/vaultPage.jsx | 4 +++- 4 files changed, 9 insertions(+), 1 deletion(-) diff --git a/client/homebrew/pages/editPage/editPage.jsx b/client/homebrew/pages/editPage/editPage.jsx index 744e187a6..7ddf0bb06 100644 --- a/client/homebrew/pages/editPage/editPage.jsx +++ b/client/homebrew/pages/editPage/editPage.jsx @@ -430,6 +430,7 @@ const EditPage = createClass({ {this.renderNavbar()} {this.props.brew.lock && } +
+
; } }); diff --git a/client/homebrew/pages/homePage/homePage.jsx b/client/homebrew/pages/homePage/homePage.jsx index 3b21c7398..f737506f1 100644 --- a/client/homebrew/pages/homePage/homePage.jsx +++ b/client/homebrew/pages/homePage/homePage.jsx @@ -100,6 +100,7 @@ const HomePage = createClass({ return
{this.renderNavbar()} +
+
Save current
diff --git a/client/homebrew/pages/newPage/newPage.jsx b/client/homebrew/pages/newPage/newPage.jsx index cb8d5b3ae..8216b347c 100644 --- a/client/homebrew/pages/newPage/newPage.jsx +++ b/client/homebrew/pages/newPage/newPage.jsx @@ -223,6 +223,7 @@ const NewPage = createClass({ render : function(){ return
{this.renderNavbar()} +
+
; } }); diff --git a/client/homebrew/pages/vaultPage/vaultPage.jsx b/client/homebrew/pages/vaultPage/vaultPage.jsx index 55b0cb370..fbf15f814 100644 --- a/client/homebrew/pages/vaultPage/vaultPage.jsx +++ b/client/homebrew/pages/vaultPage/vaultPage.jsx @@ -411,10 +411,11 @@ const VaultPage = (props)=>{ }; return ( -
+
{renderNavItems()} +
{renderForm()}
@@ -422,6 +423,7 @@ const VaultPage = (props)=>{ {renderFoundBrews()}
+
); }; From 626b602a6156f0a458fde61746dd5a02a1ac9c11 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?= Date: Fri, 1 Nov 2024 20:39:45 +0100 Subject: [PATCH 29/33] last fix --- client/homebrew/pages/vaultPage/vaultPage.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/client/homebrew/pages/vaultPage/vaultPage.less b/client/homebrew/pages/vaultPage/vaultPage.less index 3832daf6f..d29a5f4e1 100644 --- a/client/homebrew/pages/vaultPage/vaultPage.less +++ b/client/homebrew/pages/vaultPage/vaultPage.less @@ -5,7 +5,7 @@ *:not(input) { user-select : none; } - .dataGroup { + .content .dataGroup { width : 100%; height : 100%; background : white; From f63d2de8f4f05497beef83af3e24f1af0c4c7126 Mon Sep 17 00:00:00 2001 From: Trevor Buckner Date: Fri, 1 Nov 2024 23:19:48 -0400 Subject: [PATCH 30/33] Refactor toolbar view options (#2) * Refactor toolbar view options * Remove a couple more unused states --- client/homebrew/brewRenderer/brewRenderer.jsx | 55 +++++------ .../homebrew/brewRenderer/toolBar/toolBar.jsx | 95 ++++++++----------- 2 files changed, 64 insertions(+), 86 deletions(-) diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx index 2d2616dd2..d50fd1c8e 100644 --- a/client/homebrew/brewRenderer/brewRenderer.jsx +++ b/client/homebrew/brewRenderer/brewRenderer.jsx @@ -65,9 +65,14 @@ const BrewRenderer = (props)=>{ const [state, setState] = useState({ isMounted : false, - visibility : 'hidden', - zoom : 100, - previewStyles : {} + visibility : 'hidden' + }); + + const [displayOptions, setDisplayOptions] = useState({ + zoomLevel : 100, + spread : 'single', + startOnRight : true, + pageShadows : true }); const mainRef = useRef(null); @@ -118,7 +123,13 @@ const BrewRenderer = (props)=>{ } else { pageText += `\n\n \n\\column\n `; //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 ; + + const styles = { + ...(!displayOptions.pageShadows ? { boxShadow: 'none' } : {}) + // Add more conditions as needed + }; + + return ; } }; @@ -166,35 +177,16 @@ const BrewRenderer = (props)=>{ document.dispatchEvent(new MouseEvent('click')); }; - //Toolbar settings: - const handleZoom = (newZoom)=>{ - setState((prevState)=>({ - ...prevState, - zoom : newZoom - })); + const handleDisplayOptionsChange = (newDisplayOptions)=>{ + setDisplayOptions(newDisplayOptions); }; - const handleStyle = (newStyle)=>{ - setState((prevState)=>{ - // Merge styles, skipping those that are empty objects or null - const mergedStyles = Object.entries(newStyle).reduce((acc, [selector, style])=>{ - if(style && Object.keys(style).length > 0) { - acc[selector] = { - ...(prevState.previewStyles[selector] || {}), // Preserve existing styles - ...style, // Add or override with new styles - }; - } else { - // If the style is an empty object or null, delete the selector - delete acc[selector]; - } - return acc; - }, { ...prevState.previewStyles }); - - return { ...prevState, previewStyles: mergedStyles }; - }); + const pagesStyle = { + zoom : `${displayOptions.zoomLevel}%`, + columnGap : `${displayOptions.columnGap}px`, + rowGap : `${displayOptions.rowGap}px` }; - const styleObject = {}; if(global.config.deployment) { @@ -218,7 +210,7 @@ const BrewRenderer = (props)=>{
- + {/*render in iFrame so broken code doesn't crash the site.*/} { && <> {renderStyle()} -
+
{renderPages()}
diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.jsx b/client/homebrew/brewRenderer/toolBar/toolBar.jsx index f86a9ad7f..7250e9ca1 100644 --- a/client/homebrew/brewRenderer/toolBar/toolBar.jsx +++ b/client/homebrew/brewRenderer/toolBar/toolBar.jsx @@ -9,46 +9,22 @@ import { Anchored, AnchoredBox, AnchoredTrigger } from '../../../components/Anch const MAX_ZOOM = 300; const MIN_ZOOM = 10; -const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages, onStyleChange })=>{ +const ToolBar = ({ displayOptions, currentPage, totalPages, onDisplayOptionsChange })=>{ - const [zoomLevel, setZoomLevel] = useState(100); const [pageNum, setPageNum] = useState(currentPage); - 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 spreads = ['single', 'facing', 'flow']; - - useEffect(()=>{ - onZoomChange(zoomLevel); - }, [zoomLevel]); useEffect(()=>{ setPageNum(currentPage); - }, [currentPage]);; - - // update display arrangement when arrangement state is changed. - // todo: do this the 'react' way, without querying the dom. - useEffect(()=>{ - const iframe = document.getElementById('BrewRenderer'); - const pagesContainer = iframe?.contentWindow?.document.querySelector('.pages'); - - if(pagesContainer) { - 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'); - } - }, [spread, startOnRight]); - - useEffect(()=>{ - onStyleChange({ '.page': pageShadows ? {} : { boxShadow: 'none' } }); - }, [pageShadows]); - + }, [currentPage]); const handleZoomButton = (zoom)=>{ - setZoomLevel(_.round(_.clamp(zoom, MIN_ZOOM, MAX_ZOOM))); + handleOptionChange('zoomLevel', _.round(_.clamp(zoom, MIN_ZOOM, MAX_ZOOM))); + }; + + const handleOptionChange = (optionKey, newValue)=>{ + //setDisplayOptions(prevOptions => ({ ...prevOptions, [optionKey]: newValue })); + onDisplayOptionsChange({ ...displayOptions, [optionKey]: newValue }); }; const handlePageInput = (pageInput)=>{ @@ -89,7 +65,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages, onStyleC const margin = 5; // extra space so page isn't edge to edge (not truly "to fill") - const deltaZoom = (desiredZoom - zoomLevel) - margin; + const deltaZoom = (desiredZoom - displayOptions.zoomLevel) - margin; return deltaZoom; }; @@ -101,22 +77,22 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages, onStyleC @@ -129,7 +105,7 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages, onStyleC min={MIN_ZOOM} max={MAX_ZOOM} step='1' - value={zoomLevel} + value={displayOptions.zoomLevel} onChange={(e)=>handleZoomButton(parseInt(e.target.value))} /> @@ -139,33 +115,33 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages, onStyleC
- {/*v=====----------------------< Page Controls >---------------------=====v*/} + {/*v=====----------------------< Spread Controls >---------------------=====v*/}
@@ -173,19 +149,28 @@ const ToolBar = ({ onZoomChange, currentPage, onPageChange, totalPages, onStyleC

Options

- - -
+ {/*v=====----------------------< Page Controls >---------------------=====v*/}
{/*v=====----------------------< Zoom Controls >---------------------=====v*/} -
+
@@ -101,6 +104,7 @@ const ToolBar = ({ displayOptions, currentPage, totalPages, onDisplayOptionsChan className='range-input tool hover-tooltip' type='range' name='zoom' + title='Set Zoom' list='zoomLevels' min={MIN_ZOOM} max={MAX_ZOOM} @@ -117,31 +121,35 @@ const ToolBar = ({ displayOptions, currentPage, totalPages, onDisplayOptionsChan className='tool' onClick={()=>handleZoomButton(displayOptions.zoomLevel + 20)} disabled={displayOptions.zoomLevel >= MAX_ZOOM} + title='Zoom In' >
{/*v=====----------------------< Spread Controls >---------------------=====v*/} -
-
+
+
@@ -171,10 +179,12 @@ const ToolBar = ({ displayOptions, currentPage, totalPages, onDisplayOptionsChan
{/*v=====----------------------< Page Controls >---------------------=====v*/} -
+