From 33ed2c8851a526443b20f7ac5f97f6814fbbac5e Mon Sep 17 00:00:00 2001 From: jonaswinkler <17569239+jonaswinkler@users.noreply.github.com> Date: Thu, 25 Feb 2021 11:32:22 +0100 Subject: [PATCH] adjust frontend to use the new tag color api --- src-ui/package-lock.json | 20 +++++++++++ src-ui/package.json | 1 + src-ui/src/app/app.module.ts | 8 +++-- .../common/input/color/color.component.html | 33 +++++++++++++++++++ .../common/input/color/color.component.scss | 0 .../input/color/color.component.spec.ts | 25 ++++++++++++++ .../common/input/color/color.component.ts | 27 +++++++++++++++ .../components/common/tag/tag.component.html | 4 +-- .../components/common/tag/tag.component.ts | 10 +----- .../tag-edit-dialog.component.html | 10 +----- .../tag-edit-dialog.component.ts | 12 ++----- .../manage/tag-list/tag-list.component.html | 4 +-- .../manage/tag-list/tag-list.component.ts | 10 +----- src-ui/src/app/data/paperless-tag.ts | 25 +++----------- src-ui/src/environments/environment.prod.ts | 2 +- src-ui/src/environments/environment.ts | 2 +- 16 files changed, 127 insertions(+), 66 deletions(-) create mode 100644 src-ui/src/app/components/common/input/color/color.component.html create mode 100644 src-ui/src/app/components/common/input/color/color.component.scss create mode 100644 src-ui/src/app/components/common/input/color/color.component.spec.ts create mode 100644 src-ui/src/app/components/common/input/color/color.component.ts 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 @@ +