Merge pull request #12399 from netchampfaris/fileuploader-fixes

frappe/public/icons/timeless/symbol-defs.svg

@@ -138,7 +138,10 @@
 		<path fill-rule="evenodd" clip-rule="evenodd" d="M3.25 6C3.25 5.72386 3.47386 5.5 3.75 5.5H20.2474C20.5236 5.5 20.7474 5.72386 20.7474 6C20.7474 6.27614 20.5236 6.5 20.2474 6.5H3.75C3.47386 6.5 3.25 6.27614 3.25 6ZM3.25 12C3.25 11.7239 3.47386 11.5 3.75 11.5H20.2474C20.5236 11.5 20.7474 11.7239 20.7474 12C20.7474 12.2761 20.5236 12.5 20.2474 12.5H3.75C3.47386 12.5 3.25 12.2761 3.25 12ZM3.75 17.5C3.47386 17.5 3.25 17.7239 3.25 18C3.25 18.2761 3.47386 18.5 3.75 18.5H20.2474C20.5236 18.5 20.7474 18.2761 20.7474 18C20.7474 17.7239 20.5236 17.5 20.2474 17.5H3.75Z" fill="var(--icon-stroke)"/>
 	</symbol>
 	<symbol fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="icon-lock">
-		<path fill-rule="evenodd" clip-rule="evenodd" d="M8.077 1.45h-.055a3.356 3.356 0 00-3.387 3.322v.35H3.75a2 2 0 00-2 2v5.391a2 2 0 002 2h8.539a2 2 0 002-2V7.122a2 2 0 00-2-2h-.885v-.285A3.356 3.356 0 008.082 1.45h-.005zm2.327 3.672V4.83a2.356 2.356 0 00-2.33-2.38h-.06a2.356 2.356 0 00-2.38 2.33v.342h4.77zm-6.654 1a1 1 0 00-1 1v5.391a1 1 0 001 1h8.539a1 1 0 001-1V7.122a1 1 0 00-1-1H3.75zm4.27 4.269a.573.573 0 100-1.147.573.573 0 000 1.147zm1.573-.574a1.573 1.573 0 11-3.147 0 1.573 1.573 0 013.147 0z"></path>
+		<path stroke="none" fill-rule="evenodd" clip-rule="evenodd" d="M8.077 1.45h-.055a3.356 3.356 0 00-3.387 3.322v.35H3.75a2 2 0 00-2 2v5.391a2 2 0 002 2h8.539a2 2 0 002-2V7.122a2 2 0 00-2-2h-.885v-.285A3.356 3.356 0 008.082 1.45h-.005zm2.327 3.672V4.83a2.356 2.356 0 00-2.33-2.38h-.06a2.356 2.356 0 00-2.38 2.33v.342h4.77zm-6.654 1a1 1 0 00-1 1v5.391a1 1 0 001 1h8.539a1 1 0 001-1V7.122a1 1 0 00-1-1H3.75zm4.27 4.269a.573.573 0 100-1.147.573.573 0 000 1.147zm1.573-.574a1.573 1.573 0 11-3.147 0 1.573 1.573 0 013.147 0z" fill="#1F272E"></path>
+	</symbol>
+	<symbol width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" id="icon-unlock">
+		<path stroke="none" fill-rule="evenodd" clip-rule="evenodd" d="M8.07685 1.45034H8.02155C7.13255 1.44218 6.2766 1.78707 5.64159 2.40938C5.00596 3.03229 4.64377 3.88215 4.63464 4.77206L4.63462 4.77206V4.77719V5.12175H3.75C2.64543 5.12175 1.75 6.01719 1.75 7.12175V12.5134C1.75 13.6179 2.64543 14.5134 3.75 14.5134H12.2885C13.393 14.5134 14.2885 13.6179 14.2885 12.5134V7.12175C14.2885 6.01718 13.393 5.12175 12.2885 5.12175H5.63462V4.77988C5.64166 4.156 5.89586 3.56033 6.34152 3.12359C6.78776 2.68627 7.38942 2.4441 8.01419 2.45031L8.01418 2.45034H8.01916H8.07417C8.69805 2.45738 9.29371 2.71158 9.73045 3.15724C9.92373 3.35446 10.2403 3.35766 10.4375 3.16438C10.6347 2.9711 10.6379 2.65453 10.4447 2.45731C9.82175 1.82169 8.97189 1.45949 8.08198 1.45036L8.08198 1.45034H8.07685ZM3.75 6.12175C3.19772 6.12175 2.75 6.56947 2.75 7.12175V12.5134C2.75 13.0656 3.19772 13.5134 3.75 13.5134H12.2885C12.8407 13.5134 13.2885 13.0656 13.2885 12.5134V7.12175C13.2885 6.56947 12.8407 6.12175 12.2885 6.12175H3.75ZM8.01936 10.3909C8.33605 10.3909 8.59279 10.1342 8.59279 9.81752C8.59279 9.50083 8.33605 9.24409 8.01936 9.24409C7.70266 9.24409 7.44593 9.50083 7.44593 9.81752C7.44593 10.1342 7.70266 10.3909 8.01936 10.3909ZM9.59279 9.81752C9.59279 10.6865 8.88834 11.3909 8.01936 11.3909C7.15038 11.3909 6.44593 10.6865 6.44593 9.81752C6.44593 8.94854 7.15038 8.24409 8.01936 8.24409C8.88834 8.24409 9.59279 8.94854 9.59279 9.81752Z" fill="#1F272E"/>
 	</symbol>
 	<symbol viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" id="icon-list_alt">
 		<path fill-rule="evenodd" clip-rule="evenodd" d="M2.5 3.722c0-.454.316-.722.59-.722h9.82c.274 0 .59.268.59.722v8.556c0 .454-.316.722-.59.722H3.09c-.274 0-.59-.268-.59-.722V3.722zM3.09 2c-.93 0-1.59.826-1.59 1.722v8.556c0 .896.66 1.722 1.59 1.722h9.82c.93 0 1.59-.826 1.59-1.722V3.722C14.5 2.826 13.84 2 12.91 2H3.09zM5 4.5a.5.5 0 0 0 0 1h4.002a.5.5 0 1 0 0-1H5zM5 7a.5.5 0 0 0 0 1h5.002a.5.5 0 1 0 0-1H5zm-.5 3a.5.5 0 0 1 .5-.5h2.27a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5z"

