Form Timeline styling (#3778)

* Left align Indicator and corrected “Add to Knowledge Base” button misalignment.

* Left align Indicator and corrected “Add to Knowledge Base” button misalignment.

* Pushing title changes only, reverted timeline changes.

* Pushing title changes only, reverted timeline changes.

* Timelime tilte design update for small resolution.

* Review changes and added minified date

* Review changes for Timeline for smaller screen.

* Changes for tilte, delete icon change and removed duplicate date.

* Review changes

* Fixed Alignment for action buttons.

* Small resolution alignment changes.

* Class name changes.

* Timelime tilte design update for small resolution.

* Changes for tilte, delete icon change and removed duplicate date.

frappe/public/css/form.css

@@ -287,6 +287,8 @@ h6.uppercase,
   border-radius: 3px;
   margin-left: -7px;
   position: relative;
+  max-width: calc(100% - 50px);
+  padding-right: 0px;
   overflow: visible;
 }
 .timeline-item.user-content .avatar-medium {
@@ -294,6 +296,11 @@ h6.uppercase,
   height: 45px;
   width: 45px;
 }
+.timeline-item.user-content .action-btns {
+  position: absolute;
+  right: 0;
+  padding: 5px 15px 2px 5px;
+}
 .timeline-item.user-content .comment-header {
   background-color: #fafbfc;
   padding: 10px 15px 10px 13px;
@@ -301,12 +308,19 @@ h6.uppercase,
   color: #8D99A6;
   border-bottom: 1px solid #EBEFF2;
 }
