local-it/vikunja-frontend
0
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

feat: move date filter to popup and improve styling

Browse source
This commit is contained in:
kolaente 2021-12-29 20:36:53 +01:00
parent d825960836
commit 932f1774ec
No known key found for this signature in database
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

21
src/components/date/datepickerWithRange.vue
View file

@ -1,5 +1,11 @@
<template> <template>
<div class="datepicker-with-range"> <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"> <div class="selections">
<button @click="setDateRange(datesToday)" :class="{'is-active': dateRange === datesToday}"> <button @click="setDateRange(datesToday)" :class="{'is-active': dateRange === datesToday}">
{{ $t('task.show.today') }} {{ $t('task.show.today') }}
@ -19,7 +25,8 @@
<button @click="setDateRange(datesNextMonth)" :class="{'is-active': dateRange === datesNextMonth}"> <button @click="setDateRange(datesNextMonth)" :class="{'is-active': dateRange === datesNextMonth}">
{{ $t('task.show.nextMonth') }} {{ $t('task.show.nextMonth') }}
</button> </button>
<button @click="setDateRange(datesNext30Days)" :class="{'is-active': dateRange === datesNext30Days}"> <button @click="setDateRange(datesNext30Days)"
:class="{'is-active': dateRange === datesNext30Days}">
{{ $t('task.show.next30Days') }} {{ $t('task.show.next30Days') }}
</button> </button>
<button @click="setDateRange('')" :class="{'is-active': customRangeActive}"> <button @click="setDateRange('')" :class="{'is-active': customRangeActive}">
@ -33,6 +40,8 @@
/> />
</div> </div>
</div> </div>
</transition>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
@ -61,6 +70,7 @@ const flatPickerConfig = computed(() => ({
}, },
})) }))
const showPopup = ref<Boolean>(false)
const dateRange = ref<string>('') const dateRange = ref<string>('')
watch( watch(
@ -189,6 +199,11 @@ const customRangeActive = computed<Boolean>(() => {
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.datepicker-with-range-container {
position: relative;
z-index: 10;
}
.datepicker-with-range { .datepicker-with-range {
border-radius: $radius; border-radius: $radius;
border: 1px solid var(--grey-200); border: 1px solid var(--grey-200);
@ -196,6 +211,7 @@ const customRangeActive = computed<Boolean>(() => {
box-shadow: $shadow; box-shadow: $shadow;
display: flex; display: flex;
width: 500px; width: 500px;
position: absolute;
:deep(.flatpickr-calendar) { :deep(.flatpickr-calendar) {
margin: 0 auto 8px; margin: 0 auto 8px;
@ -216,6 +232,7 @@ const customRangeActive = computed<Boolean>(() => {
width: 30%; width: 30%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding-top: .5rem;
button { button {
display: block; display: block;

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

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

39
src/views/tasks/ShowTasks.vue
View file

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