refactor: Update timeline badge size and color

- And fix share logs in timeline

frappe/desk/form/load.py

@@ -98,6 +98,7 @@ def get_docinfo(doc=None, doctype=None, name=None):
 		"assignments": get_assignments(doc.doctype, doc.name),
 		"permissions": get_doc_permissions(doc),
 		"shared": frappe.share.get_users(doc.doctype, doc.name),
+		"share_logs": get_comments(doc.doctype, doc.name, 'share'),
 		"views": get_view_logs(doc.doctype, doc.name),
 		"energy_point_logs": get_point_logs(doc.doctype, doc.name),
 		"additional_timeline_content": get_additional_timeline_content(doc.doctype, doc.name),
@@ -128,16 +129,21 @@ def get_communications(doctype, name, start=0, limit=20):
 	return _get_communications(doctype, name, start, limit)
 
 
-def get_comments(doctype, name):
-	comments = frappe.get_all('Comment', fields = ['*'], filters = dict(
+def get_comments(doctype, name, comment_type='Comment'):
+	comment_types = [comment_type]
+
+	if comment_type == 'share':
+		comment_types = ['Shared', 'Unshared']
+
+	comments = frappe.get_all('Comment', fields = ['creation', 'content', 'owner'], filters=dict(
 		reference_doctype = doctype,
 		reference_name = name,
-		comment_type = 'Comment'
+		comment_type = ['in', comment_types]
 	))
 
 	# convert to markdown (legacy ?)
-	for c in comments:
-		if c.comment_type == 'Comment':
+	if comment_type == 'Comment':
+		for c in comments:
 			c.content = frappe.utils.markdown(c.content)
 
 	return comments

frappe/public/js/frappe/form/footer/new_timeline.js

@@ -12,7 +12,11 @@ frappe.ui.form.NewTimeline = class {
 	make() {
 		this.timeline_wrapper = $(`<div class="new-timeline">`);
 		this.timeline_items_wrapper = $(`<div class="timeline-items">`);
-		this.timeline_actions_wrapper = $(`<div class="timeline-actions">`);
+		this.timeline_actions_wrapper = $(`
+			<div class="timeline-actions">
+				<div class="timeline-dot"></div>
+			</div>
+		`);
 
 		this.timeline_wrapper.append(this.timeline_actions_wrapper);
 		this.timeline_wrapper.append(this.timeline_items_wrapper);
@@ -52,23 +56,12 @@ frappe.ui.form.NewTimeline = class {
 		this.timeline_items.push(...this.get_communication_timeline_contents());
 		this.timeline_items.push(...this.get_comment_timeline_contents());
 		this.timeline_items.push(...this.get_energy_point_timeline_contents());
-		this.timeline_items.push(...this.get_share_timeline_contents());
 		this.timeline_items.push(...this.get_version_timeline_contents());
-		this.timeline_items.push(...this.get_creation_timeline_content());
+		this.timeline_items.push(...this.get_share_timeline_contents());
 		// attachments
 		// milestones
 	}
 
-	get_creation_timeline_content() {
-		if (this.frm && this.frm.doc) {
-			return [{
-				icon: 'edit',
-				creation: this.frm.doc.creation,
-				content: __("{0} created", [this.get_user_link(this.frm.doc.owner)]),
-			}];
-		}
-	}
-
 	get_user_link(user) {
 		const user_display_text = (frappe.user_info(user).fullname || '').bold();
 		return frappe.utils.get_form_link('User', user, true, user_display_text);
@@ -91,12 +84,14 @@ frappe.ui.form.NewTimeline = class {
 			`);
 		} else if (item.timeline_indicator) {
 			timeline_item.append(item.timeline_indicator);
+		} else {
+			timeline_item.append(`<div class="timeline-dot">`);
 		}
 
 		timeline_item.append(`<div class="timeline-content ${item.card ? 'frappe-card' : ''}">`);
 		timeline_item.find('.timeline-content').append(item.content);
 		if (!item.hide_timestamp && !item.card) {
-			timeline_item.find('.timeline-content').append(`&nbsp;-&nbsp;<span>${comment_when(item.creation)}</span>`);
+			timeline_item.find('.timeline-content').append(`<div>${comment_when(item.creation)}</div>`);
 		}
 		return timeline_item;
 	}
@@ -112,7 +107,6 @@ frappe.ui.form.NewTimeline = class {
 				</div>
 			`;
 			view_timeline_contents.push({
-				icon: 'view',
 				creation: view.creation,
 				content: view_content,
 			});
@@ -153,7 +147,10 @@ frappe.ui.form.NewTimeline = class {
 	}
 
 	get_comment_timeline_content(doc) {
-		const comment_content = frappe.render_template('timeline_message_box', { doc });
+		const comment_content = $(frappe.render_template('timeline_message_box', { doc }));
+
+		comment_content.find('.actions').append(`<a class="action-btn text-muted">${__("Edit")}</a>`);
+		comment_content.find('.actions').append(`<span class="action-btn">${frappe.utils.icon('close', 'sm')}</span>`);
 		return comment_content;
 	}
 
@@ -163,7 +160,6 @@ frappe.ui.form.NewTimeline = class {
 			const contents = get_version_timeline_content(version, this.frm);
 			contents.forEach((content) => {
 				version_timeline_contents.push({
-					icon: 'edit',
 					creation: version.creation,
 					content: content,
 				});
@@ -174,14 +170,10 @@ frappe.ui.form.NewTimeline = class {
 
 	get_share_timeline_contents() {
 		let share_timeline_contents = [];
-		(this.doc_info.shared || []).forEach(share => {
+		(this.doc_info.share_logs || []).forEach(share => {
 			share_timeline_contents.push({
-				icon: 'share',
 				creation: share.creation,
-				content: __("{0} shared this document with {1}", [
-					this.get_user_link(share.owner),
-					share.everyone ? 'everyone' : this.get_user_link(share.user)
-				]),
+				content: share.content,
 			});
 		});
 		return share_timeline_contents;

frappe/public/js/frappe/form/footer/version_timeline_content_builder.js

@@ -130,8 +130,8 @@ function get_version_timeline_content(version_doc, frm) {
 		}
 	});
 
-	// creation by updater reference
 	if (data.creation && data.created_by) {
+		// created via automation
 		if (updater_reference_link) {
 			out.push(get_version_comment(version_doc, __('{0} created {1}', [get_user_link(version_doc), updater_reference_link])));
 		} else {

frappe/public/scss/global.scss

@@ -361,4 +361,8 @@ kbd {
 .criticism {
 	background-color: var(--criticism-bg) !important;
 	color: var(--criticism-color) !important;
+}
+
+.frappe-timestamp {
+	cursor: default;
 }

frappe/public/scss/timeline.scss

@@ -1,6 +1,6 @@
 $timeline-item-icon-size: 34px;
 $timeline-item-left-margin: var(--margin-xl);
-$threshold: 25;
+$threshold: 40;
 
 @mixin timeline-indicator($indicator-size) {
 	width: $indicator-size;
@@ -11,11 +11,12 @@ $threshold: 25;
 	// please do not touch this sacred code
 	top: unquote("clamp(0px, 50% - #{$indicator-size}/2, max(0px, (#{$threshold}px - (50% - #{$indicator-size}/2)) * #{$threshold}))");
 	left: calc(-1 * (#{$indicator-size}/2));
-	background-color: var(--gray-600);
+	background-color: var(--bg-color);
+	border: 1px solid var(--dark-border-color);
 	display: inline-flex;
 	align-items: center;
 	justify-content: center;
-	--icon-stroke: var(--gray-50);
+	--icon-stroke: var(--gray-600);
 }
 
 .new-timeline {
@@ -29,18 +30,24 @@ $threshold: 25;
 		border-left: 1px solid var(--dark-border-color);
 		bottom: -150px; // arbitrary
 	}
+	.timeline-dot {
+		@include timeline-indicator(16px);
+		&:before {
+			content: ' ';
+			background: var(--gray-600);
+			border-radius: 50%;
+			height: 4px;
+			width: 4px;
+		}
+	}
 	.timeline-actions {
 		margin-bottom: var(--margin-md);
 		padding: var(--padding-sm);
 		position: relative;
-		&:before {
-			content: ' ';
-			@include timeline-indicator(10px);
-		}
 		.action-btn {
 			margin-left: var(--margin-md)
 		}
-		.action-btn:first-child {
+		.action-btn:first-of-type {
 			margin-left: $timeline-item-left-margin;
 		}
 	}