improve timetracker on mobile; fix select all checkbox with 0 time

entries; add minimal padding to mobile dialogs
This commit is contained in:
Gregor Vostrak
2026-02-12 17:06:20 +01:00
parent 6f207a4926
commit 0e63ecb520
3 changed files with 11 additions and 6 deletions

View File

@@ -31,14 +31,14 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
<div <div
:class=" :class="
cn( cn(
'fixed top-0 left-0 z-50 pointer-events-none w-screen h-screen flex items-start pt-6 md:pt-20 xl:pt-32 justify-center overflow-auto' 'fixed top-0 left-0 z-50 pointer-events-none w-screen h-screen flex items-start px-2 pt-3 md:pt-20 xl:pt-32 justify-center overflow-auto'
) )
"> ">
<DialogContent <DialogContent
v-bind="forwarded" v-bind="forwarded"
:class=" :class="
cn( cn(
'pointer-events-auto bg-default-background grid w-full max-w-lg border border-border-tertiary shadow-lg duration-200 sm:rounded-lg outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95', 'pointer-events-auto bg-default-background grid w-full max-w-lg border border-border-tertiary shadow-lg duration-200 rounded-lg outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
props.class props.class
) )
"> ">

View File

@@ -69,7 +69,7 @@ const showMassUpdateModal = ref(false);
"> ">
<Checkbox <Checkbox
id="selectAll" id="selectAll"
:checked="allSelected" :checked="allSelected && selectedTimeEntries.length > 0"
@update:checked="allSelected ? emit('unselectAll') : emit('selectAll')"> @update:checked="allSelected ? emit('unselectAll') : emit('selectAll')">
</Checkbox> </Checkbox>
<FieldLabel <FieldLabel

View File

@@ -208,17 +208,22 @@ useSelectEvents(
<div class="flex items-center relative @container" data-testid="dashboard_timer"> <div class="flex items-center relative @container" data-testid="dashboard_timer">
<div <div
class="flex flex-col @2xl:flex-row w-full justify-between rounded-lg bg-card-background border-card-border border transition shadow-card"> class="flex flex-col @2xl:flex-row w-full justify-between rounded-lg bg-card-background border-card-border border transition shadow-card">
<div class="flex flex-1 items-center pr-6 relative"> <div class="flex flex-1 items-center relative">
<input <input
ref="currentTimeEntryDescriptionInput" ref="currentTimeEntryDescriptionInput"
v-model="tempDescription" v-model="tempDescription"
placeholder="What are you working on?" placeholder="What are you working on?"
data-testid="time_entry_description" data-testid="time_entry_description"
class="w-full rounded-l-lg py-4 sm:py-2.5 px-3.5 border-b border-b-card-background-separator @2xl:px-4 text-base @4xl:text-lg text-text-primary bg-transparent border-none placeholder-text-secondary font-medium focus:ring-0 transition" class="w-full rounded-l-lg py-4 sm:py-2.5 px-3.5 border-b border-b-card-background-separator @2xl:px-4 text-lg text-text-primary bg-transparent border-none placeholder-text-secondary font-medium focus:ring-0 transition"
type="text" type="text"
@keydown.enter="startTimerIfNotActive" @keydown.enter="startTimerIfNotActive"
@keydown.esc="showDropdown = false" @keydown.esc="showDropdown = false"
@blur="updateTimeEntryDescription" /> @blur="updateTimeEntryDescription" />
<div class="@2xl:hidden pr-3 shrink-0">
<TimeTrackerStartStop
:active="isActive"
@changed="onToggleButtonPress"></TimeTrackerStartStop>
</div>
<div <div
v-if="showDropdown && filteredRecentlyTrackedTimeEntries.length > 0" v-if="showDropdown && filteredRecentlyTrackedTimeEntries.length > 0"
ref="floating" ref="floating"
@@ -285,7 +290,7 @@ useSelectEvents(
</div> </div>
</div> </div>
</div> </div>
<div class="pl-4 @2xl:pl-6 pr-3 absolute sm:relative top-[6px] sm:top-0 right-0"> <div class="pl-4 @2xl:pl-6 pr-3 hidden @2xl:block">
<TimeTrackerStartStop <TimeTrackerStartStop
:active="isActive" :active="isActive"
size="large" size="large"