This commit is contained in:
parent
2fc6313380
commit
78b560d89a
5 changed files with 62 additions and 30 deletions
|
@ -443,6 +443,7 @@ desktop/views/components/drive-window.vue:
|
|||
desktop/views/components/drive.file.vue:
|
||||
avatar: "アイコン"
|
||||
banner: "バナー"
|
||||
nsfw: "閲覧注意"
|
||||
contextmenu:
|
||||
rename: "名前を変更"
|
||||
mark-as-sensitive: "閲覧注意に設定"
|
||||
|
@ -954,12 +955,15 @@ mobile/views/components/drive-file-chooser.vue:
|
|||
select-file: "ファイルを選択"
|
||||
mobile/views/components/drive-folder-chooser.vue:
|
||||
select-folder: "フォルダーを選択"
|
||||
mobile/views/components/drive.file.vue:
|
||||
nsfw: "閲覧注意"
|
||||
mobile/views/components/drive.file-detail.vue:
|
||||
download: "ダウンロード"
|
||||
rename: "名前を変更"
|
||||
move: "移動"
|
||||
hash: "ハッシュ (md5)"
|
||||
exif: "EXIF"
|
||||
nsfw: "閲覧注意"
|
||||
mobile/views/components/media-image.vue:
|
||||
sensitive: "閲覧注意"
|
||||
click-to-show: "クリックして表示"
|
||||
|
|
|
@ -9,12 +9,18 @@
|
|||
@contextmenu.prevent.stop="onContextmenu"
|
||||
: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>
|
||||
</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>
|
||||
</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 }`">
|
||||
<img :src="file.thumbnailUrl" alt="" @load="onThumbnailLoaded"/>
|
||||
</div>
|
||||
|
@ -212,6 +218,11 @@ root(isDark)
|
|||
&:after
|
||||
background #0b65a5
|
||||
|
||||
&.red
|
||||
&:before
|
||||
&:after
|
||||
background #c12113
|
||||
|
||||
&:active
|
||||
background rgba(#000, 0.1)
|
||||
|
||||
|
@ -220,6 +231,11 @@ root(isDark)
|
|||
&:after
|
||||
background #0b588c
|
||||
|
||||
&.red
|
||||
&:before
|
||||
&:after
|
||||
background #ce2212
|
||||
|
||||
&[data-is-selected]
|
||||
background $theme-color
|
||||
|
||||
|
@ -256,26 +272,29 @@ root(isDark)
|
|||
pointer-events none
|
||||
|
||||
&:before
|
||||
content ""
|
||||
display block
|
||||
position absolute
|
||||
z-index 1
|
||||
top 0
|
||||
left 57px
|
||||
width 28px
|
||||
height 8px
|
||||
background #0c7ac9
|
||||
|
||||
&:after
|
||||
content ""
|
||||
display block
|
||||
position absolute
|
||||
z-index 1
|
||||
background #0c7ac9
|
||||
|
||||
&:before
|
||||
top 0
|
||||
left 57px
|
||||
width 28px
|
||||
height 8px
|
||||
|
||||
&:after
|
||||
top 57px
|
||||
left 0
|
||||
width 8px
|
||||
height 28px
|
||||
background #0c7ac9
|
||||
|
||||
&.red
|
||||
&:before
|
||||
&:after
|
||||
background #c12113
|
||||
|
||||
> img
|
||||
position absolute
|
||||
|
|
|
@ -30,6 +30,10 @@
|
|||
<span class="data-size">{{ file.datasize | bytes }}</span>
|
||||
<span class="separator"></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 class="menu">
|
||||
|
@ -198,6 +202,9 @@ export default Vue.extend({
|
|||
> [data-fa]
|
||||
margin-right 2px
|
||||
|
||||
> .nsfw
|
||||
color #bf4633
|
||||
|
||||
> .menu
|
||||
padding 14px
|
||||
border-top solid 1px #dfdfdf
|
||||
|
|
|
@ -14,13 +14,17 @@
|
|||
li.tag(style={background: tag.color, color: contrast(tag.color)})= tag.name
|
||||
-->
|
||||
<footer>
|
||||
<p class="type"><mk-file-type-icon :type="file.type"/>{{ file.type }}</p>
|
||||
<p class="separator"></p>
|
||||
<p class="data-size">{{ file.datasize | bytes }}</p>
|
||||
<p class="separator"></p>
|
||||
<p class="created-at">
|
||||
<span class="type"><mk-file-type-icon :type="file.type"/>{{ file.type }}</span>
|
||||
<span class="separator"></span>
|
||||
<span class="data-size">{{ file.datasize | bytes }}</span>
|
||||
<span class="separator"></span>
|
||||
<span class="created-at">
|
||||
%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>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -133,35 +137,27 @@ export default Vue.extend({
|
|||
font-size 0.7em
|
||||
|
||||
> .separator
|
||||
display inline
|
||||
margin 0
|
||||
padding 0 4px
|
||||
color #CDCDCD
|
||||
|
||||
> .type
|
||||
display inline
|
||||
margin 0
|
||||
padding 0
|
||||
color #9D9D9D
|
||||
|
||||
> .mk-file-type-icon
|
||||
margin-right 4px
|
||||
|
||||
> .data-size
|
||||
display inline
|
||||
margin 0
|
||||
padding 0
|
||||
color #9D9D9D
|
||||
|
||||
> .created-at
|
||||
display inline
|
||||
margin 0
|
||||
padding 0
|
||||
color #BDBDBD
|
||||
|
||||
> [data-fa]
|
||||
margin-right 2px
|
||||
|
||||
> .nsfw
|
||||
color #bf4633
|
||||
|
||||
&[data-is-selected]
|
||||
background $theme-color
|
||||
|
||||
|
|
6
src/client/assets/label-red.svg
Normal file
6
src/client/assets/label-red.svg
Normal file
|
@ -0,0 +1,6 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
|
||||
y="0px" width="96px" height="96px" viewBox="0 0 96 96" enable-background="new 0 0 96 96" xml:space="preserve">
|
||||
<polygon fill="#ea2412" points="0,45.255 45.254,0 84.854,0 0,84.854 "/>
|
||||
</svg>
|
After Width: | Height: | Size: 441 B |
Loading…
Reference in a new issue