From 67d8ebde45c84ea6864cfb18ff83bfba02e548d5 Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Wed, 8 Jul 2020 19:53:19 +0530
Subject: [PATCH] feat: allow custom separators in query report summary

---
 frappe/public/js/frappe/widgets/utils.js |  7 ++-
 frappe/public/scss/report.scss           | 77 ++++++++++++++++++------
 2 files changed, 65 insertions(+), 19 deletions(-)

diff --git a/frappe/public/js/frappe/widgets/utils.js b/frappe/public/js/frappe/widgets/utils.js
index 010032b0e3..1fcb3b10dd 100644
--- a/frappe/public/js/frappe/widgets/utils.js
+++ b/frappe/public/js/frappe/widgets/utils.js
@@ -100,6 +100,11 @@ function generate_grid(data) {
 }
 
 const build_summary_item = (summary) => {
+	if (summary.type == "separator") {
+		return $(`<div class="summary-separator">
+			<div class="summary-value ${summary.color ? summary.color.toLowerCase() : 'text-muted' }">${ summary.value }</div>
+		</div>`);
+	}
 	let df = {fieldtype: summary.datatype};
 	let doc = null;
 
@@ -116,7 +121,7 @@ const build_summary_item = (summary) => {
 			: '';
 
 	return $(`<div class="summary-item">
-		<span class="summary-label small text-muted">${summary.label}</span>
+		<span class="summary-label">${summary.label}</span>
 		<div class="summary-value ${color}">${ value }</div>
 	</div>`);
 };
diff --git a/frappe/public/scss/report.scss b/frappe/public/scss/report.scss
index 19c75d0ee8..ec307aba52 100644
--- a/frappe/public/scss/report.scss
+++ b/frappe/public/scss/report.scss
@@ -127,43 +127,60 @@
 }
 
 .report-summary {
+	// FORM
 	background-color: var(--gray-100, #F4F5F6);
 	border-radius: var(--border-radius-md, 8px);
-	margin-top: 1rem;
-	margin-bottom: 1rem;
-	display: grid;
-	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-	grid-auto-rows: minmax(62px, 1fr);
-	column-gap: 15px;
-	row-gap: 15px;
-	align-items: center;
-	text-align: center;
-
-	padding: 15px 15px;
 	border-bottom: 1px solid $border-color;
-	margin-right: 0px;
-	margin-left: 0px;
+
+	// SIZE & SPACING
+	margin: 1rem 0px;
+	padding: 20px 15px;
+
+	// LAYOUT
+	display: flex;
+	flex-wrap: wrap;
+	align-items: center;
+
+	.summary-item {
+		// SIZE & SPACING
+		margin: 0px 30px;
+		width: 180px;
+		height: 62px;
+
+		// LAYOUT
+		display: flex;
+		flex-direction: column;
+		place-content: center;
+	}
 
 	.summary-label {
+		font-size: var(--text-base);
 		font-weight: normal !important;
+		text-align: center;
 	}
 
 	.summary-value {
-		margin-top: 8px;
-		margin-bottom: 5px;
+		// FORM
 		font-size: var(--text-2xl, 20px);
 		font-weight: 600;
 		line-height: 16px;
 		color: $gray-900;
-		overflow: hidden !important;
-		text-overflow: ellipsis;
-		white-space: nowrap;
 		font-feature-settings: "tnum";
 
 		&.green { color: var(--green-500); }
 		&.red { color: var(--red-500); }
 		&.blue { color: var(--blue-500); }
 
+		// SIZE & SPACING
+		margin-top: 12px;
+		margin-bottom: 5px;
+
+		// LAYOUT
+		text-align: center;
+		overflow: hidden !important;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+
 		div {
 			text-align: center;
 			overflow: hidden;
@@ -171,6 +188,30 @@
 			white-space: nowrap;
 		}
 	}
+
+	.summary-separator {
+		margin: 5px 12px;
+
+		.summary-value {
+			// FORM
+			background-color: white;
+			border-radius: var(--border-radius, 6px);
+			box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
+
+			&.green { color: var(--green-500); }
+			&.red { color: var(--red-500); }
+			&.blue { color: var(--blue-500); }
+
+			// SIZE & SPACING
+			min-width: 30px;
+			margin: 0px 30px;
+			padding: 2px 8px;
+
+			// LAYOUT
+			display: flex;
+			place-content: center;
+		}
+	}
 }
 
 // for sm and above