[events] AgendaView fixed styling on low res devices and fixed icons
This commit is contained in:
parent
494a555985
commit
dd33e77514
|
|
@ -12,7 +12,7 @@
|
|||
align="right"
|
||||
style="position: sticky; top: 5px; padding-right: 5px; z-index: 999"
|
||||
>
|
||||
<q-btn round color="negative" icon="close" dense rounded @click="editDone(false)" />
|
||||
<q-btn round color="negative" icon="mdi-close" dense rounded @click="editDone(false)" />
|
||||
</div>
|
||||
<div class="col" style="margin: 0; padding: 0; margin-top: -2.4em">
|
||||
<edit-event v-model="editor" :date="editor.start" @done="editDone" />
|
||||
|
|
@ -21,94 +21,95 @@
|
|||
</q-card>
|
||||
</q-dialog>
|
||||
<q-card>
|
||||
<div style="max-width: 1800px; width: 100%">
|
||||
<q-toolbar class="bg-primary text-white q-my-md shadow-2 items-center row justify-center">
|
||||
<q-btn flat dense class="row absolute-left q-ml-sm"
|
||||
>{{ asMonth(selectedDate) }} {{ asYear(selectedDate) }}
|
||||
<q-popup-proxy transition-show="scale" transition-hide="scale" @before-show="updateProxy">
|
||||
<q-date v-model="proxyDate">
|
||||
<div class="row items-center justify-end q-gutter-sm">
|
||||
<q-btn v-close-popup label="Cancel" color="primary" flat />
|
||||
<q-btn
|
||||
v-close-popup
|
||||
label="OK"
|
||||
color="primary"
|
||||
flat
|
||||
@click="saveSelectedDate(proxyDate)"
|
||||
/>
|
||||
</div>
|
||||
</q-date>
|
||||
</q-popup-proxy>
|
||||
</q-btn>
|
||||
<div class="row justify-center items-center">
|
||||
<q-btn flat dense label="Zurück" @click="calendarPrev" />
|
||||
<q-separator vertical />
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
:label="calendarDays == 1 ? 'Heute' : 'Diese Woche'"
|
||||
@click="calendarNow"
|
||||
/>
|
||||
<q-separator vertical />
|
||||
<q-btn flat dense label="Weiter" @click="calendarNext" />
|
||||
</div>
|
||||
<!-- <q-space /> -->
|
||||
|
||||
<q-btn-toggle
|
||||
v-if="windowWidth >= 600"
|
||||
v-model="calendarView"
|
||||
class="row absolute-right"
|
||||
flat
|
||||
stretch
|
||||
toggle-color=""
|
||||
:options="[
|
||||
{ label: 'Tag', value: 'day' },
|
||||
{ label: 'Woche', value: 'week' },
|
||||
]"
|
||||
/>
|
||||
</q-toolbar>
|
||||
<q-calendar-agenda
|
||||
v-model="selectedDate"
|
||||
:view="calendarRealView"
|
||||
:max-days="calendarDays"
|
||||
:weekdays="[1, 2, 3, 4, 5, 6, 0]"
|
||||
locale="de-de"
|
||||
style="height: 100%; min-height: 400px"
|
||||
<q-toolbar class="bg-primary text-white q-my-md shadow-2 items-center row justify-center">
|
||||
<q-btn flat dense class="absolute-left q-ml-sm"
|
||||
>{{ asMonth(selectedDate) }} {{ asYear(selectedDate) }}
|
||||
<q-popup-proxy transition-show="scale" transition-hide="scale" @before-show="updateProxy">
|
||||
<q-date v-model="proxyDate">
|
||||
<div class="row items-center justify-end q-gutter-sm">
|
||||
<q-btn v-close-popup label="Cancel" color="primary" flat />
|
||||
<q-btn
|
||||
v-close-popup
|
||||
label="OK"
|
||||
color="primary"
|
||||
flat
|
||||
@click="saveSelectedDate(proxyDate)"
|
||||
/>
|
||||
</div>
|
||||
</q-date>
|
||||
</q-popup-proxy>
|
||||
</q-btn>
|
||||
<div
|
||||
class="row"
|
||||
:class="{ 'absolute-right': windowWidth < 600, 'q-mr-sm': windowWidth < 600 }"
|
||||
>
|
||||
<template #head-day-button="{ scope: { dayLabel, timestamp, activeDate } }">
|
||||
<q-btn
|
||||
round
|
||||
dense
|
||||
size="sm"
|
||||
class="q-mb-xs"
|
||||
:label="dayLabel"
|
||||
:color="formatDayColor(timestamp.current, activeDate)"
|
||||
>
|
||||
<q-menu>
|
||||
<q-list style="min-width: 100px">
|
||||
<q-item clickable @click="showDay(timestamp.date)">
|
||||
<q-item-section>Anzeigen</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable @click="newEvent(timestamp.date)">
|
||||
<q-item-section>Neue Veranstaltung</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
</template>
|
||||
<template #day="{ scope: { timestamp } }">
|
||||
<div itemref="" class="q-pb-sm" style="min-height: 200px">
|
||||
<eventslot
|
||||
v-for="(agenda, index) in events[timestamp.weekday]"
|
||||
:key="index"
|
||||
v-model="events[timestamp.weekday][index]"
|
||||
@removeEvent="remove"
|
||||
@editEvent="edit"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</q-calendar-agenda>
|
||||
</div>
|
||||
<q-btn flat dense label="Zurück" @click="calendarPrev" />
|
||||
<q-separator vertical />
|
||||
<q-btn
|
||||
flat
|
||||
dense
|
||||
:label="calendarDays == 1 ? 'Heute' : 'Diese Woche'"
|
||||
@click="calendarNow"
|
||||
/>
|
||||
<q-separator vertical />
|
||||
<q-btn flat dense label="Weiter" @click="calendarNext" />
|
||||
</div>
|
||||
<!-- <q-space /> -->
|
||||
|
||||
<q-btn-toggle
|
||||
v-if="windowWidth >= 600"
|
||||
v-model="calendarView"
|
||||
class="row absolute-right"
|
||||
flat
|
||||
stretch
|
||||
toggle-color=""
|
||||
:options="[
|
||||
{ label: 'Tag', value: 'day' },
|
||||
{ label: 'Woche', value: 'week' },
|
||||
]"
|
||||
/>
|
||||
</q-toolbar>
|
||||
<q-calendar-agenda
|
||||
v-model="selectedDate"
|
||||
:view="calendarRealView"
|
||||
:max-days="calendarDays"
|
||||
:weekdays="[1, 2, 3, 4, 5, 6, 0]"
|
||||
locale="de-de"
|
||||
style="height: 100%; min-height: 400px"
|
||||
>
|
||||
<template #head-day-button="{ scope: { dayLabel, timestamp, activeDate } }">
|
||||
<q-btn
|
||||
round
|
||||
dense
|
||||
size="sm"
|
||||
class="q-mb-xs"
|
||||
:label="dayLabel"
|
||||
:color="formatDayColor(timestamp.current, activeDate)"
|
||||
>
|
||||
<q-menu>
|
||||
<q-list style="min-width: 100px">
|
||||
<q-item clickable @click="showDay(timestamp.date)">
|
||||
<q-item-section>Anzeigen</q-item-section>
|
||||
</q-item>
|
||||
<q-item clickable @click="newEvent(timestamp.date)">
|
||||
<q-item-section>Neue Veranstaltung</q-item-section>
|
||||
</q-item>
|
||||
</q-list>
|
||||
</q-menu>
|
||||
</q-btn>
|
||||
</template>
|
||||
<template #day="{ scope: { timestamp } }">
|
||||
<div itemref="" class="q-pb-sm" style="min-height: 200px">
|
||||
<eventslot
|
||||
v-for="(agenda, index) in events[timestamp.weekday]"
|
||||
:key="index"
|
||||
v-model="events[timestamp.weekday][index]"
|
||||
@removeEvent="remove"
|
||||
@editEvent="edit"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</q-calendar-agenda>
|
||||
</q-card>
|
||||
</template>
|
||||
|
||||
|
|
@ -178,7 +179,6 @@ export default defineComponent({
|
|||
|
||||
async function loadAgendas() {
|
||||
const selected = new Date(selectedDate.value);
|
||||
console.log(selected);
|
||||
const start = calendarRealView.value === 'day' ? selected : startOfWeek(selected);
|
||||
const end = date.addToDate(start, { days: calendarDays.value });
|
||||
|
||||
|
|
@ -262,7 +262,8 @@ export default defineComponent({
|
|||
}
|
||||
|
||||
function newEvent(start: Date | string | number) {
|
||||
editor.value = Object.assign({}, emptyEvent, { start: start });
|
||||
if (typeof start === 'string') start = date.extractDate(start, 'YYYY-MM-DD');
|
||||
editor.value = emptyEvent(new Date(start));
|
||||
}
|
||||
|
||||
return {
|
||||
|
|
|
|||
Loading…
Reference in New Issue