Merge pull request #22659 from barredterra/like-in-list

feat(listview): move likes to the right

frappe/public/js/frappe/list/list_view.js

@@ -631,9 +631,6 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
 		let subject_html = `
 			<input class="level-item list-check-all" type="checkbox"
 				title="${__("Select All")}">
-			<span class="level-item list-liked-by-me hidden-xs">
-				<span title="${__("Likes")}">${frappe.utils.icon("es-solid-heart", "sm", "like-icon")}</span>
-			</span>
 			<span class="level-item" data-sort-by="${subject_field.fieldname}"
 				title="${__("Click to sort by {0}", [subject_field.label])}">
 				${__(subject_field.label)}
@@ -667,7 +664,16 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
 			})
 			.join("");
 
-		return this.get_header_html_skeleton($columns, '<span class="list-count"></span>');
+		const right_html = `
+			<span class="list-count"></span>
+			<span class="level-item list-liked-by-me hidden-xs">
+				<span title="${__("Liked by me")}">
+					${frappe.utils.icon("es-solid-heart", "sm", "like-icon")}
+				</span>
+			</span>
+		`;
+
+		return this.get_header_html_skeleton($columns, right_html);
 	}
 
 	get_header_html_skeleton(left = "", right = "") {
@@ -895,21 +901,18 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
 
 		const modified = comment_when(doc.modified, true);
 
-		let assigned_to = `<div class="list-assignments">
-			<span class="avatar avatar-small">
-			<span class="avatar-empty"></span>
-		</div>`;
+		let assigned_to = ``;
 
 		let assigned_users = JSON.parse(doc._assign || "[]");
 		if (assigned_users.length) {
-			assigned_to = `<div class="list-assignments">
+			assigned_to = `<div class="list-assignments d-flex align-items-center">
 					${frappe.avatar_group(assigned_users, 3, { filterable: true })[0].outerHTML}
 				</div>`;
 		}
 
 		let comment_count = null;
 		if (this.list_view_settings && !this.list_view_settings.disable_comment_count) {
-			comment_count = $(`<span class="comment-count"></span>`);
+			comment_count = $(`<span class="comment-count d-flex align-items-center"></span>`);
 			$(comment_count).append(`
 				${frappe.utils.icon("es-line-chat-alt")}
 				${doc._comment_count > 99 ? "99+" : doc._comment_count || 0}`);
@@ -920,8 +923,12 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
 				<div class="hidden-md hidden-xs">
 					${settings_button || assigned_to}
 				</div>
-				${modified}
+				<span class="modified">${modified}</span>
 				${comment_count ? $(comment_count).prop("outerHTML") : ""}
+				${comment_count ? '<span class="mx-2">·</span>' : ""}
+				<span class="list-row-like hidden-xs style="margin-bottom: 1px;">
+					${this.get_like_html(doc)}
+				</span>
 			</div>
 			<div class="level-item visible-xs text-right">
 				${this.get_indicator_dot(doc)}
@@ -1012,9 +1019,6 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
 		div.innerHTML = `
 			<span class="level-item select-like">
 				<input class="list-row-checkbox" type="checkbox">
-				<span class="list-row-like hidden-xs style="margin-bottom: 1px;">
-					${this.get_like_html(doc)}
-				</span>
 			</span>
 			<span class="level-item ${seen} ellipsis">
 				<a class="ellipsis"></a>

frappe/public/scss/desk/avatar.scss

@@ -95,11 +95,6 @@
 	.standard-image {
 		font-size: var(--text-xs);
 	}
-
-	.avatar-empty::after {
-		content: "\002D";
-		line-height: 28px;
-	}
 }
 
 .avatar-medium {

frappe/public/scss/desk/list.scss

@@ -94,6 +94,7 @@
 	.level-right {
 		flex: 1;
 		overflow: visible;
+		align-items: center;
 	}
 
 	.tag-col {
@@ -118,10 +119,10 @@
 
 		&> span {
 			display: inline-block;
+		}
 
-			&:not(:last-child) {
-				margin-right: 15px;
-			}
+		.modified {
+			margin-right: var(--margin-sm);
 		}
 
 		.comment-count {
@@ -131,7 +132,6 @@
 		.frappe-timestamp {
 			font-size: var(--text-xs);
 			white-space: nowrap;
-			min-width: 30px;
 		}
 
 		.list-assignments, .list-actions {
@@ -195,10 +195,6 @@ $level-margin-right: 8px;
 		color: var(--text-color);
 	}
 
-	.level-item:not(.file-select) {
-		margin-right: $level-margin-right;
-	}
-
 	&.seen {
 		font-weight: normal;
 	}