carloshra/nexus-spa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update appconfigurator

Browse Source
This commit is contained in:
Mehmet Çetin
2025-01-06 14:05:55 +03:00
parent 00646eec9a
commit 8bebc68e24
1 changed files with 13 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/layout/appconfigurator.ts
View File

@@ -22,9 +22,7 @@ const presets = {
standalone: true, standalone: true,
imports: [CommonModule, FormsModule, InputSwitchModule, ButtonModule, RadioButtonModule, SelectButtonModule, ToggleSwitchModule], imports: [CommonModule, FormsModule, InputSwitchModule, ButtonModule, RadioButtonModule, SelectButtonModule, ToggleSwitchModule],
template: ` template: `
<div <div class="absolute top-[3.25rem] right-0 w-64 p-4 bg-surface-0 dark:bg-surface-900 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)]">
class="config-panel hidden absolute top-[3.25rem] right-0 w-64 p-4 bg-surface-0 dark:bg-surface-900 border border-surface rounded-border origin-top shadow-[0px_3px_5px_rgba(0,0,0,0.02),0px_0px_2px_rgba(0,0,0,0.05),0px_1px_4px_rgba(0,0,0,0.08)]"
>
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
<div> <div>
<span class="text-sm text-muted-color font-semibold">Primary</span> <span class="text-sm text-muted-color font-semibold">Primary</span>
@@ -34,11 +32,13 @@ const presets = {
type="button" type="button"
[title]="primaryColor.name" [title]="primaryColor.name"
(click)="updateColors($event, 'primary', primaryColor)" (click)="updateColors($event, 'primary', primaryColor)"
[ngClass]="{ 'active-color': primaryColor.name === selectedPrimaryColor() }" [ngClass]="{ 'outline-primary': primaryColor.name === selectedPrimaryColor() }"
class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
[style]="{ [style]="{
'background-color': primaryColor.name === 'noir' ? 'var(--text-color)' : primaryColor?.palette['500'] 'background-color': primaryColor.name === 'noir' ? 'var(--text-color)' : primaryColor?.palette['500']
}" }"
></button> >
</button>
} }
</div> </div>
</div> </div>
@@ -50,10 +50,11 @@ const presets = {
type="button" type="button"
[title]="surface.name" [title]="surface.name"
(click)="updateColors($event, 'surface', surface)" (click)="updateColors($event, 'surface', surface)"
[ngClass]="{ 'active-color': selectedSurfaceColor() ? selectedSurfaceColor() === surface.name : layoutService.layoutConfig().darkTheme ? surface.name === 'zinc' : surface.name === 'slate' }" [ngClass]="{ 'outline-primary': selectedSurfaceColor() ? selectedSurfaceColor() === surface.name : layoutService.layoutConfig().darkTheme ? surface.name === 'zinc' : surface.name === 'slate' }"
class="border-none w-5 h-5 rounded-full p-0 cursor-pointer outline-none outline-offset-1"
[style]="{ [style]="{
'background-color': surface.name === 'noir' ? 'var(--text-color)' : surface?.palette['500'] 'background-color': surface.name === 'noir' ? 'var(--text-color)' : surface?.palette['500']
}" }"
></button> ></button>
} }
</div> </div>
@@ -61,18 +62,17 @@ const presets = {
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<span class="text-sm text-muted-color font-semibold">Presets</span> <span class="text-sm text-muted-color font-semibold">Presets</span>
<p-selectbutton [options]="presets" [ngModel]="selectedPreset()" (ngModelChange)="onPresetChange($event)" [allowEmpty]="false" /> <p-selectbutton [options]="presets" [ngModel]="selectedPreset()" (ngModelChange)="onPresetChange($event)" [allowEmpty]="false" />
</div> </div>
<div class="flex flex-col gap-2"> <div class="flex flex-col gap-2">
<span class="text-sm text-muted-color font-semibold">Menu Mode</span> <span class="text-sm text-muted-color font-semibold">Menu Mode</span>
<p-selectbutton [ngModel]="menuMode()" (ngModelChange)="onMenuModeChange($event)" [options]="presets" [allowEmpty]="false" /> <p-selectbutton [ngModel]="menuMode()" (ngModelChange)="onMenuModeChange($event)" [options]="presets" [allowEmpty]="false" />
</div> </div>
</div> </div>
</div> </div>
`, `,
host: { host: {
class: 'config-panel hidden' class: 'config-panel hidden'
}, }
}) })
export class AppConfigurator { export class AppConfigurator {
config: PrimeNG = inject(PrimeNG); config: PrimeNG = inject(PrimeNG);
@@ -86,7 +86,6 @@ export class AppConfigurator {
ngOnInit() { ngOnInit() {
if (isPlatformBrowser(this.platformId)) { if (isPlatformBrowser(this.platformId)) {
this.onPresetChange(this.layoutService.layoutConfig().preset); this.onPresetChange(this.layoutService.layoutConfig().preset);
} }
} }