From 094aff3fec6e9f6ebc10b94d02166b27acfd64ce Mon Sep 17 00:00:00 2001
From: Shivam Mishra <scm.mymail@gmail.com>
Date: Wed, 2 Sep 2020 20:46:04 +0530
Subject: [PATCH] feat: new layout for user stats in sidebar

---
 .../desk/page/user_profile/user_profile.html  |   6 +-
 frappe/desk/page/user_profile/user_profile.js |  25 +++-
 frappe/public/scss/user-profile.scss          | 109 +++++++-----------
 3 files changed, 61 insertions(+), 79 deletions(-)

diff --git a/frappe/desk/page/user_profile/user_profile.html b/frappe/desk/page/user_profile/user_profile.html
index 52af46c28a..af9e598437 100644
--- a/frappe/desk/page/user_profile/user_profile.html
+++ b/frappe/desk/page/user_profile/user_profile.html
@@ -3,7 +3,7 @@
 		<div class="performance-graphs">
 			<div class="frappe-card chart-column-container heatmap-container hidden-xs hidden-sm">
 				<div class="title-area">
-					<h4 class="card-title">Overview</h4>
+					<h4 class="card-title">{%=__("Overview") %}</h4>
 					<div class="card-options heatmap-options"></div>
 				</div>
 				<div class="performance-heatmap">
@@ -11,7 +11,7 @@
 			</div>
 			<div class="frappe-card chart-column-container percentage-chart-container">
 				<div class="title-area">
-					<h4 class="card-title">Type Distribution</h4>
+					<h4 class="card-title">{%=__("Type Distribution") %}</h4>
 					<div class="card-options percentage-chart-options"></div>
 				</div>
 				<div class="performance-percentage-chart">
@@ -19,7 +19,7 @@
 			</div>
 			<div class="frappe-card chart-column-container line-chart-container">
 				<div class="title-area">
-					<h4 class="card-title">Energy Points</h4>
+					<h4 class="card-title">{%=__("Energy Points") %}</h4>
 					<div class="card-options line-chart-options"></div>
 				</div>
 				<div class="performance-line-chart">
diff --git a/frappe/desk/page/user_profile/user_profile.js b/frappe/desk/page/user_profile/user_profile.js
index 9522a3655d..40a0d1295a 100644
--- a/frappe/desk/page/user_profile/user_profile.js
+++ b/frappe/desk/page/user_profile/user_profile.js
@@ -355,17 +355,30 @@ class UserProfile {
 	}
 
 	render_points_and_rank() {
-		let $profile_details = this.wrapper.find('.profile-details');
+		let $profile_details = this.wrapper.find('.user-stats');
+		let $profile_details_wrapper = this.wrapper.find('.user-stats-detail');
+
+		const _get_stat_dom = (value, label, icon) => {
+			return `<div class="user-stats-item mt-4">
+						${frappe.utils.icon(icon, "lg", "no-stroke")}
+						<div>
+							<div class="stat-value">${value}</div>
+							<div class="stat-label">${label}</div>
+						</div>
+					</div>`
+		}
 
 		this.get_user_rank().then(() => {
 			this.get_user_points().then(() => {
-				let html = $(__(`<p class="user-energy-points text-muted">${__('Energy Points: ')}<span class="rank">{0}</span></p>
-					<p class="user-energy-points text-muted">${__('Review Points: ')}<span class="rank">{1}</span></p>
-					<p class="user-energy-points text-muted">${__('Rank: ')}<span class="rank">{2}</span></p>
-					<p class="user-energy-points text-muted">${__('Monthly Rank: ')}<span class="rank">{3}</span></p>
-				`, [this.energy_points, this.review_points, this.rank, this.month_rank]));
+				let html = $(`
+					${_get_stat_dom(this.energy_points, __('Energy Points'), "color-energy-points")}
+					${_get_stat_dom(this.review_points, __('Review Points'), "color-review-points")}
+					${_get_stat_dom(this.rank, __('Rank'), "color-rank")}
+					${_get_stat_dom(this.month_rank, __('Monthly Rank'), "color-monthly-rank")}
+				`);
 
 				$profile_details.append(html);
+				$profile_details_wrapper.removeClass("hide");
 			});
 		});
 	}
diff --git a/frappe/public/scss/user-profile.scss b/frappe/public/scss/user-profile.scss
index 03df51da1f..4ab4bc0686 100644
--- a/frappe/public/scss/user-profile.scss
+++ b/frappe/public/scss/user-profile.scss
@@ -40,81 +40,50 @@
 	}
 }
 
-// .user-image-container {
-// 	margin-top: 7px;
-// 	padding-bottom: 100%;
-// }
+.user-profile-sidebar {
+	.sidebar-image {
+		width: 100%;
+		height: 100%;
+		border-radius: var(--border-radius-lg);
+	}
 
-// .user-image-container .standard-image {
-// 	font-size: 72px;
-// }
+	.profile-details {
+		margin-top: var(--margin-lg);
 
-// .profile-details {
-// 	margin: -5px 5px;
-// }
+		.detail-item {
+			margin-top: var(--margin-2xl);
 
-// .profile-links {
-// 	margin: 30px 5px;
-// }
+			&:first-child {
+				margin-top: 0px;
+			}
+		}
 
-// .user-initial {
-// 	font-size: 72px;
-// }
+		.user-bio {
+			color: var(--text-light);
+		}
 
+		.user-stats-item {
+			// @include flex(flex, null, center, null);
+			@include flex(flex, null, null, null);
 
-// .line-chart-container .chart-filter {
-// 	z-index: 1;
-// }
+			.stat-value {
+				font-size: var(--text-lg);
+				color: var(--text-color);
+				font-weight: var(--text-bold);
+				line-height: 20px;
+			}
 
-// .recent-activity {
-// 	margin: 20px;
-// 	font-size: 12px;
-// }
+			.stat-label {
+				color: var(--text-muted);
+				line-height: 20px;
+			}
 
-// .show-more-activity {
-// 	text-align: center;
-// 	margin-top: 20px;
-// }
-
-// .recent-activity-item {
-// 	margin: 15px 5px;
-// }
-
-// .interest-icon {
-// 	margin-right: 5px;
-// }
-
-// .chart-filter {
-// 	position: relative;
-// 	top: 5px;
-// 	margin-right: 10px;
-// }
-
-// .filter-label {
-// 	margin-right: 4px;
-// }
-
-// .performance-title {
-// 	position: relative;
-// 	left: 30px;
-// 	top: 20px;
-// }
-
-// @media (max-width: 991px) {
-// 	.user-profile-sidebar {
-// 		display: flex;
-// 	}
-
-// 	.percentage-chart-container {
-// 		border-top: 1px solid #d1d8dd;
-// 	}
-
-// 	.user-profile-sidebar .profile-links {
-// 		margin: 0;
-// 	}
-
-// 	.user-profile-sidebar .profile-details {
-// 		width: 50%;
-// 		margin: 0;
-// 	}
-// }
+			.icon {
+				stroke: none;
+				width: 28px;
+				height: 28px;
+				margin: 0 var(--margin-md) 0 0;
+			}
+		}
+	}
+}
\ No newline at end of file