Merge pull request #8970 from scmmishra/changelog-ux

fix (ui/ux): change log modal on boot

frappe/public/js/frappe/change_log.html

@@ -6,11 +6,13 @@
             {{ app_info.title }}
 			<small>{{ __("updated to {0}", [app_info.version]) }}</small>
 		</h2>
+		<div class="app-change-log-body">
 		{% for (var x=0, y=app_info.change_log.length; x < y; x++) {
             var version_info = app_info.change_log[x];
             if(version_info) { %}
     			<p>{{ frappe.markdown(version_info[1]) }}</p>
 		    {% }
         } %}
+    	</div>
 	</div>
 {% } %}

frappe/public/js/frappe/desk.js

@@ -466,12 +466,27 @@ frappe.Application = Class.extend({
 
 	show_change_log: function() {
 		var me = this;
-		var d = frappe.msgprint(
-			frappe.render_template("change_log", {"change_log": frappe.boot.change_log}),
-			__("Updated To New Version")
-		);
-		d.keep_open = true;
-		d.custom_onhide = function() {
+		let change_log = frappe.boot.change_log;
+
+		// frappe.boot.change_log = [{
+		// 	"change_log": [
+		// 		[<version>, <change_log in markdown>],
+		// 		[<version>, <change_log in markdown>],
+		// 	],
+		// 	"description": "ERP made simple",
+		// 	"title": "ERPNext",
+		// 	"version": "12.2.0"
+		// }];
+
+		// Iterate over changelog
+		var change_log_dialog = frappe.msgprint({
+			message: frappe.render_template("change_log", {"change_log": change_log}),
+			title: __("Updated To New Version 🎉"),
+			wide: true,
+			scroll: true
+		});
+		change_log_dialog.keep_open = true;
+		change_log_dialog.custom_onhide = function() {
 			frappe.call({
 				"method": "frappe.utils.change_log.update_last_known_versions"
 			});

frappe/public/js/frappe/ui/messages.js

@@ -207,6 +207,15 @@ frappe.msgprint = function(msg, title) {
 		frappe.msg_dialog.wrapper.classList.add('msgprint-dialog');
 	}
 
+	if (data.scroll) {
+		// limit modal height and allow scrolling instead
+		frappe.msg_dialog.body.classList.add('msgprint-scroll');
+	} else {
+		if (frappe.msg_dialog.body.classList.contains('msgprint-scroll')) {
+			frappe.msg_dialog.body.classList.remove('msgprint-scroll');
+		}
+	}
+
 
 	if(msg_exists) {
 		frappe.msg_dialog.msg_area.append("<hr>");

frappe/public/less/common.less

@@ -157,6 +157,11 @@ a.badge-hover& {
 	}
 }
 
+.msgprint-scroll {
+	max-height: 36em;
+	overflow: scroll;
+}
+
 .msgprint {
 	// margin: 15px 0px;
 	// text-align: center;

frappe/public/less/desk.less

@@ -1137,3 +1137,9 @@ body.no-sidebar {
 .alt-pressed .alt-underline {
 	text-decoration: underline;
 }
+
+.app-change-log-body {
+	h1 {
+		font-size: 20px;
+	}
+}