Implement dynamic container height adjustment in NickGeneratorComponent based on header and footer dimensions. Refactor HTML structure for improved dark mode styling and accessibility. Optimize component lifecycle by adding AfterViewInit and OnDestroy handling with a ResizeObserver.
This commit is contained in:
@@ -12,96 +12,97 @@
|
||||
</app-header>
|
||||
|
||||
<main>
|
||||
<section class="containerNick">
|
||||
<div class="controls">
|
||||
<section class="darkmodeSection full-width">
|
||||
<div class="containerNick">
|
||||
<div class="controls">
|
||||
|
||||
@for (part of parts; track $index; let i = $index) {
|
||||
<div class="part">
|
||||
<div class="row">
|
||||
<mat-form-field class="textField" appearance="outline">
|
||||
<mat-label>Text</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[value]="part.text"
|
||||
(input)="part.text = ($any($event.target).value || ''); onInputChanged()"
|
||||
maxlength="16"
|
||||
/>
|
||||
<mat-hint align="end">{{ part.text.length }} / 16</mat-hint>
|
||||
</mat-form-field>
|
||||
@for (part of parts; track $index; let i = $index) {
|
||||
<div class="part">
|
||||
<div class="row">
|
||||
<mat-form-field class="textField" appearance="outline">
|
||||
<mat-label>Text</mat-label>
|
||||
<input
|
||||
matInput
|
||||
[value]="part.text"
|
||||
(input)="part.text = ($any($event.target).value || ''); onInputChanged()"
|
||||
maxlength="16"
|
||||
/>
|
||||
<mat-hint align="end">{{ part.text.length }} / 16</mat-hint>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-checkbox
|
||||
class="checkbox"
|
||||
[(ngModel)]="part.gradient"
|
||||
(change)="onGradientToggle(i)"
|
||||
>Gradient
|
||||
</mat-checkbox
|
||||
>
|
||||
<mat-checkbox
|
||||
class="checkbox"
|
||||
[(ngModel)]="part.gradient"
|
||||
(change)="onGradientToggle(i)"
|
||||
>Gradient
|
||||
</mat-checkbox>
|
||||
|
||||
<mat-form-field
|
||||
class="colorField"
|
||||
appearance="outline"
|
||||
[style.visibility]="(part.continuation && i>0 && parts[i-1]?.gradient && part.gradient) ? 'hidden' : 'visible'">
|
||||
<mat-label>Color A</mat-label>
|
||||
<input
|
||||
matInput
|
||||
type="color"
|
||||
[value]="part.colorA"
|
||||
(input)="part.colorA = $any($event.target).value; onInputChanged()"
|
||||
/>
|
||||
</mat-form-field>
|
||||
<mat-form-field
|
||||
class="colorField"
|
||||
appearance="outline"
|
||||
[style.visibility]="(part.continuation && i>0 && parts[i-1]?.gradient && part.gradient) ? 'hidden' : 'visible'">
|
||||
<mat-label>Color A</mat-label>
|
||||
<input
|
||||
matInput
|
||||
type="color"
|
||||
[value]="part.colorA"
|
||||
(input)="part.colorA = $any($event.target).value; onInputChanged()"
|
||||
/>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-form-field
|
||||
class="colorField"
|
||||
appearance="outline"
|
||||
[style.visibility]="part.gradient ? 'visible' : 'hidden'">
|
||||
<mat-label>Color B</mat-label>
|
||||
<input
|
||||
matInput
|
||||
type="color"
|
||||
[value]="part.colorB"
|
||||
(input)="part.colorB = $any($event.target).value; onInputChanged()"
|
||||
/>
|
||||
</mat-form-field>
|
||||
<mat-form-field
|
||||
class="colorField"
|
||||
appearance="outline"
|
||||
[style.visibility]="part.gradient ? 'visible' : 'hidden'">
|
||||
<mat-label>Color B</mat-label>
|
||||
<input
|
||||
matInput
|
||||
type="color"
|
||||
[value]="part.colorB"
|
||||
(input)="part.colorB = $any($event.target).value; onInputChanged()"
|
||||
/>
|
||||
</mat-form-field>
|
||||
|
||||
<mat-checkbox
|
||||
class="checkbox"
|
||||
[(ngModel)]="part.continuation"
|
||||
(change)="onContinuationToggle(i)"
|
||||
[disabled]="i===0 || !part.gradient || !parts[i-1]?.gradient"
|
||||
>Continuation
|
||||
</mat-checkbox
|
||||
>
|
||||
<mat-checkbox
|
||||
class="checkbox"
|
||||
[(ngModel)]="part.continuation"
|
||||
(change)="onContinuationToggle(i)"
|
||||
[disabled]="i===0 || !part.gradient || !parts[i-1]?.gradient"
|
||||
>Continuation
|
||||
</mat-checkbox
|
||||
>
|
||||
</div>
|
||||
|
||||
@if (part.invalid) {
|
||||
<div class="invalid">(min 1 – max 16 chars{{ part.gradient ? '' : ' for non-empty text' }})</div>
|
||||
}
|
||||
<mat-divider></mat-divider>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (part.invalid) {
|
||||
<div class="invalid">(min 1 – max 16 chars{{ part.gradient ? '' : ' for non-empty text' }})</div>
|
||||
}
|
||||
<mat-divider></mat-divider>
|
||||
<div class="buttons">
|
||||
<button mat-raised-button (click)="addPart()">Add Part</button>
|
||||
<button mat-raised-button (click)="deletePart()">Remove Part</button>
|
||||
</div>
|
||||
}
|
||||
|
||||
<div class="buttons">
|
||||
<button mat-raised-button (click)="addPart()">Add Part</button>
|
||||
<button mat-raised-button (click)="deletePart()">Remove Part</button>
|
||||
@if (showCommands) {
|
||||
<div class="commands">
|
||||
<div class="commandRow">
|
||||
<div class="command">{{ tryCmd }}</div>
|
||||
<button mat-stroked-button (click)="copy(tryCmd, 'try')">{{ tryCommandButtonContent }}</button>
|
||||
</div>
|
||||
<div class="commandRow">
|
||||
<div class="command">{{ requestCmd }}</div>
|
||||
<button mat-stroked-button (click)="copy(requestCmd, 'request')">{{ requestCommandButtonContent }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (showPreview) {
|
||||
<div class="preview" [innerHTML]="previewHtml"></div>
|
||||
}
|
||||
</div>
|
||||
|
||||
@if (showCommands) {
|
||||
<div class="commands">
|
||||
<div class="commandRow">
|
||||
<div class="command">{{ tryCmd }}</div>
|
||||
<button mat-stroked-button (click)="copy(tryCmd, 'try')">{{ tryCommandButtonContent }}</button>
|
||||
</div>
|
||||
<div class="commandRow">
|
||||
<div class="command">{{ requestCmd }}</div>
|
||||
<button mat-stroked-button (click)="copy(requestCmd, 'request')">{{ requestCommandButtonContent }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
}
|
||||
|
||||
@if (showPreview) {
|
||||
<div class="preview" [innerHTML]="previewHtml"></div>
|
||||
}
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
Reference in New Issue
Block a user