From 92918b32148a02fd79d20b9b4f4b816361d996b8 Mon Sep 17 00:00:00 2001 From: Xiphe Date: Thu, 30 Apr 2020 22:32:23 +0200 Subject: [PATCH] feat: differentiate category groups and categories in order to better understand what can be edited an what not and have more visual guidance --- src/components/Row/Row.module.scss | 17 +++++-- src/components/Row/Row.tsx | 12 ++++- src/theme.scss | 2 + .../CategorySidebar.module.scss | 5 +- src/views/CategorySidebar/CategorySidebar.tsx | 47 +++++++++++++------ src/views/Month/Categories.tsx | 34 ++++++++++++-- src/views/Month/Month.module.scss | 19 +++++++- 7 files changed, 110 insertions(+), 26 deletions(-) diff --git a/src/components/Row/Row.module.scss b/src/components/Row/Row.module.scss index eda7be3..984ec2e 100644 --- a/src/components/Row/Row.module.scss +++ b/src/components/Row/Row.module.scss @@ -1,8 +1,19 @@ .row { - line-height: var(--row-height); + display: flex; height: var(--row-height); - background-color: rgba(var(--dim-colors), calc(0.1 - var(--indent) * 0.035)); + align-items: center; } -.leaf { +.odd { + background-color: rgba(var(--dim-colors), 0.05); +} +.group { + padding-bottom: 0.15rem; + color: var(--group-color); + font-weight: bold; + font-size: 0.8rem; background-color: transparent; + align-items: flex-end; +} +.groupClosed { + margin-top: 1rem; } diff --git a/src/components/Row/Row.tsx b/src/components/Row/Row.tsx index 4360558..6e109f4 100644 --- a/src/components/Row/Row.tsx +++ b/src/components/Row/Row.tsx @@ -5,19 +5,29 @@ import styles from './Row.module.scss'; type Props = { indent?: number; leaf?: boolean; + odd?: boolean; children?: ReactNode; + groupClosed?: boolean; className?: string; }; export default function Row({ indent = 0, leaf = false, children, + odd, + groupClosed, className, }: Props) { return (
{children}
diff --git a/src/theme.scss b/src/theme.scss index de88dba..9885f2b 100644 --- a/src/theme.scss +++ b/src/theme.scss @@ -5,6 +5,7 @@ --undim-colors: 255, 255, 255; --outer-border: transparent; --main-color: rgb(35, 35, 35); + --group-color: #6d6d6d; --secondary-color: #b3b1b7; --input-background: white; --background-color: rgb(236, 236, 236); @@ -20,6 +21,7 @@ --undim-colors: 0, 0, 0; --outer-border: rgba(255, 255, 255, 0.2); --main-color: #fff; + --group-color: #777777; --header-background-color: #2f3031; --element-border-color: #131313; --secondary-color: #676466; diff --git a/src/views/CategorySidebar/CategorySidebar.module.scss b/src/views/CategorySidebar/CategorySidebar.module.scss index 7474e7b..d42d87b 100644 --- a/src/views/CategorySidebar/CategorySidebar.module.scss +++ b/src/views/CategorySidebar/CategorySidebar.module.scss @@ -4,7 +4,6 @@ text-overflow: ellipsis; overflow: hidden; white-space: nowrap; - display: flex; } .sidebarWrap { @@ -32,9 +31,9 @@ .icon { display: block; - width: 1.6rem; + width: 1.2rem; height: 1.5rem; - background-position: center left; + background-position: -0.3rem top; background-size: 1.3rem; background-repeat: no-repeat; } diff --git a/src/views/CategorySidebar/CategorySidebar.tsx b/src/views/CategorySidebar/CategorySidebar.tsx index 2ca2f4c..c471bea 100644 --- a/src/views/CategorySidebar/CategorySidebar.tsx +++ b/src/views/CategorySidebar/CategorySidebar.tsx @@ -24,6 +24,8 @@ export default function CategorySidebar({ [syncScrollY], ); + let prevIndent = 0; + let i = -1; return (
@@ -34,20 +36,37 @@ export default function CategorySidebar({ innerRef={innerRef} className={styles.categorySidebar} > - {categories.map(({ uuid, name, group, indentation, icon }) => ( - - - {name} - - ))} + {categories.map(({ uuid, name, group, indentation, icon }) => { + const groupIndentation = group ? indentation + 1 : indentation; + const groupClosed = prevIndent > groupIndentation; + if (group) { + i = -1; + } else if (groupClosed) { + i = 0; + } else { + i += 1; + } + prevIndent = groupIndentation; + + return ( + + {!group && ( + + )} + {name} + + ); + })}
); diff --git a/src/views/Month/Categories.tsx b/src/views/Month/Categories.tsx index 9686a36..8e3f5d0 100644 --- a/src/views/Month/Categories.tsx +++ b/src/views/Month/Categories.tsx @@ -21,12 +21,15 @@ type CategoriesProps = Omit & { type BudgetRowProps = { actions: CategoriesProps['actions']; numberFormatter: NumberFormatter; - + groupClosed: boolean; + odd: boolean; entry: BudgetCategoryRow; indent: number; }; function BudgetRow({ numberFormatter, + groupClosed, + odd, entry: { uuid, overspendRollover, budgeted, spend, balance }, actions: { setBudgeted, toggleRollover }, indent, @@ -35,7 +38,7 @@ function BudgetRow({ const showContextMenu = useCallback( (ev) => { - ev.preventDefault(); + ev.proddtDefault(); const menu = new remote.Menu(); menu.append( new remote.MenuItem({ @@ -56,7 +59,13 @@ function BudgetRow({ ); return ( - + {budgetCategories.map((entry) => { + const groupIndentation = !isBudgetCategoryRow(entry) + ? entry.indent + 1 + : entry.indent; + const groupClosed = prevIndent > groupIndentation; + prevIndent = groupIndentation; + + if (!isBudgetCategoryRow(entry)) { + i = -1; + } else if (groupClosed) { + i = 0; + } else { + i += 1; + } if (!isBudgetCategoryRow(entry)) { return ( {format(entry.budgeted)} @@ -121,6 +147,8 @@ export default function Categories({ indent={entry.indent} actions={actions} entry={entry} + odd={!(i % 2)} + groupClosed={groupClosed} numberFormatter={numberFormatter} /> ); diff --git a/src/views/Month/Month.module.scss b/src/views/Month/Month.module.scss index 54a8730..9ede78e 100644 --- a/src/views/Month/Month.module.scss +++ b/src/views/Month/Month.module.scss @@ -81,17 +81,29 @@ width: calc(100% / 3); } .budgetRow { - padding: 0 0.5rem; + padding-right: 0.5rem; + padding-left: 3px; span { @include budgetRowEntry(); font-weight: 300; transition: color 400ms ease-in; font-family: var(--font-mono); + &:first-child { + width: calc(100% / 3 + 0.5rem - 3px); + } } } .budgetRowGroup { + letter-spacing: 0.12rem; span { font-weight: bold; + transform: translate(0.1rem, 0); + &:first-child { + transform: none; + } + &.negativeBalance { + color: var(--group-color); + } } } .budgetInput { @@ -107,7 +119,10 @@ color: var(--main-color); border: none; position: relative; - cursor: default; + cursor: pointer; + &:hover { + box-shadow: 0 0 0 3px var(--secondary-color); + } &:focus { @include focusOutline(); cursor: text;