From b31cf8ba79bcf7adc1d4c899cf289767fa5a9cec Mon Sep 17 00:00:00 2001
From: Rushabh Mehta <rmehta@gmail.com>
Date: Fri, 23 Aug 2024 16:42:15 +0530
Subject: [PATCH] fix(style): sidebar overlay + polishes

---
 frappe/desk/page/setup_wizard/setup_wizard.js |  1 -
 .../frappe/form/controls/table_multiselect.js |  1 +
 frappe/public/js/frappe/form/section.js       |  4 +-
 frappe/public/js/frappe/list/list_view.js     |  9 +++-
 frappe/public/js/frappe/ui/sidebar.js         | 10 ++--
 frappe/public/scss/common/grid.scss           |  8 +--
 frappe/public/scss/common/icons.scss          |  4 +-
 frappe/public/scss/common/modal.scss          | 11 +++-
 frappe/public/scss/desk/desktop.scss          |  5 ++
 frappe/public/scss/desk/form.scss             | 29 ++++++-----
 frappe/public/scss/desk/global.scss           |  2 +-
 frappe/public/scss/desk/page.scss             |  5 ++
 frappe/public/scss/desk/sidebar.scss          | 51 ++++++++++++-------
 13 files changed, 93 insertions(+), 47 deletions(-)

diff --git a/frappe/desk/page/setup_wizard/setup_wizard.js b/frappe/desk/page/setup_wizard/setup_wizard.js
index 49f15f3c81..6231e911ce 100644
--- a/frappe/desk/page/setup_wizard/setup_wizard.js
+++ b/frappe/desk/page/setup_wizard/setup_wizard.js
@@ -397,7 +397,6 @@ frappe.setup.slides_settings = [
 				fieldtype: "Select",
 				reqd: 1,
 			},
