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

feat: move date filter to popup and improve styling

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

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

@ -1,37 +1,46 @@
<template>
<div class="datepicker-with-range">
<div class="selections">
<button @click="setDateRange(datesToday)" :class="{'is-active': dateRange === datesToday}">
{{ $t('task.show.today') }}
</button>
<button @click="setDateRange(datesThisWeek)" :class="{'is-active': dateRange === datesThisWeek}">
{{ $t('task.show.thisWeek') }}
</button>
<button @click="setDateRange(datesNextWeek)" :class="{'is-active': dateRange === datesNextWeek}">
{{ $t('task.show.nextWeek') }}
</button>
<button @click="setDateRange(datesNext7Days)" :class="{'is-active': dateRange === datesNext7Days}">
{{ $t('task.show.next7Days') }}
</button>
<button @click="setDateRange(datesThisMonth)" :class="{'is-active': dateRange === datesThisMonth}">
{{ $t('task.show.thisMonth') }}
</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>
<a @click="showPopup = !showPopup">
{{ $t('task.show.select') }}
</a>
<div class="datepicker-with-range-container">
<transition name="fade">
<div class="datepicker-with-range" v-if="showPopup">
<div class="selections">
<button @click="setDateRange(datesToday)" :class="{'is-active': dateRange === datesToday}">
{{ $t('task.show.today') }}
</button>
<button @click="setDateRange(datesThisWeek)" :class="{'is-active': dateRange === datesThisWeek}">
{{ $t('task.show.thisWeek') }}
</button>
<button @click="setDateRange(datesNextWeek)" :class="{'is-active': dateRange === datesNextWeek}">
{{ $t('task.show.nextWeek') }}
</button>
<button @click="setDateRange(datesNext7Days)" :class="{'is-active': dateRange === datesNext7Days}">
{{ $t('task.show.next7Days') }}
</button>
<button @click="setDateRange(datesThisMonth)" :class="{'is-active': dateRange === datesThisMonth}">
{{ $t('task.show.thisMonth') }}
</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>
</transition>
</div>
</template>
@ -61,6 +70,7 @@ const flatPickerConfig = computed(() => ({
},
}))
const showPopup = ref<Boolean>(false)
const dateRange = ref<string>('')
watch(
@ -189,6 +199,11 @@ const customRangeActive = computed<Boolean>(() => {
</script>
<style lang="scss" scoped>
.datepicker-with-range-container {
position: relative;
z-index: 10;
}
.datepicker-with-range {
border-radius: $radius;
border: 1px solid var(--grey-200);
@ -196,6 +211,7 @@ const customRangeActive = computed<Boolean>(() => {
box-shadow: $shadow;
display: flex;
width: 500px;
position: absolute;
:deep(.flatpickr-calendar) {
margin: 0 auto 8px;
@ -216,6 +232,7 @@ const customRangeActive = computed<Boolean>(() => {
width: 30%;
display: flex;
flex-direction: column;
padding-top: .5rem;
button {
display: block;

2
src/i18n/lang/en.json
View File

@ -535,7 +535,7 @@
"noDates": "Show tasks without dates",
"overdue": "Show overdue tasks",
"fromuntil": "Tasks from {from} until {until}",
"select": "Select a range:",
"select": "Select a date range",
"today": "Today",
"thisWeek": "This Week",
"nextWeek": "Next Week",

41
src/views/tasks/ShowTasks.vue
View File

@ -1,26 +1,25 @@
<template>
<div class="is-max-width-desktop show-tasks">
<div class="is-max-width-desktop has-text-left ">
<h3 class="mb-2">
{{ pageTitle }}
</h3>
<p v-if="!showAll">
<fancycheckbox @change="setShowNulls">
<p v-if="!showAll" class="show-tasks-options">
<datepicker-with-range @dateChanged="setDate"/>
<fancycheckbox @change="setShowNulls" class="mr-2">
{{ $t('task.show.noDates') }}
</fancycheckbox>
<fancycheckbox @change="setShowOverdue">
{{ $t('task.show.overdue') }}
</fancycheckbox>
{{ $t('task.show.select') }}
<datepicker-with-range @dateChanged="setDate"/>
</p>
<template v-if="!loading && (!tasks || tasks.length === 0) && showNothingToDo">
<h3 class="nothing">{{ $t('task.show.noTasks') }}</h3>
<LlamaCool class="llama-cool"/>
<h3 class="has-text-centered mt-6">{{ $t('task.show.noTasks') }}</h3>
<LlamaCool class="mt-5"/>
</template>
<div :class="{ 'is-loading': loading}" class="spinner"></div>
<card :padding="false" class="has-overflow" :has-content="false" v-if="tasks && tasks.length > 0">
<div class="tasks">
<div class="p-2">
<single-task-in-list
v-for="t in tasksSorted"
:key="t.id"
@ -212,26 +211,12 @@ export default {
</script>
<style lang="scss" scoped>
h3 {
text-align: left;
&.nothing {
text-align: center;
margin-top: 3rem;
.show-tasks-options {
display: flex;
flex-direction: column;
> :deep(a) {
margin-right: .5rem;
}
:deep(.input) {
width: 190px;
vertical-align: middle;
margin: .5rem 0;
}
}
.tasks {
padding: .5rem;
}
.llama-cool {
margin-top: 2rem;
}
</style>