Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Dim categories hidden by their groups #2582

Merged
merged 9 commits into from
Apr 12, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/desktop-client/src/components/Modals.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,7 @@ export const BudgetCategories = memo(
cat => ({
type: 'expense-category',
value: cat,
group,
}),
),
];
Expand Down Expand Up @@ -250,6 +251,7 @@ export const BudgetCategories = memo(
content = (
<ExpenseCategory
cat={item.value}
categoryGroup={item.group}
editingCell={editingCell}
MonthComponent={dataComponents.ExpenseCategoryComponent}
dragState={dragState}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
// @ts-strict-ignore
import React, { type ComponentProps } from 'react';

import { type CategoryEntity } from 'loot-core/src/types/models';
import {
type CategoryGroupEntity,
type CategoryEntity,
} from 'loot-core/src/types/models';

import { theme } from '../../style';
import { View } from '../common/View';
Expand All @@ -20,6 +23,7 @@ import { SidebarCategory } from './SidebarCategory';

type ExpenseCategoryProps = {
cat: CategoryEntity;
categoryGroup?: CategoryGroupEntity;
editingCell: { id: string; cell: string } | null;
dragState: DragState<CategoryEntity>;
MonthComponent: ComponentProps<typeof RenderMonths>['component'];
Expand All @@ -35,6 +39,7 @@ type ExpenseCategoryProps = {

export function ExpenseCategory({
cat,
categoryGroup,
editingCell,
dragState,
MonthComponent,
Expand Down Expand Up @@ -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,
}}
>
<DropHighlight pos={dropPos} offset={{ top: 1 }} />
Expand All @@ -81,6 +86,7 @@ export function ExpenseCategory({
<SidebarCategory
innerRef={dragRef}
category={cat}
categoryGroup={categoryGroup}
dragPreview={dragging && dragState.preview}
dragging={dragging && !dragState.preview}
editing={
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
// @ts-strict-ignore
import React, { type CSSProperties, type Ref, useState } from 'react';

import { type CategoryEntity } from 'loot-core/src/types/models';
import {
type CategoryGroupEntity,
type CategoryEntity,
} from 'loot-core/src/types/models';

import { SvgCheveronDown } from '../../icons/v1';
import { theme } from '../../style';
Expand All @@ -15,6 +18,7 @@ import { Tooltip } from '../tooltips';
type SidebarCategoryProps = {
innerRef: Ref<HTMLDivElement>;
category: CategoryEntity;
categoryGroup?: CategoryGroupEntity;
dragPreview?: boolean;
dragging?: boolean;
editing: boolean;
Expand All @@ -30,6 +34,7 @@ type SidebarCategoryProps = {
export function SidebarCategory({
innerRef,
category,
categoryGroup,
dragPreview,
dragging,
editing,
Expand All @@ -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,
}}
>
<div
Expand Down Expand Up @@ -99,7 +104,7 @@ export function SidebarCategory({
setMenuOpen(false);
}}
items={[
{
!categoryGroup?.hidden && {
name: 'toggle-visibility',
text: category.hidden ? 'Show' : 'Hide',
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -227,6 +227,7 @@ function ExpenseCategoryPreview({ name, pending, style }) {
const ExpenseCategory = memo(function ExpenseCategory({
type,
category,
isHidden,
goal,
budgeted,
spent,
Expand Down Expand Up @@ -322,7 +323,7 @@ const ExpenseCategory = memo(function ExpenseCategory({
backgroundColor: 'transparent',
borderBottomWidth: 0,
borderTopWidth: index > 0 ? 1 : 0,
opacity: !!category.hidden ? 0.5 : undefined,
opacity: isHidden ? 0.5 : undefined,
...style,
}}
data-testid="row"
Expand Down Expand Up @@ -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)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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;
Expand All @@ -32,6 +34,7 @@ type CategoryMenuModalProps = {
export function CategoryMenuModal({
modalProps,
categoryId,
categoryGroup,
onSave,
onEditNotes,
onDelete,
Expand Down Expand Up @@ -102,6 +105,7 @@ export function CategoryMenuModal({
leftHeaderContent={
<AdditionalCategoryMenu
category={category}
categoryGroup={categoryGroup}
onDelete={_onDelete}
onToggleVisibility={_onToggleVisibility}
/>
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -184,13 +193,13 @@ function AdditionalCategoryMenu({ category, onDelete, onToggleVisibility }) {
<Menu
getItemStyle={() => 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',
Expand Down
1 change: 1 addition & 0 deletions packages/loot-core/src/client/state-types/modals.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -143,6 +143,7 @@ type FinanceModals = {
};
'category-menu': {
categoryId: string;
categoryGroup?: CategoryGroupEntity;
onSave: (category: CategoryEntity) => void;
onEditNotes: (id: string) => void;
onDelete: (categoryId: string) => void;
Expand Down
6 changes: 6 additions & 0 deletions upcoming-release-notes/2582.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
category: Enhancements
authors: [psybers]
---

Dim categories in the budget view if hidden by their category group.
Loading