-			{ fieldtype: "Column Break" },
 			{
 				fieldname: "currency",
 				label: __("Currency"),
diff --git a/frappe/public/js/frappe/form/controls/table_multiselect.js b/frappe/public/js/frappe/form/controls/table_multiselect.js
index c4372e54ac..cfe749a524 100644
--- a/frappe/public/js/frappe/form/controls/table_multiselect.js
+++ b/frappe/public/js/frappe/form/controls/table_multiselect.js
@@ -1,6 +1,7 @@
 frappe.ui.form.ControlTableMultiSelect = class ControlTableMultiSelect extends (
 	frappe.ui.form.ControlLink
 ) {
+	static horizontal = false;
 	make_input() {
 		super.make_input();
 
diff --git a/frappe/public/js/frappe/form/section.js b/frappe/public/js/frappe/form/section.js
index 2767fe4ccf..5d14abf1e3 100644
--- a/frappe/public/js/frappe/form/section.js
+++ b/frappe/public/js/frappe/form/section.js
@@ -27,8 +27,8 @@ export default class Section {
 
 	make() {
 		let make_card = this.card_layout;
-		this.wrapper = $(`<div class="row
-				${this.df.is_dashboard_section ? "form-dashboard-section" : "form-section"}
+		this.wrapper = $(`<div class=
+				"${this.df.is_dashboard_section ? "form-dashboard-section" : "form-section"}
 				${make_card ? "card-section" : ""}" data-fieldname="${this.df.fieldname}">
 			`).appendTo(this.parent);
 
diff --git a/frappe/public/js/frappe/list/list_view.js b/frappe/public/js/frappe/list/list_view.js
index f50cd3baa4..9e555fdc13 100644
--- a/frappe/public/js/frappe/list/list_view.js
+++ b/frappe/public/js/frappe/list/list_view.js
@@ -566,6 +566,11 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
 		if (this.$result.find(".list-row-head").length === 0) {
 			// append header once
 			this.$result.prepend(this.get_header_html());
+
+			if (this.filter_area.filter_list.get_filter_value("_liked_by")) {
+				// if there is a liked fitler, then add liked
+				this.$result.find(".list-liked-by-me").addClass("liked");
+			}
 		}
 	}
 
@@ -1464,9 +1469,9 @@ frappe.views.ListView = class ListView extends frappe.views.BaseList {
 
 		this.$result.on("click", ".list-liked-by-me", (e) => {
 			const $this = $(e.currentTarget);
-			$this.toggleClass("active");
+			$this.toggleClass("liked");
 
-			if ($this.hasClass("active")) {
+			if ($this.hasClass("liked")) {
 				this.filter_area.add(
 					this.doctype,
 					"_liked_by",
diff --git a/frappe/public/js/frappe/ui/sidebar.js b/frappe/public/js/frappe/ui/sidebar.js
index 9b3ea604d8..58132e0017 100644
--- a/frappe/public/js/frappe/ui/sidebar.js
+++ b/frappe/public/js/frappe/ui/sidebar.js
@@ -3,6 +3,12 @@ frappe.provide("frappe.ui");
 frappe.ui.Sidebar = class Sidebar {
 	constructor() {
 		this.items = {};
+
+		if (!frappe.boot.setup_complete) {
+			// no sidebar if setup is not complete
+			return;
+		}
+
 		this.make_dom();
 		this.sidebar_items = {
 			public: {},
@@ -29,6 +35,7 @@ frappe.ui.Sidebar = class Sidebar {
 	make_dom() {
 		this.wrapper = $(`
 			<div class="body-sidebar-container">
+				<div class="body-sidebar-placeholder"></div>
 				<div class="body-sidebar hidden-xs hidden-sm">
 					<a href="/app">
 						<img
@@ -58,9 +65,6 @@ frappe.ui.Sidebar = class Sidebar {
 		this.all_pages = this.sidebar_pages.pages;
 		this.has_access = this.sidebar_pages.has_access;
 		this.has_create_access = this.sidebar_pages.has_create_access;
-		if (!this.sidebar_pages.workspace_setup_completed) {
-			frappe.quick_edit("Workspace Settings");
-		}
 
 		this.all_pages.forEach((page) => {
 			page.is_editable = !page.public || this.has_access;
diff --git a/frappe/public/scss/common/grid.scss b/frappe/public/scss/common/grid.scss
index 99f65a2119..9930ca1536 100644
--- a/frappe/public/scss/common/grid.scss
+++ b/frappe/public/scss/common/grid.scss
@@ -21,6 +21,8 @@
 
 	.grid-row {
 		background-color: var(--subtle-fg);
+		border-top-left-radius: var(--border-radius-md);
+		border-top-right-radius: var(--border-radius-md);
 	}
 
 	&.with-filter {
@@ -123,7 +125,7 @@
 
 .grid-static-col,
 .row-index {
-	height: 38px;
+	// height: 38px;
 	max-height: 200px;
 
 	&.search {
@@ -137,7 +139,7 @@
 }
 
 .row-check {
-	height: 38px;
+	// height: 38px;
 	text-align: center;
 
 	input {
@@ -150,7 +152,7 @@
 }
 
 .grid-row-check {
-	margin-top: 2px;
+	margin-top: 3px;
 
 	&::after {
 		// Extend the checkbox's clickable area
diff --git a/frappe/public/scss/common/icons.scss b/frappe/public/scss/common/icons.scss
index a8c17e9f83..21b4541c70 100644
--- a/frappe/public/scss/common/icons.scss
+++ b/frappe/public/scss/common/icons.scss
@@ -43,8 +43,8 @@ use.like-icon {
 
 .liked {
 	use.like-icon {
-		--icon-stroke: var(--red-500);
-		fill: var(--icon-stroke);
+		--icon-stroke: var(--invert-neutral);
+		fill: var(--invert-neutral);
 	}
 }
 
diff --git a/frappe/public/scss/common/modal.scss b/frappe/public/scss/common/modal.scss
index 98303d6db5..2e9323605b 100644
--- a/frappe/public/scss/common/modal.scss
+++ b/frappe/public/scss/common/modal.scss
@@ -238,11 +238,14 @@ body.modal-open[style^="padding-right"] {
 			&[data-fieldname="sender"] {
 				margin-right: 10px;
 			}
+
 			flex: 1;
+			.control-input-wrapper {
+				width: 60%;
+			}
 		}
 		.frappe-control:last-child {
 			margin-left: 10px;
-			margin-bottom: -24px;
 			button {
 				// same as form-control input
 				height: calc(1.5em + 0.7rem);
@@ -261,10 +264,14 @@ body.modal-open[style^="padding-right"] {
 				margin-right: 10px;
 			}
 			flex: 1;
+
+			.control-input-wrapper {
+				width: 53%;
+			}
 		}
 
 		.frappe-control:last-child {
-			margin-bottom: -8px;
+			margin-top: -14px;
 		}
 	}
 }
diff --git a/frappe/public/scss/desk/desktop.scss b/frappe/public/scss/desk/desktop.scss
index 33821f43ea..4707c8c164 100644
--- a/frappe/public/scss/desk/desktop.scss
+++ b/frappe/public/scss/desk/desktop.scss
@@ -947,6 +947,11 @@ body {
 		}
 	}
 
+	.page-head .container {
+		max-width: var(--page-max-width);
+		margin: auto;
+	}
+
 	.layout-main-section-wrapper {
 		margin-top: -5px;
 		padding-top: 5px;
diff --git a/frappe/public/scss/desk/form.scss b/frappe/public/scss/desk/form.scss
index f101ce620b..e2ed638e4d 100644
--- a/frappe/public/scss/desk/form.scss
+++ b/frappe/public/scss/desk/form.scss
@@ -4,7 +4,7 @@
 	position: absolute;
 	bottom: 100%;
 	left: 0;
-	z-index: 9999;
+	z-index: 1050;
 	padding: 2px 6px;
 	border-radius: var(--border-radius-sm);
 	background-color: var(--bg-dark-gray);
@@ -29,9 +29,6 @@
 
 .form-section,
 .form-dashboard-section {
-	max-width: var(--page-max-width);
-	margin: auto;
-
 	.form-section-description {
 		margin-bottom: 10px;
 		@include get_textstyle("base", "regular");
@@ -44,8 +41,6 @@
 		color: var(--text-color);
 		width: 100%;
 		padding: var(--padding-sm) var(--padding-md);
-		margin: 0;
-		margin-bottom: var(--margin-sm);
 		cursor: default;
 
 		.collapse-indicator {
@@ -65,15 +60,23 @@
 	}
 
 	.section-body {
+		padding-top: var(--padding-sm);
 		width: 100%;
-		@extend .row;
-		margin: 0;
+		display: flex;
+		flex-wrap: wrap;
+
 		&:first-child {
 			margin-top: 1rem;
 		}
 	}
 }
 
+.section-head,
+.section-body {
+	max-width: var(--page-max-width);
+	margin: auto !important;
+}
+
 .form-column {
 	.form-column-description {
 		margin-bottom: 10px;
@@ -100,10 +103,6 @@
 	padding: var(--padding-md) 0;
 }
 
-.row.form-section.card-section.visible-section:last-child {
-	border-bottom: none;
-}
-
 .form-section.card-section.hide-border {
 	border-bottom: none;
 }
@@ -441,6 +440,11 @@
 		.control-input-wrapper {
 			width: 62%; // golden ratio
 		}
+
+		.control-label {
+			margin-top: 3px;
+			margin-bottom: 3px;
+		}
 	}
 }
 
@@ -492,7 +496,6 @@
 	}
 }
 .form-tab-content {
-	margin-top: var(--margin-md);
 	scroll-margin-top: calc(var(--navbar-height) + 52px);
 }
 .form-tabs-sticky-up {
diff --git a/frappe/public/scss/desk/global.scss b/frappe/public/scss/desk/global.scss
index c1f57976da..28947d562d 100644
--- a/frappe/public/scss/desk/global.scss
+++ b/frappe/public/scss/desk/global.scss
@@ -514,7 +514,7 @@ kbd {
 
 // freeze backdrop text
 #freeze {
-	z-index: 1055;
+	z-index: 2000;
 	bottom: 0;
 	opacity: 0;
 	background-color: var(--bg-color);
diff --git a/frappe/public/scss/desk/page.scss b/frappe/public/scss/desk/page.scss
index ccd504473e..6e7f5f2230 100644
--- a/frappe/public/scss/desk/page.scss
+++ b/frappe/public/scss/desk/page.scss
@@ -110,10 +110,15 @@
 	background: var(--bg-color);
 	border-bottom: 1px solid var(--border-color);
 	transition: 0.5s top;
+
 	.page-head-content {
 		height: var(--page-head-height);
 		padding: 8px 0px;
 	}
+
+	h3 {
+		font-weight: var(--weight-semibold);
+	}
 }
 
 .page-form {
diff --git a/frappe/public/scss/desk/sidebar.scss b/frappe/public/scss/desk/sidebar.scss
index 33df7c4bdc..a67731546d 100644
--- a/frappe/public/scss/desk/sidebar.scss
+++ b/frappe/public/scss/desk/sidebar.scss
@@ -57,10 +57,39 @@ body[data-route^="Module"] .main-menu {
 	flex-direction: column;
 	height: fit-content;
 	width: fit-content;
+
+	.body-sidebar-placeholder {
+		display: none;
+		width: 53px;
+		height: 100vh;
+	}
+
+	&:hover {
+		.body-sidebar {
+			// make it an overlay on hover
+			position: absolute;
+			width: 200px;
+
+			.sidebar-item-label {
+				display: flex;
+			}
+			.sidebar-item-control {
+				display: block;
+			}
+			.edit-sidebar-link {
+				display: block;
+			}
+		}
+
+		// show placeholder so that main section remains static
+		.body-sidebar-placeholder {
+			display: flex;
+		}
+	}
 }
 
 .body-sidebar {
-	min-width: 50px;
+	width: 53px;
 	background: var(--subtle-accent);
 	border: 1px solid var(--border-color);
 
@@ -75,7 +104,7 @@ body[data-route^="Module"] .main-menu {
 	overflow-x: hidden;
 	overflow-y: auto;
 	padding: 15px;
-	z-index: 100;
+	z-index: 1030;
 	position: static;
 	font-size: var(--text-base);
 	transition: transform 200ms ease-in-out;
@@ -142,20 +171,6 @@ body[data-route^="Module"] .main-menu {
 		display: none;
 	}
 
-	&:hover {
-		width: 200px;
-
-		.sidebar-item-label {
-			display: flex;
-		}
-		.sidebar-item-control {
-			display: block;
-		}
-		.edit-sidebar-link {
-			display: block;
-		}
-	}
-
 	.sidebar-item-container {
 		position: relative;
 		margin-left: -10px;
@@ -386,7 +401,7 @@ body[data-route^="Module"] .main-menu {
 			top: 0;
 			left: 0;
 			transform: translateX(-110%);
-			z-index: 9999;
+			z-index: 1100;
 			box-shadow: var(--shadow-base);
 			height: 100%;
 			width: 40%;
@@ -417,7 +432,7 @@ body[data-route^="Module"] .main-menu {
 		right: 0;
 		opacity: 0.3;
 		background: #000;
-		z-index: 9998;
+		z-index: 1100;
 		height: 100%;
 		width: 100%;
 	}