frappe/public/js/frappe/file_uploader/FilePreview.vue

@@ -11,17 +11,18 @@
 		</div>
 		<div>
 			<div>
-				<a :href="file.doc.file_url" v-if="file.doc" target="_blank">
+				<a class="flex" :href="file.doc.file_url" v-if="file.doc" target="_blank">
 					<span class="file-name">{{ file.name | file_name }}</span>
-					<i v-html="frappe.utils.icon(file.doc.is_private ? 'lock' : 'unlock')"></i>
+					<div class="ml-2" v-html="private_icon"></div>
 				</a>
 				<span class="flex" v-else>
 					<span class="file-name">{{ file.name | file_name }}</span>
-					<span class="cursor-pointer" @click="$emit('toggle_private')" :title="__('Toggle Public/Private')">
-						<i v-html="frappe.utils.icon(file.is_private ? 'lock' : 'unlock')"></i>
-					</span>
+					<button class="ml-2 btn-reset" @click="$emit('toggle_private')" :title="__('Toggle Public/Private')">
+						<div v-html="private_icon"></div>
+					</button>
 				</span>
 			</div>
+
 			<div>
 				<span class="file-size">
 					{{ file.file_obj.size | file_size }}
@@ -30,7 +31,7 @@
 		</div>
 		<div class="file-actions">
 			<ProgressRing
