From e4e0dd495d33b1e0bda19623a937b1aa7771923b Mon Sep 17 00:00:00 2001 From: Vitor Hideyoshi Date: Mon, 23 Oct 2023 01:16:22 -0300 Subject: [PATCH 1/3] Implements More Automatic Routing Configuration --- .../header-slider/nav-slider/nav-slider.component.html | 10 +++++----- .../header-slider/nav-slider/nav-slider.component.ts | 9 +++------ src/app/header/header.component.html | 8 ++++---- src/app/header/header.component.ts | 7 +++++++ 4 files changed, 19 insertions(+), 15 deletions(-) diff --git a/src/app/header/header-slider/nav-slider/nav-slider.component.html b/src/app/header/header-slider/nav-slider/nav-slider.component.html index 93ccce0..51e76c4 100644 --- a/src/app/header/header-slider/nav-slider/nav-slider.component.html +++ b/src/app/header/header-slider/nav-slider/nav-slider.component.html @@ -2,7 +2,7 @@
@@ -25,8 +25,8 @@ [@animateSliderItem]="{ value: itemStatus, params: { - fadeInTime: 0.6 + (navLink.length + 1) / 20, - fadeOutTime: 0.6 - (navLink.length + 1) / 10 + fadeInTime: 0.6 + (pages.length + 1) / 20, + fadeOutTime: 0.6 - (pages.length + 1) / 10 } }" #profile diff --git a/src/app/header/header-slider/nav-slider/nav-slider.component.ts b/src/app/header/header-slider/nav-slider/nav-slider.component.ts index c45202a..b2b65c9 100644 --- a/src/app/header/header-slider/nav-slider/nav-slider.component.ts +++ b/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 = [ - { page: 'Home', link: '/home' }, - { page: 'Work', link: '/home' }, - { page: 'Contact', link: '/home' }, - { page: 'About', link: '/home' }, - ]; + @Input() + pages!: { name: string; route: string }[]; loggedUser!: User | null; diff --git a/src/app/header/header.component.html b/src/app/header/header.component.html index ab9528b..3a00597 100644 --- a/src/app/header/header.component.html +++ b/src/app/header/header.component.html @@ -7,10 +7,9 @@
@@ -64,6 +63,7 @@ diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts index 8ecf85a..4bc159d 100644 --- a/src/app/header/header.component.ts +++ b/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') From 57d228c72648fcdb312215dbb8cd10146f21c62b Mon Sep 17 00:00:00 2001 From: Vitor Hideyoshi Date: Mon, 23 Oct 2023 01:43:06 -0300 Subject: [PATCH 2/3] Better Items Creation --- .../header-dropdown.component.css | 2 +- .../header-dropdown.component.html | 38 ++++------------- .../header-dropdown.component.ts | 41 ++++++++++++++++--- src/app/header/header.component.css | 3 +- 4 files changed, 47 insertions(+), 37 deletions(-) diff --git a/src/app/header/header-dropdown/header-dropdown.component.css b/src/app/header/header-dropdown/header-dropdown.component.css index 384e831..342acec 100644 --- a/src/app/header/header-dropdown/header-dropdown.component.css +++ b/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; } diff --git a/src/app/header/header-dropdown/header-dropdown.component.html b/src/app/header/header-dropdown/header-dropdown.component.html index 4b2e828..4c4bd08 100644 --- a/src/app/header/header-dropdown/header-dropdown.component.html +++ b/src/app/header/header-dropdown/header-dropdown.component.html @@ -15,43 +15,21 @@
    -
  • +
  • - +
    -

    Login

    -
    • -
  • -
    - -
    -

    Sign up

    +

    {{option.text}}

    -
  • +
  • - +
    -

    My Profile

    -
    • -
  • -
    - -
    -

    Help

    -
    • -
  • -
    - -
    -

    Logout

    +

    {{option.text}}

diff --git a/src/app/header/header-dropdown/header-dropdown.component.ts b/src/app/header/header-dropdown/header-dropdown.component.ts index 757459c..2812b9b 100644 --- a/src/app/header/header-dropdown/header-dropdown.component.ts +++ b/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; - - questionCircleIcon = faQuestionCircle; + userOptions: { text: string, icon: IconDefinition, callback: () => void }[] = [ + { + text: 'My Profile', + icon: faUser, + callback: () => this.onMyProfileClicked(), + }, + { + text: 'Help', + icon: faQuestionCircle, + callback: () => this.onHelpClicked(), + }, + { + text: 'Logout', + icon: faSignOutAlt, + callback: () => this.onLogout(), + } + ]; signOutAltIcon = faSignOutAlt; diff --git a/src/app/header/header.component.css b/src/app/header/header.component.css index 1d46c26..89de955 100644 --- a/src/app/header/header.component.css +++ b/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 { From 0f4336c994ff19c437d05f790b978fc033e04511 Mon Sep 17 00:00:00 2001 From: Vitor Hideyoshi Date: Mon, 23 Oct 2023 04:01:34 -0300 Subject: [PATCH 3/3] Fixes All Popups Signals --- src/app/header/header.component.ts | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/app/header/header.component.ts b/src/app/header/header.component.ts index 4bc159d..734ff54 100644 --- a/src/app/header/header.component.ts +++ b/src/app/header/header.component.ts @@ -104,6 +104,7 @@ export class HeaderComponent implements OnInit, OnDestroy { public closeDropdown(): void { this.profileDropdownState = false; } + public loginPopupStateChange(state: boolean): void { if (state) { this.createLoginPopup(); @@ -186,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(); @@ -202,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();