From 79c24b673c7d08f969ce5fb5954867a61456c5e7 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Sun, 15 Jan 2023 01:45:42 +1100
Subject: Fade other events when hovering over one

---
 src/components/TimeLine.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

(limited to 'src/components')

diff --git a/src/components/TimeLine.vue b/src/components/TimeLine.vue
index c72fbff..f212a32 100644
--- a/src/components/TimeLine.vue
+++ b/src/components/TimeLine.vue
@@ -48,7 +48,9 @@
 		</template>
 	</svg>
 	<!-- Events -->
-	<div v-for="id in idToPos.keys()" :key="id" class="absolute animate-fadein z-20" :style="eventStyles(id)">
+	<div v-for="id in idToPos.keys()" :key="id" class="absolute animate-fadein z-20" :style="eventStyles(id)"
+		@mouseenter="hoveredEventId = id" @mouseleave="hoveredEventId = null"
+		:class="{'brightness-50': hoveredEventId != null && hoveredEventId != id}">
 		<!-- Image -->
 		<div class="rounded-full cursor-pointer hover:brightness-125" :style="eventImgStyles(id)"
 			:title="idToEvent.get(id)!.title" @click="emit('info-click', idToEvent.get(id)!.title)"></div>
@@ -1236,6 +1238,7 @@ const skipTransition = ref(true);
 onMounted(() => setTimeout(() => {skipTransition.value = false}, 100));
 
 // Styles
+const hoveredEventId = ref(null as null | number);
 const mainlineStyles = computed(() => {
 	return {
 		transform: props.vert ?
-- 
cgit v1.2.3