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 a57f724a3..af1ef601a 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 cdfc2c8d3..41b8bf9bb 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 000000000..236b06520 --- /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>