This commit is contained in:
syuilo 2018-08-19 03:56:44 +09:00
parent 2fc6313380
commit 78b560d89a
5 changed files with 56 additions and 30 deletions

View file

@ -443,6 +443,7 @@ desktop/views/components/drive-window.vue:
desktop/views/components/drive.file.vue: desktop/views/components/drive.file.vue:
avatar: "アイコン" avatar: "アイコン"
banner: "バナー" banner: "バナー"
nsfw: "閲覧注意"
contextmenu: contextmenu:
rename: "名前を変更" rename: "名前を変更"
mark-as-sensitive: "閲覧注意に設定" mark-as-sensitive: "閲覧注意に設定"
@ -954,12 +955,15 @@ mobile/views/components/drive-file-chooser.vue:
select-file: "ファイルを選択" select-file: "ファイルを選択"
mobile/views/components/drive-folder-chooser.vue: mobile/views/components/drive-folder-chooser.vue:
select-folder: "フォルダーを選択" select-folder: "フォルダーを選択"
mobile/views/components/drive.file.vue:
nsfw: "閲覧注意"
mobile/views/components/drive.file-detail.vue: mobile/views/components/drive.file-detail.vue:
download: "ダウンロード" download: "ダウンロード"
rename: "名前を変更" rename: "名前を変更"
move: "移動" move: "移動"
hash: "ハッシュ (md5)" hash: "ハッシュ (md5)"
exif: "EXIF" exif: "EXIF"
nsfw: "閲覧注意"
mobile/views/components/media-image.vue: mobile/views/components/media-image.vue:
sensitive: "閲覧注意" sensitive: "閲覧注意"
click-to-show: "クリックして表示" click-to-show: "クリックして表示"

View file

@ -9,12 +9,18 @@
@contextmenu.prevent.stop="onContextmenu" @contextmenu.prevent.stop="onContextmenu"
:title="title" :title="title"
> >
<div class="label" v-if="$store.state.i.avatarId == file.id"><img src="/assets/label.svg"/> <div class="label" v-if="$store.state.i.avatarId == file.id">
<img src="/assets/label.svg"/>
<p>%i18n:@avatar%</p> <p>%i18n:@avatar%</p>
</div> </div>
<div class="label" v-if="$store.state.i.bannerId == file.id"><img src="/assets/label.svg"/> <div class="label" v-if="$store.state.i.bannerId == file.id">
<img src="/assets/label.svg"/>
<p>%i18n:@banner%</p> <p>%i18n:@banner%</p>
</div> </div>
<div class="label red" v-if="file.isSensitive">
<img src="/assets/label-red.svg"/>
<p>%i18n:@nsfw%</p>
</div>
<div class="thumbnail" ref="thumbnail" :style="`background-color: ${ background }`"> <div class="thumbnail" ref="thumbnail" :style="`background-color: ${ background }`">
<img :src="file.thumbnailUrl" alt="" @load="onThumbnailLoaded"/> <img :src="file.thumbnailUrl" alt="" @load="onThumbnailLoaded"/>
</div> </div>
@ -212,6 +218,11 @@ root(isDark)
&:after &:after
background #0b65a5 background #0b65a5
&.red
&:before
&:after
background #c12113
&:active &:active
background rgba(#000, 0.1) background rgba(#000, 0.1)
@ -220,6 +231,11 @@ root(isDark)
&:after &:after
background #0b588c background #0b588c
&.red
&:before
&:after
background #ce2212
&[data-is-selected] &[data-is-selected]
background $theme-color background $theme-color
@ -256,26 +272,29 @@ root(isDark)
pointer-events none pointer-events none
&:before &:before
content ""
display block
position absolute
z-index 1
top 0
left 57px
width 28px
height 8px
background #0c7ac9
&:after &:after
content "" content ""
display block display block
position absolute position absolute
z-index 1 z-index 1
background #0c7ac9
&:before
top 0
left 57px
width 28px
height 8px
&:after
top 57px top 57px
left 0 left 0
width 8px width 8px
height 28px height 28px
background #0c7ac9
&.red
&:before
&:after
background #c12113
> img > img
position absolute position absolute

View file

@ -30,6 +30,10 @@
<span class="data-size">{{ file.datasize | bytes }}</span> <span class="data-size">{{ file.datasize | bytes }}</span>
<span class="separator"></span> <span class="separator"></span>
<span class="created-at" @click="showCreatedAt">%fa:R clock%<mk-time :time="file.createdAt"/></span> <span class="created-at" @click="showCreatedAt">%fa:R clock%<mk-time :time="file.createdAt"/></span>
<template v-if="file.isSensitive">
<span class="separator"></span>
<span class="nsfw">%fa:eye-slash% %i18n:@nsfw%</span>
</template>
</div> </div>
</div> </div>
<div class="menu"> <div class="menu">
@ -198,6 +202,9 @@ export default Vue.extend({
> [data-fa] > [data-fa]
margin-right 2px margin-right 2px
> .nsfw
color #bf4633
> .menu > .menu
padding 14px padding 14px
border-top solid 1px #dfdfdf border-top solid 1px #dfdfdf

View file

@ -14,13 +14,17 @@
li.tag(style={background: tag.color, color: contrast(tag.color)})= tag.name li.tag(style={background: tag.color, color: contrast(tag.color)})= tag.name
--> -->
<footer> <footer>
<p class="type"><mk-file-type-icon :type="file.type"/>{{ file.type }}</p> <span class="type"><mk-file-type-icon :type="file.type"/>{{ file.type }}</span>
<p class="separator"></p> <span class="separator"></span>
<p class="data-size">{{ file.datasize | bytes }}</p> <span class="data-size">{{ file.datasize | bytes }}</span>
<p class="separator"></p> <span class="separator"></span>
<p class="created-at"> <span class="created-at">
%fa:R clock%<mk-time :time="file.createdAt"/> %fa:R clock%<mk-time :time="file.createdAt"/>
</p> </span>
<template v-if="file.isSensitive">
<span class="separator"></span>
<span class="nsfw">%fa:eye-slash% %i18n:@nsfw%</span>
</template>
</footer> </footer>
</div> </div>
</div> </div>
@ -133,35 +137,27 @@ export default Vue.extend({
font-size 0.7em font-size 0.7em
> .separator > .separator
display inline
margin 0
padding 0 4px padding 0 4px
color #CDCDCD color #CDCDCD
> .type > .type
display inline
margin 0
padding 0
color #9D9D9D color #9D9D9D
> .mk-file-type-icon > .mk-file-type-icon
margin-right 4px margin-right 4px
> .data-size > .data-size
display inline
margin 0
padding 0
color #9D9D9D color #9D9D9D
> .created-at > .created-at
display inline
margin 0
padding 0
color #BDBDBD color #BDBDBD
> [data-fa] > [data-fa]
margin-right 2px margin-right 2px
> .nsfw
color #bf4633
&[data-is-selected] &[data-is-selected]
background $theme-color background $theme-color

Binary file not shown.

After

Width:  |  Height:  |  Size: 441 B