From 17ba5c9640dbadafd2457cedb35fce850b9453fd Mon Sep 17 00:00:00 2001 From: Igor Propisnov Date: Tue, 10 Sep 2024 16:56:40 +0200 Subject: [PATCH] set backgrounds --- .../layout/main-layout/layout.component.html | 6 +- .../layout/main-layout/layout.component.ts | 124 +++++++----------- 2 files changed, 49 insertions(+), 81 deletions(-) diff --git a/frontend/src/app/layout/main-layout/layout.component.html b/frontend/src/app/layout/main-layout/layout.component.html index 83ddb7b..06733de 100644 --- a/frontend/src/app/layout/main-layout/layout.component.html +++ b/frontend/src/app/layout/main-layout/layout.component.html @@ -1,7 +1,9 @@
-
+
[APP-NAME] @@ -384,7 +386,7 @@ 'lg:ml-16': isCompact && !isDrawerOpen, 'ml-0': !isDrawerOpen || isCompact }"> -
+
diff --git a/frontend/src/app/layout/main-layout/layout.component.ts b/frontend/src/app/layout/main-layout/layout.component.ts index fb858b0..f153160 100644 --- a/frontend/src/app/layout/main-layout/layout.component.ts +++ b/frontend/src/app/layout/main-layout/layout.component.ts @@ -100,13 +100,13 @@ interface BottomMenuItem { state( 'open', style({ - width: '16rem', // 256px + width: '16rem', }) ), state( 'compact', style({ - width: '4rem', // 64px + width: '4rem', }) ), state( @@ -221,12 +221,13 @@ export class LayoutComponent implements OnInit, OnDestroy { ) {} @HostListener('window:resize', ['$event']) - public onResize(event: any): void { - this.isMobile = event.target.innerWidth < 1024; - this.adjustDrawerState(event.target.innerWidth); + public onResize(event: Event): void { + this.isMobile = (event.target as Window).innerWidth < 1024; + this.adjustDrawerState((event.target as Window).innerWidth); } public ngOnInit(): void { + this.setBackground(); this.adjustDrawerState(window.innerWidth); window.addEventListener('resize', this.onResize.bind(this)); @@ -260,21 +261,21 @@ export class LayoutComponent implements OnInit, OnDestroy { public toggleDrawer(): void { this.isDrawerOpen = !this.isDrawerOpen; - this.isCompact = !this.isDrawerOpen; // Wechsel zwischen kompaktem und vollem Zustand + this.isCompact = !this.isDrawerOpen; } public toggleCompactMode(): void { this.isCompact = !this.isCompact; - this.isDrawerOpen = !this.isCompact; // Wenn kompaktes Mode aktiviert wird, Drawer geschlossen + this.isDrawerOpen = !this.isCompact; } public adjustDrawerState(width: number): void { if (width < 1024) { this.isCompact = true; - this.isDrawerOpen = false; // Kompaktmodus auf mobilen Geräten + this.isDrawerOpen = false; } else { this.isCompact = false; - this.isDrawerOpen = true; // Vollmodus auf Desktop + this.isDrawerOpen = true; } } @@ -294,6 +295,41 @@ export class LayoutComponent implements OnInit, OnDestroy { item.isOpen = !item.isOpen; } + public setBackground(): void { + const theme = this.themeService.getTheme(); + let opacity: number; + + if (theme === 'dark') { + opacity = 0.05; + } else { + opacity = 0.1; + } + + const colorPrimary = getComputedStyle( + this.el.nativeElement + ).getPropertyValue('--p'); + + const colorPrimaryC = getComputedStyle( + this.el.nativeElement + ).getPropertyValue('--pc'); + + const svgUrlMainContent = this.backgroundPatternService.getPlusPattern( + colorPrimary, + opacity + ); + const svgUrlNavigation = this.backgroundPatternService.getBankNotePattern( + colorPrimaryC, + opacity + ); + + this.mainContent = { + 'background-image': `url("${svgUrlMainContent}")`, + }; + this.navigation = { + 'background-image': `url("${svgUrlNavigation}")`, + }; + } + private updateMenuState(currentRoute: string): void { this.menuItems.forEach((item: TopMenuItem) => { // Set top-level items active state @@ -320,76 +356,6 @@ export class LayoutComponent implements OnInit, OnDestroy { }); } - // @HostListener('window:resize', ['$event']) - // public onResize(): void { - // if (window.innerWidth >= 768) { - // this.showMobileMenu = false; - // this.isCollapsed = false; - // } else { - // this.isDesktopCollapsed = false; - // this.isCollapsed = true; - // this.showMobileMenu = false; - // } - // } - - // public setBackground(): void { - // const theme = this.themeService.getTheme(); - // let opacity: number; - - // if (theme === 'dark') { - // opacity = 0.05; - // } else { - // opacity = 0.1; - // } - - // const colorPrimary = getComputedStyle( - // this.el.nativeElement - // ).getPropertyValue('--p'); - - // const colorPrimaryC = getComputedStyle( - // this.el.nativeElement - // ).getPropertyValue('--pc'); - - // const svgUrlMainContent = this.backgroundPatternService.getPlusPattern( - // colorPrimary, - // opacity - // ); - // const svgUrlNavigation = this.backgroundPatternService.getBankNotePattern( - // colorPrimaryC, - // opacity - // ); - - // this.mainContent = { - // 'background-image': `url("${svgUrlMainContent}")`, - // }; - // this.navigation = { - // 'background-image': `url("${svgUrlNavigation}")`, - // }; - // } - - // public toggleSidebar(): void { - // if (window.innerWidth < 768) { - // this.showMobileMenu = !this.showMobileMenu; - // this.isCollapsed = !this.showMobileMenu; - // } else { - // this.isDesktopCollapsed = !this.isDesktopCollapsed; - // } - // } - - // public toggleDesktopSidebar(): void { - // this.isDesktopCollapsed = !this.isDesktopCollapsed; - // } - - // public setActive(item: TopMenuItem): void { - // this.menuItems.forEach((menu: TopMenuItem) => { - // menu.active = false; - // }); - // this.router.navigate([item.route]); - // if (!this.isCollapsed && this.showMobileMenu) { - // this.toggleSidebar(); - // } - // } - private signout(): void { this.authService.signout().subscribe((response: SuccessDtoApiModel) => { if (response.success) {