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

color picker fixes, random default color

Browse Source
This commit is contained in:
jonaswinkler 2021-02-25 22:43:45 +01:00
parent ba478c6cbb
commit 66fe821b04
4 changed files with 25 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,14 +1,14 @@
<div class="form-group"> <div class="form-group">
<label [for]="inputId">{{title}}</label> <label [for]="inputId">{{title}}</label>
<div class="input-group"> <div class="input-group" [class.is-invalid]="error">
<div class="input-group-prepend"> <div class="input-group-prepend">
<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>
</div> </div>
<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-slider> <color-slider [color]="value" (onChangeComplete)="colorChanged($event.color.hex)"></color-slider>
</div> </div>
</ng-template> </ng-template>
@ -24,10 +24,10 @@
</button> </button>
</div> </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> </div>

5
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, forwardRef } from '@angular/core';
import { NG_VALUE_ACCESSOR } from '@angular/forms'; import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { randomColor } from 'src/app/utils/color';
import { AbstractInputComponent } from '../abstract-input'; import { AbstractInputComponent } from '../abstract-input';
@Component({ @Component({
@ -19,9 +20,11 @@ export class ColorComponent extends AbstractInputComponent<string> {
} }
randomize() { randomize() {
this.colorChanged(randomColor())
} }
colorChanged(value) { colorChanged(value) {
this.value = value.color.hex this.value = value
this.onChange(value)
} }
} }

3
src-ui/src/app/components/manage/tag-list/tag-edit-dialog/tag-edit-dialog.component.ts
View File

@ -5,6 +5,7 @@ import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-
import { PaperlessTag } from 'src/app/data/paperless-tag'; import { PaperlessTag } from 'src/app/data/paperless-tag';
import { TagService } from 'src/app/services/rest/tag.service'; import { TagService } from 'src/app/services/rest/tag.service';
import { ToastService } from 'src/app/services/toast.service'; import { ToastService } from 'src/app/services/toast.service';
import { randomColor } from 'src/app/utils/color';
@Component({ @Component({
selector: 'app-tag-edit-dialog', selector: 'app-tag-edit-dialog',
@ -28,7 +29,7 @@ export class TagEditDialogComponent extends EditDialogComponent<PaperlessTag> {
getForm(): FormGroup { getForm(): FormGroup {
return new FormGroup({ return new FormGroup({
name: new FormControl(''), name: new FormControl(''),
color: new FormControl(''), color: new FormControl(randomColor()),
is_inbox_tag: new FormControl(false), is_inbox_tag: new FormControl(false),
matching_algorithm: new FormControl(1), matching_algorithm: new FormControl(1),
match: new FormControl(""), match: new FormControl(""),

12
src-ui/src/app/utils/color.ts Normal file
View 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)}`
}