diff --git a/src-ui/package-lock.json b/src-ui/package-lock.json index fd6d69538..54c99b1b3 100644 --- a/src-ui/package-lock.json +++ b/src-ui/package-lock.json @@ -2035,6 +2035,11 @@ "to-fast-properties": "^2.0.0" } }, + "@ctrl/tinycolor": { + "version": "3.4.0", + "resolved": "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.4.0.tgz", + "integrity": "sha512-JZButFdZ1+/xAfpguQHoabIXkcqRRKpMrWKBkpEZZyxfY9C1DpADFB8PEqGSTeFr135SaTRfKqGKx5xSCLI7ZQ==" + }, "@istanbuljs/schema": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/@istanbuljs/schema/-/schema-0.1.2.tgz", @@ -7895,6 +7900,11 @@ "object-visit": "^1.0.0" } }, + "material-colors": { + "version": "1.2.6", + "resolved": "https://registry.npmjs.org/material-colors/-/material-colors-1.2.6.tgz", + "integrity": "sha512-6qE4B9deFBIa9YSpOc9O0Sgc43zTeVYbgDT5veRKSlB2+ZuHNoVVxA1L/ckMUayV9Ay9y7Z/SZCLcGteW9i7bg==" + }, "md5.js": { "version": "1.3.5", "resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz", @@ -8333,6 +8343,16 @@ } } }, + "ngx-color": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/ngx-color/-/ngx-color-6.2.0.tgz", + "integrity": "sha512-n04tcMnCpOgmI24egST94YwHmnSoAxK8O1T2t3nGrTwWbvw5XBRJvImNFnoNrriBXzc4Gx4hFehH5MU8CZxp1w==", + "requires": { + "@ctrl/tinycolor": "^3.1.6", + "material-colors": "^1.2.6", + "tslib": "^2.0.0" + } + }, "ngx-cookie-service": { "version": "10.1.1", "resolved": "https://registry.npmjs.org/ngx-cookie-service/-/ngx-cookie-service-10.1.1.tgz", diff --git a/src-ui/package.json b/src-ui/package.json index a4d014284..595228501 100644 --- a/src-ui/package.json +++ b/src-ui/package.json @@ -26,6 +26,7 @@ "file-saver": "^2.0.5", "ng-bootstrap": "^1.6.3", "ng2-pdf-viewer": "^6.3.2", + "ngx-color": "^6.2.0", "ngx-cookie-service": "^10.1.1", "ngx-file-drop": "^10.0.0", "ngx-infinite-scroll": "^9.1.0", diff --git a/src-ui/src/app/app.module.ts b/src-ui/src/app/app.module.ts index 0cc42292b..cb3698187 100644 --- a/src-ui/src/app/app.module.ts +++ b/src-ui/src/app/app.module.ts @@ -63,6 +63,8 @@ import { DateComponent } from './components/common/input/date/date.component'; import { ISODateTimeAdapter } from './utils/ngb-iso-date-time-adapter'; import { LocalizedDateParserFormatter } from './utils/ngb-date-parser-formatter'; import { ApiVersionInterceptor } from './interceptors/api-version.interceptor'; +import { ColorSliderModule } from 'ngx-color/slider'; +import { ColorComponent } from './components/common/input/color/color.component'; import localeFr from '@angular/common/locales/fr'; import localeNl from '@angular/common/locales/nl'; @@ -125,7 +127,8 @@ registerLocaleData(localeEnGb) NumberComponent, SafePipe, CustomDatePipe, - DateComponent + DateComponent, + ColorComponent ], imports: [ BrowserModule, @@ -137,7 +140,8 @@ registerLocaleData(localeEnGb) NgxFileDropModule, InfiniteScrollModule, PdfViewerModule, - NgSelectModule + NgSelectModule, + ColorSliderModule ], providers: [ DatePipe, diff --git a/src-ui/src/app/components/common/input/color/color.component.html b/src-ui/src/app/components/common/input/color/color.component.html new file mode 100644 index 000000000..c39c41d8f --- /dev/null +++ b/src-ui/src/app/components/common/input/color/color.component.html @@ -0,0 +1,33 @@ +
+ + +
+
+     +
+ + +
+ +
+ + + + + +
+ +
+ + {{hint}} +
+ {{error}} +
+
+ +
\ No newline at end of file diff --git a/src-ui/src/app/components/common/input/color/color.component.scss b/src-ui/src/app/components/common/input/color/color.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/src-ui/src/app/components/common/input/color/color.component.spec.ts b/src-ui/src/app/components/common/input/color/color.component.spec.ts new file mode 100644 index 000000000..7c5d0d270 --- /dev/null +++ b/src-ui/src/app/components/common/input/color/color.component.spec.ts @@ -0,0 +1,25 @@ +import { ComponentFixture, TestBed } from '@angular/core/testing'; + +import { ColorComponent } from './color.component'; + +describe('ColorComponent', () => { + let component: ColorComponent; + let fixture: ComponentFixture; + + beforeEach(async () => { + await TestBed.configureTestingModule({ + declarations: [ ColorComponent ] + }) + .compileComponents(); + }); + + beforeEach(() => { + fixture = TestBed.createComponent(ColorComponent); + component = fixture.componentInstance; + fixture.detectChanges(); + }); + + it('should create', () => { + expect(component).toBeTruthy(); + }); +}); diff --git a/src-ui/src/app/components/common/input/color/color.component.ts b/src-ui/src/app/components/common/input/color/color.component.ts new file mode 100644 index 000000000..e75bbee16 --- /dev/null +++ b/src-ui/src/app/components/common/input/color/color.component.ts @@ -0,0 +1,27 @@ +import { Component, forwardRef } from '@angular/core'; +import { NG_VALUE_ACCESSOR } from '@angular/forms'; +import { AbstractInputComponent } from '../abstract-input'; + +@Component({ + providers: [{ + provide: NG_VALUE_ACCESSOR, + useExisting: forwardRef(() => ColorComponent), + multi: true + }], + selector: 'app-input-color', + templateUrl: './color.component.html', + styleUrls: ['./color.component.scss'] +}) +export class ColorComponent extends AbstractInputComponent { + + constructor() { + super() + } + + randomize() { + } + + colorChanged(value) { + this.value = value.color.hex + } +} diff --git a/src-ui/src/app/components/common/tag/tag.component.html b/src-ui/src/app/components/common/tag/tag.component.html index 29c554142..fc8b9ef65 100644 --- a/src-ui/src/app/components/common/tag/tag.component.html +++ b/src-ui/src/app/components/common/tag/tag.component.html @@ -1,2 +1,2 @@ -{{tag.name}} -{{tag.name}} \ No newline at end of file +{{tag.name}} +{{tag.name}} \ No newline at end of file diff --git a/src-ui/src/app/components/common/tag/tag.component.ts b/src-ui/src/app/components/common/tag/tag.component.ts index a3c558182..e552ade9c 100644 --- a/src-ui/src/app/components/common/tag/tag.component.ts +++ b/src-ui/src/app/components/common/tag/tag.component.ts @@ -1,5 +1,5 @@ import { Component, Input, OnInit } from '@angular/core'; -import { TAG_COLOURS, PaperlessTag } from 'src/app/data/paperless-tag'; +import { PaperlessTag } from 'src/app/data/paperless-tag'; @Component({ selector: 'app-tag', @@ -22,12 +22,4 @@ export class TagComponent implements OnInit { ngOnInit(): void { } - getColour() { - var color = TAG_COLOURS.find(c => c.id == this.tag.colour) - if (color) { - return color - } - return { id: this.tag.colour, name: this.tag.colour, textColor: "#ffffff" } - } - } diff --git a/src-ui/src/app/components/manage/tag-list/tag-edit-dialog/tag-edit-dialog.component.html b/src-ui/src/app/components/manage/tag-list/tag-edit-dialog/tag-edit-dialog.component.html index 0d2f6a1c7..d9db9283a 100644 --- a/src-ui/src/app/components/manage/tag-list/tag-edit-dialog/tag-edit-dialog.component.html +++ b/src-ui/src/app/components/manage/tag-list/tag-edit-dialog/tag-edit-dialog.component.html @@ -8,15 +8,7 @@
- -
- - - - {{item.name}} - - -
+ diff --git a/src-ui/src/app/components/manage/tag-list/tag-edit-dialog/tag-edit-dialog.component.ts b/src-ui/src/app/components/manage/tag-list/tag-edit-dialog/tag-edit-dialog.component.ts index d5b281e30..53cd50c45 100644 --- a/src-ui/src/app/components/manage/tag-list/tag-edit-dialog/tag-edit-dialog.component.ts +++ b/src-ui/src/app/components/manage/tag-list/tag-edit-dialog/tag-edit-dialog.component.ts @@ -2,7 +2,7 @@ import { Component } from '@angular/core'; import { FormControl, FormGroup } from '@angular/forms'; import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'; import { EditDialogComponent } from 'src/app/components/common/edit-dialog/edit-dialog.component'; -import { TAG_COLOURS, 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 { ToastService } from 'src/app/services/toast.service'; @@ -28,7 +28,7 @@ export class TagEditDialogComponent extends EditDialogComponent { getForm(): FormGroup { return new FormGroup({ name: new FormControl(''), - colour: new FormControl(''), + color: new FormControl(''), is_inbox_tag: new FormControl(false), matching_algorithm: new FormControl(1), match: new FormControl(""), @@ -36,12 +36,4 @@ export class TagEditDialogComponent extends EditDialogComponent { }) } - getColours() { - return TAG_COLOURS - } - - getColor(id) { - return TAG_COLOURS.find(c => c.id == id) - } - } diff --git a/src-ui/src/app/components/manage/tag-list/tag-list.component.html b/src-ui/src/app/components/manage/tag-list/tag-list.component.html index 62ecbcb90..bb4acdd7b 100644 --- a/src-ui/src/app/components/manage/tag-list/tag-list.component.html +++ b/src-ui/src/app/components/manage/tag-list/tag-list.component.html @@ -26,8 +26,8 @@ {{ tag.name }} - {{ getColor(tag.colour).name }} + {{tag.color}} {{ getMatching(tag) }} {{ tag.document_count }} diff --git a/src-ui/src/app/components/manage/tag-list/tag-list.component.ts b/src-ui/src/app/components/manage/tag-list/tag-list.component.ts index ac468c46b..7ea379f64 100644 --- a/src-ui/src/app/components/manage/tag-list/tag-list.component.ts +++ b/src-ui/src/app/components/manage/tag-list/tag-list.component.ts @@ -1,7 +1,7 @@ import { Component } from '@angular/core'; import { NgbModal } from '@ng-bootstrap/ng-bootstrap'; import { FILTER_HAS_TAG } from 'src/app/data/filter-rule-type'; -import { TAG_COLOURS, PaperlessTag } from 'src/app/data/paperless-tag'; +import { PaperlessTag } from 'src/app/data/paperless-tag'; import { DocumentListViewService } from 'src/app/services/document-list-view.service'; import { TagService } from 'src/app/services/rest/tag.service'; import { ToastService } from 'src/app/services/toast.service'; @@ -22,14 +22,6 @@ export class TagListComponent extends GenericListComponent { super(tagService, modalService, TagEditDialogComponent, toastService) } - getColor(id) { - var color = TAG_COLOURS.find(c => c.id == id) - if (color) { - return color - } - return { id: id, name: id, textColor: "#ffffff" } - } - getDeleteMessage(object: PaperlessTag) { return $localize`Do you really want to delete the tag "${object.name}"?` } diff --git a/src-ui/src/app/data/paperless-tag.ts b/src-ui/src/app/data/paperless-tag.ts index 1518caa1f..a999666c4 100644 --- a/src-ui/src/app/data/paperless-tag.ts +++ b/src-ui/src/app/data/paperless-tag.ts @@ -1,27 +1,10 @@ -import { MatchingModel } from './matching-model'; -import { ObjectWithId } from './object-with-id'; - - -export const TAG_COLOURS = [ - { id: "", name: "Auto", textColor: "#000000" }, - { id: "#a6cee3", name: $localize`Light blue`, textColor: "#000000" }, - { id: "#1f78b4", name: $localize`Blue`, textColor: "#ffffff" }, - { id: "#b2df8a", name: $localize`Light green`, textColor: "#000000" }, - { id: "#33a02c", name: $localize`Green`, textColor: "#ffffff" }, - { id: "#fb9a99", name: $localize`Light red`, textColor: "#000000" }, - { id: "#e31a1c", name: $localize`Red `, textColor: "#ffffff" }, - { id: "#fdbf6f", name: $localize`Light orange`, textColor: "#000000" }, - { id: "#ff7f00", name: $localize`Orange`, textColor: "#000000" }, - { id: "#cab2d6", name: $localize`Light violet`, textColor: "#000000" }, - { id: "#6a3d9a", name: $localize`Violet`, textColor: "#ffffff" }, - { id: "#b15928", name: $localize`Brown`, textColor: "#ffffff" }, - { id: "#000000", name: $localize`Black`, textColor: "#ffffff" }, - { id: "#cccccc", name: $localize`Light grey`, textColor: "#000000" } -] +import { MatchingModel } from "./matching-model"; export interface PaperlessTag extends MatchingModel { - colour?: string + color?: string + + text_color?: string is_inbox_tag?: boolean diff --git a/src-ui/src/environments/environment.prod.ts b/src-ui/src/environments/environment.prod.ts index 50cf6d954..2d07ac31c 100644 --- a/src-ui/src/environments/environment.prod.ts +++ b/src-ui/src/environments/environment.prod.ts @@ -1,7 +1,7 @@ export const environment = { production: true, apiBaseUrl: "/api/", - apiVersion: "1", + apiVersion: "2", appTitle: "Paperless-ng", version: "1.2.1", webSocketHost: window.location.host, diff --git a/src-ui/src/environments/environment.ts b/src-ui/src/environments/environment.ts index b0ac843d5..3d981b677 100644 --- a/src-ui/src/environments/environment.ts +++ b/src-ui/src/environments/environment.ts @@ -5,7 +5,7 @@ export const environment = { production: false, apiBaseUrl: "http://localhost:8000/api/", - apiVersion: "1", + apiVersion: "2", appTitle: "Paperless-ng", version: "DEVELOPMENT", webSocketHost: "localhost:8000",