62 lines
2.0 KiB
Vue
62 lines
2.0 KiB
Vue
<script setup>
|
|
// TODO: close node details tooltip when this opens
|
|
import { state } from '@/store';
|
|
import CloseActionButton from '@/components/CloseActionButton.vue';
|
|
|
|
const emit = defineEmits(['dismiss']);
|
|
const props = defineProps({
|
|
node: {
|
|
type: Object,
|
|
required: false,
|
|
validator(value) {
|
|
return value === null || typeof value === 'object';
|
|
},
|
|
}
|
|
});
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="relative z-sidebar" role="dialog" aria-modal="true">
|
|
<transition
|
|
enter-active-class="transition duration-300 ease-in-out transform"
|
|
enter-from-class="translate-y-full"
|
|
enter-to-class="translate-y-0"
|
|
leave-active-class="transition duration-300 ease-in-out transform"
|
|
leave-from-class="translate-y-0"
|
|
leave-to-class="translate-y-full"
|
|
>
|
|
<div v-show="props.node !== null" class="fixed left-0 right-0 bottom-0">
|
|
<div v-if="props.node !== null" class="mx-auto w-screen max-w-md p-4">
|
|
<div class="flex h-full flex-col bg-white shadow-xl rounded-xl border">
|
|
<div class="p-2">
|
|
<div class="flex items-start justify-between">
|
|
<div>
|
|
<h2 class="font-bold">
|
|
{{ props.node.short_name }} Neighbors
|
|
</h2>
|
|
<h3
|
|
v-if="state.neighborsModalType === 'weHeard'"
|
|
class="text-sm"
|
|
>
|
|
Nodes heard by {{ props.node.short_name }}
|
|
</h3>
|
|
<h3
|
|
v-if="state.neighborsModalType === 'theyHeard'"
|
|
class="text-sm"
|
|
>
|
|
Nodes that heard {{ props.node.short_name }}
|
|
</h3>
|
|
</div>
|
|
<CloseActionButton
|
|
@click="$emit('dismiss')"
|
|
class="my-auto ml-3"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</transition>
|
|
</div>
|
|
</template> |