enhance: context menu budget page positioning (#3775)

* enhance: context menu budget page positioning fix: make popover non selectable * chore: release note * Update upcoming-release-notes/3775.md * chore: improve spelling * feat: useContextMenu hook for context menus * fix: linting
actualbudget · Dec 9, 2024 · 5717d90 · 5717d90
1 parent a35af73
commit 5717d90
Show file tree

Hide file tree

Showing 11 changed files with 184 additions and 141 deletions.
diff --git a/packages/desktop-client/src/components/budget/SidebarCategory.tsx b/packages/desktop-client/src/components/budget/SidebarCategory.tsx
@@ -1,13 +1,13 @@
 // @ts-strict-ignore
-import React, { type CSSProperties, type Ref, useRef, useState } from 'react';
+import React, { type CSSProperties, type Ref, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import {
   type CategoryGroupEntity,
   type CategoryEntity,
 } from 'loot-core/src/types/models';
 
-import { useFeatureFlag } from '../../hooks/useFeatureFlag';
+import { useContextMenu } from '../../hooks/useContextMenu';
 import { SvgCheveronDown } from '../../icons/v1';
 import { theme } from '../../style';
 import { Button } from '../common/Button2';
@@ -50,9 +50,9 @@ export function SidebarCategory({
   const { t } = useTranslation();
 
   const temporary = category.id === 'new';
-  const [menuOpen, setMenuOpen] = useState(false);
+  const { setMenuOpen, menuOpen, handleContextMenu, resetPosition, position } =
+    useContextMenu();
   const triggerRef = useRef(null);
-  const contextMenusEnabled = useFeatureFlag('contextMenus');
 
   const displayed = (
     <View
@@ -66,11 +66,7 @@ export function SidebarCategory({
         height: 20,
       }}
       ref={triggerRef}
-      onContextMenu={e => {
-        if (!contextMenusEnabled) return;
-        e.preventDefault();
-        setMenuOpen(true);
-      }}
+      onContextMenu={handleContextMenu}
     >
       <div
         data-testid="category-name"
@@ -88,7 +84,10 @@ export function SidebarCategory({
           variant="bare"
           className="hover-visible"
           style={{ color: 'currentColor', padding: 3 }}
-          onPress={() => setMenuOpen(true)}
+          onPress={() => {
+            resetPosition();
+            setMenuOpen(true);
+          }}
         >
           <SvgCheveronDown
             width={14}
@@ -102,8 +101,9 @@ export function SidebarCategory({
           placement="bottom start"
           isOpen={menuOpen}
           onOpenChange={() => setMenuOpen(false)}
-          style={{ width: 200 }}
+          style={{ width: 200, margin: 1 }}
           isNonModal
+          {...position}
         >
           <Menu
             onMenuSelect={type => {

diff --git a/packages/desktop-client/src/components/budget/SidebarGroup.tsx b/packages/desktop-client/src/components/budget/SidebarGroup.tsx
@@ -1,8 +1,9 @@
 // @ts-strict-ignore
-import React, { type CSSProperties, useRef, useState } from 'react';
+import React, { type CSSProperties, useRef } from 'react';
 import { type ConnectDragSource } from 'react-dnd';
 import { useTranslation } from 'react-i18next';
 
+import { useContextMenu } from '../../hooks/useContextMenu';
 import { useFeatureFlag } from '../../hooks/useFeatureFlag';
 import { SvgExpandArrow } from '../../icons/v0';
 import { SvgCheveronDown } from '../../icons/v1';
@@ -58,9 +59,9 @@ export function SidebarGroup({
   const isGoalTemplatesEnabled = useFeatureFlag('goalTemplatesEnabled');
 
   const temporary = group.id === 'new';
-  const [menuOpen, setMenuOpen] = useState(false);
+  const { setMenuOpen, menuOpen, handleContextMenu, resetPosition, position } =
+    useContextMenu();
   const triggerRef = useRef(null);
-  const contextMenusEnabled = useFeatureFlag('contextMenus');
 
   const displayed = (
     <View
@@ -75,11 +76,7 @@ export function SidebarGroup({
       onClick={() => {
         onToggleCollapse(group.id);
       }}
-      onContextMenu={e => {
-        if (!contextMenusEnabled) return;
-        e.preventDefault();
-        setMenuOpen(true);
-      }}
+      onContextMenu={handleContextMenu}
     >
       {!dragPreview && (
         <SvgExpandArrow
@@ -111,7 +108,10 @@ export function SidebarGroup({
             <Button
               variant="bare"
               className="hover-visible"
-              onPress={() => setMenuOpen(true)}
+              onPress={() => {
+                resetPosition();
+                setMenuOpen(true);
+              }}
               style={{ padding: 3 }}
             >
               <SvgCheveronDown width={14} height={14} />
@@ -122,8 +122,9 @@ export function SidebarGroup({
               placement="bottom start"
               isOpen={menuOpen}
               onOpenChange={() => setMenuOpen(false)}
-              style={{ width: 200 }}
+              style={{ width: 200, margin: 1 }}
               isNonModal
+              {...position}
             >
               <Menu
                 onMenuSelect={type => {

diff --git a/packages/desktop-client/src/components/budget/envelope/EnvelopeBudgetComponents.tsx b/packages/desktop-client/src/components/budget/envelope/EnvelopeBudgetComponents.tsx
@@ -3,7 +3,6 @@ import React, {
   type CSSProperties,
   memo,
   useRef,
-  useState,
 } from 'react';
 import { useTranslation, Trans } from 'react-i18next';
 
@@ -14,7 +13,7 @@ import { evalArithmetic } from 'loot-core/src/shared/arithmetic';
 import * as monthUtils from 'loot-core/src/shared/months';
 import { integerToCurrency, amountToInteger } from 'loot-core/src/shared/util';
 
-import { useFeatureFlag } from '../../../hooks/useFeatureFlag';
+import { useContextMenu } from '../../../hooks/useContextMenu';
 import { useUndo } from '../../../hooks/useUndo';
 import { SvgCheveronDown } from '../../../icons/v1';
 import { styles, theme } from '../../../style';
@@ -207,16 +206,27 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
 
   const budgetMenuTriggerRef = useRef(null);
   const balanceMenuTriggerRef = useRef(null);
-  const [budgetMenuOpen, setBudgetMenuOpen] = useState(false);
-  const [balanceMenuOpen, setBalanceMenuOpen] = useState(false);
+  const {
+    setMenuOpen: setBudgetMenuOpen,
+    menuOpen: budgetMenuOpen,
+    handleContextMenu: handleBudgetContextMenu,
+    resetPosition: resetBudgetPosition,
+    position: budgetPosition,
+  } = useContextMenu();
+  const {
+    setMenuOpen: setBalanceMenuOpen,
+    menuOpen: balanceMenuOpen,
+    handleContextMenu: handleBalanceContextMenu,
+    resetPosition: resetBalancePosition,
+    position: balancePosition,
+  } = useContextMenu();
 
   const onMenuAction = (...args: Parameters<typeof onBudgetAction>) => {
     onBudgetAction(...args);
     setBudgetMenuOpen(false);
   };
 
   const { showUndoNotification } = useUndo();
-  const contextMenusEnabled = useFeatureFlag('contextMenus');
 
   return (
     <View
@@ -236,15 +246,14 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
       }}
     >
       <View
+        ref={budgetMenuTriggerRef}
         style={{
           flex: 1,
           flexDirection: 'row',
         }}
         onContextMenu={e => {
-          if (!contextMenusEnabled) return;
           if (editing) return;
-          e.preventDefault();
-          setBudgetMenuOpen(true);
+          handleBudgetContextMenu(e);
         }}
       >
         {!editing && (
@@ -261,9 +270,11 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
             }}
           >
             <Button
-              ref={budgetMenuTriggerRef}
               variant="bare"
-              onPress={() => setBudgetMenuOpen(true)}
+              onPress={() => {
+                resetBudgetPosition(2, -4);
+                setBudgetMenuOpen(true);
+              }}
               style={{
                 padding: 3,
               }}
@@ -278,11 +289,12 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
 
             <Popover
               triggerRef={budgetMenuTriggerRef}
-              placement="bottom start"
+              placement="bottom left"
               isOpen={budgetMenuOpen}
               onOpenChange={() => setBudgetMenuOpen(false)}
               style={{ width: 200 }}
               isNonModal
+              {...budgetPosition}
             >
               <BudgetMenu
                 onCopyLastMonthAverage={() => {
@@ -392,18 +404,25 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
         </span>
       </Field>
       <Field
+        ref={balanceMenuTriggerRef}
         name="balance"
         width="flex"
         style={{ paddingRight: styles.monthRightPadding, textAlign: 'right' }}
       >
         <span
-          ref={balanceMenuTriggerRef}
-          onClick={() => setBalanceMenuOpen(true)}
-          onContextMenu={e => {
-            if (!contextMenusEnabled) return;
-            e.preventDefault();
+          onClick={() => {
+            resetBalancePosition(-6, -4);
             setBalanceMenuOpen(true);
           }}
+          onContextMenu={e => {
+            handleBalanceContextMenu(e);
+            // We need to calculate differently from the hook ue to being aligned to the right
+            const rect = e.currentTarget.getBoundingClientRect();
+            resetBalancePosition(
+              e.clientX - rect.right + 200 - 8,
+              e.clientY - rect.bottom - 8,
+            );
+          }}
         >
           <BalanceWithCarryover
             carryover={envelopeBudget.catCarryover(category.id)}
@@ -419,8 +438,9 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
           placement="bottom end"
           isOpen={balanceMenuOpen}
           onOpenChange={() => setBalanceMenuOpen(false)}
-          style={{ width: 200 }}
+          style={{ width: 200, margin: 1 }}
           isNonModal
+          {...balancePosition}
         >
           <BalanceMovementMenu
             categoryId={category.id}