feat: Init new timeline [WIP]

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

@@ -0,0 +1,108 @@
+// Copyright (c) 2020, Frappe Technologies Pvt. Ltd. and Contributors
+// MIT License. See license.txt
+
+frappe.ui.form.NewTimeline = class {
+	constructor(opts) {
+		Object.assign(this, opts);
+		this.make();
+	}
+
+	make() {
+		this.timeline_wrapper = $(`<div class="new-timeline">`);
+		this.parent.replaceWith(this.timeline_wrapper);
+		this.timeline_items = [];
+		this.render_timeline_items();
+	}
+
+	refresh() {
+
+	}
+
+	add_action_button() {
+
+	}
+
+	render_timeline_items() {
+		this.prepare_timeline_contents();
+
+		this.timeline_items.sort((item1, item2) => item1.creation - item2.creation);
+		this.timeline_items.forEach(item => {
+			this.timeline_wrapper.append(this.get_timeline_item(item));
+		});
+	}
+
+	prepare_timeline_contents() {
+		const doc_info = this.frm.get_docinfo();
+		doc_info.views.forEach(view => {
+			this.timeline_items.push({
+				icon: 'view',
+				creation: view.creation,
+				content: this.get_view_content(view),
+			});
+		});
+
+		Array.from(Array(5)).forEach(() => {
+			this.timeline_items.push({
+				icon: ['mail', 'view', 'call', 'edit'][Math.floor(Math.random() * 4)],
+				creation: Date(),
+				content: `Lorem Ipsum is simply dummy text of the printing and
+					typesetting industry. Lorem Ipsum has been the industry's
+					standard dummy text ever since the 1500s,`,
+				card: true
+			});
+		});
+
+		doc_info.communications.forEach(communication => {
+			this.timeline_items.push({
+				icon: 'mail',
+				creation: communication.creation,
+				card: true,
+				content: this.get_communication_content(communication),
+			});
+		});
+	}
+
+	get_timeline_item(item) {
+		const timeline_item = $(`
+			<div class="timeline-item">
+				<div class="timeline-indicator">
+					${frappe.utils.icon(item.icon, 'md')}
+				</div>
+				<div class="timeline-content ${item.card ? 'frappe-card' : ''}">
+				</div>
+			</div>
+		`);
+		timeline_item.find('.timeline-content').append(item.content);
+		return timeline_item;
+	}
+
+	get_view_content(doc) {
+		return `
+			<div>
+				<a href="${frappe.utils.get_form_link('View Log', doc.name)}">
+					${__("{0} viewed", [frappe.user.full_name(doc.owner).bold()])}
+				</a>
+				- ${comment_when(doc.creation)}
+			</div>
+		`;
+	}
+
+	get_communication_content(doc) {
+		let item =  $(frappe.render_template('timeline_email', { doc }));
+		this.setup_reply(item);
+		item.find(".timeline-email-content").append(doc.content);
+		return item;
+	}
+
+	setup_reply(communication_box) {
+		let actions = communication_box.find('.actions');
+		let reply = $(`<a class="reply">${frappe.utils.icon('reply', 'md')}</a>`).click(e => {
+			console.log(e);
+		});
+		let reply_all = $(`<a class="reply-all">${frappe.utils.icon('reply-all', 'md')}</a>`).click(e => {
+			console.log(e);
+		});
+		actions.append(reply);
+		actions.append(reply_all);
+	}
+};

frappe/public/js/frappe/form/templates/timeline_email.html

@@ -0,0 +1,11 @@
+<div class="timeline-email">
+	<span class="flex justify-between">
+		<span class="text-color">
+			{{ frappe.avatar(doc.owner) }}
+			 {{ frappe.user.full_name(doc.owner) }}
+			<span class="text-muted">{{ comment_when(doc.creation) }}</span>
+		</span>
+		<span class="actions"></span>
+	</span>
+	<div class="timeline-email-content"></div>
+</div>

frappe/public/scss/global.scss

@@ -215,6 +215,9 @@ select.input-xs {
 	font-weight: 600;
 }
 
+.text-color {
+	color: var(--text-color);
+}
 
 /* dropdowns */
 
@@ -291,3 +294,7 @@ input[type="checkbox"] {
 		line-height: 10px;
 	}
 }
+
+.frappe-card {
+	@include card();
+}

frappe/public/scss/main.scss

@@ -4,6 +4,7 @@
 @import "~bootstrap/scss/bootstrap";
 @import "global";
 @import "form";
+@import "timeline";
 @import "list";
 @import "navbar";
 @import "modal";

frappe/public/scss/timeline.scss

@@ -0,0 +1,48 @@
+$timeline-item-icon-size: 34px;
+$timeline-item-left-margin: var(--margin-xl);
+$threshold: 50px;
+.new-timeline {
+	position: relative;
+	padding-left: var(--padding-xl);
+	padding-top: var(--padding-xl);
+	&:before {
+		content: ' ';
+		top: 0;
+		height: 100%;
+		position: absolute;
+		border-left: 1px solid var(--gray-300);
+	}
+
+	.timeline-item {
+		position: relative;
+		margin-bottom: var(--margin-lg);
+		.timeline-content {
+			max-width: 700px;
+			padding: var(--padding-sm);
+			margin-left: $timeline-item-left-margin;
+			&.frappe-card {
+				@include card($padding: var(--padding-lg));
+			}
+		}
+		.timeline-indicator {
+			width: $timeline-item-icon-size;
+			height: $timeline-item-icon-size;
+			border-radius: 50%;
+			position: absolute;
+			top: unquote("clamp(0px, 50% - #{$timeline-item-icon-size}/2, 50px)");
+			left: calc(-1 * (#{$timeline-item-icon-size}/2));
+			background-color: var(--gray-600);
+			display: inline-flex;
+			align-items: center;
+			.icon {
+				stroke: $white;
+			}
+		}
+
+		.timeline-email {
+			.timeline-email-content {
+				margin-top: var(--margin-sm);
+			}
+		}
+	}
+}

frappe/public/scss/website.scss

@@ -1,4 +1,5 @@
 @import "variables";
+@import "mixins";
 @import 'frappe/public/css/font-awesome';
 @import "~bootstrap/scss/bootstrap";
 @import 'multilevel-dropdown';