From e80588b234b48f4634bbfb6cb54f73678ffc7092 Mon Sep 17 00:00:00 2001 From: Gazook89 Date: Fri, 11 Oct 2024 13:51:41 -0500 Subject: [PATCH 1/5] 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 2/5] 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 3/5] 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 4/5] 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 5/5] 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;