feat: Full Width Container

Persistent using localStorage since container width should be per device

frappe/public/js/frappe/desk.js

@@ -45,6 +45,7 @@ frappe.Application = Class.extend({
 		this.make_nav_bar();
 		this.set_favicon();
 		this.setup_analytics();
+		this.set_fullwidth_if_enabled();
 
 		this.setup_energy_point_listeners();
 
@@ -507,6 +508,10 @@ frappe.Application = Class.extend({
 		}
 	},
 
+	set_fullwidth_if_enabled() {
+		frappe.ui.toolbar.set_fullwidth_if_enabled();
+	},
+
 	show_notes: function() {
 		var me = this;
 		if(frappe.boot.notes.length) {

frappe/public/js/frappe/ui/toolbar/navbar.html

@@ -21,7 +21,7 @@
 					onclick="return false;">
 				{{ avatar }}
 				<span class="ellipsis toolbar-user-fullname hidden-xs hidden-sm">
-					{%= frappe.user.full_name() %}</span>
+					{%= __('Settings') %}</span>
 				<b class="caret hidden-xs hidden-sm"></b></a>
 				<ul class="dropdown-menu" id="toolbar-user" role="menu">
 					<li><a href="#Form/User/{%= encodeURIComponent(frappe.session.user) %}">
@@ -31,6 +31,9 @@
 						{%= __("Reload") %}</a></li>
 					<li><a href="/index" target="_blank" rel="noopener noreferrer">
 						{%= __("View Website") %}</a></li>
+					<li class="navbar-toggle-full-width">
+						<a href="#" onclick="return false">{%= __("Toggle Full Width") %}</a>
+					</li>
 					<li><a href="#background_jobs">
 						{%= __("Background Jobs") %}</a></li>
 					<li class="divider"></li>

frappe/public/js/frappe/ui/toolbar/toolbar.js

@@ -44,6 +44,9 @@ frappe.ui.toolbar.Toolbar = Class.extend({
 				search_modal.find('#modal-search').focus();
 			}, 300);
 		});
+		$('.navbar-toggle-full-width').click(() => {
+			frappe.ui.toolbar.toggle_full_width();
+		});
 	},
 
 	setup_sidebar: function() {
@@ -192,7 +195,17 @@ $.extend(frappe.ui.toolbar, {
 		</li>`).get(0);
 
 		parent_element.insertBefore(new_element, parent_element.children[index]);
-	}
+	},
+	toggle_full_width() {
+		let fullwidth = JSON.parse(localStorage.container_fullwidth || 'false');
+		fullwidth = !fullwidth;
+		localStorage.container_fullwidth = fullwidth;
+		frappe.ui.toolbar.set_fullwidth_if_enabled();
+	},
+	set_fullwidth_if_enabled() {
+		let fullwidth = JSON.parse(localStorage.container_fullwidth || 'false');
+		$(document.body).toggleClass('full-width', fullwidth);
+	},
 });
 
 frappe.ui.toolbar.clear_cache = function() {

frappe/public/less/desk.less

@@ -1061,4 +1061,12 @@ img.img-loading:after {
 
 .popover-content {
 	padding: 12px;
-}
+}
+
+body.full-width {
+	@media (min-width: @screen-md) {
+		.container {
+			width: 90%;
+		}
+	}
+}

rollup/frappe-html-plugin.js

@@ -19,7 +19,7 @@ module.exports = function frappe_html() {
 			var content = scrub_html_template(code);
 
 			return `
-				frappe.templates['${key}'] = '${content}';
+				frappe.templates['${key}'] = \`${content}\`;
 			`;
 		}
 	};