vikunja
/
frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

chore: move datepicker popup to real popup component

This commit is contained in:
kolaente 2021-12-29 20:54:01 +01:00
parent 932f1774ec
commit 950fdce111
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
1 changed files with 64 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
src/components/date/datepickerWithRange.vue
View File

@ -1,46 +1,54 @@
<template> <template>
<a @click="showPopup = !showPopup">
{{ $t('task.show.select') }}
</a>
<div class="datepicker-with-range-container"> <div class="datepicker-with-range-container">
<transition name="fade"> <popup>
<div class="datepicker-with-range" v-if="showPopup"> <template #trigger="{toggle}">
<div class="selections"> <a @click.prevent.stop="toggle()">
<button @click="setDateRange(datesToday)" :class="{'is-active': dateRange === datesToday}"> {{ $t('task.show.select') }}
{{ $t('task.show.today') }} </a>
</button> </template>
<button @click="setDateRange(datesThisWeek)" :class="{'is-active': dateRange === datesThisWeek}"> <template #content="{isOpen}">
{{ $t('task.show.thisWeek') }} <div class="datepicker-with-range" :class="{'is-open': isOpen}">
</button> <div class="selections">
<button @click="setDateRange(datesNextWeek)" :class="{'is-active': dateRange === datesNextWeek}"> <button @click="setDateRange(datesToday)" :class="{'is-active': dateRange === datesToday}">
{{ $t('task.show.nextWeek') }} {{ $t('task.show.today') }}
</button> </button>
<button @click="setDateRange(datesNext7Days)" :class="{'is-active': dateRange === datesNext7Days}"> <button @click="setDateRange(datesThisWeek)"
{{ $t('task.show.next7Days') }} :class="{'is-active': dateRange === datesThisWeek}">
</button> {{ $t('task.show.thisWeek') }}
<button @click="setDateRange(datesThisMonth)" :class="{'is-active': dateRange === datesThisMonth}"> </button>
{{ $t('task.show.thisMonth') }} <button @click="setDateRange(datesNextWeek)"
</button> :class="{'is-active': dateRange === datesNextWeek}">
<button @click="setDateRange(datesNextMonth)" :class="{'is-active': dateRange === datesNextMonth}"> {{ $t('task.show.nextWeek') }}
{{ $t('task.show.nextMonth') }} </button>
</button> <button @click="setDateRange(datesNext7Days)"
<button @click="setDateRange(datesNext30Days)" :class="{'is-active': dateRange === datesNext7Days}">
:class="{'is-active': dateRange === datesNext30Days}"> {{ $t('task.show.next7Days') }}
{{ $t('task.show.next30Days') }} </button>
</button> <button @click="setDateRange(datesThisMonth)"
<button @click="setDateRange('')" :class="{'is-active': customRangeActive}"> :class="{'is-active': dateRange === datesThisMonth}">
{{ $t('misc.custom') }} {{ $t('task.show.thisMonth') }}
</button> </button>
<button @click="setDateRange(datesNextMonth)"
:class="{'is-active': dateRange === datesNextMonth}">
{{ $t('task.show.nextMonth') }}
</button>
<button @click="setDateRange(datesNext30Days)"
:class="{'is-active': dateRange === datesNext30Days}">
{{ $t('task.show.next30Days') }}
</button>
<button @click="setDateRange('')" :class="{'is-active': customRangeActive}">
{{ $t('misc.custom') }}
</button>
</div>
<div class="flatpickr-container">
<flat-pickr
:config="flatPickerConfig"
v-model="dateRange"
/>
</div>
</div> </div>
<div class="flatpickr-container"> </template>
<flat-pickr </popup>
:config="flatPickerConfig"
v-model="dateRange"
/>
</div>
</div>
</transition>
</div> </div>
</template> </template>
@ -51,6 +59,7 @@ import {computed, ref, watch} from 'vue'
import {useI18n} from 'vue-i18n' import {useI18n} from 'vue-i18n'
import {store} from '@/store' import {store} from '@/store'
import {format} from 'date-fns' import {format} from 'date-fns'
import Popup from '@/components/misc/popup'
const {t} = useI18n() const {t} = useI18n()
@ -202,15 +211,25 @@ const customRangeActive = computed<Boolean>(() => {
.datepicker-with-range-container { .datepicker-with-range-container {
position: relative; position: relative;
z-index: 10; z-index: 10;
:deep(.popup) {
margin-top: 1rem;
border-radius: $radius;
border: 1px solid var(--grey-200);
background-color: var(--white);
box-shadow: $shadow;
&.is-open {
width: 500px;
height: 320px;
}
}
} }
.datepicker-with-range { .datepicker-with-range {
border-radius: $radius;
border: 1px solid var(--grey-200);
background-color: var(--white);
box-shadow: $shadow;
display: flex; display: flex;
width: 500px; width: 100%;
height: 100%;
position: absolute; position: absolute;
:deep(.flatpickr-calendar) { :deep(.flatpickr-calendar) {