fix minimal layout shift on time entry select and migrate to ui button

This commit is contained in:
Gregor Vostrak
2026-04-07 21:42:34 +02:00
parent 71c8992e31
commit 8cbc9838c9

View File

@@ -14,7 +14,7 @@ import type {
} from '@/packages/api/src'; } from '@/packages/api/src';
import { ref } from 'vue'; import { ref } from 'vue';
import { twMerge } from 'tailwind-merge'; import { twMerge } from 'tailwind-merge';
import { Checkbox } from '@/packages/ui/src'; import { Button, Checkbox } from '@/packages/ui/src';
import { FieldLabel } from '../field'; import { FieldLabel } from '../field';
const props = defineProps<{ const props = defineProps<{
@@ -66,7 +66,7 @@ const showMassUpdateModal = ref(false);
:class=" :class="
twMerge( twMerge(
props.class, props.class,
'text-sm py-1.5 font-medium hidden sm:flex border-b border-border-primary items-center space-x-3' 'text-sm h-8 font-medium hidden sm:flex border-b border-border-primary items-center space-x-3'
) )
"> ">
<Checkbox <Checkbox
@@ -83,20 +83,24 @@ const showMassUpdateModal = ref(false);
<FieldLabel v-else for="selectAll" class="text-text-secondary select-none" <FieldLabel v-else for="selectAll" class="text-text-secondary select-none"
>Select All</FieldLabel >Select All</FieldLabel
> >
<button <Button
v-if="selectedTimeEntries.length" v-if="selectedTimeEntries.length"
class="text-text-tertiary flex space-x-1 items-center hover:text-text-secondary transition focus-visible:ring-2 outline-0 focus-visible:text-text-primary focus-visible:ring-ring rounded h-full px-2" variant="ghost"
size="xs"
class="text-text-tertiary hover:text-text-secondary"
@click="showMassUpdateModal = true"> @click="showMassUpdateModal = true">
<PencilSquareIcon class="w-4"></PencilSquareIcon> <PencilSquareIcon class="w-4"></PencilSquareIcon>
<span> Edit </span> <span>Edit</span>
</button> </Button>
<button <Button
v-if="selectedTimeEntries.length" v-if="selectedTimeEntries.length"
class="text-red-400 h-full px-2 space-x-1 items-center flex hover:text-red-500 transition focus-visible:ring-2 outline-0 focus-visible:text-red-500 focus-visible:ring-ring rounded" variant="ghost"
size="xs"
class="text-red-400 hover:text-red-500 hover:bg-red-500/10"
@click="deleteSelected"> @click="deleteSelected">
<TrashIcon class="w-3.5"></TrashIcon> <TrashIcon class="w-3.5"></TrashIcon>
<span> Delete </span> <span>Delete</span>
</button> </Button>
</MainContainer> </MainContainer>
</template> </template>