From 6a7559a3ad226e25eeea9c39cb62fa960438d6ef Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Thu, 4 Aug 2022 15:29:08 +0300 Subject: [PATCH] Add replaceHeader in Navbar Header and a handler in layout service. Change header info in dashboard pages. --- dashboard/divId/divIds.component.html | 6 +- .../class-help-content-form.component.html | 6 +- .../class-help-contents.component.html | 6 +- dashboard/entity/entities.component.html | 6 +- .../page-help-content-form.component.html | 8 +- .../page-help-contents.component.html | 6 +- dashboard/menu/menu.component.html | 10 +- dashboard/page/pages.component.html | 6 +- dashboard/portal/portals.component.html | 6 +- .../admin-tabs/admin-tabs.component.ts | 2 +- .../page-content/page-content.component.ts | 26 +- .../sidebar/layout.service.ts | 16 + .../role-users/role-users.component.html | 4 +- sharedComponents/navigation.component.less | 18 + sharedComponents/navigationBar.component.html | 315 +++++++++--------- sharedComponents/navigationBar.component.ts | 18 +- 16 files changed, 256 insertions(+), 203 deletions(-) create mode 100644 sharedComponents/navigation.component.less diff --git a/dashboard/divId/divIds.component.html b/dashboard/divId/divIds.component.html index 97c902fb..dce2a5e7 100644 --- a/dashboard/divId/divIds.component.html +++ b/dashboard/divId/divIds.component.html @@ -1,10 +1,10 @@
-
+
-
Admin Dashboard - Manage Classes
-

Super Admin

+
Admin Dashboard - Manage Classes
+

Super Admin

diff --git a/dashboard/divhelpcontent/class-help-content-form.component.html b/dashboard/divhelpcontent/class-help-content-form.component.html index fd58f6db..fb27f3a9 100644 --- a/dashboard/divhelpcontent/class-help-content-form.component.html +++ b/dashboard/divhelpcontent/class-help-content-form.component.html @@ -1,14 +1,14 @@
-
+
-
+
Admin Dashboard - {{pageHelpContent ? 'Update ' : 'Add new '}} class help text
-

{{page.name}} (unsaved changes)

+

{{page.name}} (unsaved changes)

diff --git a/dashboard/divhelpcontent/class-help-contents.component.html b/dashboard/divhelpcontent/class-help-contents.component.html index a6ffdba6..ded1d491 100644 --- a/dashboard/divhelpcontent/class-help-contents.component.html +++ b/dashboard/divhelpcontent/class-help-contents.component.html @@ -1,14 +1,14 @@
-
+
-
+
Admin Dashboard - Manage class help texts
-

{{page.name}}

+

{{page.name}}

diff --git a/dashboard/entity/entities.component.html b/dashboard/entity/entities.component.html index dff6c23d..5679f8b2 100644 --- a/dashboard/entity/entities.component.html +++ b/dashboard/entity/entities.component.html @@ -1,12 +1,12 @@
-
+
-
Admin Dashboard - Manage Entities
-

{{name?name:'Super Admin'}}

+
Admin Dashboard - Manage Entities
+

{{name?name:'Super Admin'}}

diff --git a/dashboard/helpTexts/page-help-content-form.component.html b/dashboard/helpTexts/page-help-content-form.component.html index 2f51259b..b7de8282 100644 --- a/dashboard/helpTexts/page-help-content-form.component.html +++ b/dashboard/helpTexts/page-help-content-form.component.html @@ -1,14 +1,14 @@
-
- +
+
-
+
Admin Dashboard - {{pageHelpContent ? 'Update ' : 'Add new '}} page help text
-

{{page.name}} (unsaved changes)

+

{{page.name}} (unsaved changes)

diff --git a/dashboard/helpTexts/page-help-contents.component.html b/dashboard/helpTexts/page-help-contents.component.html index 4db671a0..30e7ed91 100644 --- a/dashboard/helpTexts/page-help-contents.component.html +++ b/dashboard/helpTexts/page-help-contents.component.html @@ -1,14 +1,14 @@
-
+
-
+
Admin Dashboard - Manage page help texts
-

{{page.name}}

+

{{page.name}}

