feat: differentiate category groups and categories

in order to better understand what can be edited an what not and have more visual guidance
Xiphe · Apr 30, 2020 · 92918b3 · 92918b3
1 parent 7649caf
commit 92918b3
Show file tree

Hide file tree

Showing 7 changed files with 110 additions and 26 deletions.
diff --git 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
@@ -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 (
     <div
       style={{ '--indent': indent } as any}
-      className={classNames(className, styles.row, leaf && styles.leaf)}
+      className={classNames(
+        className,
+        styles.row,
+        !leaf && styles.group,
+        odd && styles.odd,
+        groupClosed && styles.groupClosed,
+      )}
     >
       {children}
     </div>

diff --git 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
@@ -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
@@ -24,6 +24,8 @@ export default function CategorySidebar({
     [syncScrollY],
   );
 
+  let prevIndent = 0;
+  let i = -1;
   return (
     <div className={styles.sidebarWrap}>
       <div className={styles.sidebarHeader}>
@@ -34,20 +36,37 @@ export default function CategorySidebar({
         innerRef={innerRef}
         className={styles.categorySidebar}
       >
-        {categories.map(({ uuid, name, group, indentation, icon }) => (
-          <Row
-            key={uuid}
-            indent={indentation}
-            leaf={!group}
-            className={styles.row}
-          >
-            <span
-              style={{ backgroundImage: `url(${icon})` }}
-              className={styles.icon}
-            />
-            {name}
-          </Row>
-        ))}
+        {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 (
+            <Row
+              key={uuid}
+              indent={indentation}
+              leaf={!group}
+              odd={!(i % 2)}
+              groupClosed={groupClosed}
+              className={styles.row}
+            >
+              {!group && (
+                <span
+                  style={{ backgroundImage: `url(${icon})` }}
+                  className={styles.icon}
+                />
+              )}
+              {name}
+            </Row>
+          );
+        })}
       </Sidebar>
     </div>
   );

diff --git a/src/views/Month/Categories.tsx b/src/views/Month/Categories.tsx
@@ -21,12 +21,15 @@ type CategoriesProps = Omit<Props, 'budget'> & {
 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 (
-    <Row className={styles.budgetRow} indent={indent} leaf={true}>
+    <Row
+      odd={odd}
+      className={styles.budgetRow}
+      indent={indent}
+      leaf={true}
+      groupClosed={groupClosed}
+    >
       <span className={classNames(budgeted === 0 && styles.zero)}>
         <BudgetInput
           onChange={setBudgeted}
@@ -87,15 +96,32 @@ export default function Categories({
   actions,
 }: CategoriesProps) {
   const { format } = numberFormatter;
+  let prevIndent = 0;
+  let i = -1;
   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 (
             <Row
+              odd={!(i % 2)}
               key={entry.uuid}
               className={classNames(styles.budgetRow, styles.budgetRowGroup)}
               indent={entry.indent}
+              groupClosed={groupClosed}
             >
               <span className={classNames(entry.budgeted === 0 && styles.zero)}>
                 {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
@@ -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;