mirror of
https://github.com/paperless-ngx/paperless-ngx.git
synced 2026-07-09 13:35:10 +00:00
More converting to direct signals
This commit is contained in:
@@ -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(' ')
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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)
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user