From 94285523cf9b052fd76d1a5a3bd2369fc8019619 Mon Sep 17 00:00:00 2001
From: Simon Reinisch <simon@reinisch.io>
Date: Wed, 18 Dec 2024 19:21:19 +0100
Subject: [PATCH] feat: highlight currently focused cell

closes #62
---
 src/app/components/feature/BudgetGroup.vue | 14 ++++++++++++--
 src/styles/themes/light.scss               |  2 +-
 2 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/app/components/feature/BudgetGroup.vue b/src/app/components/feature/BudgetGroup.vue
index 1ed2627d..3a4de661 100644
--- a/src/app/components/feature/BudgetGroup.vue
+++ b/src/app/components/feature/BudgetGroup.vue
@@ -53,6 +53,8 @@
           [$style.brc]: index === group.budgets.length - 1 && month === 11
         }
       ]"
+      @focusin="focused = budget.id"
+      @focusout="focused = undefined"
     >
       <CellMenu
         :actions="[
@@ -91,7 +93,7 @@ import { RiAddCircleLine, RiCloseCircleLine } from '@remixicon/vue';
 import { useDataStore } from '@store/state';
 import { BudgetGroup } from '@store/state/types';
 import { average, sum } from '@utils';
-import { computed, DeepReadonly } from 'vue';
+import { computed, DeepReadonly, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 
 const props = defineProps<{
@@ -113,6 +115,7 @@ const {
 } = useDataStore();
 
 const { t } = useI18n();
+const focused = ref<string>();
 
 const totals = computed(() => {
   const totals: number[] = new Array(12).fill(0);
@@ -215,11 +218,13 @@ const performAction = (action: CellMenuActionId, budgetId: string, month: number
 }
 
 .currencyCell {
+  display: flex;
+  align-items: center;
   background: var(--grid-background-odd);
   height: 100%;
   border-right: 1px solid var(--grid-border-color);
   border-bottom: 1px solid var(--grid-border-color);
-  transition: all var(--input-field-transition);
+  transition: background-color var(--input-field-transition);
   box-shadow: inset 0 0 0 1px transparent;
 
   &.firstRow {
@@ -234,6 +239,11 @@ const performAction = (action: CellMenuActionId, budgetId: string, month: number
     background: var(--grid-background-odd-active);
   }
 
+  &:focus-within {
+    box-shadow: 0 0 0 2px var(--c-primary) inset;
+    border-radius: 1px;
+  }
+
   &.even {
     background: var(--grid-background-even);
 
diff --git a/src/styles/themes/light.scss b/src/styles/themes/light.scss
index 01be827d..d04432ce 100644
--- a/src/styles/themes/light.scss
+++ b/src/styles/themes/light.scss
@@ -150,7 +150,7 @@
   --context-menu-backdrop: brightness(10);
   --context-menu-shadow: 0 2px 10px #c5c3db;
 
-  --cell-menu-backdrop: blur(3px) brightness(0.4);
+  --cell-menu-backdrop: blur(3px) brightness(0.15);
   --cell-menu-shadow: 0 1px 2px #46434d;
 
   --grid-background-odd: #f0f2f3;