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

improve DatePicker sizing in report create modal

Browse Source
This commit is contained in:
Gregor Vostrak
2025-05-20 14:56:45 +02:00
parent 09f7fbccf6
commit f1cce79678
5 changed files with 22 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
resources/js/Components/Common/Report/ReportCreateModal.vue
View File

@@ -103,13 +103,13 @@ async function submit() {
<div
v-if="report.is_public"
class="flex items-center space-x-4">
<div>
<div class="w-full">
<InputLabel for="public_until" value="Expires at" />
<div class="text-text-tertiary font-medium">
(optional)
</div>
</div>
<DatePicker id="public_until"></DatePicker>
<DatePicker id="public_until" size="input"></DatePicker>
</div>
</div>
</div>

4
resources/js/Components/Common/Report/ReportEditModal.vue
View File

@@ -118,7 +118,9 @@ async function submit() {
v-if="report.is_public"
class="flex items-center space-x-4">
<InputLabel for="public_until" value="Expires at" />
<DatePicker id="public_until"></DatePicker>
<DatePicker
id="public_until"
size="input"></DatePicker>
</div>
</div>
</div>

19
resources/js/packages/ui/src/Input/DatePicker.vue
View File

@@ -4,7 +4,7 @@ import {
PopoverContent,
PopoverTrigger,
} from '@/Components/ui/popover';
import { Button } from '@/Components/ui/button';
import { Button, type ButtonVariants } from '@/Components/ui/button';
import { Calendar } from '@/Components/ui/calendar';
import { CalendarIcon } from 'lucide-vue-next';
import { formatDateLocalized } from '@/packages/ui/src/utils/time';
@@ -16,6 +16,7 @@ import { getLocalizedDayJs } from '@/packages/ui/src/utils/time';
const props = defineProps<{
class?: string;
tabindex?: string;
size: ButtonVariants['size'];
}>();
const model = defineModel<string | null>();
@@ -52,14 +53,21 @@ const organization = inject<ComputedRef<Organization>>('organization');
<PopoverTrigger as-child>
<Button
variant="input"
size="sm"
:size="size"
:class="[
'w-full gap-1.5 justify-center text-left font-normal',
size === 'sm' ? 'gap-1.5' : 'gap-2',
'w-full justify-center text-left font-normal',
!model && 'text-muted-foreground',
props.class,
]"
:tabindex="tabindex">
<CalendarIcon class="h-3 w-3" />
<CalendarIcon
:class="[
size === 'xs' ? 'h-3 w-3' :
size === 'sm' ? 'h-3 w-3' :
size === 'lg' ? 'h-4.5 w-4.5' :
'h-4 w-4'
]" />
<span class="text-center">
{{
model
@@ -77,8 +85,7 @@ const organization = inject<ComputedRef<Organization>>('organization');
mode="single"
:model-value="date"
:initial-focus="true"
@update:model-value="handleChange"
/>
@update:model-value="handleChange" />
</PopoverContent>
</Popover>
</template>

2
resources/js/packages/ui/src/Input/TimeRangeSelector.vue
View File

@@ -84,6 +84,7 @@ watch(focused, (newValue, oldValue) => {
<div class="px-2 pt-2">
<DatePicker
v-model="tempStart"
size="sm"
class="text-xs text-text-tertiary max-w-28 px-1.5 py-1.5"
@changed="updateTimeEntry"></DatePicker>
</div>
@@ -91,6 +92,7 @@ watch(focused, (newValue, oldValue) => {
<DatePicker
v-if="tempEnd !== null"
v-model="tempEnd"
size="sm"
class="text-xs text-text-tertiary max-w-28 px-1.5 py-1.5"
@changed="updateTimeEntry"></DatePicker>
</div>

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

@@ -257,9 +257,11 @@ type BillableOption = {
</div>
<DatePicker
v-model="localStart"
size="sm"
class="text-xs text-text-tertiary max-w-28 px-1.5 py-1.5"></DatePicker>
<DatePicker
v-model="localEnd"
size="sm"
class="text-xs text-text-tertiary max-w-28 px-1.5 py-1.5"></DatePicker>
</div>
</div>