adalal/solidtime
1
0
Fork 0
mirror of https://github.com/solidtime-io/solidtime.git synced 2026-08-08 00:02: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">
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"

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

@@ -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">