diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/Settings.vue | 10 | ||||
| -rw-r--r-- | src/components/TileInfoModal.vue | 31 | ||||
| -rw-r--r-- | src/components/TileTree.vue | 13 |
3 files changed, 21 insertions, 33 deletions
diff --git a/src/components/Settings.vue b/src/components/Settings.vue index e596e46..0c7f360 100644 --- a/src/components/Settings.vue +++ b/src/components/Settings.vue @@ -41,7 +41,7 @@ export default defineComponent({ <div class="fixed left-0 top-0 w-full h-full overflow-hidden invisible" @click="closeClicked"> <!-- outer div prevents overflow from transitioning to/from off-screen --> - <Transition name="slide-bottom-right"> + <transition name="slide-bottom-right"> <div v-if="isOpen" class="absolute bottom-4 right-4 min-w-[5cm] p-3 bg-stone-50 visible rounded-md shadow shadow-black"> <div class="absolute top-2 right-2 w-[24px] h-[24px] [font-size:24px] [line-height:24px] text-center @@ -114,10 +114,8 @@ export default defineComponent({ v-model.number="componentOptions.transitionDuration"/></label> </div> </div> - </Transition> - <Transition name="slide-bottom-right"> - <!-- outer div prevents transition interference with inner rotate --> - <div v-if="!isOpen" class="absolute bottom-0 right-0 w-[100px] h-[100px]"> + <div v-else class="absolute bottom-0 right-0 w-[100px] h-[100px]"> + <!-- outer div prevents transition interference with inner rotate --> <div class="absolute bottom-[-50px] right-[-50px] w-[100px] h-[100px] visible -rotate-45 bg-black text-white hover:cursor-pointer" @click="openClicked"> <svg class="w-[24px] h-[24px] mx-auto mt-[9px]" @@ -138,7 +136,7 @@ export default defineComponent({ </svg> </div> </div> - </Transition> + </transition> </div> </template> diff --git a/src/components/TileInfoModal.vue b/src/components/TileInfoModal.vue index 367546d..fedd933 100644 --- a/src/components/TileInfoModal.vue +++ b/src/components/TileInfoModal.vue @@ -4,34 +4,13 @@ import {TolNode} from '../lib'; export default defineComponent({ props: { - tolNode: {type: Object as PropType<TolNode | null>}, // The node to display, or null to hide + tolNode: {type: Object as PropType<TolNode>}, options: {type: Object, required: true}, }, - data(){ - return { - lastNode: null as TolNode | null, // Caches tolNode to prevent content-change during fade-out - }; - }, - watch: { - tolNode(newNode){ - if (newNode != null){ - this.lastNode = newNode; - } - }, - }, computed: { - transitionStyles(): Record<string,string> { - return { - visibility: this.tolNode != null ? 'visible' : 'hidden', - opacity: this.tolNode != null ? '1' : '0', - transition: 'visibility, opacity', - transitionDuration: this.options.transitionDuration + 'ms', - }; - }, imgStyles(): Record<string,string> { return { - backgroundImage: this.lastNode == null ? 'none' : - 'url(\'/img/' + this.lastNode.name.replaceAll('\'', '\\\'') + '.png\')', + backgroundImage: 'url(\'/img/' + this.tolNode.name.replaceAll('\'', '\\\'') + '.png\')', width: this.options.infoModalImgSz + 'px', height: this.options.infoModalImgSz + 'px', backgroundSize: 'cover', @@ -46,18 +25,18 @@ export default defineComponent({ } }, }, - emits: ['info-modal-close'] + emits: ['info-modal-close'], }); </script> <template> -<div :style="transitionStyles" 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="closeClicked"> <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"> <div class="absolute top-2 right-2 w-[24px] h-[24px] [font-size:24px] [line-height:24px] text-center font-bold hover:cursor-pointer" @click="closeClicked" ref="closeIcon">×</div> - <h1 class="text-center text-xl font-bold mb-2">{{lastNode != null ? lastNode.name : 'NULL'}}</h1> + <h1 class="text-center text-xl font-bold mb-2">{{tolNode.name}}</h1> <hr class="mb-4 border-stone-400"/> <div :style="imgStyles" class="float-left mr-4" alt="an image"></div> <div> diff --git a/src/components/TileTree.vue b/src/components/TileTree.vue index 10a437d..1c08085 100644 --- a/src/components/TileTree.vue +++ b/src/components/TileTree.vue @@ -251,7 +251,10 @@ export default defineComponent({ <parent-bar v-if="sepdParents != null" :pos="[0,0]" :dims="parentBarDims" :nodes="sepdParents" :options="componentOptions" @sepd-parent-clicked="onSepdParentClicked" @info-icon-clicked="onInnerInfoIconClicked"/> - <tile-info-modal :tolNode="infoModalNode" :options="componentOptions" @info-modal-close="onInfoModalClose"/> + <transition name="fade"> + <tile-info-modal v-if="infoModalNode != null" :tolNode="infoModalNode" :options="componentOptions" + @info-modal-close="onInfoModalClose"/> + </transition> <settings :isOpen="settingsOpen" :layoutOptions="layoutOptions" :componentOptions="componentOptions" @settings-open="onSettingsOpen" @settings-close="onSettingsClose" @layout-option-change="onLayoutOptionChange"/> @@ -293,4 +296,12 @@ export default defineComponent({ transform: translate3d(0,0,0) scale(1, 1); } } +.fade-enter-from, .fade-leave-to { + opacity: 0; +} +.fade-enter-active, .fade-leave-active { + transition-property: opacity; + transition-duration: 300ms; + transition-timing-function: ease-out; +} </style> |