Skip to content

Commit 1a5f7cf

Browse files
Tokra110Tokra110
committed
refactor(frontend): restructure DatepickerInline for reuse in popups
Wrap the quick-select shortcuts and flatpickr calendar in a flex container so parent components can switch between vertical (default) and horizontal (popup) layouts. Improve hover feedback on quick-select buttons with visible highlight colors.
1 parent 6263e58 commit 1a5f7cf

1 file changed

Lines changed: 83 additions & 70 deletions

File tree

‎frontend/src/components/input/DatepickerInline.vue‎

Lines changed: 83 additions & 70 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,77 @@
11
<template>
2-
<BaseButton
3-
v-if="(new Date()).getHours() < 21"
4-
class="datepicker__quick-select-date"
5-
@click.stop="setDate('today')"
6-
>
7-
<span class="icon"><Icon :icon="['far', 'calendar-alt']" /></span>
8-
<span class="text">
9-
<span>{{ $t('input.datepicker.today') }}</span>
10-
<span class="weekday">{{ getWeekdayFromStringInterval('today') }}</span>
11-
</span>
12-
</BaseButton>
13-
<BaseButton
14-
class="datepicker__quick-select-date"
15-
@click.stop="setDate('tomorrow')"
16-
>
17-
<span class="icon"><Icon :icon="['far', 'sun']" /></span>
18-
<span class="text">
19-
<span>{{ $t('input.datepicker.tomorrow') }}</span>
20-
<span class="weekday">{{ getWeekdayFromStringInterval('tomorrow') }}</span>
21-
</span>
22-
</BaseButton>
23-
<BaseButton
24-
class="datepicker__quick-select-date"
25-
@click.stop="setDate('nextMonday')"
26-
>
27-
<span class="icon"><Icon icon="coffee" /></span>
28-
<span class="text">
29-
<span>{{ $t('input.datepicker.nextMonday') }}</span>
30-
<span class="weekday">{{ getWeekdayFromStringInterval('nextMonday') }}</span>
31-
</span>
32-
</BaseButton>
33-
<BaseButton
34-
v-if="!((new Date()).getDay() === 0 && (new Date()).getHours() >= 21)"
35-
class="datepicker__quick-select-date"
36-
@click.stop="setDate('thisWeekend')"
37-
>
38-
<span class="icon"><Icon icon="cocktail" /></span>
39-
<span class="text">
40-
<span>{{ $t('input.datepicker.thisWeekend') }}</span>
41-
<span class="weekday">{{ getWeekdayFromStringInterval('thisWeekend') }}</span>
42-
</span>
43-
</BaseButton>
44-
<BaseButton
45-
class="datepicker__quick-select-date"
46-
@click.stop="setDate('laterThisWeek')"
47-
>
48-
<span class="icon"><Icon icon="chess-knight" /></span>
49-
<span class="text">
50-
<span>{{ $t('input.datepicker.laterThisWeek') }}</span>
51-
<span class="weekday">{{ getWeekdayFromStringInterval('laterThisWeek') }}</span>
52-
</span>
53-
</BaseButton>
54-
<BaseButton
55-
class="datepicker__quick-select-date"
56-
@click.stop="setDate('nextWeek')"
57-
>
58-
<span class="icon"><Icon icon="forward" /></span>
59-
<span class="text">
60-
<span>{{ $t('input.datepicker.nextWeek') }}</span>
61-
<span class="weekday">{{ getWeekdayFromStringInterval('nextWeek') }}</span>
62-
</span>
63-
</BaseButton>
2+
<div class="datepicker-inline">
3+
<div class="datepicker-inline__shortcuts">
4+
<BaseButton
5+
v-if="(new Date()).getHours() < 21"
6+
class="datepicker__quick-select-date"
7+
@click.stop="setDate('today')"
8+
>
9+
<span class="icon"><Icon :icon="['far', 'calendar-alt']" /></span>
10+
<span class="text">
11+
<span>{{ $t('input.datepicker.today') }}</span>
12+
<span class="weekday">{{ getWeekdayFromStringInterval('today') }}</span>
13+
</span>
14+
</BaseButton>
15+
<BaseButton
16+
class="datepicker__quick-select-date"
17+
@click.stop="setDate('tomorrow')"
18+
>
19+
<span class="icon"><Icon :icon="['far', 'sun']" /></span>
20+
<span class="text">
21+
<span>{{ $t('input.datepicker.tomorrow') }}</span>
22+
<span class="weekday">{{ getWeekdayFromStringInterval('tomorrow') }}</span>
23+
</span>
24+
</BaseButton>
25+
<BaseButton
26+
class="datepicker__quick-select-date"
27+
@click.stop="setDate('nextMonday')"
28+
>
29+
<span class="icon"><Icon icon="coffee" /></span>
30+
<span class="text">
31+
<span>{{ $t('input.datepicker.nextMonday') }}</span>
32+
<span class="weekday">{{ getWeekdayFromStringInterval('nextMonday') }}</span>
33+
</span>
34+
</BaseButton>
35+
<BaseButton
36+
v-if="!((new Date()).getDay() === 0 && (new Date()).getHours() >= 21)"
37+
class="datepicker__quick-select-date"
38+
@click.stop="setDate('thisWeekend')"
39+
>
40+
<span class="icon"><Icon icon="cocktail" /></span>
41+
<span class="text">
42+
<span>{{ $t('input.datepicker.thisWeekend') }}</span>
43+
<span class="weekday">{{ getWeekdayFromStringInterval('thisWeekend') }}</span>
44+
</span>
45+
</BaseButton>
46+
<BaseButton
47+
class="datepicker__quick-select-date"
48+
@click.stop="setDate('laterThisWeek')"
49+
>
50+
<span class="icon"><Icon icon="chess-knight" /></span>
51+
<span class="text">
52+
<span>{{ $t('input.datepicker.laterThisWeek') }}</span>
53+
<span class="weekday">{{ getWeekdayFromStringInterval('laterThisWeek') }}</span>
54+
</span>
55+
</BaseButton>
56+
<BaseButton
57+
class="datepicker__quick-select-date"
58+
@click.stop="setDate('nextWeek')"
59+
>
60+
<span class="icon"><Icon icon="forward" /></span>
61+
<span class="text">
62+
<span>{{ $t('input.datepicker.nextWeek') }}</span>
63+
<span class="weekday">{{ getWeekdayFromStringInterval('nextWeek') }}</span>
64+
</span>
65+
</BaseButton>
66+
</div>
6467

