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

fix focus state for dropdowns, fix taborder for timerange select in timetracker and timeentryrows

Browse Source
This commit is contained in:
Gregor Vostrak
2025-01-29 13:16:54 +01:00
parent b783ea9ecd
commit 2dd80ba6cc
8 changed files with 68 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
resources/js/packages/ui/src/TimeEntry/TimeEntryAggregateRow.vue
View File

@@ -152,7 +152,7 @@ function onSelectChange(event: Event) {
<div class="flex-1">
<button
@click="expanded = !expanded"
class="hidden lg:block text-muted w-[105px] px-1 py-1.5 bg-transparent text-center hover:bg-card-background rounded-lg border border-transparent hover:border-card-border text-sm font-medium focus-visible:outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:bg-tertiary">
class="hidden lg:block text-muted w-[110px] px-1 py-1.5 bg-transparent text-center hover:bg-card-background rounded-lg border border-transparent hover:border-card-border text-sm font-medium focus-visible:outline-none focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:bg-tertiary">
{{ formatStartEnd(timeEntry.start, timeEntry.end) }}
</button>
</div>

9
resources/js/packages/ui/src/TimeEntry/TimeEntryRangeSelector.vue
View File

@@ -19,6 +19,11 @@ const emit = defineEmits<{
}>();
const open = ref(false);
const triggerElement = ref<HTMLButtonElement | null>(null);
function closeAndFocusButton() {
triggerElement.value?.focus();
open.value = false;
}
</script>
<template>
@@ -31,9 +36,10 @@ const open = ref(false);
<template #trigger>
<button
data-testid="time_entry_range_selector"
ref="triggerElement"
:class="
twMerge(
'text-muted w-[105px] px-2 bg-transparent text-center hover:bg-card-background rounded-lg border border-transparent hover:border-card-border focus-visible:outline-none focus:outline-none focus-visible:ring-2 focus-visible:text-text-primary focus-visible:ring-ring focus-visible:bg-tertiary',
'text-muted w-[110px] px-2 bg-transparent text-center hover:bg-card-background rounded-lg border border-transparent hover:border-card-border focus-visible:outline-none focus:outline-none focus-visible:ring-2 focus-visible:text-text-primary focus-visible:ring-ring focus-visible:bg-tertiary',
showDate
? 'text-xs py-1.5 font-semibold'
: 'text-sm py-1.5 font-medium',
@@ -53,6 +59,7 @@ const open = ref(false);
emit('changed', newStart, newEnd)
"
focus
@close="closeAndFocusButton"
:start="start"
:end="end">
</TimeRangeSelector>

36
resources/js/packages/ui/src/TimeEntry/TimeEntryRowDurationInput.vue
View File

@@ -6,8 +6,6 @@ import {
import { computed, defineProps, ref } from 'vue';
import parse from 'parse-duration';
import dayjs from 'dayjs';
import Dropdown from '@/packages/ui/src/Input/Dropdown.vue';
import TimeRangeSelector from '@/packages/ui/src/Input/TimeRangeSelector.vue';
const props = defineProps<{
start: string;
@@ -63,32 +61,14 @@ function selectInput(event: Event) {
</script>
<template>
<Dropdown
v-model="open"
@submit="open = false"
align="bottom"
:close-on-content-click="false">
<template #trigger>
<input
data-testid="time_entry_duration_input"
class="text-white w-[90px] px-2 py-1.5 bg-transparent text-center hover:bg-card-background rounded-lg border border-transparent hover:border-card-border text-sm font-semibold focus-visible:bg-tertiary focus-visible:border-transparent focus-visible:ring-2 focus-visible:ring-ring"
@focus="selectInput"
@keydown.tab="open = false"
@blur="updateTimerAndStartLiveTimerUpdate"
@keydown.enter="updateTimerAndStartLiveTimerUpdate"
v-model="currentTime" />
</template>
<template #content>
<TimeRangeSelector
@changed="
(newStart: string, newEnd: string) =>
emit('changed', newStart, newEnd)
"
:start="start"
:end="end">
</TimeRangeSelector>
</template>
</Dropdown>
<input
data-testid="time_entry_duration_input"
class="text-white w-[90px] px-2 py-1.5 bg-transparent text-center hover:bg-card-background rounded-lg border border-transparent hover:border-card-border text-sm font-semibold focus-visible:bg-tertiary focus-visible:border-transparent focus-visible:ring-2 focus-visible:ring-ring"
@focus="selectInput"
@keydown.tab="open = false"
@blur="updateTimerAndStartLiveTimerUpdate"
@keydown.enter="updateTimerAndStartLiveTimerUpdate"
v-model="currentTime" />
</template>
<style scoped></style>