Resolve #2320

4 files changed, 13 insertions, 7 deletions

diff --git a/src/client/app/desktop/views/components/media-image-dialog.vue b/src/client/app/common/views/components/image-viewer.vue
index 89a340d3ae..b86a110337 100644
--- a/src/client/app/desktop/views/components/media-image-dialog.vue
+++ b/src/client/app/common/views/components/image-viewer.vue
@@ -1,5 +1,5 @@
 <template>
-<div class="mk-media-image-dialog">
+<div class="dkjvrdxtkvqrwmhfickhndpmnncsgacq">
 	<div class="bg" @click="close"></div>
 	<img :src="image.url" :alt="image.name" :title="image.name" @click="close"/>
 </div>
@@ -34,7 +34,7 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.mk-media-image-dialog
+.dkjvrdxtkvqrwmhfickhndpmnncsgacq
 	display block
 	position fixed
 	z-index 2048
diff --git a/src/client/app/desktop/views/components/index.ts b/src/client/app/desktop/views/components/index.ts
index 38b1547448..ff4e845f62 100644
--- a/src/client/app/desktop/views/components/index.ts
+++ b/src/client/app/desktop/views/components/index.ts
@@ -10,7 +10,6 @@ import window from './window.vue';
 import noteFormWindow from './post-form-window.vue';
 import renoteFormWindow from './renote-form-window.vue';
 import mediaImage from './media-image.vue';
-import mediaImageDialog from './media-image-dialog.vue';
 import mediaVideo from './media-video.vue';
 import notifications from './notifications.vue';
 import noteForm from './post-form.vue';
@@ -39,7 +38,6 @@ Vue.component('mk-window', window);
 Vue.component('mk-post-form-window', noteFormWindow);
 Vue.component('mk-renote-form-window', renoteFormWindow);
 Vue.component('mk-media-image', mediaImage);
-Vue.component('mk-media-image-dialog', mediaImageDialog);
 Vue.component('mk-media-video', mediaVideo);
 Vue.component('mk-notifications', notifications);
 Vue.component('mk-post-form', noteForm);
diff --git a/src/client/app/desktop/views/components/media-image.vue b/src/client/app/desktop/views/components/media-image.vue
index 9e1a293336..510fdbc4ee 100644
--- a/src/client/app/desktop/views/components/media-image.vue
+++ b/src/client/app/desktop/views/components/media-image.vue
@@ -17,7 +17,7 @@
 
 <script lang="ts">
 import Vue from 'vue';
-import MkMediaImageDialog from './media-image-dialog.vue';
+import ImageViewer from '../../../common/views/components/image-viewer.vue';
 
 export default Vue.extend({
 	props: {
@@ -58,7 +58,7 @@ export default Vue.extend({
 		},
 
 		onClick() {
-			(this as any).os.new(MkMediaImageDialog, {
+			(this as any).os.new(ImageViewer, {
 				image: this.image
 			});
 		}
diff --git a/src/client/app/mobile/views/components/media-image.vue b/src/client/app/mobile/views/components/media-image.vue
index 5da888984c..c555d6a611 100644
--- a/src/client/app/mobile/views/components/media-image.vue
+++ b/src/client/app/mobile/views/components/media-image.vue
@@ -5,11 +5,12 @@
 		<span>%i18n:@click-to-show%</span>
 	</div>
 </div>
-<a class="gqnyydlzavusgskkfvwvjiattxdzsqlf" v-else :href="image.url" target="_blank" :style="style" :title="image.name"></a>
+<a class="gqnyydlzavusgskkfvwvjiattxdzsqlf" v-else :href="image.url" target="_blank" :style="style" :title="image.name" @click.prevent="onClick"></a>
 </template>
 
 <script lang="ts">
 import Vue from 'vue';
+import ImageViewer from '../../../common/views/components/image-viewer.vue';
 
 export default Vue.extend({
 	props: {
@@ -41,6 +42,13 @@ export default Vue.extend({
 				'background-image': url
 			};
 		}
+	},
+	methods: {
+		onClick() {
+			(this as any).os.new(ImageViewer, {
+				image: this.image
+			});
+		}
 	}
 });
 </script>