#2324

4 files changed, 53 insertions, 25 deletions

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
+		&:after
 			content ""
 			display block
 			position absolute
 			z-index 1
+			background #0c7ac9
+
+		&:before
 			top 0
 			left 57px
 			width 28px
 			height 8px
-			background #0c7ac9
 
 		&:after
-			content ""
-			display block
-			position absolute
-			z-index 1
 			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>