Merge pull request #46 from HideyoshiNakazone/improving-ui

Improving UI  - Better Header Implementation

src/app/header/header-dropdown/header-dropdown.component.css

@@ -30,7 +30,7 @@
     align-items: center;
     margin: 0;
     font-size: 20px;
-    font-weight: 400;
+    font-weight: 500;
     color: #555555;
 }
 

src/app/header/header-dropdown/header-dropdown.component.html

@@ -15,43 +15,21 @@
     </div>
     <div #management>
         <ul class="user-management" *ngIf="!this.user">
-            <li class="dropdown-item" (click)="onLoginOptionClicked()">
+            <li *ngFor="let option of mainOptions"
+                class="dropdown-item" (click)=option.callback()>
                 <div class="icon-box">
-                    <fa-icon class="fas fa-user" [icon]="userIcon"></fa-icon>
+                    <fa-icon [icon]="option.icon"></fa-icon>
                 </div>
-                <p>Login</p>
+                <p>{{option.text}}</p>
-            </li>
-            <li class="dropdown-item" (click)="onSignUpOptionClick()">
-                <div class="icon-box">
-                    <fa-icon class="fas fa-edit" [icon]="editIcon"></fa-icon>
-                </div>
-                <p>Sign up</p>
             </li>
         </ul>
         <ul class="user-management" *ngIf="this.user">
-            <li class="dropdown-item" (click)="onMyProfileClicked()">
+            <li *ngFor="let option of userOptions"
+                class="dropdown-item" (click)=option.callback()>
                 <div class="icon-box">
-                    <fa-icon class="fas fa-user" [icon]="userIcon"></fa-icon>
+                    <fa-icon [icon]="option.icon"></fa-icon>
                 </div>
-                <p>My Profile</p>
+                <p>{{option.text}}</p>
-            </li>
-            <li class="dropdown-item" (click)="onHelpClicked()">
-                <div class="icon-box">
-                    <fa-icon
-                        class="fas fa-question-circle"
-                        [icon]="questionCircleIcon"
-                    ></fa-icon>
-                </div>
-                <p>Help</p>
-            </li>
-            <li class="dropdown-item" (click)="onLogout()">
-                <div class="icon-box">
-                    <fa-icon
-                        class="fas fa-sign-out-alt"
-                        [icon]="signOutAltIcon"
-                    ></fa-icon>
-                </div>
-                <p>Logout</p>
             </li>
         </ul>
     </div>

src/app/header/header-dropdown/header-dropdown.component.ts

@@ -17,7 +17,7 @@ import {
 } from '@angular/core';
 import {
     faEdit,
-    faQuestionCircle,
+    faQuestionCircle, faSignIn,
     faSignOutAlt,
     faUser,
 } from '@fortawesome/free-solid-svg-icons';
@@ -27,6 +27,7 @@ import { User } from '../../shared/model/user/user.model';
 import UserChecker from '../../shared/model/user/user.checker';
 import { HelpComponent } from '../header-popup/help/help.component';
 import { MyProfileComponent } from '../header-popup/my-profile/my-profile.component';
+import {IconDefinition} from "@fortawesome/free-regular-svg-icons";
 
 @Component({
     selector: 'app-header-dropdown',
@@ -52,11 +53,41 @@ import { MyProfileComponent } from '../header-popup/my-profile/my-profile.compon
     ],
 })
 export class HeaderDropdownComponent implements OnInit, OnDestroy {
-    userIcon = faUser;
+    mainOptions: { text: string, icon: IconDefinition, callback: () => void }[] = [
+        {
+            text: 'Login',
+            icon: faUser,
+            callback: () => this.onLoginOptionClicked(),
+        },
+        {
+            text: 'Sign Up',
+            icon: faSignIn,
+            callback: () => this.onSignUpOptionClick(),
+        },
+        {
+            text: 'Help',
+            icon: faQuestionCircle,
+            callback: () => this.onHelpClicked(),
+        }
+    ];
 
-    editIcon = faEdit;
+    userOptions: { text: string, icon: IconDefinition, callback: () => void }[] = [
-
+        {
-    questionCircleIcon = faQuestionCircle;
+            text: 'My Profile',
+            icon: faUser,
+            callback: () => this.onMyProfileClicked(),
+        },
+        {
+            text: 'Help',
+            icon: faQuestionCircle,
+            callback: () => this.onHelpClicked(),
+        },
+        {
+            text: 'Logout',
+            icon: faSignOutAlt,
+            callback: () => this.onLogout(),
+        }
+    ];
 
     signOutAltIcon = faSignOutAlt;
 

src/app/header/header-slider/nav-slider/nav-slider.component.html

@@ -2,7 +2,7 @@
     <div class="nav-links">
         <ul>
             <li
-                *ngFor="let nav of navLink; let i = index"
+                *ngFor="let page of pages; let i = index"
                 [@animateSliderItem]="{
                     value: itemStatus,
                     params: {
@@ -11,8 +11,8 @@
                     }
                 }"
             >
