diff options
| author | syuilo <syuilotan@yahoo.co.jp> | 2018-11-08 02:09:15 +0900 |
|---|---|---|
| committer | syuilo <syuilotan@yahoo.co.jp> | 2018-11-08 02:09:15 +0900 |
| commit | 3261d54cd34468f3ddbf555fd79b199ba90b131f (patch) | |
| tree | 6c61adf312c0b65d0eeb3293f7c7f259a18e44ee /src/client/app/common | |
| parent | Fix bug (diff) | |
| download | misskey-3261d54cd34468f3ddbf555fd79b199ba90b131f.tar.gz misskey-3261d54cd34468f3ddbf555fd79b199ba90b131f.tar.bz2 misskey-3261d54cd34468f3ddbf555fd79b199ba90b131f.zip | |
Resolve #2320
Diffstat (limited to 'src/client/app/common')
| -rw-r--r-- | src/client/app/common/views/components/image-viewer.vue | 69 |
1 files changed, 69 insertions, 0 deletions
diff --git a/src/client/app/common/views/components/image-viewer.vue b/src/client/app/common/views/components/image-viewer.vue new file mode 100644 index 0000000000..b86a110337 --- /dev/null +++ b/src/client/app/common/views/components/image-viewer.vue @@ -0,0 +1,69 @@ +<template> +<div class="dkjvrdxtkvqrwmhfickhndpmnncsgacq"> + <div class="bg" @click="close"></div> + <img :src="image.url" :alt="image.name" :title="image.name" @click="close"/> +</div> +</template> + +<script lang="ts"> +import Vue from 'vue'; +import * as anime from 'animejs'; + +export default Vue.extend({ + props: ['image'], + mounted() { + anime({ + targets: this.$el, + opacity: 1, + duration: 100, + easing: 'linear' + }); + }, + methods: { + close() { + anime({ + targets: this.$el, + opacity: 0, + duration: 100, + easing: 'linear', + complete: () => this.destroyDom() + }); + } + } +}); +</script> + +<style lang="stylus" scoped> +.dkjvrdxtkvqrwmhfickhndpmnncsgacq + display block + position fixed + z-index 2048 + top 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 + +</style> |