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; diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.jsx b/client/homebrew/brewRenderer/toolBar/toolBar.jsx index 9d49145b4..91c90e7f2 100644 --- a/client/homebrew/brewRenderer/toolBar/toolBar.jsx +++ b/client/homebrew/brewRenderer/toolBar/toolBar.jsx @@ -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 ( -
+
{/*v=====----------------------< Zoom Controls >---------------------=====v*/}
@@ -153,13 +153,27 @@ 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 1ddc40c5f..f2e7399ee 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; 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/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-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/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-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/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..4ba0c1a53 100644 --- a/client/icons/customIcons.less +++ b/client/icons/customIcons.less @@ -73,3 +73,21 @@ .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'); +} +.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'); +}