diff --git a/src/components/Thread.vue b/src/components/Thread.vue index 9c93bea..a7f5b76 100644 --- a/src/components/Thread.vue +++ b/src/components/Thread.vue @@ -8,17 +8,18 @@
- + {{ sourceObj.contacts[event.contact].name }}
- +
@@ -54,6 +55,7 @@ const props = defineProps<{ sourceItem: number; thread: number; baseUrl: string; + highlighted?: number; }>(); const sourceObj = computed(() => sources.value[props.source]); @@ -62,12 +64,28 @@ const threadItem = computed(() => item.value.threads[props.thread]); const message = ref(""); const messageInput = ref(); +const highlightedEvent = ref(); -function sendMessage() { +function getClasses(index: number) { + let classes = 'message px-2 py-1 flex items-center rounded-2xl'; + classes += ' ' + getRoundedCornersClasses(threadItem.value, sourceObj.value.selfContact, index); + if (props.highlighted === index) { + classes += ' animate-ping highlight'; + } + return classes; +} + +watch(highlightedEvent, element => { + element[0]?.scrollIntoView(); +}) + +function sendMessage(e: Event) { if (message.value.trim() === "") { return; } + e.preventDefault(); + threadItem.value.timeline.push({ type: "message", contact: sourceObj.value.selfContact, @@ -245,4 +263,9 @@ function createToDo(event: number) { .mr-13 { margin-right: 3.25rem; } + +.highlight { + animation-delay: .5s; + animation-iteration-count: 1; +} diff --git a/src/components/pages/Source.vue b/src/components/pages/Source.vue index 95a8268..ac2dcc5 100644 --- a/src/components/pages/Source.vue +++ b/src/components/pages/Source.vue @@ -12,11 +12,13 @@ - + @@ -37,6 +39,11 @@ const route = useRoute(); const router = useRouter(); const baseUrl = computed(() => `/source/${route.params.source}`); +const highlightedEvent = computed(() => { + let event = route.params.event; + event = Array.isArray(event) ? event[0] : event; + return event ? parseInt(event) : undefined; +}); const sourceId = computed(() => parseInt(deArray(route.params.source))); const source = computed(() => sources.value[sourceId.value]); diff --git a/src/main.ts b/src/main.ts index 234473b..fe04a90 100644 --- a/src/main.ts +++ b/src/main.ts @@ -14,7 +14,7 @@ const routes: RouteRecordRaw[] = [ { path: '/todo/:source(\\d+)?/:sourceItem(\\d+)?/:thread(\\d+)?', component: Todo, name: 'todo' }, { path: '/snoozed/:source(\\d+)?/:sourceItem(\\d+)?/:thread(\\d+)?', component: Snoozed, name: 'snoozed' }, { path: '/low/:source(\\d+)?/:sourceItem(\\d+)?/:thread(\\d+)?', component: LowPriority, name: 'low' }, - { path: '/source/:source(\\d+)/:sourceItem(\\d+)?/:thread(\\d+)?', component: Source, name: 'source' }, + { path: '/source/:source(\\d+)/:sourceItem(\\d+)?/:thread(\\d+)?/:event(\\d+)?', component: Source, name: 'source' }, { path: '/unsorted/:source(\\d+)?/:sourceItem(\\d+)?/:thread(\\d+)?', component: Unsorted, name: 'unsorted' }, ]; diff --git a/src/utils.tsx b/src/utils.tsx index 296ff02..efb8f21 100644 --- a/src/utils.tsx +++ b/src/utils.tsx @@ -193,7 +193,7 @@ export function parseString(message: string) { if (referencedMessage.type === "message") { parts.push( { referencedMessage.message } - + goto message );