#2324

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: "クリックして表示"

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

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

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>
+				<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"/>
-				</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
 

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>