65-
<div class="flatpickr-container">
66-
<flat-pickr
67-
ref="flatPickrRef"
68-
v-model="flatPickrDate"
69-
:config="flatPickerConfig"
70-
/>
68+
<div class="flatpickr-container">
69+
<flat-pickr
70+
ref="flatPickrRef"
71+
v-model="flatPickrDate"
72+
:config="flatPickerConfig"
73+
/>
74+
</div>
7175
</div>
7276
</template>
7377

@@ -220,28 +224,37 @@ function getWeekdayFromStringInterval(dateString: string) {
220224
</script>
221225

222226
<style lang="scss" scoped>
227+
.datepicker-inline {
228+
display: flex;
229+
flex-direction: column;
230+
}
231+
223232
.datepicker__quick-select-date {
224233
display: flex;
225234
align-items: center;
226235
padding: 0 .5rem;
227236
inline-size: 100%;
228237
block-size: 2.25rem;
229238
color: var(--text);
230-
transition: all $transition;
239+
cursor: pointer;
240+
border-radius: $radius;
241+
transition: background-color $transition, color $transition;
231242
232243
&:first-child {
233244
border-radius: $radius $radius 0 0;
234245
}
235246
236247
&:hover {
237-
background: var(--grey-100);
248+
background: var(--primary-light);
249+
color: var(--primary-dark);
238250
}
239251
240252
.text {
241253
inline-size: 100%;
242254
font-size: .85rem;
243255
display: flex;
244256
justify-content: space-between;
257+
gap: .75rem;
245258
padding-inline-end: .25rem;
246259
247260
.weekday {

0 commit comments

Comments
 (0)