From 3261d54cd34468f3ddbf555fd79b199ba90b131f Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Thu, 8 Nov 2018 02:09:15 +0900
Subject: Resolve #2320

---
 .../app/common/views/components/image-viewer.vue   | 69 ++++++++++++++++++++++
 1 file changed, 69 insertions(+)
 create mode 100644 src/client/app/common/views/components/image-viewer.vue

(limited to 'src/client/app/common')

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>
-- 
cgit v1.2.3-freya