mirror of
https://bitbucket.org/studiotem/jandl-taskmanager-app.git
synced 2026-10-21 22:39:34 +00:00
fix(timeline-event): fixed overflowed buttons, event expansion on focus
This commit is contained in:
Matej Glasnák committed
1 parent
4917993390
commit
9a0be03f66
4 files changed
+66
-34
No files matched your search
@@ -22,36 +22,38 @@
|
||||
</template>
|
||||
</v-tooltip>
|
||||
</template>
|
||||
|
||||
<div class="d-flex align-center event-details event-initials-wrapper">
|
||||
<div class="event-initials d-flex justify-center align-center" :style="{ borderColor: eventColor.color }">
|
||||
<small class="text-inherit">{{ props.event.initials }}</small>
|
||||
</div>
|
||||
<small class="event-initials-date text-inherit">{{ props.event.date?.toLocaleDateString('sk-SK') }}</small>
|
||||
</div>
|
||||
|
||||
<div v-if="['subtask'].includes(event.type)" class="d-flex align-center">
|
||||
<v-icon icon="mdi-skull-outline" size="small" />
|
||||
<small v-if="props.event?.subtask.deadline" class="ml-1">{{ deadline }}</small>
|
||||
<v-tooltip v-else text="Deadline z Mastertasku" location="bottom">
|
||||
<template v-slot:activator="{ props }">
|
||||
<small class="cursor-pointer ml-1" v-if="!props.event?.subtask?.deadline" v-bind="props">{{ deadline }}*</small>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
</div>
|
||||
|
||||
<div v-if="['office365'].includes(event.type)" class="d-flex align-center mt-1">
|
||||
<v-icon icon="mdi-pin-outline" size="small" />
|
||||
<small v-if="props.event?.subtask.office365_location" :style="{ color: eventColor.color }" class="ml-1">{{ props.event?.subtask.office365_location }}</small>
|
||||
<v-tooltip v-else text="Miesto" location="bottom">
|
||||
<template v-slot:activator="{ props }">
|
||||
<small class="cursor-pointer ml-1" :style="{ color: eventColor.color }" v-if="!props.event?.subtask?.office365_location" v-bind="props">{{ office365_location }}*</small>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="event__footer-wrapper" :style="{ backgroundColor: eventColor.backgroundColor }">
|
||||
<div class="event__footer-wrapper__top">
|
||||
<div class="d-flex align-center event-details event-initials-wrapper">
|
||||
<div class="event-initials d-flex justify-center align-center" :style="{ borderColor: eventColor.color }">
|
||||
<small class="text-inherit">{{ props.event.initials }}</small>
|
||||
</div>
|
||||
<small class="event-initials-date text-inherit">{{ props.event.date?.toLocaleDateString('sk-SK') }}</small>
|
||||
</div>
|
||||
|
||||
<div v-if="['subtask'].includes(event.type)" class="d-flex align-center">
|
||||
<v-icon icon="mdi-skull-outline" size="small" />
|
||||
<small v-if="props.event?.subtask.deadline" class="ml-1">{{ deadline }}</small>
|
||||
<v-tooltip v-else text="Deadline z Mastertasku" location="bottom">
|
||||
<template v-slot:activator="{ props }">
|
||||
<small class="cursor-pointer ml-1" v-if="!props.event?.subtask?.deadline" v-bind="props">{{ deadline }}*</small>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
</div>
|
||||
|
||||
<div v-if="['office365'].includes(event.type)" class="d-flex align-center mt-1">
|
||||
<v-icon icon="mdi-pin-outline" size="small" />
|
||||
<small v-if="props.event?.subtask.office365_location" :style="{ color: eventColor.color }" class="ml-1">{{ props.event?.subtask.office365_location }}</small>
|
||||
<v-tooltip v-else text="Miesto" location="bottom">
|
||||
<template v-slot:activator="{ props }">
|
||||
<small class="cursor-pointer ml-1" :style="{ color: eventColor.color }" v-if="!props.event?.subtask?.office365_location" v-bind="props">{{ office365_location }}*</small>
|
||||
</template>
|
||||
</v-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="event__office-footer" v-if="isOfficeEvent">
|
||||
<img :src="office365" alt="" />
|
||||
</div>
|
||||
@@ -62,15 +64,15 @@
|
||||
</template>
|
||||
|
||||
<template v-else-if="event.type == 'adhoc'">
|
||||
<v-btn rounded class="event__footer__button me-2" @click.stop="emits('edit-blocker', props.event)"><img :src="pencil" alt="" /></v-btn>
|
||||
<v-btn rounded class="event__footer__button me-2" @click.stop="emits('delete-blocker', props.event)"><img :src="bin" alt="" /></v-btn>
|
||||
<v-btn rounded class="event__footer__button me-2" @click.stop.prevent="emits('edit-blocker', props.event)"><img :src="pencil" alt="" /></v-btn>
|
||||
<v-btn rounded class="event__footer__button me-2" @click.stop.prevent="emits('delete-blocker', props.event)"><img :src="bin" alt="" /></v-btn>
|
||||
</template>
|
||||
|
||||
<template v-else-if="props.event.type == 'subtask'">
|
||||
<v-btn rounded class="event__footer__button me-2" :class="{ completed: props.event.subtask?.is_finished }" @click.stop="emits('complete-task', props.event)"><img :src="checkmarkDouble" alt="" /></v-btn>
|
||||
<v-btn rounded class="event__footer__button me-2" :class="{ completed: props.event._timeblock_is_finished }" @click.stop="emits('toggle-timeblock-is-finished', props.event)"><img :src="checkmark" alt="" /></v-btn>
|
||||
<v-btn rounded class="event__footer__button me-2" @click.stop="emits('edit-task', props.event)"><img :src="eye" alt="" /></v-btn>
|
||||
<v-btn rounded class="event__footer__button me-2" @click.stop="emits('delete-timeblock-in-task', props.event)"><img :src="bin" alt="" /></v-btn>
|
||||
<v-btn rounded class="event__footer__button me-2" @click.stop.prevent="emits('edit-task', props.event)"><img :src="eye" alt="" /></v-btn>
|
||||
<v-btn rounded class="event__footer__button me-2" @click.stop.prevent="emits('delete-timeblock-in-task', props.event)"><img :src="bin" alt="" /></v-btn>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
@@ -158,6 +160,16 @@ const isOfficeEvent: ComputedRef<boolean> = computed(() => {
|
||||
padding: 20px 10px
|
||||
width: 100%
|
||||
|
||||
&__footer-wrapper
|
||||
position: absolute
|
||||
bottom: 0
|
||||
left: 0
|
||||
right: 0
|
||||
border-top: 1px solid rgba(33, 33, 33, 0.08)
|
||||
|
||||
&__top
|
||||
padding: 10px 10px 0 10px
|
||||
|
||||
&__footer
|
||||
flex-flow: row wrap
|
||||
justify-content: center
|
||||
|
||||
@@ -484,9 +484,16 @@ export default {
|
||||
&.vuecal__event--focus
|
||||
z-index: 100 !important
|
||||
min-height: 350px !important
|
||||
height: fit-content !important
|
||||
width: 100% !important
|
||||
left: 0 !important
|
||||
|
||||
.event__footer-wrapper
|
||||
position: relative
|
||||
|
||||
&__top
|
||||
padding: 10px 0 0 0
|
||||
|
||||
&:not(.vuecal__event--focus)
|
||||
&:has(.micro-event) .event__body
|
||||
padding: 5px !important
|
||||
|
||||
Reference in new issue
Block a user