mirror of
https://bitbucket.org/studiotem/jandl-taskmanager-app.git
synced 2026-10-21 14:29: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
@@ -67,6 +67,19 @@ export default {
|
||||
* Do not prevent propagation to trigger cell mousedown which highlights the cell if not highlighted.
|
||||
*/
|
||||
onMouseDown(e, touch = false) {
|
||||
let targetElement
|
||||
|
||||
if (e.target.nodeName == 'BUTTON') {
|
||||
targetElement = e.target
|
||||
} else if (e.srcElement.nodeName == 'IMG') {
|
||||
targetElement = e.target.parentElement
|
||||
}
|
||||
|
||||
if (targetElement?.classList?.contains('v-btn__content') || e?.target?.nodeName == 'BUTTON') {
|
||||
e.preventDefault()
|
||||
return
|
||||
}
|
||||
|
||||
// Prevent a double mouse down on touch devices.
|
||||
if ("ontouchstart" in window && !touch) return false;
|
||||
const { clickHoldAnEvent, focusAnEvent, resizeAnEvent, dragAnEvent } =
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -175,7 +175,7 @@
|
||||
v-for="(employee, index) in subtask.employees"
|
||||
:key="`employee-${index}`"
|
||||
class="splitted-inputs remove-employee"
|
||||
:class="{ 'hide-arrow': employee.id }"
|
||||
:class="{ 'hide-arrow': employee?.id }"
|
||||
>
|
||||
<v-autocomplete
|
||||
:custom-filter="customFilter"
|
||||
@@ -854,7 +854,7 @@ export default {
|
||||
|
||||
const lastEmployee =
|
||||
this.subtask.employees[this.subtask.employees.length - 1];
|
||||
if (lastEmployee.id || lastEmployee.duration)
|
||||
if (lastEmployee?.id || lastEmployee?.duration)
|
||||
this.subtask.employees.push({});
|
||||
},
|
||||
deep: true,
|
||||
|
||||
Reference in new issue
Block a user