adalal/solidtime
1
0
Fork 0
mirror of https://github.com/solidtime-io/solidtime.git synced 2026-08-16 20:22:15 +01:00
Code Issues Packages Projects Releases Wiki Activity

improve focus handling in time tracker component, improve focus-visible state for timetracker start and stop button

Browse Source
This commit is contained in:
Gregor Vostrak
2024-09-29 00:03:56 +02:00
parent 878bbd359d
commit c9c221de62
2 changed files with 12 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
resources/js/packages/ui/src/TimeTracker/TimeTrackerRangeSelector.vue
View File

@@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import Dropdown from '@/packages/ui/src/Input/Dropdown.vue'; 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 TimeRangeSelector from '@/packages/ui/src/Input/TimeRangeSelector.vue';
import dayjs, { Dayjs } from 'dayjs'; import dayjs, { Dayjs } from 'dayjs';
import parse from 'parse-duration'; import parse from 'parse-duration';
@@ -131,6 +131,12 @@ const startTime = computed(() => {
} }
return dayjs().utc().format(); return dayjs().utc().format();
}); });
const inputField = ref<HTMLInputElement | null>(null);
watch(open, (isOpen) => {
if (!isOpen) {
inputField.value?.focus();
}
});
</script> </script>
<template> <template>
@@ -144,6 +150,7 @@ const startTime = computed(() => {
<input <input
placeholder="00:00:00" placeholder="00:00:00"
@focus="pauseLiveTimerUpdate" @focus="pauseLiveTimerUpdate"
ref="inputField"
data-testid="time_entry_time" data-testid="time_entry_time"
@blur="updateTimerAndStartLiveTimerUpdate" @blur="updateTimerAndStartLiveTimerUpdate"
@keydown.enter="onTimeEntryEnterPress" @keydown.enter="onTimeEntryEnterPress"

8
resources/js/packages/ui/src/TimeTrackerStartStop.vue
View File

@@ -16,8 +16,8 @@ const props = withDefaults(
); );
const buttonSizeClasses = { const buttonSizeClasses = {
small: 'w-6 h-6 bg-accent-200/40 hover:bg-accent-300/70', 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', 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:ring-accent-200/20 ring-4 sm:ring-8 hover:scale-110', large: 'w-11 h-11 ring-accent-200/10 focus-visible:ring-white/80 ring-4 sm:ring-[6px] hover:scale-110',
}; };
const iconClass = { const iconClass = {
small: 'w-2.5 h-2.5', small: 'w-2.5 h-2.5',
@@ -29,7 +29,7 @@ const buttonColorClasses = computed(() => {
if (props.active) { if (props.active) {
return 'bg-red-400/80 hover:bg-red-500/80 focus:bg-red-500/80'; return 'bg-red-400/80 hover:bg-red-500/80 focus:bg-red-500/80';
} else { } 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( twMerge(
buttonSizeClasses[size], buttonSizeClasses[size],
buttonColorClasses, 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"> <Transition name="fade" mode="out-in">