#1334

4 files changed, 84 insertions, 12 deletions

diff --git a/src/client/app/common/views/components/media-list.vue b/src/client/app/common/views/components/media-list.vue
index 2f8a1943ad..cdfc2c8d3c 100644
--- a/src/client/app/common/views/components/media-list.vue
+++ b/src/client/app/common/views/components/media-list.vue
@@ -46,33 +46,45 @@ export default Vue.extend({
 		display grid
 		grid-gap 4px
 
+		> *
+			overflow hidden
+			border-radius 4px
+
 		&[data-count="1"]
 			grid-template-rows 1fr
+
 		&[data-count="2"]
 			grid-template-columns 1fr 1fr
 			grid-template-rows 1fr
+
 		&[data-count="3"]
 			grid-template-columns 1fr 0.5fr
 			grid-template-rows 1fr 1fr
-			:nth-child(1)
+
+			> *:nth-child(1)
 				grid-row 1 / 3
-			:nth-child(3)
+
+			> *:nth-child(3)
 				grid-column 2 / 3
 				grid-row 2 / 3
+
 		&[data-count="4"]
 			grid-template-columns 1fr 1fr
 			grid-template-rows 1fr 1fr
 
-		:nth-child(1)
+		> *:nth-child(1)
 			grid-column 1 / 2
 			grid-row 1 / 2
-		:nth-child(2)
+
+		> *:nth-child(2)
 			grid-column 2 / 3
 			grid-row 1 / 2
-		:nth-child(3)
+
+		> *:nth-child(3)
 			grid-column 1 / 2
 			grid-row 2 / 3
-		:nth-child(4)
+
+		> *:nth-child(4)
 			grid-column 2 / 3
 			grid-row 2 / 3
 
diff --git a/src/client/app/desktop/views/components/drive.file.vue b/src/client/app/desktop/views/components/drive.file.vue
index 86addb1318..11700d4966 100644
--- a/src/client/app/desktop/views/components/drive.file.vue
+++ b/src/client/app/desktop/views/components/drive.file.vue
@@ -69,6 +69,11 @@ export default Vue.extend({
 				action: this.rename
 			}, {
 				type: 'item',
+				text: this.file.isSensitive ? '%i18n:@contextmenu.unmark-as-sensitive%' : '%i18n:@contextmenu.mark-as-sensitive%',
+				icon: this.file.isSensitive ? '%fa:R eye%' : '%fa:R eye-slash%',
+				action: this.toggleSensitive
+			}, null, {
+				type: 'item',
 				text: '%i18n:@contextmenu.copy-url%',
 				icon: '%fa:link%',
 				action: this.copyUrl
@@ -149,6 +154,13 @@ export default Vue.extend({
 			});
 		},
 
+		toggleSensitive() {
+			(this as any).api('drive/files/update', {
+				fileId: this.file.id,
+				isSensitive: !this.file.isSensitive
+			});
+		},
+
 		copyUrl() {
 			copyToClipboard(this.file.url);
 			(this as any).apis.dialog({
diff --git a/src/client/app/desktop/views/components/media-image.vue b/src/client/app/desktop/views/components/media-image.vue
index b98a4707ec..42a31c4c2d 100644
--- a/src/client/app/desktop/views/components/media-image.vue
+++ b/src/client/app/desktop/views/components/media-image.vue
@@ -1,5 +1,11 @@
 <template>
-<a class="mk-media-image"
+<div class="ldwbgwstjsdgcjruamauqdrffetqudry" v-if="image.isSensitive && hide" @click="hide = false">
+	<div>
+		<b>%fa:exclamation-triangle% %i18n:@sensitive%</b>
+		<span>%i18n:@click-to-show%</span>
+	</div>
+</div>
+<a class="lcjomzwbohoelkxsnuqjiaccdbdfiazy" v-else
 	:href="image.url"
 	@mousemove="onMousemove"
 	@mouseleave="onMouseleave"
@@ -21,6 +27,10 @@ export default Vue.extend({
 		},
 		raw: {
 			default: false
+		},
+		hide: {
+			type: Boolean,
+			default: true
 		}
 	},
 	computed: {
@@ -56,16 +66,30 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.mk-media-image
+.lcjomzwbohoelkxsnuqjiaccdbdfiazy
 	display block
 	cursor zoom-in
 	overflow hidden
 	width 100%
 	height 100%
 	background-position center
-	border-radius 4px
 
 	&:not(:hover)
 		background-size cover
 
+.ldwbgwstjsdgcjruamauqdrffetqudry
+	display flex
+	justify-content center
+	align-items center
+	background #111
+	color #fff
+
+	> div
+		display table-cell
+		text-align center
+		font-size 12px
+
+		> b
+			display block
+
 </style>
diff --git a/src/client/app/mobile/views/components/media-image.vue b/src/client/app/mobile/views/components/media-image.vue
index c2f9c66e84..1042404c98 100644
--- a/src/client/app/mobile/views/components/media-image.vue
+++ b/src/client/app/mobile/views/components/media-image.vue
@@ -1,5 +1,11 @@
 <template>
-<a class="mk-media-image" :href="image.url" target="_blank" :style="style" :title="image.name"></a>
+<div class="qjewsnkgzzxlxtzncydssfbgjibiehcy" v-if="image.isSensitive && hide" @click="hide = false">
+	<div>
+		<b>%fa:exclamation-triangle% %i18n:@sensitive%</b>
+		<span>%i18n:@click-to-show%</span>
+	</div>
+</div>
+<a class="gqnyydlzavusgskkfvwvjiattxdzsqlf" v-else :href="image.url" target="_blank" :style="style" :title="image.name"></a>
 </template>
 
 <script lang="ts">
@@ -13,6 +19,10 @@ export default Vue.extend({
 		},
 		raw: {
 			default: false
+		},
+		hide: {
+			type: Boolean,
+			default: true
 		}
 	},
 	computed: {
@@ -35,13 +45,27 @@ export default Vue.extend({
 </script>
 
 <style lang="stylus" scoped>
-.mk-media-image
+.gqnyydlzavusgskkfvwvjiattxdzsqlf
 	display block
 	overflow hidden
 	width 100%
 	height 100%
 	background-position center
 	background-size cover
-	border-radius 4px
+
+.qjewsnkgzzxlxtzncydssfbgjibiehcy
+	display flex
+	justify-content center
+	align-items center
+	background #111
+	color #fff
+
+	> div
+		display table-cell
+		text-align center
+		font-size 12px
+
+		> b
+			display block
 
 </style>