From 040a7ba021114ed20b98139d774af2cd0199a962 Mon Sep 17 00:00:00 2001
From: Ankush Menat <ankush@frappe.io>
Date: Tue, 16 Aug 2022 19:30:10 +0530
Subject: [PATCH] fix(UX): better indicator for "is private" uploads

---
 .../js/frappe/file_uploader/FilePreview.vue   | 23 +++++++++----------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/frappe/public/js/frappe/file_uploader/FilePreview.vue b/frappe/public/js/frappe/file_uploader/FilePreview.vue
index 5972a975f2..8cce557dcf 100644
--- a/frappe/public/js/frappe/file_uploader/FilePreview.vue
+++ b/frappe/public/js/frappe/file_uploader/FilePreview.vue
@@ -13,14 +13,8 @@
 			<div>
 				<a class="flex" :href="file.doc.file_url" v-if="file.doc" target="_blank">
 					<span class="file-name">{{ file.name | file_name }}</span>
-					<div class="ml-2" v-html="private_icon"></div>
 				</a>
-				<span class="flex" v-else>
-					<span class="file-name">{{ file.name | file_name }}</span>
-					<button class="ml-2 btn-reset" @click="$emit('toggle_private')" :title="__('Toggle Public/Private')">
-						<div v-html="private_icon"></div>
-					</button>
-				</span>
+				<span class="file-name" v-else>{{ file.name | file_name }}</span>
 			</div>
 
 			<div>
@@ -28,7 +22,11 @@
 					{{ file.file_obj.size | file_size }}
 				</span>
 			</div>
-			<label v-if="is_optimizable" class="optimize-checkbox"><input type="checkbox" :checked="optimize" @change="$emit('toggle_optimize')">Optimize</label>
+
+			<div class="flex config-area">
+				<label v-if="is_optimizable" class="frappe-checkbox"><input type="checkbox" :checked="optimize" @change="$emit('toggle_optimize')">Optimize</label>
+				<label class="frappe-checkbox"><input type="checkbox" :checked="file.private" @change="$emit('toggle_private')">Private</label>
+			</div>
 			<div>
 				<span v-if="file.error_message" class="file-error text-danger">
 					{{ file.error_message }}
@@ -87,9 +85,6 @@ export default {
 		}
 	},
 	computed: {
-		private_icon() {
-			return frappe.utils.icon(this.is_private ? 'lock' : 'unlock');
-		},
 		is_private() {
 			return this.file.doc ? this.file.doc.is_private : this.file.private;
 		},
@@ -206,7 +201,7 @@ export default {
 	opacity: 1;
 }
 
-.optimize-checkbox {
+.frappe-checkbox {
 	font-size: var(--text-sm);
 	color: var(--text-light);
 	display: flex;
@@ -214,6 +209,10 @@ export default {
 	padding-top: 0.25rem;
 }
 
+.config-area {
+	gap: 0.5rem;
+}
+
 .file-error {
 	font-size: var(--text-sm);
 	font-weight: var(--text-bold);