-                <a [routerLink]="nav.link">
+                <a [routerLink]="page.route">
-                    {{ nav.page }}
+                    {{ page.name }}
                 </a>
             </li>
         </ul>
@@ -25,8 +25,8 @@
         [@animateSliderItem]="{
             value: itemStatus,
             params: {
-                fadeInTime: 0.6 + (navLink.length + 1) / 20,
+                fadeInTime: 0.6 + (pages.length + 1) / 20,
-                fadeOutTime: 0.6 - (navLink.length + 1) / 10
+                fadeOutTime: 0.6 - (pages.length + 1) / 10
             }
         }"
         #profile

src/app/header/header-slider/nav-slider/nav-slider.component.ts

@@ -1,6 +1,7 @@
 import {
     Component,
     EventEmitter,
+    Input,
     OnDestroy,
     OnInit,
     Output,
@@ -23,12 +24,8 @@ export class NavSliderComponent
 {
     userIcon = faUser;
 
-    navLink = [
+    @Input()
-        { page: 'Home', link: '/home' },
+    pages!: { name: string; route: string }[];
-        { page: 'Work', link: '/home' },
-        { page: 'Contact', link: '/home' },
-        { page: 'About', link: '/home' },
-    ];
 
     loggedUser!: User | null;
 

src/app/header/header.component.css

@@ -13,6 +13,7 @@
     top: 0;
     left: 0;
     display: flex;
+    position: static;
     width: 100%;
     background-color: #2e2e2e;
     height: 10vh;
@@ -125,7 +126,7 @@ app-header-slider {
         letter-spacing: 3px;
         color: #ffffff;
         font-weight: 500;
-        font-size: 16px;
+        font-size: 20px;
     }
 
     .profile {

src/app/header/header.component.html

@@ -7,10 +7,9 @@
         </div>
         <div class="nav-links">
             <ul class="link-container">
-                <li><a routerLink="/home">Home</a></li>
+                <li *ngFor="let page of pages">
-                <li><a routerLink="/home">Work</a></li>
+                    <a [routerLink]="page.route">{{ page.name }}</a>
-                <li><a routerLink="/home">Contact</a></li>
+                </li>
-                <li><a routerLink="/home">About</a></li>
             </ul>
         </div>
 
@@ -64,6 +63,7 @@
             <app-nav-slider
                 [state]="navSliderStatus"
                 (profileButtonClicked)="profileButtonClicked()"
+                [pages]="pages"
             >
             </app-nav-slider>
         </app-header-slider>

src/app/header/header.component.ts

@@ -23,6 +23,12 @@ import { MyProfileComponent } from './header-popup/my-profile/my-profile.compone
     styleUrls: ['./header.component.css'],
 })
 export class HeaderComponent implements OnInit, OnDestroy {
+    pages: { name: string; route: string }[] = [
+        { name: 'Home', route: '/home' },
+        { name: 'Projects', route: '/home' },
+        { name: 'Contact', route: '/home' },
+    ];
+
     userIcon = faUser;
 
     profileDropdownState: boolean = false;
@@ -30,6 +36,7 @@ export class HeaderComponent implements OnInit, OnDestroy {
     signupPopupState: boolean = false;
 
     navSliderStatus: boolean = false;
+
     userSliderStatus: boolean = false;
 
     @ViewChild('profileBtn')
@@ -97,6 +104,7 @@ export class HeaderComponent implements OnInit, OnDestroy {
     public closeDropdown(): void {
         this.profileDropdownState = false;
     }
+
     public loginPopupStateChange(state: boolean): void {
         if (state) {
             this.createLoginPopup();
@@ -179,6 +187,12 @@ export class HeaderComponent implements OnInit, OnDestroy {
         this.myProfileComponent.instance.state = true;
         this.myProfileComponent.instance.user = this.loggedUser;
 
+        this.myProfileComponent.instance.ignoreClickOutside = [
+            this.profileBtnElementRef,
+            this.profileDropdownElementRef,
+            this.userElementRef,
+        ].map((element) => element.nativeElement);
+
         this.myProfileComponent.instance.stateChange.subscribe((state) => {
             if (!state) {
                 this.closeMyProfilePopup();
@@ -195,6 +209,12 @@ export class HeaderComponent implements OnInit, OnDestroy {
             this.viewContainerRef.createComponent(HelpComponent);
         this.helpComponent.instance.state = true;
 
+        this.helpComponent.instance.ignoreClickOutside = [
+            this.profileBtnElementRef,
+            this.profileDropdownElementRef,
+            this.userElementRef,
+        ].map((element) => element.nativeElement);
+
         this.helpComponent.instance.stateChange.subscribe((state) => {
             if (!state) {
                 this.closeHelpPopup();