Add a span showing the number of selected entries (#2286)

* Add a span showing the number of selected entries

* Make the item status string translatable

* Indentation fix

frappe/public/js/frappe/list/doclistview.js

@@ -781,13 +781,19 @@ frappe.views.DocListView = frappe.ui.Listing.extend({
 
 	toggle_delete: function() {
 		var me = this;
-		if (this.$page.find(".list-delete:checked").length) {
+		var no_of_checked_items = this.$page.find(".list-delete:checked").length;
+		if (no_of_checked_items) {
 			this.page.set_primary_action(__("Delete"), function() { me.delete_items() },
 				"octicon octicon-trashcan");
 			this.page.btn_primary.addClass("btn-danger");
+			this.page.checked_items_status.text(no_of_checked_items == 1 
+    				? __("1 item selected") 
+    				: __("{0} items selected", [no_of_checked_items]))
+			this.page.checked_items_status.removeClass("hide");
 		} else {
 			this.page.btn_primary.removeClass("btn-danger");
 			this.set_primary_action();
+			this.page.checked_items_status.addClass("hide");
 		}
 	},
 

frappe/public/js/frappe/ui/page.html

@@ -12,6 +12,7 @@
 			</div>
 			<div class="text-right col-md-5 col-sm-4 col-xs-6 page-actions">
 				<!-- ID and icon buttons -->
+				<span class="checked-items-status text-ellipsis text-muted small hide hidden-xs hidden-sm" style="margin-right: 20px;">## items selected</span>
 				<h6 class="text-ellipsis sub-heading hide text-muted"></h6>
 				<span class="page-icon-group hide hidden-xs hidden-sm"></span>
 

frappe/public/js/frappe/ui/page.js

@@ -80,6 +80,7 @@ frappe.ui.Page = Class.extend({
 
 		this.page_actions = this.wrapper.find(".page-actions");
 
+		this.checked_items_status = this.page_actions.find(".checked-items-status");
 		this.btn_primary = this.page_actions.find(".primary-action");
 		this.btn_secondary = this.page_actions.find(".btn-secondary");