yuuza/outline
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix: Clicking collapse sidebar does not hide sidebar until clicked elsewhere

Browse Source 
closes #5928
This commit is contained in:
Tom Moor
2023-10-03 20:52:29 -04:00
parent 4d2a5ae748
commit e967641bb6
3 changed files with 30 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
app/components/Sidebar/App.tsx
View File

@@ -82,7 +82,10 @@ function AppSidebar() {
<ToggleButton <ToggleButton
position="bottom" position="bottom"
image={<SidebarIcon />} image={<SidebarIcon />}
onClick={ui.toggleCollapsedSidebar} onClick={() => {
ui.toggleCollapsedSidebar();
(document.activeElement as HTMLElement)?.blur();
}}
/> />
</Tooltip> </Tooltip>
</SidebarButton> </SidebarButton>

5
app/components/Sidebar/Settings.tsx
View File

@@ -50,7 +50,10 @@ function SettingsSidebar() {
<ToggleButton <ToggleButton
position="bottom" position="bottom"
image={<SidebarIcon />} image={<SidebarIcon />}
onClick={ui.toggleCollapsedSidebar} onClick={() => {
ui.toggleCollapsedSidebar();
(document.activeElement as HTMLElement)?.blur();
}}
/> />
</Tooltip> </Tooltip>
</SidebarButton> </SidebarButton>

31
app/components/Sidebar/Sidebar.tsx
View File

@@ -48,6 +48,7 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
const [isHovering, setHovering] = React.useState(false); const [isHovering, setHovering] = React.useState(false);
const [isAnimating, setAnimating] = React.useState(false); const [isAnimating, setAnimating] = React.useState(false);
const [isResizing, setResizing] = React.useState(false); const [isResizing, setResizing] = React.useState(false);
const [hasPointerMoved, setPointerMoved] = React.useState(false);
const isSmallerThanMinimum = width < minWidth; const isSmallerThanMinimum = width < minWidth;
const handleDrag = React.useCallback( const handleDrag = React.useCallback(
@@ -100,21 +101,33 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
); );
const handlePointerMove = React.useCallback(() => { const handlePointerMove = React.useCallback(() => {
setHovering(true); if (ui.sidebarIsClosed) {
}, []); setHovering(true);
setPointerMoved(true);
}
}, [ui.sidebarIsClosed]);
const handlePointerLeave = React.useCallback( const handlePointerLeave = React.useCallback(
(ev) => { (ev) => {
setHovering( if (hasPointerMoved) {
ev.pageX < width && setHovering(
ev.pageX > 0 && ev.pageX < width &&
ev.pageY < window.innerHeight && ev.pageX > 0 &&
ev.pageY > 0 ev.pageY < window.innerHeight &&
); ev.pageY > 0
);
}
}, },
[width] [width, hasPointerMoved]
); );
React.useEffect(() => {
if (ui.sidebarIsClosed) {
setHovering(false);
setPointerMoved(false);
}
}, [ui.sidebarIsClosed]);
React.useEffect(() => { React.useEffect(() => {
if (isAnimating) { if (isAnimating) {
setTimeout(() => setAnimating(false), ANIMATION_MS); setTimeout(() => setAnimating(false), ANIMATION_MS);