+.timeline-item.user-content .comment-header.links-active {
+  padding-right: 60px;
+}
+.timeline-item.user-content .comment-header .commented-on-small {
+  display: none;
+}
 .timeline-item.user-content .comment-header .octicon-heart {
   color: #ff5858;
   cursor: pointer;
 }
 .timeline-item.user-content .reply {
   padding: 15px;
+  overflow: auto;
 }
 .timeline-item.user-content .reply > div > p:first-child {
   margin-top: 0px;
@@ -317,11 +331,13 @@ h6.uppercase,
 .timeline-item.user-content .reply hr {
   margin: 10px 0px;
 }
-.timeline-item.user-content .close-btn-container {
-  padding: 4px 10px 2px 5px;
+.timeline-item.user-content .close-btn-container .close {
+  color: inherit;
+  opacity: 1;
+  padding: 0 0 0 10px;
 }
 .timeline-item.user-content .edit-btn-container {
-  padding: 4px 5px;
+  padding: 0;
 }
 .timeline-item.user-content .edit-btn-container .edit {
   color: inherit;

frappe/public/css/mobile.css

@@ -192,6 +192,9 @@ body {
   }
 }
 @media (max-width: 767px) {
+  .toggle-sidebar {
+    margin-right: 0;
+  }
   body[data-route^="Form"] .page-title .title-text {
     font-size: 16px;
     width: calc(100% - 30px);
@@ -331,4 +334,64 @@ body {
   body[data-route^="Form"] .page-head .sub-heading {
     right: 90px;
   }
+  .timeline::before {
+    content: none;
+  }
+  .timeline .timeline-new-email {
+    margin: 20px 0;
+    padding-left: 15px;
+  }
+  .timeline .timeline-new-email::before {
+    content: none;
+  }
+  .timeline .timeline-item.user-content {
+    margin: 20px 15px;
+  }
+  .timeline .timeline-item.user-content .media-body {
+    margin-left: 0;
+    max-width: 100%;
+    overflow: hidden;
+  }
+  .timeline .timeline-item.user-content .media-body:before {
+    content: none;
+  }
+  .timeline .timeline-item.user-content .action-btns {
+    padding: 5px 10px 2px 5px;
+  }
+  .timeline .timeline-item.user-content .comment-header {
+    padding: 7px 10px;
+  }
+  .timeline .timeline-item.user-content .comment-header .links-active {
+    padding-right: 10px;
+  }
+  .timeline .timeline-item.user-content .avatar-medium {
+    margin-right: 10px;
+  }
+  .timeline .timeline-item.user-content .reply {
+    padding: 10px;
+  }
+  .timeline .timeline-item.user-content .commented-on-small {
+    display: inline-block;
+  }
+  .timeline .timeline-item.user-content .commented-on-small {
+    display: inline-block;
+  }
+  .timeline .timeline-item.notification-content {
+    padding-left: 15px;
+    margin: 20px 0;
+  }
+  .timeline .timeline-item.notification-content::before {
+    content: none;
+  }
+  .timeline .timeline-item.notification-content .small {
+    padding-left: 0;
+  }
+  .timeline .timeline-item .delivery-status-indicator {
+    float: left;
+    margin: 0 5px 0 0;
+  }
+  .timeline .asset-details {
+    line-height: 24px;
+    /*Height of avtar image -36px to align text center vertically*/
+  }
 }

frappe/public/js/frappe/form/footer/timeline.js

@@ -248,14 +248,14 @@ frappe.ui.form.Timeline = Class.extend({
 		c["edit"] = "";
 		if(c.communication_type=="Comment" && (c.comment_type || "Comment") === "Comment") {
 			if(frappe.model.can_delete("Communication")) {
-				c["delete"] = '<a class="close" href="#"><i class="octicon octicon-trashcan"></i></a>';
+				c["delete"] = '<a class="close" title="Delete"  href="#"><i class="octicon octicon-x"></i></a>';
 			}
 
 			if(frappe.user.name == c.sender || (frappe.user.name == 'Administrator')) {
-				c["edit"] = '<a class="edit" href="#"><i class="octicon octicon-pencil"></i></a>';
+				c["edit"] = '<a class="edit" title="Edit" href="#"><i class="octicon octicon-pencil"></i></a>';
 			}
 		}
-
+		c.comment_on_small = comment_when(c.creation, true);
 		c.comment_on = comment_when(c.creation);
 		if(!c.fullname) {
 			c.fullname = c.sender_full_name || frappe.user.full_name(c.sender);
@@ -358,7 +358,8 @@ frappe.ui.form.Timeline = Class.extend({
 				"Unshared": "octicon octicon-circle-slash",
 				"Like": "octicon octicon-heart",
 				"Edit": "octicon octicon-pencil",
-				"Relinked": "octicon octicon-check"
+				"Relinked": "octicon octicon-check",
+				"Reply": "octicon octicon-mail-reply"
 			}[c.comment_type || c.communication_medium]
 
 			c.color = {
@@ -376,7 +377,8 @@ frappe.ui.form.Timeline = Class.extend({
 				"Label": "#2c3e50",
 				"Attachment": "#7f8c8d",
 				"Attachment Removed": "#eee",
-				"Relinked": "#16a085"
+				"Relinked": "#16a085",
+				"Reply": "#8d99a6"
 			}[c.comment_type || c.communication_medium];
 
 			c.icon_fg = {

frappe/public/js/frappe/form/footer/timeline_item.html

@@ -1,6 +1,6 @@
 <div class="media timeline-item {% if (data.user_content) { %} user-content {% } else { %} notification-content {% } %}" data-doctype="{{ data.doctype }}" data-name="{%= data.name %}">
 	{% if (data.user_content) { %}
-	<span class="pull-left avatar avatar-medium" style="margin-top: 1px">
+	<span class="pull-left avatar avatar-medium hidden-xs" style="margin-top: 1px">
 		{% if(data.user_info.image) { %}
 		<div class="avatar-frame" style="background-image: url({%= data.user_info.image %})"></div>
 		{% } else { %}
@@ -10,88 +10,108 @@
 	</span>
 	{% } %}
 
-	<div class="pull-left media-body" style="max-width: calc(100% - 50px); padding-right: 0px;">
+	<div class="pull-left media-body">
 		<div class="media-content-wrapper">
-			<div class="pull-right close-btn-container">
-				<span class="small text-muted">
-					{%= data.delete %}
-				</span>
-			</div>
-			<div class="pull-right edit-btn-container">
-				<span class="small text-muted">
-					{%= data.edit %}
-				</span>
+			<div class="action-btns">
+				{% if(data.delete) { %}
+				<div class="pull-right hidden-xs close-btn-container">
+					<span class="small text-muted">
+						{%= data.delete %}
+					</span>
+				</div>
+				{% } %}
+				{% if(data.edit) { %}
+				<div class="pull-right edit-btn-container">
+					<span class="small text-muted">
+						{%= data.edit %}
+					</span>
+				</div>
+				{% } %}
 			</div>
 			{% if(data.communication_type==="Communication"
 				|| data.communication_type==="Feedback"
 				|| (data.communication_type==="Comment"
 					&& data.comment_type==="Comment")) { %}
-			<div class="comment-header small">
-				<i class="{%= data.icon %} fa-fw"></i>
-				<span title="{%= data.comment_by %}">{%= data.fullname %}</span>
-				<span>
-					{% if (data.timeline_doctype===data.frm.doc.doctype
-						&& data.timeline_name===data.frm.doc.name) { %}
-						&ndash;
-						<a href="#Form/{%= data.reference_doctype %}/{%= data.reference_name %}" class="text-muted">
-							<strong>{{ __(data.reference_doctype) }}</strong>
-								{{ data.reference_name }}
-						</a>
+			<div class="comment-header clearfix small {% if (data.edit || data.delete) { %} links-active {% } %}">
+				<span class="pull-left avatar avatar-small visible-xs">
+					{% if(data.user_info.image) { %}
+					<div class="avatar-frame" style="background-image: url({%= data.user_info.image %})"></div>
+					{% } else { %}
+					<div class="standard-image" style="background-color: {{ data.user_info.color }}">
+						{{ data.user_info.abbr }}</div>
 					{% } %}
 				</span>
-				<span class="text-muted" style="font-weight: normal;">
-					&ndash; {%= data.comment_on %}</span>
-					{% if(in_list(["Communication", "Feedback"], data.communication_type)) { %}
-						{% if (frappe.model.can_read(\'Communication\')) { %}
-						<a href="#Form/{%= data.doctype %}/{%= data.name %}"
-							class="text-muted">
+				<div class="asset-details">
+					<span class="author-wrap">
+						<i class="{%= data.icon %} hidden-xs fa-fw"></i>
+						<span title="{%= data.comment_by %}">{%= data.fullname %}</span>
+					</span>
+					<span>
+						{% if (data.timeline_doctype===data.frm.doc.doctype
+							&& data.timeline_name===data.frm.doc.name) { %}
+							&ndash;
+							<a href="#Form/{%= data.reference_doctype %}/{%= data.reference_name %}" class="text-muted">
+								<strong>{{ __(data.reference_doctype) }}</strong>
+									{{ data.reference_name }}
+							</a>
 						{% } %}
+					</span>
+						{% if(in_list(["Communication", "Feedback"], data.communication_type)) { %}
+							{% if (frappe.model.can_read(\'Communication\')) { %}
+							<a href="#Form/{%= data.doctype %}/{%= data.name %}"
+								class="text-muted">
+							{% } %}
 
-						{% if (data.delivery_status) {
-							if (in_list(["Sent", "Opened", "Clicked"], data.delivery_status)) {
-								var indicator_class = "green";
-							} else if (data.delivery_status === "Sending") {
-								var indicator_class = "orange";
-							} else {
-								var indicator_class = "red";
-							}
-						%}
-						<span class="text-muted">&ndash;</span>
-						<span class="indicator-right {%= indicator_class %}
-							delivery-status-indicator"
-							title="{%= data.delivery_status %}">
-							{%= data.delivery_status %}</span>
+							{% if (data.delivery_status) {
+								if (in_list(["Sent", "Opened", "Clicked"], data.delivery_status)) {
+									var indicator_class = "green";
+								} else if (data.delivery_status === "Sending") {
+									var indicator_class = "orange";
+								} else {
+									var indicator_class = "red";
+								}
+							%}
+							<span class="text-muted hidden-xs">&ndash;</span>
+							<span class="indicator-right {%= indicator_class %}
+								delivery-status-indicator"
+								title="{%= data.delivery_status %}"><span class="hidden-xs">
+								{%= data.delivery_status %}</span></span>
 
-						{% } else { %}
-							{% if (frappe.model.can_read(\'Communication\')) { %}
-							<span class="text-muted">&ndash;</span>
-							{%= __("Details") %}
+							{% } else { %}
+								{% if (frappe.model.can_read(\'Communication\')) { %}
+								<span class="text-muted n-dash">&ndash;</span>
+								{%= __("Details") %}
+								{% } %}
 							{% } %}
-						{% } %}
 
-						{% if (frappe.model.can_read(\'Communication\')) { %}
-						</a>
-						{% } %}
+							{% if (frappe.model.can_read(\'Communication\')) { %}
+							</a>
+							{% } %}
 
-						{% if (data.communication_medium === "Email"
-							&& data.sender !== frappe.session.user_email) { %}
-						<a class="text-muted reply-link pull-right timeline-content-show"
-							data-name="{%= data.name %}">{%= __("Reply") %}</a>
+							{% if (data.communication_medium === "Email"
+								&& data.sender !== frappe.session.user_email) { %}
+							<a class="text-muted reply-link pull-right timeline-content-show"
+								data-name="{%= data.name %}" title="{%= __("Reply") %}"><i class="octicon octicon-mail-reply"></i></a>
+							{% } %}
 						{% } %}
-					{% } %}
-				<span class="comment-likes"
-					data-liked-by=\'{{ JSON.stringify(data._liked_by) }}\'>
-					<i class="octicon octicon-heart like-action
-						{% if (!data.liked_by_user) { %}
-							text-extra-muted not-liked
-						{% } %} fa-fw"
-						data-doctype="{%= data.doctype %}"
-						data-name="{%= data.name %}"></i>
-					<span class="likes-count text-muted">
-						{{ (data._liked_by || []).length }}</span>
-				</span>
+					<span class="text-muted commented-on hidden-xs">
+						&ndash; {%= data.comment_on %}</span>
+					<span class="text-muted commented-on-small">
+						&ndash; {%= data.comment_on_small %}</span>
+					<span class="comment-likes hidden-xs"
+						data-liked-by=\'{{ JSON.stringify(data._liked_by) }}\'>
+						<i class="octicon octicon-heart like-action
+							{% if (!data.liked_by_user) { %}
+								text-extra-muted not-liked
+							{% } %} fa-fw"
+							data-doctype="{%= data.doctype %}"
+							data-name="{%= data.name %}"></i>
+						<span class="likes-count text-muted">
+							{{ (data._liked_by || []).length }}</span>
+					</span>
+				</div>
 			</div>
-			<div class="reply timeline-content-show" style="overflow-x: auto">
+			<div class="reply timeline-content-show">
 				<div class="timeline-item-content">
 					{% if data.show_subject %}
 						<p class="text-muted small">
@@ -143,7 +163,7 @@
 						{% if(data.link_doctype && data.link_name) { %}
 						</a>
 						{% } %}
-						<span class="text-muted" style="font-weight: normal;">
+						<span class="text-muted commented-on" style="font-weight: normal;">
 						&ndash; {%= data.comment_on %}</span>
 				</div>
 			{% } else { %}
@@ -172,7 +192,7 @@
 							</a>
 						{% } %}
 					{% } %}
-					<span class="text-muted" style="font-weight: normal;">
+					<span class="text-muted commented-on" style="font-weight: normal;">
 					&ndash; {%= data.comment_on %}</span>
 				</div>
 			{% } %}

frappe/public/less/form.less

@@ -376,7 +376,8 @@ h6.uppercase, .h6.uppercase {
 		border-radius: 3px;
 		margin-left: -7px;
 		position: relative;
-
+		max-width: calc(~"100% - 50px");
+		padding-right: 0px;
 		// to display the triangle beside the box
 		overflow: visible;
 	}
@@ -387,12 +388,24 @@ h6.uppercase, .h6.uppercase {
 		width: 45px;
 	}
 
+	.action-btns {
+	    position: absolute;
+	    right: 0;
+	    padding: 5px 15px 2px 5px;
+	}
+
 	.comment-header {
 		background-color: @light-bg;
 		padding: 10px 15px 10px 13px;
 		margin: 0px;
 		color: @text-muted;
 		border-bottom: 1px solid @light-border-color;
+		&.links-active {
+			padding-right: 60px;
+		}
+		.commented-on-small {
+			display: none;
+		}
 
 		.octicon-heart {
 			color: @heart-color;
@@ -402,6 +415,7 @@ h6.uppercase, .h6.uppercase {
 
 	.reply {
 		padding: 15px;
+		overflow: auto;
 
 		& > div > p:first-child {
 			margin-top: 0px;
@@ -417,11 +431,15 @@ h6.uppercase, .h6.uppercase {
 	}
 
 	.close-btn-container {
-		padding: 4px 10px 2px 5px;
+		.close {
+			color: inherit;
+			opacity: 1;
+			padding: 0 0 0 10px;
+		}
 	}
 
 	.edit-btn-container {
-		padding: 4px 5px;
+		padding: 0;
 
 		.edit {
 			color: inherit;

frappe/public/less/mobile.less

@@ -223,6 +223,9 @@ body {
 }
 
 @media(max-width: 767px) {
+	.toggle-sidebar {
+		margin-right: 0;
+	}
 	body[data-route^="Form"]{
 		.page-title {
 			.title-text {
@@ -406,4 +409,67 @@ body {
 			right: 90px;
 		}
 	}
+	.timeline {
+		&::before {
+			content: none;
+		}
+		.timeline-new-email {
+			margin: 20px 0;
+			padding-left: 15px;
+			&::before {
+				content: none;
+			}
+		}
+		.timeline-item {
+			&.user-content {
+				margin: 20px 15px;
+				.media-body {
+					margin-left: 0;
+					max-width: 100%;
+					overflow: hidden;
+					&:before {
+						content: none;
+					}
+				}
+				.action-btns {
+					padding: 5px 10px 2px 5px;
+				}
+				.comment-header{
+					padding: 7px 10px;
+					.links-active {
+						padding-right: 10px;
+					}
+				}
+				.avatar-medium {
+				    margin-right: 10px;
+				}
+				.reply {
+					padding: 10px;
+				}	
+				.commented-on-small{
+					display: inline-block;
+				}
+				.commented-on-small{
+					display: inline-block;
+				}
+			}
+			&.notification-content {
+				padding-left: 15px;
+				margin: 20px 0;
+				&::before {
+					content: none;
+				}
+				.small {
+				    padding-left: 0;
+				}
+			}
+			.delivery-status-indicator {
+				float: left;
+				margin: 0 5px 0 0;
+			}
+		}
+		.asset-details {
+			line-height: 24px; /*Height of avtar image -36px to align text center vertically*/
+		}
+	}
 }