diff --git a/packages/desktop-client/src/components/Modals.tsx b/packages/desktop-client/src/components/Modals.tsx index 2953f58e4a..95e0713602 100644 --- a/packages/desktop-client/src/components/Modals.tsx +++ b/packages/desktop-client/src/components/Modals.tsx @@ -429,6 +429,7 @@ export function Modals() { key={name} modalProps={modalProps} categoryId={options.categoryId} + categoryGroup={options.categoryGroup} onSave={options.onSave} onEditNotes={options.onEditNotes} onDelete={options.onDelete} diff --git a/packages/desktop-client/src/components/budget/BudgetCategories.jsx b/packages/desktop-client/src/components/budget/BudgetCategories.jsx index fd708f3824..962697d9a9 100644 --- a/packages/desktop-client/src/components/budget/BudgetCategories.jsx +++ b/packages/desktop-client/src/components/budget/BudgetCategories.jsx @@ -66,6 +66,7 @@ export const BudgetCategories = memo( cat => ({ type: 'expense-category', value: cat, + group, }), ), ]; @@ -250,6 +251,7 @@ export const BudgetCategories = memo( content = ( ; MonthComponent: ComponentProps['component']; @@ -35,6 +39,7 @@ type ExpenseCategoryProps = { export function ExpenseCategory({ cat, + categoryGroup, editingCell, dragState, MonthComponent, @@ -72,7 +77,7 @@ export function ExpenseCategory({ collapsed={true} style={{ backgroundColor: theme.tableBackground, - opacity: cat.hidden ? 0.5 : undefined, + opacity: cat.hidden || categoryGroup?.hidden ? 0.5 : undefined, }} > @@ -81,6 +86,7 @@ export function ExpenseCategory({ ; category: CategoryEntity; + categoryGroup?: CategoryGroupEntity; dragPreview?: boolean; dragging?: boolean; editing: boolean; @@ -30,6 +34,7 @@ type SidebarCategoryProps = { export function SidebarCategory({ innerRef, category, + categoryGroup, dragPreview, dragging, editing, @@ -50,7 +55,7 @@ export function SidebarCategory({ alignItems: 'center', userSelect: 'none', WebkitUserSelect: 'none', - opacity: category.hidden ? 0.33 : undefined, + opacity: category.hidden || categoryGroup?.hidden ? 0.33 : undefined, }} >
0 ? 1 : 0, - opacity: !!category.hidden ? 0.5 : undefined, + opacity: isHidden ? 0.5 : undefined, ...style, }} data-testid="row" @@ -894,6 +895,7 @@ const ExpenseGroup = memo(function ExpenseGroup({ show3Cols={show3Cols} type={type} category={category} + isHidden={!!category.hidden || group.hidden} goal={ type === 'report' ? reportBudget.catGoal(category.id) diff --git a/packages/desktop-client/src/components/mobile/budget/index.tsx b/packages/desktop-client/src/components/mobile/budget/index.tsx index 4374b72463..d3c2bd2a78 100644 --- a/packages/desktop-client/src/components/mobile/budget/index.tsx +++ b/packages/desktop-client/src/components/mobile/budget/index.tsx @@ -343,9 +343,11 @@ function BudgetInner(props: BudgetInnerProps) { const onEditCategory = id => { const category = categories.find(c => c.id === id); + const categoryGroup = categoryGroups.find(g => g.id === category.cat_group); dispatch( pushModal('category-menu', { categoryId: category.id, + categoryGroup, onSave: onSaveCategory, onEditNotes: onEditCategoryNotes, onDelete: onDeleteCategory, diff --git a/packages/desktop-client/src/components/modals/CategoryMenuModal.tsx b/packages/desktop-client/src/components/modals/CategoryMenuModal.tsx index b88d52a0ab..75ffcaa1ec 100644 --- a/packages/desktop-client/src/components/modals/CategoryMenuModal.tsx +++ b/packages/desktop-client/src/components/modals/CategoryMenuModal.tsx @@ -4,6 +4,7 @@ import React, { useState } from 'react'; import { useLiveQuery } from 'loot-core/src/client/query-hooks'; import { q } from 'loot-core/src/shared/query'; import { + type CategoryGroupEntity, type CategoryEntity, type NoteEntity, } from 'loot-core/src/types/models'; @@ -23,6 +24,7 @@ import { Tooltip } from '../tooltips'; type CategoryMenuModalProps = { modalProps: CommonModalProps; categoryId: string; + categoryGroup?: CategoryGroupEntity; onSave: (category: CategoryEntity) => void; onEditNotes: (id: string) => void; onDelete: (categoryId: string) => void; @@ -32,6 +34,7 @@ type CategoryMenuModalProps = { export function CategoryMenuModal({ modalProps, categoryId, + categoryGroup, onSave, onEditNotes, onDelete, @@ -102,6 +105,7 @@ export function CategoryMenuModal({ leftHeaderContent={ @@ -152,7 +156,12 @@ export function CategoryMenuModal({ ); } -function AdditionalCategoryMenu({ category, onDelete, onToggleVisibility }) { +function AdditionalCategoryMenu({ + category, + categoryGroup, + onDelete, + onToggleVisibility, +}) { const [menuOpen, setMenuOpen] = useState(false); const itemStyle: CSSProperties = { ...styles.mediumText, @@ -184,13 +193,13 @@ function AdditionalCategoryMenu({ category, onDelete, onToggleVisibility }) { itemStyle} items={[ - { + !categoryGroup?.hidden && { name: 'toggleVisibility', text: category.hidden ? 'Show' : 'Hide', icon: category.hidden ? SvgViewShow : SvgViewHide, iconSize: 16, }, - Menu.line, + !categoryGroup?.hidden && Menu.line, { name: 'delete', text: 'Delete', diff --git a/packages/loot-core/src/client/state-types/modals.d.ts b/packages/loot-core/src/client/state-types/modals.d.ts index 4d4f45f8de..eef5b20f80 100644 --- a/packages/loot-core/src/client/state-types/modals.d.ts +++ b/packages/loot-core/src/client/state-types/modals.d.ts @@ -143,6 +143,7 @@ type FinanceModals = { }; 'category-menu': { categoryId: string; + categoryGroup?: CategoryGroupEntity; onSave: (category: CategoryEntity) => void; onEditNotes: (id: string) => void; onDelete: (categoryId: string) => void; diff --git a/upcoming-release-notes/2582.md b/upcoming-release-notes/2582.md new file mode 100644 index 0000000000..f532a25656 --- /dev/null +++ b/upcoming-release-notes/2582.md @@ -0,0 +1,6 @@ +--- +category: Enhancements +authors: [psybers] +--- + +Dim categories in the budget view if hidden by their category group.