From 7f0ff8157f263528e19fbb62cd9e1d269bd38493 Mon Sep 17 00:00:00 2001
From: Takiguchi <florian.thierry72@gmail.com>
Date: Sat, 18 Jan 2020 14:29:15 +0100
Subject: [PATCH] Replace "my account" button by the user icon.

---
 .../ts/src/app/header/header.component.html   | 17 +++-
 .../ts/src/app/header/header.component.scss   | 84 ++++++++++++-------
 .../ts/src/app/header/header.component.ts     | 10 +++
 3 files changed, 77 insertions(+), 34 deletions(-)

diff --git a/src/main/ts/src/app/header/header.component.html b/src/main/ts/src/app/header/header.component.html
index ae6b5e5..a3a26a4 100755
--- a/src/main/ts/src/app/header/header.component.html
+++ b/src/main/ts/src/app/header/header.component.html
@@ -17,8 +17,16 @@
 				</a>
       </li>
 			<li class="nav-item dropdown" dropdown *ngIf="isAuthenticated()">
-				<a dropdownToggle mdbRippleRadius type="button" class="nav-link dropdown-toggle waves-light" mdbRippleRadius>
-					<i class="fa fa-user-circle"></i> Mon Compte
+				<a dropdownToggle
+						mdbRippleRadius
+						type="button"
+						class="nav-link waves-light"
+						mdbTooltip="Mon compte"
+						placement="bottom"
+						mdbRippleRadius>
+					<img id="user-profile-img"
+							[src]="getConnectedUserImage()"
+							(error)="onUserProfileLoadingError($event)"/>
 				</a>
 				<div *dropdownMenu class="dropdown-menu dropdown-menu-right dropdown dropdown-primary" role="menu">
 					<a class="dropdown-item waves-light" mdbRippleRadius routerLink="/myPosts">
@@ -47,7 +55,10 @@
 		<i class="fa fa-chevron-left"></i>
 	</a>
 	<div *ngFor="let category of listCategories">
-		<a [id]="'category-' + category.id" class="collapsible" *ngIf="category.listSubCategories.length" (click)="openCategoriesLinks(category)">
+		<a [id]="'category-' + category.id"
+				class="collapsible"
+				*ngIf="!!category.listSubCategories && category.listSubCategories.length"
+				(click)="openCategoriesLinks(category)">
 			{{category.name}} <i class="fa {{accordionOpenned[category.id] ? 'fa-chevron-down' : 'fa-chevron-right'}} float-right"></i>
 		</a>
 		<div class="categoriesLinks" >
diff --git a/src/main/ts/src/app/header/header.component.scss b/src/main/ts/src/app/header/header.component.scss
index 5046988..d218285 100755
--- a/src/main/ts/src/app/header/header.component.scss
+++ b/src/main/ts/src/app/header/header.component.scss
@@ -27,42 +27,48 @@
 	overflow-x: hidden; /* Disable horizontal scroll */
 	padding-top: 20px; /* Place content 60px from the top */
 	transition: 0.3s; /* 0.5 second transition effect to slide in the sidenav */
-}
 
-/* The navigation menu links */
-.sidenav a {
-	padding: 8px 32px 8px 32px;
-	text-decoration: none;
-	color: white;
-	display: block;
-	transition: 0.3s;
-}
+	/* The navigation menu links */
+	a {
+		padding: 8px 32px 8px 32px;
+		text-decoration: none;
+		color: white;
+		display: block;
+		transition: 0.3s;
 
-/* When you mouse over the navigation links, change their color */
-.sidenav a:hover {
-	color: #ccc;
-	background-color: #5c6bc0;
-}
+		/* When you mouse over the navigation links, change their color */
+		&:hover {
+			color: #ccc;
+			background-color: #5c6bc0;
+		}
+	}
 
-.sidenav h3 {
-	padding: 8px 8px 8px 32px;
-	color: white;
-	padding-bottom: 25px;
-	border-bottom: 1px solid #5c6bc0;
-}
-/* Position and style the close button (top right corner) */
-.sidenav .closebtn {
-	position: absolute;
-	top: 25px;
-	right: 25px;
-	margin-left: 50px;
-	padding: 8px;
+	h3 {
+		padding: 8px 8px 8px 32px;
+		color: white;
+		padding-bottom: 25px;
+		border-bottom: 1px solid #5c6bc0;
+	}
+
+	/* Position and style the close button (top right corner) */
+	.closebtn {
+		position: absolute;
+		top: 25px;
+		right: 25px;
+		margin-left: 50px;
+		padding: 8px;
+	}
 }
 
 /* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
 @media screen and (max-height: 450px) {
-	.sidenav {padding-top: 15px;}
-	.sidenav a {font-size: 18px;}
+	.sidenav {
+		padding-top: 15px;
+
+		a {
+			font-size: 18px;
+		}
+	}
 }
 
 #overlay {
@@ -74,8 +80,8 @@
 	left: 0;
 	right: 0;
 	bottom: 0;
-	background-color: rgba(0,0,0,0.5); /* Black background with opacity */
-	z-index: 999; /* Specify a stack order in case you're using a different order for other elements */
+	background-color: rgba(0, 0, 0, 0.5); /* Black background with opacity */
+	z-index: 1031; /* Specify a stack order in case you're using a different order for other elements */
 	transition: 0.5s;
 }
 
@@ -84,6 +90,10 @@
 	max-height: 0;
 	overflow: hidden;
 	transition: max-height 0.2s ease-out;
+
+	a {
+		padding-left: 50px;
+	}
 }
 
 .dropdown-item.danger-color-dark:hover {
@@ -93,3 +103,15 @@
 .collapsible i.fa {
 	padding-top: 4px;
 }
+
+#user-profile-img {
+	filter: opacity(1);
+	transition: filter 0.3s;
+	border-radius: 50%;
+	width: 35px;
+	height: 35px;
+
+	&:hover {
+		filter: opacity(0.5);
+	}
+}
diff --git a/src/main/ts/src/app/header/header.component.ts b/src/main/ts/src/app/header/header.component.ts
index 87243e8..cc50422 100755
--- a/src/main/ts/src/app/header/header.component.ts
+++ b/src/main/ts/src/app/header/header.component.ts
@@ -6,6 +6,7 @@ import { HeaderService } from './header.service';
 import { environment } from '../../environments/environment';
 
 const SIDENAV_WIDTH = '300px';
+const DEFAULT_USER_ICON = '../../assets/images/default_user_icon.png';
 
 @Component({
 	selector: 'app-header',
@@ -80,4 +81,13 @@ export class HeaderComponent implements OnInit {
 			this.accordionOpenned[category.id] = true;
 		}
 	}
+
+	getConnectedUserImage() {
+		const userImage = this.authService.getUser().image;
+		return !!userImage ? `./api/images/loadAvatar/${userImage}` : DEFAULT_USER_ICON;
+	}
+
+	onUserProfileLoadingError(event): void {
+		event.target.src = DEFAULT_USER_ICON;
+	}
 }