paradizelost/paperless-ngx
1
0
Fork 0
mirror of https://github.com/paperless-ngx/paperless-ngx.git synced 2025-11-03 03:16:10 -06:00
Code Issues Packages Projects Releases Wiki Activity

Allow non-hex color modes from color component

Browse Source
This commit is contained in:
Michael Shamoon
2022-03-09 14:12:39 -08:00
parent ac435f17a1
commit 09b1fb2b76
2 changed files with 14 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,12 +1,12 @@
<div class="mb-3"> <div class="mb-3">
<label [for]="inputId">{{title}}</label> <label *ngIf="title" [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> <span class="input-group-text" [style.background-color]="value">&nbsp;&nbsp;&nbsp;</span>
<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)="sliderChanged($event)"></color-slider>
</div> </div>
</ng-template> </ng-template>

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

@@ -1,5 +1,6 @@
import { Component, forwardRef } from '@angular/core'; import { Component, Input, forwardRef } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms'; import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { ColorEvent, ColorMode } from 'ngx-color';
import { randomColor } from 'src/app/utils/color'; import { randomColor } from 'src/app/utils/color';
import { AbstractInputComponent } from '../abstract-input'; import { AbstractInputComponent } from '../abstract-input';
@@ -15,6 +16,9 @@ import { AbstractInputComponent } from '../abstract-input';
}) })
export class ColorComponent extends AbstractInputComponent<string> { export class ColorComponent extends AbstractInputComponent<string> {
@Input()
colorMode: ColorMode = ColorMode.HEX
constructor() { constructor() {
super() super()
} }
@@ -23,8 +27,12 @@ export class ColorComponent extends AbstractInputComponent<string> {
this.colorChanged(randomColor()) this.colorChanged(randomColor())
} }
colorChanged(value) { sliderChanged(colorEvent:ColorEvent) {
this.value = value this.colorChanged(colorEvent.color[this.colorMode].toString())
this.onChange(value) }
colorChanged(color:string) {
this.value = color
this.onChange(color)
} }
} }