JandL_gitea/jandl-taskmanager-app
1
0 Fork 0
mirror of https://bitbucket.org/studiotem/jandl-taskmanager-app.git synced 2026-10-22 14:59:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

[timeline] sticky header, scroll to hour....

Browse Source
This commit is contained in:
Filip Kaluža committed 2023-01-03 13:25:45 +01:00
1 parent 1fe2bd1c9b
commit affc96fc73
9 files changed
+68 -37
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/src/plugins/app@vendor/vue-cal/index.vue
+14 -3
View File
@@ -32,7 +32,7 @@
</slot>
</template>
</all-day-bar>
<div class="vuecal__bg" :class="{ vuecal__flex: !hasTimeColumn }" column="column">
<div class="vuecal__bg" :class="{ vuecal__flex: !hasTimeColumn }" column="column" ref="vuecal_scroll">
<div class="vuecal__flex" row="row" grow="grow">
<div class="vuecal__time-column" v-if="hasTimeColumn">
<div class="vuecal__all-day-text" v-if="showAllDayEvents &amp;&amp; cellOrSplitMinWidth &amp;&amp; !(isDayView &amp;&amp; !minSplitWidth)" :style="{ height: allDayBar.height }">
@@ -50,7 +50,7 @@
</div>
</div>
<div class="vuecal__flex vuecal__cells vuecal__scrollable-body" :class="`${view.id}-view`" grow="grow" :wrap="!cellOrSplitMinWidth || !isWeekView" :column="!!cellOrSplitMinWidth">
<weekdays-headings v-if="cellOrSplitMinWidth &amp;&amp; isWeekView" :transition-direction="transitionDirection" :week-days="weekDays" :switch-to-narrower-view="switchToNarrowerView" :style="cellOrSplitMinWidth ? `min-width: ${cellOrSplitMinWidth}px` : ''" :unscheduledTime="unscheduledTime">
<weekdays-headings v-if="cellOrSplitMinWidth &amp;&amp; isWeekView" :transition-direction="transitionDirection" :week-days="weekDays" :switch-to-narrower-view="switchToNarrowerView" :style="cellOrSplitMinWidth ? `min-width: ${cellOrSplitMinWidth}px` : ''" :unscheduledTime="unscheduledTime" ref="vuecal_weekday_heading">
<template #weekday-heading="{ heading, view }" v-if="$slots['weekday-heading']">
<slot name="weekday-heading" :heading="heading" :view="view"></slot>
</template>
@@ -73,7 +73,7 @@
</template>
</all-day-bar>
<div class="vuecal__flex" :ref="el =&gt; cellsEl = el" grow="grow" :wrap="!cellOrSplitMinWidth || !isWeekView" :style="cellOrSplitMinWidth ? `min-width: ${cellOrSplitMinWidth}px` : ''">
<div class="vuecal__flex vuecal__cells-body" :ref="el =&gt; cellsEl = el" grow="grow" :wrap="!cellOrSplitMinWidth || !isWeekView" :style="cellOrSplitMinWidth ? `min-width: ${cellOrSplitMinWidth}px` : ''">
<!-- TU -->
<vuecal-cell v-for="(cell, i) in viewCells" :key="i" :options="$props" :edit-events="editEvents" :data="cell" :cell-width="hideWeekdays.length &amp;&amp; (isWeekView || isMonthView) &amp;&amp; cellWidth" :min-timestamp="minTimestamp" :max-timestamp="maxTimestamp" :cell-splits="hasSplits &amp;&amp; daySplits || []">
<template #cell-content="{ events, split, selectCell }">
@@ -186,6 +186,7 @@ export default {
props: {
activeView: { type: String, default: 'week' },
scrollToHour: { type: Number, default: 0 }, // In minutes.
// Only used if there are daySplits with minSplitWidth, to add the same height top spacer on time column.
allDayBarHeight: { type: [String, Number], default: '25px' },
cellClickHold: { type: Boolean, default: true },
@@ -554,6 +555,9 @@ export default {
}
: {})
}
this.$refs['vuecal_scroll'].scrollTop = this.scrollToHour * this.timeCellHeight
this.$emit('view-change', params)
}
},
@@ -1302,6 +1306,13 @@ export default {
: {})
}
this.$refs['vuecal_scroll'].addEventListener('scroll', () => {
this.$refs['vuecal_weekday_heading'].onTimelineScroll(this.$refs['vuecal_scroll'].scrollTop)
})
this.viewportTimelineOffset = this.$refs['vuecal_scroll'].getBoundingClientRect().top
this.$refs['vuecal_scroll'].scrollTop = this.scrollToHour * this.timeCellHeight
this.$emit('ready', params)
this.ready = true
},