diff options
Diffstat (limited to 'src/client/app/common/views/components/image-viewer.vue')
| -rw-r--r-- | src/client/app/common/views/components/image-viewer.vue | 62 |
1 files changed, 13 insertions, 49 deletions
diff --git a/src/client/app/common/views/components/image-viewer.vue b/src/client/app/common/views/components/image-viewer.vue index 7787942ca8..63b5e28d00 100644 --- a/src/client/app/common/views/components/image-viewer.vue +++ b/src/client/app/common/views/components/image-viewer.vue @@ -1,24 +1,14 @@ <template> -<div class="dkjvrdxtkvqrwmhfickhndpmnncsgacq" v-hotkey.global="keymap"> - <div class="bg" @click="close"></div> - <img :src="image.url" :alt="image.name" :title="image.name" @click="close"/> -</div> +<ui-modal ref="modal" v-hotkey.global="keymap"> + <img :src="image.url" :alt="image.name" :title="image.name" @click="close" /> +</ui-modal> </template> <script lang="ts"> import Vue from 'vue'; -import anime from 'animejs'; export default Vue.extend({ props: ['image'], - mounted() { - anime({ - targets: this.$el, - opacity: 1, - duration: 100, - easing: 'linear' - }); - }, computed: { keymap(): any { return { @@ -28,50 +18,24 @@ export default Vue.extend({ }, methods: { close() { - anime({ - targets: this.$el, - opacity: 0, - duration: 100, - easing: 'linear', - complete: () => this.destroyDom() - }); + (this.$refs.modal as any).close(); } } }); </script> <style lang="stylus" scoped> -.dkjvrdxtkvqrwmhfickhndpmnncsgacq - display block +img position fixed - z-index 2048 + z-index 2 top 0 + right 0 + bottom 0 left 0 - width 100% - height 100% - opacity 0 - - > .bg - display block - position fixed - z-index 1 - top 0 - left 0 - width 100% - height 100% - background rgba(#000, 0.7) - - > img - position fixed - z-index 2 - top 0 - right 0 - bottom 0 - left 0 - max-width 100% - max-height 100% - margin auto - cursor zoom-out - image-orientation from-image + max-width 100% + max-height 100% + margin auto + cursor zoom-out + image-orientation from-image </style> |