[design] Activity

frappe/desk/page/activity/activity.css

@@ -3,26 +3,42 @@
 	margin-right: 7px;
 }
 
-#page-activity .label-info {
+#page-activity .list-row {
+	border: none;
+	padding: 0px;
 	cursor: pointer;
 }
 
-#page-activity .user-info {
-	float: right;
-	color: #777;
-	font-size: 10px;
-	margin-top: 6px;
+.activity-label {
+	max-width: 100px;
+	margin-bottom: -4px;
 }
 
-#page-activity .date-sep {
-	margin: 0px -15px 5px -15px;
-	padding: 5px 0px;
-	border-bottom: 2px solid #aaa;
-	color: #555;
-	font-size: 10px;
+.date-indicator {
+    background:none;
+    font-size:12px;
+    vertical-align:middle;
+    font-weight:bold;
+    color:#6c7680;
+}
+.date-indicator::after {
+    margin:0 -4px 0 12px;
+    content:'';
+    display:inline-block;
+    height:8px;
+    width:8px;
+    border-radius:8px;
+	background: #5e64ff;
 }
 
-#page-activity .list-row {
-	padding-top: 3px;
-	padding-bottom: 3px;
+.activity-message {
+	border-left: 1px solid #d1d8dd;
+	padding: 15px;
+	padding-right: 30px;
+}
+
+.activity-date {
+	padding: 15px;
+	padding-right: 0px;
+	z-index: 1;
 }

frappe/desk/page/activity/activity.js

@@ -20,6 +20,14 @@ frappe.pages['activity'].onload = function(wrapper) {
 	});
 	list.run();
 
+	this.page.main.on("click", ".activity-message", function() {
+		var doctype = $(this).attr("data-doctype"),
+			docname = $(this).attr("data-docname");
+		if (doctype && docname) {
+			frappe.set_route(["Form", doctype, docname]);
+		}
+	});
+
 	wrapper.page.set_primary_action(__("Refresh"), function() { list.run(); });
 
 	// Build Report Button
@@ -38,14 +46,7 @@ frappe.ActivityFeed = Class.extend({
 		if(!data.add_class)
 			data.add_class = "label-default";
 
-		$(row).append(repl('<div style="margin: 0px">\
-			<span class="avatar avatar-small">\
-				<img src="%(imgsrc)s" /></span> \
-			<i class="icon-fixed-width %(icon)s" style="margin-right: 5px;"></i>\
-			<a %(onclick)s class="label %(add_class)s">\
-				%(feed_type)s</a>\
-			<span class="small">%(subject)s</span>\
-			<span class="user-info">%(by)s / %(when)s</span></div>', data));
+		$(row).append(frappe.render_template("activity_row", data));
 	},
 	scrub_data: function(data) {
 		data.by = frappe.user_info(data.owner).fullname;
@@ -54,10 +55,11 @@ frappe.ActivityFeed = Class.extend({
 		data.icon = "icon-flag";
 		if(data.doc_type) {
 			data.feed_type = data.doc_type;
-			data.onclick = repl('href="#Form/%(doc_type)s/%(doc_name)s"', data);
 			data.icon = frappe.boot.doctype_icons[data.doc_type];
 		}
 
+		data.feed_type = data.feed_type || "Comment";
+
 		// color for comment
 		data.add_class = {
 			"Comment": "label-danger",
@@ -81,7 +83,11 @@ frappe.ActivityFeed = Class.extend({
 			} else {
 				pdate = dateutil.global_date_format(date);
 			}
-			$(row).html(repl('<div class="date-sep" style="padding-left: 15px;">%(date)s</div>', {date: pdate}));
+			data.date_sep = pdate;
+			data.date_class = "date-indicator";
+		} else {
+			data.date_sep = null;
+			data.date_class = "";
 		}
 		frappe.last_feed_date = date;
 	}

frappe/desk/page/activity/activity_row.html

@@ -0,0 +1,12 @@
+<div class="row activity-row">
+	<div class="col-xs-3 text-right activity-date"><span class="{%= date_class %}">
+		{%= date_sep || "" %}</span></div>
+	<div class="col-xs-9 activity-message" data-doctype="{%= doc_type %}" data-docname="{%= doc_name %}"
+		title="{%= by %} / {%= dateutil.obj_to_user(creation) %}">
+		<span class="avatar avatar-small">
+			<img src="{%= imgsrc %}">
+		</span>
+		<span class="label {%= add_class %} activity-label text-ellipsis">{%= feed_type %}</span>
+		<span class="small">{%= subject %}</span>
+	</div>
+</div>

frappe/public/js/frappe/misc/datetime.js

@@ -17,7 +17,7 @@ $.extend(frappe.datetime, {
 	},
 
 	obj_to_user: function(d) {
-		return moment(d).format(dateutil.get_user_fmt().toUpperCase());
+		return frappe.datetime.str_to_user(moment(d).format("YYYY-MM-DD HH:mm:ss"));
 	},
 
 	get_diff: function(d1, d2) {