Change icons in timeline to Text-All-Format #10273 (#3859)

* Change icons in timeline to Text-All-Format #10273

* Changes for delete icon and alignment fixes.

frappe/public/css/form.css

@@ -299,17 +299,32 @@ h6.uppercase,
 .timeline-item.user-content .action-btns {
   position: absolute;
   right: 0;
-  padding: 5px 15px 2px 5px;
+  padding: 8px 15px 0 5px;
+}
+.timeline-item.user-content .action-btns .edit-btn-container {
+  margin-right: 13px;
 }
 .timeline-item.user-content .comment-header {
   background-color: #fafbfc;
-  padding: 10px 15px 10px 13px;
+  padding: 10px 15px 8px 13px;
   margin: 0px;
   color: #8D99A6;
   border-bottom: 1px solid #EBEFF2;
 }
 .timeline-item.user-content .comment-header.links-active {
-  padding-right: 60px;
+  padding-right: 77px;
+}
+.timeline-item.user-content .comment-header .asset-details {
+  display: inline-block;
+  width: 100%;
+}
+.timeline-item.user-content .comment-header .asset-details .btn-link {
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+}
+.timeline-item.user-content .comment-header .asset-details .btn-link:hover {
+  text-decoration: none;
 }
 .timeline-item.user-content .comment-header .commented-on-small {
   display: none;
@@ -334,7 +349,8 @@ h6.uppercase,
 .timeline-item.user-content .close-btn-container .close {
   color: inherit;
   opacity: 1;
-  padding: 0 0 0 10px;
+  padding: 0;
+  font-size: 18px;
 }
 .timeline-item.user-content .edit-btn-container {
   padding: 0;
@@ -409,7 +425,8 @@ h6.uppercase,
   top: 5px;
 }
 .timeline-item .reply-link {
-  padding-left: 7px;
+  margin-left: 15px;
+  font-size: 12px;
 }
 .timeline-head {
   background-color: white;

frappe/public/css/mobile.css

@@ -359,7 +359,10 @@ body {
     content: none;
   }
   .timeline .timeline-item.user-content .action-btns {
-    padding: 5px 10px 2px 5px;
+    padding: 7px 10px 2px 5px;
+  }
+  .timeline .timeline-item.user-content .action-btns .edit-btn-container {
+    margin-right: 0;
   }
   .timeline .timeline-item.user-content .comment-header {
     padding: 7px 10px;
@@ -367,6 +370,12 @@ body {
   .timeline .timeline-item.user-content .comment-header .links-active {
     padding-right: 10px;
   }
+  .timeline .timeline-item.user-content .comment-header .reply-link {
+    margin-left: 0;
+  }
+  .timeline .timeline-item.user-content .comment-header .asset-details {
+    width: calc(100% - 30px);
+  }
   .timeline .timeline-item.user-content .avatar-medium {
     margin-right: 10px;
   }

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

@@ -159,12 +159,12 @@ frappe.ui.form.Timeline = Class.extend({
 		this.prepare_timeline_item(c);
 		var $timeline_item = $(frappe.render_template("timeline_item", {data:c, frm:this.frm}))
 			.appendTo(me.list)
-			.on("click", ".close", function() {
+			.on("click", ".delete-comment", function() {
 				var name = $timeline_item.data('name');
 				me.delete_comment(name);
 				return false;
 			})
-			.on('click', '.edit', function(e) {
+			.on('click', '.edit-comment', function(e) {
 				e.preventDefault();
 				var name = $timeline_item.data('name');
 
@@ -176,6 +176,7 @@ frappe.ui.form.Timeline = Class.extend({
 					var content = $timeline_item.find('.timeline-item-content').html();
 
 					$edit_btn
+						.text("Save")
 						.find('i')
 						.removeClass('octicon-pencil')
 						.addClass('octicon-check');
@@ -251,11 +252,11 @@ 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" title="Delete"  href="#"><i class="octicon octicon-x"></i></a>';
+				c["delete"] = '<a class="close delete-comment" 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" title="Edit" href="#"><i class="octicon octicon-pencil"></i></a>';
+				c["edit"] = '<a class="edit-comment text-muted" title="Edit" href="#">Edit</a>';
 			}
 		}
 		c.comment_on_small = comment_when(c.creation, true);

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

@@ -91,7 +91,7 @@
 							{% 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>
+								data-name="{%= data.name %}" title="{%= __("Reply") %}">{%= __("Reply") %}</a>
 							{% } %}
 						{% } %}
 					<span class="text-muted commented-on hidden-xs">

frappe/public/less/form.less

@@ -391,17 +391,32 @@ h6.uppercase, .h6.uppercase {
 	.action-btns {
 	    position: absolute;
 	    right: 0;
-	    padding: 5px 15px 2px 5px;
+		padding: 8px 15px 0 5px;
+		.edit-btn-container {
+			margin-right: 13px;
+		}
 	}
 
 	.comment-header {
 		background-color: @light-bg;
-		padding: 10px 15px 10px 13px;
+		padding: 10px 15px 8px 13px;
 		margin: 0px;
 		color: @text-muted;
 		border-bottom: 1px solid @light-border-color;
 		&.links-active {
-			padding-right: 60px;
+			padding-right: 77px;
+		}
+		.asset-details {
+			display: inline-block;
+			width: 100%;
+			.btn-link {
+				border: 0;
+				border-radius: 0;
+				padding: 0;
+				&:hover {
+					text-decoration: none;
+				}
+			}
 		}
 		.commented-on-small {
 			display: none;
@@ -434,7 +449,8 @@ h6.uppercase, .h6.uppercase {
 		.close {
 			color: inherit;
 			opacity: 1;
-			padding: 0 0 0 10px;
+			padding: 0;
+			font-size: 18px;
 		}
 	}
 
@@ -530,7 +546,8 @@ h6.uppercase, .h6.uppercase {
 }
 
 .timeline-item .reply-link {
-	padding-left: 7px;
+	margin-left: 15px;
+	font-size: 12px;
 }
 
 .timeline-head {

frappe/public/less/mobile.less

@@ -435,13 +435,22 @@ body {
 					}
 				}
 				.action-btns {
-					padding: 5px 10px 2px 5px;
+					padding: 7px 10px 2px 5px;
+					.edit-btn-container {
+						margin-right: 0;
+					}
 				}
 				.comment-header{
 					padding: 7px 10px;
 					.links-active {
 						padding-right: 10px;
 					}
+					.reply-link {
+						margin-left: 0;
+					}
+					.asset-details {
+						width: calc(~"100% - 30px")
+					}
 				}
 				.avatar-medium {
 				    margin-right: 10px;