diff options
| author | Terry Truong <terry06890@gmail.com> | 2022-03-29 11:39:33 +1100 |
|---|---|---|
| committer | Terry Truong <terry06890@gmail.com> | 2022-03-29 13:30:50 +1100 |
| commit | a68a55205ed189250693368af7028031a70631d9 (patch) | |
| tree | 4d780d1b450a2a3a51866103e80c53a818a8cb23 /src/components/TileInfoModal.vue | |
| parent | 304274b1380f955b6e1913428f6dbbc9efcf0bcf (diff) | |
Update comments, adjust names, do minor refactors
Diffstat (limited to 'src/components/TileInfoModal.vue')
| -rw-r--r-- | src/components/TileInfoModal.vue | 13 |
1 files changed, 7 insertions, 6 deletions
diff --git a/src/components/TileInfoModal.vue b/src/components/TileInfoModal.vue index cfa1a10..7549375 100644 --- a/src/components/TileInfoModal.vue +++ b/src/components/TileInfoModal.vue @@ -3,6 +3,7 @@ import {defineComponent, PropType} from 'vue'; import CloseIcon from './icon/CloseIcon.vue'; import {TolNode} from '../tol'; +// Displays information about a tree-of-life node export default defineComponent({ props: { tolNode: {type: Object as PropType<TolNode>, required: true}, @@ -16,26 +17,26 @@ export default defineComponent({ height: this.uiOpts.infoModalImgSz + 'px', backgroundSize: 'cover', borderRadius: this.uiOpts.borderRadius + 'px', - } + }; }, }, methods: { - closeClicked(evt: Event){ - if (evt.target == this.$el || (this.$refs.closeIcon.$el as HTMLElement).contains(evt.target as HTMLElement)){ + onCloseClick(evt: Event){ + if (evt.target == this.$el || (this.$refs.closeIcon as typeof CloseIcon).$el.contains(evt.target)){ this.$emit('info-modal-close'); } }, }, components: {CloseIcon, }, - emits: ['info-modal-close'], + emits: ['info-modal-close', ], }); </script> <template> -<div class="fixed left-0 top-0 w-full h-full bg-black/40" @click="closeClicked"> +<div class="fixed left-0 top-0 w-full h-full bg-black/40" @click="onCloseClick"> <div class="absolute left-1/2 -translate-x-1/2 w-4/5 top-1/2 -translate-y-1/2 p-4 bg-stone-50 rounded-md shadow shadow-black"> - <close-icon @click.stop="closeClicked" ref="closeIcon" + <close-icon @click.stop="onCloseClick" ref="closeIcon" class="block absolute top-2 right-2 w-6 h-6 hover:cursor-pointer"/> <h1 class="text-center text-xl font-bold mb-2">{{tolNode.name}}</h1> <hr class="mb-4 border-stone-400"/> |