Add timeline cursor

pull/37/head
Varun Patil 2022-08-15 06:15:57 +00:00
parent 0845e6fb54
commit 9b4fcf5d8f
1 changed files with 29 additions and 0 deletions

View File

@ -25,7 +25,12 @@
<div ref="timelineScroll" class="timeline-scroll"
@mousemove="timelineHover"
@mouseleave="timelineLeave"
@click="timelineClick">
<span class="cursor"
v-bind:style="{ top: timelineCursorY + 'px' }"></span>
<span class="cursor"
v-bind:style="{ transform: `translateY(${timelineHoverCursorY}px)` }"></span>
<div v-for="tick of timelineTicks" :key="tick.dayId" class="tick"
v-bind:style="{ top: Math.floor(tick.top * timelineHeight / viewHeight) + 'px' }">
@ -59,6 +64,10 @@ export default {
timelineHeight: 100,
/** Computed timeline ticks */
timelineTicks: [],
/** Computed timeline cursor top */
timelineCursorY: 0,
/** Timeline hover cursor top */
timelineHoverCursorY: -5,
/** Current start index */
currentStart: 0,
@ -70,6 +79,11 @@ export default {
mounted() {
this.handleResize();
this.fetchDays();
// Set scrollbar
this.$refs.scroller.$el.addEventListener('scroll', (event) => {
this.timelineCursorY = event.target.scrollTop * this.timelineHeight / this.viewHeight;
}, false);
},
methods: {
@ -247,7 +261,12 @@ export default {
/** Handle mouse hover on right timeline */
timelineHover(event) {
this.timelineHoverCursorY = event.offsetY;
},
/** Handle mouse leave on right timeline */
timelineLeave() {
this.timelineHoverCursorY = -5;
},
/** Handle mouse click on right timeline */
@ -321,4 +340,14 @@ export default {
opacity: 0.8;
display: block;
}
.timeline-scroll .cursor {
position: absolute;
pointer-events: none;
right: 5px;
height: 3px;
background-color: var(--color-primary);
border-radius: 4px;
width: 100%;
}
</style>