paradizelost/paperless-ngx
1
0
Fork 0
mirror of https://github.com/paperless-ngx/paperless-ngx.git synced 2025-10-04 01:52:42 -05:00
Code Issues Packages Projects Releases Wiki Activity

Enhancement: open color picker on swatch button click (#10994)

Browse Source
This commit is contained in:
shamoon
2025-10-02 21:29:59 -07:00
committed by GitHub
parent 502bbb2420
commit d609b386fe
2 changed files with 5 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src-ui/src/app/components/common/input/color/color.component.html
View File

@@ -1,19 +1,18 @@
<div class="mb-3"> <div class="mb-3">
@if (title) { @if (title) {
<label [for]="inputId">{{title}}</label> <label class="form-label" [for]="inputId">{{title}}</label>
} }
<div class="input-group" [class.is-invalid]="error"> <div class="input-group" [class.is-invalid]="error">
<span class="input-group-text" [style.background-color]="value">&nbsp;&nbsp;&nbsp;</span> <button type="button" class="input-group-text" [style.background-color]="value" (click)="colorPicker.toggle()">&nbsp;&nbsp;&nbsp;</button>
<ng-template #popContent> <ng-template #popContent>
<div style="min-width: 200px;" class="pb-3"> <div style="min-width: 200px;" class="pb-3">
<color-slider [color]="value" (onChangeComplete)="colorChanged($event.color.hex)"></color-slider> <color-slider [color]="value" (onChangeComplete)="colorChanged($event.color.hex)"></color-slider>
</div> </div>
</ng-template> </ng-template>
<input #inputField class="form-control" [class.is-invalid]="error" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" [autoClose]="'outside'" [ngbPopover]="popContent" placement="bottom" popoverClass="shadow"> <input #inputField class="form-control" [class.is-invalid]="error" [id]="inputId" [(ngModel)]="value" (change)="onChange(value)" [autoClose]="'outside'" [ngbPopover]="popContent" #colorPicker="ngbPopover" placement="bottom" popoverClass="shadow">
<button class="btn btn-outline-secondary" type="button" (click)="randomize()"> <button class="btn btn-outline-secondary" type="button" (click)="randomize()">
<i-bs name="dice5"></i-bs> <i-bs name="dice5"></i-bs>

4
src-ui/src/app/components/common/input/color/color.component.spec.ts
View File

@@ -42,8 +42,8 @@ describe('ColorComponent', () => {
}) })
it('should set swatch color', () => { it('should set swatch color', () => {
const swatch: HTMLSpanElement = fixture.nativeElement.querySelector( const swatch: HTMLButtonElement = fixture.nativeElement.querySelector(
'span.input-group-text' 'button.input-group-text'
) )
expect(swatch.style.backgroundColor).toEqual('') expect(swatch.style.backgroundColor).toEqual('')
component.value = '#ff0000' component.value = '#ff0000'