diff --git a/locales/ja.yml b/locales/ja.yml
index a467c4ba68..42d4df54a1 100644
--- a/locales/ja.yml
+++ b/locales/ja.yml
@@ -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: "クリックして表示"
diff --git a/src/client/app/desktop/views/components/drive.file.vue b/src/client/app/desktop/views/components/drive.file.vue
index 3b5be19dcf..3ac8923c51 100644
--- a/src/client/app/desktop/views/components/drive.file.vue
+++ b/src/client/app/desktop/views/components/drive.file.vue
@@ -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
diff --git a/src/client/app/mobile/views/components/drive.file-detail.vue b/src/client/app/mobile/views/components/drive.file-detail.vue
index f6a22f95f0..deb9941be8 100644
--- a/src/client/app/mobile/views/components/drive.file-detail.vue
+++ b/src/client/app/mobile/views/components/drive.file-detail.vue
@@ -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
diff --git a/src/client/app/mobile/views/components/drive.file.vue b/src/client/app/mobile/views/components/drive.file.vue
index c337629cb6..6dec4b9f4f 100644
--- a/src/client/app/mobile/views/components/drive.file.vue
+++ b/src/client/app/mobile/views/components/drive.file.vue
@@ -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
diff --git a/src/client/assets/label-red.svg b/src/client/assets/label-red.svg
new file mode 100644
index 0000000000..45996aa9ce
--- /dev/null
+++ b/src/client/assets/label-red.svg
@@ -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>