improve focus handling in time tracker component, improve focus-visib…

…le state for timetracker start and stop button
solidtime-io · Sep 28, 2024 · 3fe0425 · 3fe0425
1 parent 0d021a6
commit 3fe0425
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 5 deletions.
diff --git a/resources/js/packages/ui/src/TimeTracker/TimeTrackerRangeSelector.vue b/resources/js/packages/ui/src/TimeTracker/TimeTrackerRangeSelector.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import Dropdown from '@/packages/ui/src/Input/Dropdown.vue';
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import TimeRangeSelector from '@/packages/ui/src/Input/TimeRangeSelector.vue';
 import dayjs, { Dayjs } from 'dayjs';
 import parse from 'parse-duration';
@@ -131,6 +131,12 @@ const startTime = computed(() => {
     }
     return dayjs().utc().format();
 });
+const inputField = ref<HTMLInputElement | null>(null);
+watch(open, (isOpen) => {
+    if (!isOpen) {
+        inputField.value?.focus();
+    }
+});
 </script>
 
 <template>
@@ -144,6 +150,7 @@ const startTime = computed(() => {
                 <input
                     placeholder="00:00:00"
                     @focus="pauseLiveTimerUpdate"
+                    ref="inputField"
                     data-testid="time_entry_time"
                     @blur="updateTimerAndStartLiveTimerUpdate"
                     @keydown.enter="onTimeEntryEnterPress"

diff --git a/resources/js/packages/ui/src/TimeTrackerStartStop.vue b/resources/js/packages/ui/src/TimeTrackerStartStop.vue
@@ -16,8 +16,8 @@ const props = withDefaults(
 );
 const buttonSizeClasses = {
     small: 'w-6 h-6 bg-accent-200/40 hover:bg-accent-300/70',
-    base: 'w-8 h-8 bg-accent-200/40 hover:scale-110 hover:bg-accent-300/70 ring-accent-200/10 focus:ring-accent-200/10 hover:ring-4',
-    large: 'w-11 h-11 ring-accent-200/10 focus:ring-accent-200/20 ring-4 sm:ring-8 hover:scale-110',
+    base: 'w-8 h-8 bg-accent-200/40 hover:scale-110 hover:bg-accent-300/70 ring-accent-200/10 focus-visible:ring-white/80 ring-4 hover:ring-4',
+    large: 'w-11 h-11 ring-accent-200/10 focus-visible:ring-white/80 ring-4 sm:ring-[6px] hover:scale-110',
 };
 const iconClass = {
     small: 'w-2.5 h-2.5',
@@ -29,7 +29,7 @@ const buttonColorClasses = computed(() => {
     if (props.active) {
         return 'bg-red-400/80 hover:bg-red-500/80 focus:bg-red-500/80';
     } else {
-        return 'bg-accent-300/70 hover:bg-accent-400/70 focus:bg-accent-400/70';
+        return 'bg-accent-300/70 hover:bg-accent-400/70 focus:bg-accent-500/70';
     }
 });
 
@@ -46,7 +46,7 @@ function toggleState() {
             twMerge(
                 buttonSizeClasses[size],
                 buttonColorClasses,
-                'flex items-center justify-center py-1 transition  focus:outline-0 rounded-full text-white '
+                'flex items-center justify-center py-1 transition focus:outline-0 rounded-full text-white '
             )
         ">
         <Transition name="fade" mode="out-in">