fix(UX): Form Sidebar Image

Dropdown for uploading new image or removing

frappe/public/js/frappe/form/sidebar/user_image.js

@@ -4,6 +4,7 @@ frappe.ui.form.set_user_image = function(frm) {
 	var image_field = frm.meta.image_field;
 	var image = frm.doc[image_field];
 	var title_image = frm.page.$title_area.find('.title-image');
+	var image_actions = frm.sidebar.image_wrapper.find('.sidebar-image-actions');
 
 
 	image_section.toggleClass('hide', image_field ? false : true);
@@ -32,6 +33,8 @@ frappe.ui.form.set_user_image = function(frm) {
 			.css("background-image", 'url("' + image + '")')
 			.html('');
 
+		image_actions.find('.sidebar-image-change, .sidebar-image-remove').show();
+
 	} else {
 		image_section
 			.find(".sidebar-image")
@@ -51,6 +54,8 @@ frappe.ui.form.set_user_image = function(frm) {
 			.css({'background-color': frappe.get_palette(title)})
 			.html(frappe.get_abbr(title));
 
+		image_actions.find('.sidebar-image-change').show();
+		image_actions.find('.sidebar-image-remove').hide();
 	}
 
 }
@@ -64,11 +69,16 @@ frappe.ui.form.setup_user_image_event = function(frm) {
 	}
 
 	// bind click on image_wrapper
-	frm.sidebar.image_wrapper.on('click', function() {
+	frm.sidebar.image_wrapper.on('click', '.sidebar-image-change, .sidebar-image-remove', function(e) {
+		let $target = $(e.currentTarget);
 		var field = frm.get_field(frm.meta.image_field);
-		if(!field.$input) {
-			field.make_input();
+		if ($target.is('.sidebar-image-change')) {
+			if(!field.$input) {
+				field.make_input();
+			}
+			field.$input.trigger('click');
+		} else {
+			field.set_value('').then(() => frm.save());
 		}
-		field.$input.trigger('click');
 	});
 }

frappe/public/js/frappe/form/templates/form_sidebar.html

@@ -12,6 +12,15 @@
 		<div class="sidebar-standard-image">
 			<div class="standard-image"></div>
 		</div>
+		<div class="sidebar-image-actions">
+			<div class="dropdown">
+				<a href="#" class="dropdown-toggle" data-toggle="dropdown">{{ __("Change") }}</a>
+				<ul class="dropdown-menu" role="menu">
+					<li><a class="sidebar-image-change">{{ __("Upload") }}</a></li>
+					<li><a class="sidebar-image-remove">{{ __("Remove") }}</a></li>
+				</ul>
+			</div>
+		</div>
 	</li>
 </ul>
 {% if frm.meta.beta %}

frappe/public/less/sidebar.less

@@ -188,19 +188,31 @@ body[data-route^="Module"] .main-menu {
 			border-radius: 6px;
 		}
 
-		.sidebar-image-wrapper:after {
-		    content: '\A';
-		    position: absolute;
-		    width: 100%; height:100%;
-		    top:0; left:0;
-		    background: #fff;
-		    opacity: 0;
-		    transition: all 0.5s;
-		    -webkit-transition: all 0.6s;
+		.sidebar-image-wrapper {
+			position: relative;
 		}
 
-		.sidebar-image-wrapper:hover:after {
-		    opacity: 0.5;
+		.sidebar-image, .sidebar-standard-image {
+			transition: opacity 0.3s;
+		}
+
+		.sidebar-image-wrapper:hover {
+			.sidebar-image, .sidebar-standard-image {
+				opacity: 0.5;
+			}
+			.sidebar-image-actions {
+				display: block;
+			}
+		}
+
+		.sidebar-image-actions {
+			display: none;
+			position: absolute;
+			top: 50%;
+			right: 0;
+			left: 0;
+			transform: translateY(-50%);
+			text-align: center;
 		}
 
 	}