More converting to direct signals

This commit is contained in:
shamoon
2026-07-08 15:26:38 -07:00
parent 1b0232a4d7
commit 08871964c3
8 changed files with 25 additions and 81 deletions
@@ -1,10 +1,10 @@
@if (active) {
@if (active()) {
<button class="position-absolute top-0 start-100 translate-middle badge bg-secondary border border-light rounded-pill p-1" title="Clear" i18n-title (click)="onClick($event)">
@if (!isNumbered && selected) {
@if (!isNumbered() && selected()) {
<i-bs class="check" width="1em" height="1em" name="check-lg"></i-bs>
}
@if (isNumbered) {
<div class="number">{{number}}<span class="visually-hidden">selected</span></div>
@if (isNumbered()) {
<div class="number">{{number()}}<span class="visually-hidden">selected</span></div>
}
<i-bs class="x" width=".9em" height="1em" name="x-lg"></i-bs>
</button>
@@ -21,20 +21,20 @@ describe('ClearableBadgeComponent', () => {
})
it('should support selected', () => {
component.selected = true
expect(component.active).toBeTruthy()
fixture.componentRef.setInput('selected', true)
expect(component.active()).toBeTruthy()
})
it('should support numbered', () => {
component.number = 3
fixture.componentRef.setInput('number', 3)
fixture.detectChanges()
expect(component.active).toBeTruthy()
expect(component.active()).toBeTruthy()
expect((fixture.nativeElement as HTMLDivElement).textContent).toContain('3')
})
it('should support selected', () => {
let clearedResult
component.selected = true
fixture.componentRef.setInput('selected', true)
fixture.detectChanges()
component.cleared.subscribe((clear) => {
clearedResult = clear
@@ -1,4 +1,4 @@
import { Component, EventEmitter, Input, Output, signal } from '@angular/core'
import { Component, computed, EventEmitter, input, Output } from '@angular/core'
import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
@Component({
@@ -8,37 +8,15 @@ import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
imports: [NgxBootstrapIconsModule],
})
export class ClearableBadgeComponent {
private numberSignal = signal<number>(undefined)
private selectedSignal = signal<boolean>(undefined)
@Input()
get number(): number {
return this.numberSignal()
}
set number(number: number) {
this.numberSignal.set(number)
}
@Input()
get selected(): boolean {
return this.selectedSignal()
}
set selected(selected: boolean) {
this.selectedSignal.set(selected)
}
readonly number = input<number>(undefined)
readonly selected = input<boolean>(undefined)
@Output()
cleared: EventEmitter<boolean> = new EventEmitter()
get active(): boolean {
return this.selected || this.number > -1
}
readonly active = computed(() => this.selected() || this.number() > -1)
get isNumbered(): boolean {
return this.number > -1
}
readonly isNumbered = computed(() => this.number() > -1)
onClick(event: PointerEvent) {
this.cleared.emit(true)
@@ -1,11 +1,11 @@
<div class="modal-header">
<h4 class="modal-title" id="modal-basic-title">{{title}}</h4>
<h4 class="modal-title" id="modal-basic-title">{{title()}}</h4>
<button type="button" class="btn-close" aria-label="Close" (click)="close()"></button>
</div>
<div class="modal-body">
<table class="table">
<tbody>
@for (key of hotkeys.entries(); track key[0]) {
@for (key of hotkeys().entries(); track key[0]) {
<tr>
<td>{{ key[1] }}</td>
<td class="d-flex justify-content-end">
@@ -20,24 +20,8 @@ const SYMBOLS = {
})
export class HotkeyDialogComponent {
activeModal = inject(NgbActiveModal)
private titleSignal = signal($localize`Keyboard shortcuts`)
private hotkeysSignal = signal<Map<string, string>>(new Map())
public get title(): string {
return this.titleSignal()
}
public set title(title: string) {
this.titleSignal.set(title)
}
public get hotkeys(): Map<string, string> {
return this.hotkeysSignal()
}
public set hotkeys(hotkeys: Map<string, string>) {
this.hotkeysSignal.set(hotkeys)
}
readonly title = signal($localize`Keyboard shortcuts`)
readonly hotkeys = signal<Map<string, string>>(new Map())
public close(): void {
this.activeModal.close()
@@ -1,7 +1,7 @@
@if (customLogo) {
<img src="{{customLogo}}" [class]="getClasses()" [attr.style]="'height:'+height" />
<img src="{{customLogo}}" [class]="getClasses()" [attr.style]="'height:'+height()" />
} @else {
<svg [class]="getClasses()" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2670 860" [attr.style]="'height:'+height">
<svg [class]="getClasses()" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2670 860" [attr.style]="'height:'+height()">
<path class="leaf" style="fill:#005616;" d="M2227.4,821.2c-6.1-17.8-18.1-53.6-19.2-53.4-174.7-77.8-159.8-201.2-117.5-304.2,26.3,120.1,235.3,130.3,128,294.1-.7,2,8.8,24.3,17.1,44.9,19.9-45.4,51.3-101.1,48.8-105.7-199.9-357.4,278.8-444.7,350.7-690.2,72.6,220.1,46.5,577.5-330.4,713.3-1.8,1.2-55.6,130-58.5,131.4-.2-1.9-29.1,2.5-26.4-7.6,1.4-6.2,4.2-14.2,7.2-22.4h0v-.2h.2,0ZM2211.7,731.2c42.3-62.9-11.1-105.7-49.8-133.2,71,94,58.1,105.7,49.8,133.2h0Z"/>
<g class="text" style="fill: #000;">
<path class="st1" d="M654.6,393.2l-.7,137.7h-85.5V188.7h85.4c.4,11.3-.3,21.7,1.3,33.8,23.1-34.1,62.3-50,101.1-38.3,16.5,5,29.6,16.4,39.7,30,34.4,46.5,35.1,134,3.6,182.2-10.1,14.4-22.5,26.9-39,33.4-39.5,15.7-81,1.1-105.9-36.6h0ZM721,362.2c21-26.1,21-82.7-.4-108.4-13.2-15.9-36.4-16.1-49.9-.4-22.2,25.8-21.7,85.3.5,110.1,13.6,15.2,36.6,15,49.7-1.3h.1Z"/>
@@ -1,4 +1,4 @@
import { Component, Input, inject, signal } from '@angular/core'
import { Component, inject, input } from '@angular/core'
import { SETTINGS_KEYS } from 'src/app/data/ui-settings'
import { SettingsService } from 'src/app/services/settings.service'
import { environment } from 'src/environments/environment'
@@ -10,26 +10,8 @@ import { environment } from 'src/environments/environment'
})
export class LogoComponent {
private settingsService = inject(SettingsService)
private extraClassesSignal = signal<string>(undefined)
private heightSignal = signal('6em')
@Input()
get extra_classes(): string {
return this.extraClassesSignal()
}
set extra_classes(extraClasses: string) {
this.extraClassesSignal.set(extraClasses)
}
@Input()
get height(): string {
return this.heightSignal()
}
set height(height: string) {
this.heightSignal.set(height)
}
readonly extra_classes = input<string>(undefined)
readonly height = input('6em')
get customLogo(): string {
return this.settingsService.get(SETTINGS_KEYS.APP_LOGO)?.length
@@ -41,6 +23,6 @@ export class LogoComponent {
}
getClasses() {
return ['logo'].concat(this.extra_classes).join(' ')
return ['logo'].concat(this.extra_classes()).join(' ')
}
}
+1 -1
View File
@@ -94,6 +94,6 @@ export class HotKeyService {
private openHelpModal() {
const modal = this.modalService.open(HotkeyDialogComponent)
modal.componentInstance.hotkeys = this.hotkeys
modal.componentInstance.hotkeys.set(this.hotkeys)
}
}