diff --git a/dashboard/menu/menu.component.html b/dashboard/menu/menu.component.html index 777914b3..4749bf59 100644 --- a/dashboard/menu/menu.component.html +++ b/dashboard/menu/menu.component.html @@ -1,17 +1,15 @@
-
+
-
Admin Dashboard - Manage Menu Items
-

{{name ? name : 'Super Admin'}}

+
Admin Dashboard - Manage Menu Items
+

{{name ? name : 'Super Admin'}}

-
- -
+
diff --git a/dashboard/page/pages.component.html b/dashboard/page/pages.component.html index 0cea5f0f..d4a544be 100644 --- a/dashboard/page/pages.component.html +++ b/dashboard/page/pages.component.html @@ -1,12 +1,12 @@
-
+
-
Admin Dashboard - Manage Pages
-

{{name ? name : 'Super Admin'}}

+
Admin Dashboard - Manage Pages
+

{{name ? name : 'Super Admin'}}

diff --git a/dashboard/portal/portals.component.html b/dashboard/portal/portals.component.html index 36a6b718..3fb6cf00 100644 --- a/dashboard/portal/portals.component.html +++ b/dashboard/portal/portals.component.html @@ -1,10 +1,10 @@
-
+
-
Admin Dashboard - Manage Portals
-

Super Admin

+
Admin Dashboard - Manage Portals
+

Super Admin

