summaryrefslogtreecommitdiff
path: root/src/client/components/url-preview-popup.vue
diff options
context:
space:
mode:
Diffstat (limited to 'src/client/components/url-preview-popup.vue')
-rw-r--r--src/client/components/url-preview-popup.vue18
1 files changed, 12 insertions, 6 deletions
diff --git a/src/client/components/url-preview-popup.vue b/src/client/components/url-preview-popup.vue
index 6d00d18607..0a402f793f 100644
--- a/src/client/components/url-preview-popup.vue
+++ b/src/client/components/url-preview-popup.vue
@@ -1,14 +1,17 @@
<template>
-<div class="fgmtyycl _panel _shadow" :style="{ top: top + 'px', left: left + 'px' }">
- <mk-url-preview :url="url"/>
+<div class="fgmtyycl" :style="{ top: top + 'px', left: left + 'px' }">
+ <transition name="zoom" @after-leave="$emit('closed')">
+ <MkUrlPreview class="_popup _shadow" :url="url" v-if="showing"/>
+ </transition>
</div>
</template>
<script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
import MkUrlPreview from './url-preview.vue';
+import * as os from '@/os';
-export default Vue.extend({
+export default defineComponent({
components: {
MkUrlPreview
},
@@ -20,7 +23,11 @@ export default Vue.extend({
},
source: {
required: true
- }
+ },
+ showing: {
+ type: Boolean,
+ required: true
+ },
},
data() {
@@ -48,7 +55,6 @@ export default Vue.extend({
z-index: 11000;
width: 500px;
max-width: calc(90vw - 12px);
- overflow: hidden;
pointer-events: none;
}
</style>