igorpropisnov
/
mvp-ticket
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

set backgrounds

This commit is contained in:
Igor Hrenowitsch Propisnov 2024-09-10 16:56:40 +02:00
parent da92256699
commit 17ba5c9640
2 changed files with 49 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/app/layout/main-layout/layout.component.html
View File

@ -1,7 +1,9 @@
<div class="flex h-screen w-screen bg-base-200">
<div class="flex flex-col w-full lg:w-full bg-base-100 h-screen">
<!-- Header mit dem Burger-Menü -->
<header class="w-full navbar bg-primary text-primary-content z-40">
<header
[ngStyle]="navigation"
class="w-full navbar bg-primary text-primary-content z-40">
<div class="flex-1">
<a class="btn btn-ghost normal-case text-xl text-primary-content">
[APP-NAME]
@ -384,7 +386,7 @@
'lg:ml-16': isCompact && !isDrawerOpen,
'ml-0': !isDrawerOpen || isCompact
}">
<main class="flex-1">
<main [ngStyle]="mainContent" class="flex-1 w-full h-full">
<div class="w-full h-full flex items-center justify-center">
<div class="w-full max-w-5xl">
<router-outlet></router-outlet>

124
frontend/src/app/layout/main-layout/layout.component.ts
View File

@ -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) {