diff --git a/dashboard/sharedComponents/admin-tabs/admin-tabs.component.ts b/dashboard/sharedComponents/admin-tabs/admin-tabs.component.ts index 5e4d92cb..ad59e382 100644 --- a/dashboard/sharedComponents/admin-tabs/admin-tabs.component.ts +++ b/dashboard/sharedComponents/admin-tabs/admin-tabs.component.ts @@ -7,7 +7,7 @@ import {ActivatedRoute} from "@angular/router"; @Component({ selector: 'admin-tabs', template: ` -
    +
    • Portals
    • Pages
    • Entities
      • diff --git a/dashboard/sharedComponents/page-content/page-content.component.ts b/dashboard/sharedComponents/page-content/page-content.component.ts index f0d4ed9c..a6ab617a 100644 --- a/dashboard/sharedComponents/page-content/page-content.component.ts +++ b/dashboard/sharedComponents/page-content/page-content.component.ts @@ -1,4 +1,5 @@ import {AfterViewInit, Component, ElementRef, Input, OnDestroy, OnInit, ViewChild} from "@angular/core"; +import {LayoutService} from "../sidebar/layout.service"; declare var UIkit; @@ -37,10 +38,10 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy { public shouldSticky: boolean = true; @ViewChild('header') header: ElementRef; @ViewChild('actions') actions: ElementRef; - public - private observer: IntersectionObserver; + private headerObserver: IntersectionObserver; + private bottomObserver: IntersectionObserver; - constructor() { + constructor(private layoutService: LayoutService) { } ngOnInit() { @@ -62,19 +63,30 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy { if(typeof document !== "undefined") { let bottom = document.getElementById('bottom'); if(bottom) { - this.observer = new IntersectionObserver(entries => { + this.bottomObserver = new IntersectionObserver(entries => { entries.forEach(entry => { this.shouldSticky = !entry.isIntersecting; }) }); - this.observer.observe(bottom); + this.bottomObserver.observe(bottom); + } + if(this.header) { + this.headerObserver = new IntersectionObserver(entries => { + entries.forEach(entry => { + this.layoutService.setReplaceHeader(!entry.isIntersecting); + }) + }, {threshold: 0.5}); + this.headerObserver.observe(this.header.nativeElement); } } } ngOnDestroy() { - if(this.observer) { - this.observer.disconnect(); + if(this.bottomObserver) { + this.bottomObserver.disconnect(); + } + if(this.headerObserver) { + this.headerObserver.disconnect(); } } } diff --git a/dashboard/sharedComponents/sidebar/layout.service.ts b/dashboard/sharedComponents/sidebar/layout.service.ts index 8c8505d3..0265b3f8 100644 --- a/dashboard/sharedComponents/sidebar/layout.service.ts +++ b/dashboard/sharedComponents/sidebar/layout.service.ts @@ -41,6 +41,13 @@ export class LayoutService { * Add activeMenuItem: string on data of route config, if page should activate a specific MenuItem and route url does not match. */ private activeMenuItemSubject: BehaviorSubject = new BehaviorSubject(""); + + /** + * Change to true will replace your Nav Header with the replaceHeader of your object. + * Be sure that replaceHeader exists. + */ + private replaceHeaderSubject: BehaviorSubject = new BehaviorSubject(false); + private observer: IntersectionObserver; sub: any; ngOnDestroy() { @@ -56,6 +63,7 @@ export class LayoutService { constructor(private router: Router) { this.sub = this.router.events.subscribe(event => { if (event instanceof ActivationStart) { + this.setReplaceHeader(false); let data = event.snapshot.data; if (data['hasSidebar'] !== undefined && data['hasSidebar'] === false) { @@ -144,6 +152,14 @@ export class LayoutService { this.isFrontPageSubject.next(value); } + get replaceHeader(): Observable { + return this.replaceHeaderSubject.asObservable(); + } + + setReplaceHeader(value: boolean) { + this.replaceHeaderSubject.next(value); + } + get isSmallScreen(): boolean { return this.isSmallScreenSubject.getValue(); } diff --git a/dashboard/users/role-users/role-users.component.html b/dashboard/users/role-users/role-users.component.html index 5058e734..83681f59 100644 --- a/dashboard/users/role-users/role-users.component.html +++ b/dashboard/users/role-users/role-users.component.html @@ -1,9 +1,9 @@ -
      +
      -
      +
        diff --git a/sharedComponents/navigation.component.less b/sharedComponents/navigation.component.less new file mode 100644 index 00000000..b3e7ce5f --- /dev/null +++ b/sharedComponents/navigation.component.less @@ -0,0 +1,18 @@ +@keyframes animation-logo { + 0% { + transform: translateY(100%); + opacity: 0; + } + 50% { + transform: translateY(30%); + opacity: 0; + } + 100% { + transform: translateY(0); + opacity: 1; + } +} + +.animation-logo { + animation-name: animation-logo; +} diff --git a/sharedComponents/navigationBar.component.html b/sharedComponents/navigationBar.component.html index 50a216fe..74e7e632 100644 --- a/sharedComponents/navigationBar.component.html +++ b/sharedComponents/navigationBar.component.html @@ -1,9 +1,8 @@ -
        -
        -
        -
        -
        -
        diff --git a/sharedComponents/navigationBar.component.ts b/sharedComponents/navigationBar.component.ts index 4084e21a..59c48575 100644 --- a/sharedComponents/navigationBar.component.ts +++ b/sharedComponents/navigationBar.component.ts @@ -17,19 +17,21 @@ export interface Header { title: string, logoUrl: string, logoSmallUrl: string, + logoInfo?: string, position: 'left' | 'center' | 'right', - badge: boolean - stickyAnimation?: boolean - menuPosition?: 'center' | 'right' + badge: boolean, + darkBg?: boolean, + menuPosition?: 'center' | 'right', + replaceHeader?: Header; } @Component({ selector: 'navbar', - templateUrl: 'navigationBar.component.html' + templateUrl: 'navigationBar.component.html', + styleUrls: ['navigation.component.less'] }) export class NavigationBarComponent implements OnInit, OnDestroy { @Input() portal: string = 'connect'; - @Input() dark: boolean = false; @Input() onlyTop: boolean = false; @Input() logoPath: string = 'assets/common-assets/'; @Input() userMenu: boolean = true; @@ -48,6 +50,8 @@ export class NavigationBarComponent implements OnInit, OnDestroy { @Input() searchPlaceHolder: string = 'Search for research results'; @Input() showLogo: boolean = true; @Input() offCanvasFlip: boolean = false; + replaceHeader: boolean = false; + public activeHeader: Header; keyword: string = ''; public isAuthorized: boolean = false; subs: Subscription[] = []; @@ -130,6 +134,10 @@ export class NavigationBarComponent implements OnInit, OnDestroy { ) ); } + this.subs.push(this.layoutService.replaceHeader.subscribe(replaceHeader => { + this.replaceHeader = this.header.replaceHeader && replaceHeader; + this.activeHeader = this.replaceHeader?this.header.replaceHeader:this.header; + })); } isEnabled(required, enabled) {