From f93a728091e52ae5144a51fb6203fde8cdf02558 Mon Sep 17 00:00:00 2001
From: Terry Truong <terry06890@gmail.com>
Date: Wed, 4 Jan 2023 23:55:10 +1100
Subject: Add event info modal

Add InfoModal.vue, SCollapsible.vue, and icons.
Update Timeline.vue, App.vue, lib.ts, and store.ts to display modal.
For testing, send/use dummy EventInfo from server (still waiting on image downloads).
---
 src/components/TimeLine.vue | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

(limited to 'src/components/TimeLine.vue')

diff --git a/src/components/TimeLine.vue b/src/components/TimeLine.vue
index fea8fb3..277a263 100644
--- a/src/components/TimeLine.vue
+++ b/src/components/TimeLine.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="touch-none relative overflow-hidden" ref="rootRef"
+<div class="touch-none relative overflow-hidden z-0" ref="rootRef"
 	@wheel.exact.prevent="onWheel" @wheel.shift.exact.prevent="onShiftWheel">
 	<template v-if="store.showEventCounts">
 		<div v-for="[tickIdx, count] in tickToCount.entries()" :key="ticks[tickIdx].date.toInt()"
@@ -47,7 +47,8 @@
 	<!-- Events -->
 	<div v-for="id in idToPos.keys()" :key="id" class="absolute animate-fadein z-20" :style="eventStyles(id)">
 		<!-- Image -->
-		<div class="rounded-full" :style="eventImgStyles(id)"></div>
+		<div class="rounded-full cursor-pointer hover:brightness-125" :style="eventImgStyles(id)"
+			@click="onEventClick(id)"></div>
 		<!-- Label -->
 		<div class="text-center text-stone-100 text-sm whitespace-nowrap text-ellipsis overflow-hidden">
 			{{idToEvent.get(id)!.title}}
@@ -60,7 +61,7 @@
 	<!-- Buttons -->
 	<icon-button v-if="closeable" :size="30" class="absolute top-2 right-2 z-20"
 		:style="{color: store.color.text, backgroundColor: store.color.altDark2}"
-		@click="emit('remove')" title="Remove timeline">
+		@click="emit('close')" title="Close timeline">
 		<close-icon/>
 	</icon-button>
 </div>
@@ -76,7 +77,7 @@ import CloseIcon from './icon/CloseIcon.vue';
 import {WRITING_MODE_HORZ, MIN_DATE, MAX_DATE, MONTH_SCALE, DAY_SCALE, SCALES, MONTH_NAMES, MIN_CAL_DATE,
 	getDaysInMonth, HistDate, stepDate, getScaleRatio, getNumSubUnits, getUnitDiff,
 	getEventPrecision, dateToUnit,
-	moduloPositive, TimelineState, HistEvent, getImagePath} from '../lib';
+	moduloPositive, TimelineState, HistEvent} from '../lib';
 import {useStore} from '../store';
 import {RBTree} from '../rbtree';
 
@@ -95,7 +96,7 @@ const props = defineProps({
 	eventTree: {type: Object as PropType<RBTree<HistEvent>>, required: true},
 	unitCountMaps: {type: Object as PropType<Map<number, number>[]>, required: true},
 });
-const emit = defineEmits(['remove', 'state-chg', 'event-req', 'event-display']);
+const emit = defineEmits(['close', 'state-chg', 'event-display', 'event-click']);
 
 // For size tracking
 const width = ref(0);
@@ -1108,6 +1109,11 @@ watch(firstDate, onStateChg);
 const skipTransition = ref(true);
 onMounted(() => setTimeout(() => {skipTransition.value = false}, 100));
 
+// Click handling
+function onEventClick(eventId: number){
+	emit('event-click', eventId);
+}
+
 // Styles
 const mainlineStyles = computed(() => {
 	return {
-- 
cgit v1.2.3