From befe62a10198aa6b2a3b70ccb71cfbbdf4234376 Mon Sep 17 00:00:00 2001
From: Anand Doshi <anand@erpnext.com>
Date: Mon, 9 Feb 2015 18:19:32 +0530
Subject: [PATCH] Shared With in sidebar, better mobile view #996

---
 frappe/public/css/sidebar.css                 | 28 +++++++++++++--
 .../public/js/frappe/form/form_sidebar.html   |  7 ++--
 frappe/public/js/frappe/form/share.js         | 19 ++++++++++-
 frappe/public/js/frappe/form/toolbar.js       |  6 ----
 frappe/public/less/sidebar.less               | 34 +++++++++++++++++--
 5 files changed, 79 insertions(+), 15 deletions(-)

diff --git a/frappe/public/css/sidebar.css b/frappe/public/css/sidebar.css
index 6947997c85..bc144f20d3 100644
--- a/frappe/public/css/sidebar.css
+++ b/frappe/public/css/sidebar.css
@@ -108,22 +108,44 @@ body[data-route^="Module"] .main-menu .form-sidebar {
 .form-sidebar .attachment-row a.close {
   margin-top: -5px;
 }
+.form-sidebar .form-shared .share-doc-btn {
+  cursor: pointer;
+}
+.form-sidebar .form-shared .octicon-plus {
+  position: relative;
+  top: 2px;
+  left: 7px;
+}
+.form-sidebar .form-shared .share-doc-btn:hover,
+.form-sidebar .form-shared .share-doc-btn:focus,
+.form-sidebar .form-shared .share-doc-btn:active {
+  background-color: #f0f4f7;
+}
+.form-sidebar .form-shared .share-doc-btn:hover .octicon-plus,
+.form-sidebar .form-shared .share-doc-btn:focus .octicon-plus,
+.form-sidebar .form-shared .share-doc-btn:active .octicon-plus {
+  color: #36414c !important;
+}
 .sidebar-left .form-sidebar .form-tags,
 .sidebar-left .form-sidebar .assignment-row,
+.sidebar-left .form-sidebar .form-shared,
 .sidebar-left .form-sidebar .modified-by,
 .sidebar-left .form-sidebar .created-by,
-.sidebar-left .form-sidebar .tags-label {
+.sidebar-left .form-sidebar .tags-label,
+.sidebar-left .form-sidebar .shared-with-label {
   padding: 12px 14px;
 }
 .sidebar-left .form-sidebar .assigned-to-label,
 .sidebar-left .form-sidebar .attachments-label,
-.sidebar-left .form-sidebar .tags-label {
+.sidebar-left .form-sidebar .tags-label,
+.sidebar-left .form-sidebar .shared-with-label {
   padding: 12px 14px;
   margin-bottom: 0px;
 }
 .sidebar-left .form-sidebar .assigned-to-label,
 .sidebar-left .form-sidebar .tags-label,
-.sidebar-left .form-sidebar .attachments-label.has-attachments {
+.sidebar-left .form-sidebar .attachments-label.has-attachments,
+.sidebar-left .form-sidebar .shared-with-label {
   padding-bottom: 0px;
 }
 .sidebar-left .form-sidebar a.close {
diff --git a/frappe/public/js/frappe/form/form_sidebar.html b/frappe/public/js/frappe/form/form_sidebar.html
index 0c815984b3..9f45716c1e 100644
--- a/frappe/public/js/frappe/form/form_sidebar.html
+++ b/frappe/public/js/frappe/form/form_sidebar.html
@@ -31,9 +31,12 @@
 		<div class="clearfix"></div>
 	</li>
 </ul>
-<ul class="list-unstyled sidebar-menu text-muted">
+<ul class="list-unstyled sidebar-menu">
 	<li class="divider"></li>
-    <li class="form-shared"></li>
+	<li class="h6 shared-with-label">{%= __("Shared With") %}</li>
+	<li class="form-shared"></li>
+</ul>
+<ul class="list-unstyled sidebar-menu text-muted">
 	<li class="modified-by"></li>
 	<li class="created-by"></li>
 </ul>
diff --git a/frappe/public/js/frappe/form/share.js b/frappe/public/js/frappe/form/share.js
index 60db455b86..afa7d948b0 100644
--- a/frappe/public/js/frappe/form/share.js
+++ b/frappe/public/js/frappe/form/share.js
@@ -8,8 +8,16 @@ frappe.ui.form.Share = Class.extend({
 		$.extend(this, opts);
 	},
 	refresh: function() {
+		var me = this;
 		this.parent.empty();
-		var shared = this.frm.get_docinfo().shared;
+		if (this.shared) {
+			var shared = $.map(this.shared, function(s) {
+				return s ? s.user : null;
+			});
+		} else {
+			var shared = this.frm.get_docinfo().shared;
+		}
+
 		for(var i=0; i<shared.length; i++) {
 			var user_info = frappe.user_info(shared[i])
 			$(repl('<span class="avatar avatar-small" title="'
@@ -17,6 +25,13 @@ frappe.ui.form.Share = Class.extend({
 				<img class="media-object" src="%(image)s"></span>',
 				{image: user_info.image})).appendTo(this.parent);
 		}
+		// share
+		if(!me.frm.doc.__islocal) {
+			$(repl('<span><a class="avatar avatar-small avatar-empty share-doc-btn" title="%(title)s">\
+				<i class="octicon octicon-plus text-muted"></i></a></span>', {title: __("Share")}))
+				.appendTo(this.parent)
+				.on("click", function() { me.frm.share_doc(); });
+		}
 	},
 	show: function() {
 		var me = this;
@@ -110,6 +125,7 @@ frappe.ui.form.Share = Class.extend({
 					me.dirty = true;
 					me.shared.push(r.message);
 					me.render_shared();
+					me.frm.shared.refresh();
 				}
 			});
 		});
@@ -144,6 +160,7 @@ frappe.ui.form.Share = Class.extend({
 					});
 					me.dirty = true;
 					me.render_shared();
+					me.frm.shared.refresh();
 				}
 			});
 		});
diff --git a/frappe/public/js/frappe/form/toolbar.js b/frappe/public/js/frappe/form/toolbar.js
index 2fffbf426c..7212d8f1e1 100644
--- a/frappe/public/js/frappe/form/toolbar.js
+++ b/frappe/public/js/frappe/form/toolbar.js
@@ -70,12 +70,6 @@ frappe.ui.form.Toolbar = Class.extend({
 				me.frm.email_doc();}, true);
 		}
 