-				v-show="file.uploading"
+				v-show="file.uploading && !uploaded"
 				primary="var(--primary-color)"
 				secondary="var(--gray-200)"
 				radius="24"
@@ -76,6 +77,12 @@ 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;
+		},
 		uploaded() {
 			return this.file.total && this.file.total === this.file.progress && !this.file.failed;
 		},
@@ -156,9 +163,10 @@ export default {
 }
 
 .file-actions {
-	width: 2.5rem;
+	width: 3rem;
 	flex-shrink: 0;
 	margin-left: auto;
+	text-align: center;
 }
 
 .file-actions .btn {

frappe/public/js/frappe/file_uploader/FileUploader.vue

@@ -73,21 +73,13 @@
 			</div>
 		</div>
 		<div class="file-preview-area" v-show="files.length && !show_file_browser && !show_web_link">
-			<!-- <div class="margin-bottom" v-if="!upload_complete">
-				<label>
-					<input type="checkbox" class="input-with-feedback" @change="e => toggle_all_private(e.target.checked)">
-					<span class="text-medium" style="font-weight: normal;">
-						{{ __('Make all attachments private') }}
-					</span>
-				</label>
-			</div> -->
 			<div class="file-preview-container">
 				<FilePreview
 					v-for="(file, i) in files"
 					:key="file.name"
 					:file="file"
-					@remove="remove_file(i)"
-					@toggle_private="toggle_private(i)"
+					@remove="remove_file(file)"
+					@toggle_private="file.private = !file.private"
 				/>
 			</div>
 			<div class="flex align-center" v-if="show_upload_button && currently_uploading === -1">
@@ -217,15 +209,19 @@ export default {
 		on_file_input(e) {
 			this.add_files(this.$refs.file_input.files);
 		},
-		remove_file(i) {
-			this.files = this.files.filter((file, j) => i !== j);
-		},
-		toggle_private(i) {
-			this.files[i].private = !this.files[i].private;
+		remove_file(file) {
+			this.files = this.files.filter(f => f !== file);
 		},
-		toggle_all_private(flag) {
-			if (flag == null) {
-				flag = this.files.every(file => file.private);
+		toggle_all_private() {
+			let flag;
+			let private_values = this.files.filter(file => file.private);
+			if (private_values.length < this.files.length) {
+				// there are some private and some public
+				// set all to private
+				flag = true;
+			} else {
+				// all are private, set all to public
+				flag = false;
 			}
 			this.files = this.files.map(file => {
 				file.private = flag;

frappe/public/js/frappe/file_uploader/index.js

@@ -48,6 +48,13 @@ export default class FileUploader {
 
 		this.uploader = this.$fileuploader.$children[0];
 
+		this.uploader.$watch('files', (files) => {
+			let all_private = files.every(file => file.private);
+			if (this.dialog) {
+				this.dialog.set_secondary_action_label(all_private ? __('Set all public') : __('Set all private'));
+			}
+		}, { deep: true });
+
 		if (files && files.length) {
 			this.uploader.add_files(files);
 		}
@@ -66,8 +73,10 @@ export default class FileUploader {
 			title: __('Upload'),
 			primary_action_label: __('Upload'),
 			primary_action: () => this.upload_files(),
-			secondary_action_label: __('Toggle Private'),
-			secondary_action: () => this.uploader.toggle_all_private()
+			secondary_action_label: __('Set all private'),
+			secondary_action: () => {
+				this.uploader.toggle_all_private();
+			}
 		});
 
 		this.wrapper = this.dialog.body;

frappe/public/scss/common/buttons.scss

@@ -88,10 +88,17 @@
 	color: $white;
 }
 
+.btn-reset {
+	padding: 0;
+	margin: 0;
+	border: 0;
+	font-size: inherit;
+	background-color: inherit;
+}
 
 [data-theme="dark"] {
 	.btn-primary-light {
 		background-color: var(--bg-dark-blue);
 		box-shadow: none;
 	}
-}
+}