From dd3e3ddcdd69136023cb39a769d7785fac6696be Mon Sep 17 00:00:00 2001
From: tamaina <tamaina@hotmail.co.jp>
Date: Tue, 4 Sep 2018 20:21:36 +0900
Subject: [PATCH] wip

---
 locales/ja-JP.yml                             |  5 ++
 .../common/views/components/media-list.vue    |  3 +-
 .../views/components/media-download.vue       | 79 +++++++++++++++++++
 3 files changed, 86 insertions(+), 1 deletion(-)
 create mode 100644 src/client/app/desktop/views/components/media-download.vue

diff --git a/locales/ja-JP.yml b/locales/ja-JP.yml
index a57f724a32..af1ef601af 100644
--- a/locales/ja-JP.yml
+++ b/locales/ja-JP.yml
@@ -583,6 +583,11 @@ desktop/views/components/media-video.vue:
   sensitive: "閲覧注意"
   click-to-show: "クリックして表示"
 
+desktop/views/components/media-download.vue:
+  sensitive: "閲覧注意"
+  click-to-show: "クリックして表示"
+  download: "ダウンロード"
+
 desktop/views/components/follow-button.vue:
   following: "フォロー中"
   follow: "フォロー"
diff --git a/src/client/app/common/views/components/media-list.vue b/src/client/app/common/views/components/media-list.vue
index cdfc2c8d3c..41b8bf9bb7 100644
--- a/src/client/app/common/views/components/media-list.vue
+++ b/src/client/app/common/views/components/media-list.vue
@@ -3,7 +3,8 @@
 	<div :data-count="mediaList.length" ref="grid">
 		<template v-for="media in mediaList">
 			<mk-media-video :video="media" :key="media.id" v-if="media.type.startsWith('video')" :inline-playable="mediaList.length === 1"/>
-			<mk-media-image :image="media" :key="media.id" v-else :raw="raw"/>
+			<mk-media-image :image="media" :key="media.id" v-if="media.type.startsWith('image')" :raw="raw"/>
+			<mk-media-download :download="media" :key="media.id" v-else :raw="raw"/>
 		</template>
 	</div>
 </div>
diff --git a/src/client/app/desktop/views/components/media-download.vue b/src/client/app/desktop/views/components/media-download.vue
new file mode 100644
index 0000000000..236b065204
--- /dev/null
+++ b/src/client/app/desktop/views/components/media-download.vue
@@ -0,0 +1,79 @@
+<template>
+<div class="ldwbgwstjsdgcjruamauqdrffetqudry" v-if="download.isSensitive && hide" @click="hide = false">
+	<div>
+		<b>%fa:exclamation-triangle% %i18n:@sensitive%</b>
+		<span>%i18n:@click-to-show%</span>
+	</div>
+</div>
+<a class="reiujibreakfastbreadbaconeggnuts" v-else
+	:href="download.url"
+	:style="style"
+	:title="download.name"
+	download="{{ download.name }}{{ download.ext }}"
+>
+	<div>
+		<div>%fa:download%</div>
+		<div>%i18n:@download%</div>
+		<div>{{ download.name }}{{ download.ext }}</div>
+	</div>
+</a>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+	props: {
+		download: {
+			type: Object,
+			required: true
+		},
+		raw: {
+			default: false
+		},
+		hide: {
+			type: Boolean,
+			default: true
+		}
+	},
+	computed: {
+		style(): any {
+			return {
+				'background-color': this.download.properties.avgColor && this.download.properties.avgColor.length == 3 ? `rgb(${this.download.properties.avgColor.join(',')})` : 'transparent',
+				'background-download': this.raw ? `url(${this.download.url})` : `url(${this.download.thumbnailUrl})`
+			};
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+.reiujibreakfastbreadbaconeggnuts
+	display flex
+	justify-content center
+	align-items center
+
+	> div
+		display table-cell
+		text-align center
+		font-size 12px
+
+		> *
+			display block
+
+.ldwbgwstjsdgcjruamauqdrffetqudry
+	display flex
+	justify-content center
+	align-items center
+	background #111
+	color #fff
+
+	> div
+		display table-cell
+		text-align center
+		font-size 12px
+
+		> *
+			display block
+
+</style>