-		// email
-		if(!me.frm.doc.__islocal) {
-			this.page.add_menu_item(__("Share"), function() {
-				me.frm.share_doc();}, true);
-		}
-
 		// Linked With
 		if(!me.frm.doc.__islocal && !me.frm.meta.issingle) {
 			this.page.add_menu_item(__('Links'), function() {
diff --git a/frappe/public/less/sidebar.less b/frappe/public/less/sidebar.less
index 22e5f0b76c..b727bfba60 100644
--- a/frappe/public/less/sidebar.less
+++ b/frappe/public/less/sidebar.less
@@ -146,27 +146,55 @@ body[data-route^="Module"] .main-menu {
 	.attachment-row a.close {
 		margin-top: -5px;
 	}
+
+	.form-shared {
+		.share-doc-btn {
+			cursor: pointer;
+		}
+
+		.octicon-plus {
+			position: relative;
+			top: 2px;
+			left: 7px;
+		}
+	}
+}
+
+.form-sidebar .form-shared .share-doc-btn& {
+	&:hover,
+	&:focus,
+	&:active {
+		background-color: @btn-bg;
+
+		.octicon-plus {
+			color: @text-color !important;
+		}
+	}
 }
 
 .sidebar-left .form-sidebar {
 	.form-tags,
 	.assignment-row,
+	.form-shared,
 	.modified-by,
 	.created-by,
-	.tags-label {
+	.tags-label,
+	.shared-with-label {
 		.sidebar-padding;
 	}
 
 	.assigned-to-label,
 	.attachments-label,
-	.tags-label {
+	.tags-label,
+	.shared-with-label {
 		.sidebar-padding;
 		margin-bottom: 0px;
 	}
 
 	.assigned-to-label,
 	.tags-label,
-	.attachments-label.has-attachments {
+	.attachments-label.has-attachments,
+	.shared-with-label {
 		padding-bottom: 0px;
 	}