mirror of
https://github.com/paperless-ngx/paperless-ngx.git
synced 2025-04-02 13:45:10 -05:00
color picker fixes, random default color
This commit is contained in:
parent
ba478c6cbb
commit
66fe821b04
@ -1,14 +1,14 @@
|
||||
<div class="form-group">
|
||||
<label [for]="inputId">{{title}}</label>
|
||||
|
||||
<div class="input-group">
|
||||
<div class="input-group" [class.is-invalid]="error">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text" [style.background-color]="value"> </span>
|
||||
</div>
|
||||
|
||||
<ng-template #popContent>
|
||||
<div style="min-width: 200px;" class="pb-3">
|
||||
<color-slider [color]="value" (onChangeComplete)="colorChanged($event)"></color-slider>
|
||||
<color-slider [color]="value" (onChangeComplete)="colorChanged($event.color.hex)"></color-slider>
|
||||
</div>
|
||||
|
||||
</ng-template>
|
||||
@ -24,10 +24,10 @@
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<small *ngIf="hint" class="form-text text-muted">{{hint}}</small>
|
||||
<div class="invalid-feedback">
|
||||
{{error}}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<small *ngIf="hint" class="form-text text-muted">{{hint}}</small>
|
||||
<div class="invalid-feedback">
|
||||
{{error}}
|
||||
</div>
|
||||
</div>
|
@ -1,5 +1,6 @@
|
||||
import { Component, forwardRef } from '@angular/core';
|
||||
import { NG_VALUE_ACCESSOR } from '@angular/forms';
|
||||
import { randomColor } from 'src/app/utils/color';
|
||||
import { AbstractInputComponent } from '../abstract-input';
|
||||
|
||||
@Component({
|
||||
@ -19,9 +20,11 @@ export class ColorComponent extends AbstractInputComponent<string> {
|
||||
}
|
||||
|
||||
randomize() {
|
||||
this.colorChanged(randomColor())
|
||||
}
|
||||
|
||||
colorChanged(value) {
|
||||
this.value = value.color.hex
|
||||
this.value = value
|
||||
this.onChange(value)
|
||||
}
|
||||
}
|
||||
|
@ -5,6 +5,7 @@ import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-
|
||||
import { PaperlessTag } from 'src/app/data/paperless-tag';
|
||||
import { TagService } from 'src/app/services/rest/tag.service';
|
||||
import { ToastService } from 'src/app/services/toast.service';
|
||||
import { randomColor } from 'src/app/utils/color';
|
||||
|
||||
@Component({
|
||||
selector: 'app-tag-edit-dialog',
|
||||
@ -28,7 +29,7 @@ export class TagEditDialogComponent extends EditDialogComponent<PaperlessTag> {
|
||||
getForm(): FormGroup {
|
||||
return new FormGroup({
|
||||
name: new FormControl(''),
|
||||
color: new FormControl(''),
|
||||
color: new FormControl(randomColor()),
|
||||
is_inbox_tag: new FormControl(false),
|
||||
matching_algorithm: new FormControl(1),
|
||||
match: new FormControl(""),
|
||||
|
12
src-ui/src/app/utils/color.ts
Normal file
12
src-ui/src/app/utils/color.ts
Normal file
@ -0,0 +1,12 @@
|
||||
|
||||
function componentToHex(c) {
|
||||
var hex = c.toString(16);
|
||||
return hex.length == 1 ? "0" + hex : hex;
|
||||
}
|
||||
|
||||
export function randomColor() {
|
||||
let r = Math.floor(Math.random() * 150) + 50
|
||||
let g = Math.floor(Math.random() * 150) + 50
|
||||
let b = Math.floor(Math.random() * 150) + 50
|
||||
return `#${componentToHex(r)}${componentToHex(g)}${componentToHex(b)}`
|
||||
}
|
Loading…
x
Reference in New Issue
Block a user