add toggle menu option

actualbudget · Sep 18, 2024 · d5ab742 · d5ab742
1 parent 64c685d
commit d5ab742
Show file tree

Hide file tree

Showing 7 changed files with 63 additions and 35 deletions.
diff --git a/packages/desktop-client/src/components/budget/BudgetTable.jsx b/packages/desktop-client/src/components/budget/BudgetTable.jsx
@@ -41,6 +41,9 @@ export function BudgetTable(props) {
     'budget.showHiddenCategories',
   );
   const [editing, setEditing] = useState(null);
+  const [showProgress = false, setShowProgress] = useLocalPref(
+    'budget.showProgress',
+  );
 
   const onEditMonth = (id, month) => {
     setEditing(id ? { id, cell: month } : null);
@@ -141,14 +144,6 @@ export function BudgetTable(props) {
     setCollapsedGroupIdsPref(collapsedIds);
   };
 
-  const onToggleHiddenCategories = () => {
-    setShowHiddenCategoriesPef(!showHiddenCategories);
-  };
-
-  const toggleHiddenCategories = () => {
-    onToggleHiddenCategories();
-  };
-
   const expandAllCategories = () => {
     onCollapse([]);
   };
@@ -202,7 +197,10 @@ export function BudgetTable(props) {
       >
         <BudgetTotals
           MonthComponent={dataComponents.BudgetTotalsComponent}
-          toggleHiddenCategories={toggleHiddenCategories}
+          setShowHiddenCategoriesPef={setShowHiddenCategoriesPef}
+          showHiddenCategories={showHiddenCategories}
+          setShowProgress={setShowProgress}
+          showProgress={showProgress}
           expandAllCategories={expandAllCategories}
           collapseAllCategories={collapseAllCategories}
         />

diff --git a/packages/desktop-client/src/components/budget/BudgetTotals.tsx b/packages/desktop-client/src/components/budget/BudgetTotals.tsx
@@ -13,14 +13,20 @@ import { getScrollbarWidth } from './util';
 
 type BudgetTotalsProps = {
   MonthComponent: ComponentProps<typeof RenderMonths>['component'];
-  toggleHiddenCategories: () => void;
+  setShowHiddenCategoriesPef: (value: boolean) => void;
+  showHiddenCategories: boolean;
+  setShowProgress: (value: boolean) => void;
+  showProgress: boolean;
   expandAllCategories: () => void;
   collapseAllCategories: () => void;
 };
 
 export const BudgetTotals = memo(function BudgetTotals({
   MonthComponent,
-  toggleHiddenCategories,
+  setShowHiddenCategoriesPef,
+  showHiddenCategories,
+  setShowProgress,
+  showProgress,
   expandAllCategories,
   collapseAllCategories,
 }: BudgetTotalsProps) {
@@ -77,23 +83,32 @@ export const BudgetTotals = memo(function BudgetTotals({
           triggerRef={triggerRef}
           isOpen={menuOpen}
           onOpenChange={() => setMenuOpen(false)}
-          style={{ width: 200 }}
+          style={{ width: 210 }}
         >
           <Menu
             onMenuSelect={type => {
-              if (type === 'toggle-visibility') {
-                toggleHiddenCategories();
+              if (type === 'showHiddenCategories') {
+                setShowHiddenCategoriesPef(!showHiddenCategories);
+              } else if (type === 'showProgress') {
+                setShowProgress(!showProgress);
               } else if (type === 'expandAllCategories') {
                 expandAllCategories();
+                setMenuOpen(false);
               } else if (type === 'collapseAllCategories') {
                 collapseAllCategories();
+                setMenuOpen(false);
               }
-              setMenuOpen(false);
             }}
             items={[
               {
-                name: 'toggle-visibility',
-                text: t('Toggle hidden categories'),
+                name: 'showHiddenCategories',
+                text: t('Show hidden categories'),
+                toggle: showHiddenCategories,
+              },
+              {
+                name: 'showProgress',
+                text: t('Show progress bars'),
+                toggle: showProgress,
               },
               {
                 name: 'expandAllCategories',

diff --git a/packages/desktop-client/src/components/budget/ExpenseCategory.tsx b/packages/desktop-client/src/components/budget/ExpenseCategory.tsx
@@ -6,6 +6,7 @@ import {
   type CategoryEntity,
 } from 'loot-core/src/types/models';
 
+import { useLocalPref } from '../../hooks/useLocalPref';
 import { theme } from '../../style';
 import { View } from '../common/View';
 import {
@@ -52,6 +53,7 @@ export function ExpenseCategory({
   onDragChange,
   onReorder,
 }: ExpenseCategoryProps) {
+  const [showProgress] = useLocalPref('budget.showProgress');
   let dragging = dragState && dragState.item === cat;
 
   if (dragState && dragState.item.id === cat.cat_group) {
@@ -75,7 +77,7 @@ export function ExpenseCategory({
     <Row
       innerRef={dropRef}
       collapsed={true}
-      height={44}
+      height={showProgress && 44}
       style={{
         backgroundColor: theme.tableBackground,
         opacity: cat.hidden || categoryGroup?.hidden ? 0.5 : undefined,

diff --git a/packages/desktop-client/src/components/budget/report/ReportComponents.tsx b/packages/desktop-client/src/components/budget/report/ReportComponents.tsx
@@ -7,6 +7,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 { useLocalPref } from '../../../hooks/useLocalPref';
 import { useUndo } from '../../../hooks/useUndo';
 import { SvgCheveronDown } from '../../../icons/v1';
 import { styles, theme, type CSSProperties } from '../../../style';
@@ -208,6 +209,7 @@ export const CategoryMonth = memo(function CategoryMonth({
   onBudgetAction,
   onShowActivity,
 }: CategoryMonthProps) {
+  const [showProgress] = useLocalPref('budget.showProgress');
   const [menuOpen, setMenuOpen] = useState(false);
   const triggerRef = useRef(null);
 
@@ -496,14 +498,18 @@ export const CategoryMonth = memo(function CategoryMonth({
           </Field>
         )}
       </View>
-      <View
-        style={{
-          height: 13,
-          marginTop: -5,
-        }}
-      >
-        {isHovered && <BarGraphVertical style={{ flexGrow: 1 }} data={data} />}
-      </View>
+      {showProgress && (
+        <View
+          style={{
+            height: 13,
+            marginTop: -5,
+          }}
+        >
+          {isHovered && (
+            <BarGraphVertical style={{ flexGrow: 1 }} data={data} />
+          )}
+        </View>
+      )}
     </View>
   );
 });

diff --git a/packages/desktop-client/src/components/budget/rollover/RolloverComponents.tsx b/packages/desktop-client/src/components/budget/rollover/RolloverComponents.tsx
@@ -5,6 +5,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 { useLocalPref } from '../../../hooks/useLocalPref';
 import { useUndo } from '../../../hooks/useUndo';
 import { SvgCheveronDown } from '../../../icons/v1';
 import { styles, theme, type CSSProperties } from '../../../style';
@@ -196,6 +197,7 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
   onBudgetAction,
   onShowActivity,
 }: ExpenseCategoryMonthProps) {
+  const [showProgress] = useLocalPref('budget.showProgress');
   const budgetMenuTriggerRef = useRef(null);
   const balanceMenuTriggerRef = useRef(null);
   const [budgetMenuOpen, setBudgetMenuOpen] = useState(false);
@@ -476,14 +478,18 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
           </Popover>
         </Field>
       </View>
-      <View
-        style={{
-          height: 13,
-          marginTop: -5,
-        }}
-      >
-        {isHovered && <BarGraphVertical style={{ flexGrow: 1 }} data={data} />}
-      </View>
+      {showProgress && (
+        <View
+          style={{
+            height: 13,
+            marginTop: -5,
+          }}
+        >
+          {isHovered && (
+            <BarGraphVertical style={{ flexGrow: 1 }} data={data} />
+          )}
+        </View>
+      )}
     </View>
   );
 });

diff --git a/packages/desktop-client/src/components/common/Menu.tsx b/packages/desktop-client/src/components/common/Menu.tsx
@@ -201,7 +201,7 @@ export function Menu<T extends MenuItem>({
                   id={item.name}
                   checked={item.toggle}
                   onColor={theme.pageTextPositive}
-                  style={{ marginLeft: 5 }}
+                  style={{ marginLeft: 5, paddingTop: 5 }}
                   onToggle={() =>
                     !item.disabled &&
                     item.toggle !== undefined &&

diff --git a/packages/loot-core/src/types/prefs.d.ts b/packages/loot-core/src/types/prefs.d.ts
@@ -70,6 +70,7 @@ export type LocalPrefs = SyncedPrefs &
     'budget.collapsed': string[];
     'budget.summaryCollapsed': boolean;
     'budget.showHiddenCategories': boolean;
+    'budget.showProgress': boolean;
     'budget.startMonth': string;
     'flags.updateNotificationShownForVersion': string;
     reportsViewLegend: boolean;