From 52f1abfdbf8f6ba3a0467302eeec1c88842617cf Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Thu, 3 Mar 2022 17:44:59 +0200 Subject: [PATCH] Change navbar to sticky only at top. Make page-content header sticky. Fix a bug in icons component --- .../page-content/page-content.component.ts | 81 ++------ .../sidebar/sideBar.component.html | 2 +- sharedComponents/navigationBar.component.html | 188 ++++++++---------- sharedComponents/navigationBar.component.ts | 1 - utils/icons/icons.component.ts | 4 +- 5 files changed, 112 insertions(+), 164 deletions(-) diff --git a/dashboard/sharedComponents/page-content/page-content.component.ts b/dashboard/sharedComponents/page-content/page-content.component.ts index 58aa68b8..7b9ce16e 100644 --- a/dashboard/sharedComponents/page-content/page-content.component.ts +++ b/dashboard/sharedComponents/page-content/page-content.component.ts @@ -1,82 +1,45 @@ -import { - AfterViewInit, - ChangeDetectorRef, - Component, - ElementRef, - HostListener, - OnDestroy, - ViewChild -} from "@angular/core"; -import {Observable, Subscription} from "rxjs"; -import {distinctUntilChanged} from "rxjs/operators"; +import {ChangeDetectorRef, Component, HostListener, OnDestroy, OnInit} from "@angular/core"; @Component({ selector: '[page-content]', template: `
-
- +
+
+ +
-
+
` }) -export class PageContentComponent implements OnDestroy, AfterViewInit{ - public height = 0; - private subscription: Subscription; - @ViewChild('header') header: ElementRef; +export class PageContentComponent implements OnInit, OnDestroy{ + private current; + public offset: string; constructor(private cdr: ChangeDetectorRef) { } - @HostListener('window:resize', ['$event']) - onResize(event) { - this.height = this.getHeight(); - this.cdr.detectChanges(); - } - - getHeight(): number{ - return this.header.nativeElement.offsetHeight; - } - - setupHeightMutationObserver() { - if (typeof document !== 'undefined') { - const observable = new Observable(observer => { - const callback = (mutationsList, observer2) => { - observer.next(this.getHeight()); - }; - - // Create an observer instance linked to the callback function - const elementObserver = new MutationObserver(callback); - - // Options for the observer (which mutations to observe) - const config = {attributes: true, attributeFilter: ['class'], childList: true, subtree: true}; - // Start observing the target node for configured mutations - elementObserver.observe(this.header.nativeElement, config); - }); - - this.subscription = observable - .pipe( - distinctUntilChanged()//if the value hasn't changed, don't continue - ) - .subscribe(newHeight => { - this.height = this.getHeight(); - this.cdr.detectChanges(); - }); + @HostListener('window:scroll', ['$event.target']) // for window scroll events + scroll(e) { + let scroll = e.scrollingElement.scrollTop; + if (scroll > this.current) { + this.offset = '0'; + } else { + this.offset = getComputedStyle(document.documentElement).getPropertyValue('--structure-header-height'); } + this.current = scroll; + this.cdr.detectChanges(); } - ngAfterViewInit() { - this.setupHeightMutationObserver(); - this.height = this.getHeight(); - this.cdr.detectChanges(); + ngOnInit() { + if(typeof window !== "undefined") { + this.current = window.pageYOffset; + } } ngOnDestroy() { - if(this.subscription) { - this.subscription.unsubscribe(); - } } } diff --git a/dashboard/sharedComponents/sidebar/sideBar.component.html b/dashboard/sharedComponents/sidebar/sideBar.component.html index 60aca113..de8830d8 100644 --- a/dashboard/sharedComponents/sidebar/sideBar.component.html +++ b/dashboard/sharedComponents/sidebar/sideBar.component.html @@ -7,7 +7,7 @@ [class.uk-open]="isTheActiveMenuItem(item)" [class.uk-parent]="item.items.length > 1">
diff --git a/sharedComponents/navigationBar.component.html b/sharedComponents/navigationBar.component.html index 1b92f92f..7ae6dba1 100644 --- a/sharedComponents/navigationBar.component.html +++ b/sharedComponents/navigationBar.component.html @@ -1,114 +1,100 @@
-
- BETA - -
-
- -
-
-
-
-
- -
-
+
+
+ +
+ + + - - - - +
-
-
-
- BETA +
+
+ BETA