From 1e56ef66ec1e78a76b3cc49be004a21c17ff358a Mon Sep 17 00:00:00 2001 From: "k.triantafyllou" Date: Thu, 9 Feb 2023 12:09:49 +0200 Subject: [PATCH] 1. Simplify logout process. 2. Deprecate isSmallScreen in Layout service. 3. Make some inmprovements in slider-tabs and add slider-arrow for previous and next. 4. Navigation Bar: Remove badge and header logo info from mobiles. 5. Page Content: Fix paddings for mobiles and add events for sticky status changes. --- .../page-content/page-content.component.ts | 34 ++++++++---- .../sidebar/layout.service.ts | 7 +++ login/userMini.component.ts | 3 -- monitor/methodology/terminology.component.ts | 2 +- services/user-management.service.ts | 1 - sharedComponents/navigationBar.component.html | 12 ++--- .../slider-utils/slider-arrow.component.ts | 25 +++++++++ .../slider-utils/slider-utils.module.ts | 11 ++++ sharedComponents/tabs/slider-tab.component.ts | 6 +++ .../tabs/slider-tabs.component.ts | 53 +++++++++++++------ sharedComponents/tabs/slider-tabs.module.ts | 3 +- 11 files changed, 115 insertions(+), 42 deletions(-) create mode 100644 sharedComponents/slider-utils/slider-arrow.component.ts create mode 100644 sharedComponents/slider-utils/slider-utils.module.ts diff --git a/dashboard/sharedComponents/page-content/page-content.component.ts b/dashboard/sharedComponents/page-content/page-content.component.ts index 2642a1e4..35f64427 100644 --- a/dashboard/sharedComponents/page-content/page-content.component.ts +++ b/dashboard/sharedComponents/page-content/page-content.component.ts @@ -22,24 +22,24 @@ declare var ResizeObserver;
-
+
-
-
+
-
+
-
+
@@ -47,13 +47,13 @@ declare var ResizeObserver;
-
+
-
+
@@ -64,8 +64,11 @@ declare var ResizeObserver; export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy { @Input() public headerSticky: boolean = false; + @Input() + public border: boolean = true; public offset: number; public shouldSticky: boolean = true; + public isMobile: boolean = false; @ViewChild('header') header: ElementRef; @ViewChild('actions') actions: ElementRef; public footer_height: number = 0; @@ -74,6 +77,7 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy { header: null, footer: null } + public isStickyActive: boolean = false; subscriptions = []; constructor(private layoutService: LayoutService, private cdr: ChangeDetectorRef, @@ -85,16 +89,16 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy { this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-height')); this.stickyBugWorkaround(); } + this.subscriptions.push(this.layoutService.isMobile.subscribe(isMobile => { + this.isMobile = isMobile; + this.cdr.detectChanges(); + })); } get isBrowser() { return this.platformId === 'browser'; } - get isStickyActive() { - return this.sticky.header?.isActive; - } - ngAfterViewInit() { if (typeof document !== "undefined") { this.observeStickyFooter(); @@ -103,6 +107,14 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy { media: '@m', offset: this.offset }); + this.subscriptions.push(UIkit.util.on(document, 'active', '#' + this.sticky.header.$el.id, () => { + this.isStickyActive = true; + this.cdr.detectChanges(); + })); + this.subscriptions.push(UIkit.util.on(document, 'inactive', '#' + this.sticky.header.$el.id, () => { + this.isStickyActive = false; + this.cdr.detectChanges(); + })); } if (this.sticky_footer) { let footer_offset = this.calcStickyFooterOffset(this.sticky_footer.nativeElement); diff --git a/dashboard/sharedComponents/sidebar/layout.service.ts b/dashboard/sharedComponents/sidebar/layout.service.ts index ca0e6d63..d39fb765 100644 --- a/dashboard/sharedComponents/sidebar/layout.service.ts +++ b/dashboard/sharedComponents/sidebar/layout.service.ts @@ -46,6 +46,7 @@ export class LayoutService { private isFrontPageSubject: BehaviorSubject = new BehaviorSubject(false); /** * Add isSmallScreen: true on data of route config, if screen is small. + * @deprecated */ private isSmallScreenSubject: BehaviorSubject = new BehaviorSubject(false); /** @@ -233,10 +234,16 @@ export class LayoutService { this.replaceHeaderSubject.next(value); } + /** + * @deprecated + * */ get isSmallScreen(): boolean { return this.isSmallScreenSubject.getValue(); } + /** + * @deprecated + * */ setSmallScreen(value: boolean) { this.isSmallScreenSubject.next(value); } diff --git a/login/userMini.component.ts b/login/userMini.component.ts index f5b8b021..b1795bf6 100644 --- a/login/userMini.component.ts +++ b/login/userMini.component.ts @@ -142,9 +142,6 @@ export class UserMiniComponent implements OnInit, OnChanges { if (this.user) { this.userManagementService.logout(); } - this.loggedIn = false; - this.isAuthorized = false; - this.user = new User(); } logIn() { diff --git a/monitor/methodology/terminology.component.ts b/monitor/methodology/terminology.component.ts index a68d770b..ded7fbcd 100644 --- a/monitor/methodology/terminology.component.ts +++ b/monitor/methodology/terminology.component.ts @@ -94,7 +94,7 @@ declare var ResizeObserver;
-
+