From d77b54f27b4f68c2619b6c3a98ff234e20060915 Mon Sep 17 00:00:00 2001
From: Yusef Ouda <YusefOuda@users.noreply.github.com>
Date: Mon, 8 Jul 2024 11:51:28 -0500
Subject: [PATCH] reorders 'Rename' above 'Hide' in menu popovers, adds
debounce to sidebar animation (#3001)
* reorders 'Rename' above 'Hide' in menu popovers
* release notes
* adds debounce to sidebar animation
* bump debounce time
* release notes
* release notes
* Update debounce import
* Update index.tsx
* Update index.tsx
* Update index.tsx
* Update index.tsx
* Update index.tsx
* Update index.tsx
* Update index.tsx
* Update index.tsx
* removes event listener on titlebar, changes margins
---
.../desktop-client/src/components/Titlebar.tsx | 5 -----
.../src/components/budget/SidebarCategory.tsx | 2 +-
.../src/components/budget/SidebarGroup.tsx | 2 +-
.../src/components/sidebar/index.tsx | 15 +++++++++++----
upcoming-release-notes/3001.md | 6 ++++++
5 files changed, 19 insertions(+), 11 deletions(-)
create mode 100644 upcoming-release-notes/3001.md
diff --git a/packages/desktop-client/src/components/Titlebar.tsx b/packages/desktop-client/src/components/Titlebar.tsx
index 482f694bd..8db6876bc 100644
--- a/packages/desktop-client/src/components/Titlebar.tsx
+++ b/packages/desktop-client/src/components/Titlebar.tsx
@@ -416,11 +416,6 @@ export function Titlebar({ style }: TitlebarProps) {
sidebar.setHidden(false);
}
}}
- onPointerLeave={e => {
- if (e.pointerType === 'mouse') {
- sidebar.setHidden(true);
- }
- }}
onPointerUp={e => {
if (e.pointerType !== 'mouse') {
sidebar.setHidden(!sidebar.hidden);
diff --git a/packages/desktop-client/src/components/budget/SidebarCategory.tsx b/packages/desktop-client/src/components/budget/SidebarCategory.tsx
index ab5a20fa3..0504c8d03 100644
--- a/packages/desktop-client/src/components/budget/SidebarCategory.tsx
+++ b/packages/desktop-client/src/components/budget/SidebarCategory.tsx
@@ -106,11 +106,11 @@ export function SidebarCategory({
setMenuOpen(false);
}}
items={[
+ { name: 'rename', text: 'Rename' },
!categoryGroup?.hidden && {
name: 'toggle-visibility',
text: category.hidden ? 'Show' : 'Hide',
},
- { name: 'rename', text: 'Rename' },
{ name: 'delete', text: 'Delete' },
]}
/>
diff --git a/packages/desktop-client/src/components/budget/SidebarGroup.tsx b/packages/desktop-client/src/components/budget/SidebarGroup.tsx
index ca9125a3f..c01ef2bc6 100644
--- a/packages/desktop-client/src/components/budget/SidebarGroup.tsx
+++ b/packages/desktop-client/src/components/budget/SidebarGroup.tsx
@@ -127,11 +127,11 @@ export function SidebarGroup({
}}
items={[
{ name: 'add-category', text: 'Add category' },
+ { name: 'rename', text: 'Rename' },
!group.is_income && {
name: 'toggle-visibility',
text: group.hidden ? 'Show' : 'Hide',
},
- { name: 'rename', text: 'Rename' },
onDelete && { name: 'delete', text: 'Delete' },
]}
/>
diff --git a/packages/desktop-client/src/components/sidebar/index.tsx b/packages/desktop-client/src/components/sidebar/index.tsx
index ba5185138..e09f6099f 100644
--- a/packages/desktop-client/src/components/sidebar/index.tsx
+++ b/packages/desktop-client/src/components/sidebar/index.tsx
@@ -1,5 +1,7 @@
import React from 'react';
+import { useDebounceCallback } from 'usehooks-ts';
+
import { useGlobalPref } from '../../hooks/useGlobalPref';
import { useResponsive } from '../../ResponsiveProvider';
import { View } from '../common/View';
@@ -14,25 +16,30 @@ export function FloatableSidebar() {
const { isNarrowWidth } = useResponsive();
const sidebarShouldFloat = floatingSidebar || sidebar.alwaysFloats;
+ const debouncedHideSidebar = useDebounceCallback(
+ () => sidebar.setHidden(true),
+ 350,
+ );
return isNarrowWidth ? null : (
<View
onMouseOver={
sidebarShouldFloat
? e => {
+ debouncedHideSidebar.cancel();
e.stopPropagation();
sidebar.setHidden(false);
}
: undefined
}
onMouseLeave={
- sidebarShouldFloat ? () => sidebar.setHidden(true) : undefined
+ sidebarShouldFloat ? () => debouncedHideSidebar() : undefined
}
style={{
position: sidebarShouldFloat ? 'absolute' : undefined,
- top: 12,
+ top: 8,
// If not floating, the -50 takes into account the transform below
- bottom: sidebarShouldFloat ? 12 : -50,
+ bottom: sidebarShouldFloat ? 8 : -50,
zIndex: 1001,
borderRadius: sidebarShouldFloat ? '0 6px 6px 0' : 0,
overflow: 'hidden',
@@ -40,7 +47,7 @@ export function FloatableSidebar() {
!sidebarShouldFloat || sidebar.hidden
? 'none'
: '0 15px 30px 0 rgba(0,0,0,0.25), 0 3px 15px 0 rgba(0,0,0,.5)',
- transform: `translateY(${!sidebarShouldFloat ? -12 : 0}px)
+ transform: `translateY(${!sidebarShouldFloat ? -8 : 0}px)
translateX(${
sidebarShouldFloat && sidebar.hidden ? '-100' : '0'
}%)`,
diff --git a/upcoming-release-notes/3001.md b/upcoming-release-notes/3001.md
new file mode 100644
index 000000000..17898d27f
--- /dev/null
+++ b/upcoming-release-notes/3001.md
@@ -0,0 +1,6 @@
+---
+category: Bugfix
+authors: [YusefOuda]
+---
+
+Moves "Rename" to first item in Category + Category Group menus. Adds debounce to sidebar animation.
--
GitLab