diff --git a/apps/red-ui/src/app/icons/icons.module.ts b/apps/red-ui/src/app/icons/icons.module.ts index f7a9696b5..8f3a5b189 100644 --- a/apps/red-ui/src/app/icons/icons.module.ts +++ b/apps/red-ui/src/app/icons/icons.module.ts @@ -18,7 +18,6 @@ export class IconsModule { 'arrow-right', 'assign', 'assign-me', - 'back-arrow', 'calendar', 'check', 'close', diff --git a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.html b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.html index 99f6d4412..6521a7792 100644 --- a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.html +++ b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.html @@ -5,26 +5,41 @@
-
- - +
+
+ + +
+ +
+ + +
+
+
-
- - -
- -
-
@@ -34,18 +49,16 @@
- + {{ 'add-edit-dictionary.form.case-sensitive' | translate }}
- +
- + diff --git a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.scss b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.scss index f9cbd4ec1..404b84fe2 100644 --- a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.scss +++ b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.scss @@ -2,21 +2,30 @@ .w-300 { max-width: 300px; + width: 300px; } .w-150 { max-width: 150px; + width: 150px; +} + +.first-row { + display: flex; + + > *:not(last-child) { + margin-right: 24px; + } + + .red-input-group { + margin-top: 0; + } } .slider-row { display: flex; flex-direction: row; align-items: center; - - > mat-slide-toggle { - margin-left: 4px; - margin-right: 4px; - } } .mat-button-toggle-checked { @@ -24,3 +33,7 @@ transition: background-color 0.25s ease; color: $white; } + +.hex-color-input { + padding-right: 40px; +} diff --git a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.ts b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.ts index 9635bb5ab..c6b9704b3 100644 --- a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.ts +++ b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.ts @@ -12,7 +12,7 @@ import { TranslateService } from '@ngx-translate/core'; templateUrl: './add-edit-dictionary-dialog.component.html', styleUrls: ['./add-edit-dictionary-dialog.component.scss'] }) -export class AddEditDictionaryDialogComponent implements OnInit { +export class AddEditDictionaryDialogComponent { dictionaryForm: FormGroup; constructor( @@ -23,21 +23,34 @@ export class AddEditDictionaryDialogComponent implements OnInit { private readonly _translateService: TranslateService, public dialogRef: MatDialogRef, @Inject(MAT_DIALOG_DATA) public dictionary: TypeValue - ) {} - - ngOnInit(): void { + ) { this.dictionaryForm = this._formBuilder.group({ type: [this.dictionary?.type, Validators.required], rank: [this.dictionary?.rank, Validators.required], - hexColor: [this.dictionary?.hexColor, Validators.required], + hexColor: [this.dictionary?.hexColor, [Validators.required, Validators.minLength(7)]], hint: [!!this.dictionary?.hint], - caseSensitive: [this.dictionary ? !this.dictionary.caseInsensitive : false] + caseSensitive: [this.dictCaseSensitive] }); + } - // edit mode, cannot change type value - if (!!this.dictionary) { - this.dictionaryForm.get('type').disable(); + public get dictCaseSensitive() { + return this.dictionary ? !this.dictionary.caseInsensitive : false; + } + + public get changed(): boolean { + if (!this.dictionary) return true; + + for (const key of Object.keys(this.dictionaryForm.getRawValue())) { + if (key === 'caseSensitive') { + if (this.dictCaseSensitive !== this.dictionaryForm.get(key).value) { + return true; + } + } else if (this.dictionary[key] !== this.dictionaryForm.get(key).value) { + return true; + } } + + return false; } async saveDictionary() { diff --git a/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.ts b/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.ts index 088b5fe6e..2dee11c24 100644 --- a/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.ts +++ b/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.ts @@ -46,7 +46,7 @@ export class WatermarkScreenComponent implements OnInit { this._loadViewer(); } - public get changed() { + public get changed(): boolean { for (const key of Object.keys(this._initialConfig)) { if (this._initialConfig[key] !== this.configForm.get(key).value) { return true; diff --git a/apps/red-ui/src/app/screens/base-screen/base-screen.component.html b/apps/red-ui/src/app/screens/base-screen/base-screen.component.html index 7209002fc..7e7ded941 100644 --- a/apps/red-ui/src/app/screens/base-screen/base-screen.component.html +++ b/apps/red-ui/src/app/screens/base-screen/base-screen.component.html @@ -35,7 +35,7 @@ *ngIf="settingsView" [routerLinkActiveOptions]="{ exact: true }" > - + {{ 'top-bar.navigation-items.back-to-projects' | translate }} diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index 3304587a5..ac6413949 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -487,8 +487,8 @@ "new": "Create Dictionary" }, "form": { - "type": "Type", - "type-placeholder": "Enter Type Name", + "name": "Dictionary Name", + "name-placeholder": "Enter Name", "rank": "Rank", "rank-placeholder": "1000", "color": "Hex Color", diff --git a/apps/red-ui/src/assets/icons/general/back-arrow.svg b/apps/red-ui/src/assets/icons/general/back-arrow.svg deleted file mode 100644 index 5dbf99f08..000000000 --- a/apps/red-ui/src/assets/icons/general/back-arrow.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - diff --git a/apps/red-ui/src/assets/styles/red-breadcrumbs.scss b/apps/red-ui/src/assets/styles/red-breadcrumbs.scss index 30e0cc5ad..d6d0613f2 100644 --- a/apps/red-ui/src/assets/styles/red-breadcrumbs.scss +++ b/apps/red-ui/src/assets/styles/red-breadcrumbs.scss @@ -22,8 +22,7 @@ align-items: center; mat-icon { - margin-right: 4px; - color: $primary; + margin-right: 8px; } } diff --git a/apps/red-ui/src/assets/styles/red-controls.scss b/apps/red-ui/src/assets/styles/red-controls.scss index 461f5a222..f8ac880d9 100644 --- a/apps/red-ui/src/assets/styles/red-controls.scss +++ b/apps/red-ui/src/assets/styles/red-controls.scss @@ -36,7 +36,3 @@ width: 10px; height: 10px; } - -.transform-180 { - transform: rotate(180deg); -} diff --git a/apps/red-ui/src/assets/styles/red-dialog.scss b/apps/red-ui/src/assets/styles/red-dialog.scss index cddf6e42d..fe4161ca1 100644 --- a/apps/red-ui/src/assets/styles/red-dialog.scss +++ b/apps/red-ui/src/assets/styles/red-dialog.scss @@ -17,11 +17,11 @@ } .dialog-header { - padding: 32px 32px 16px 32px; + padding: 32px 32px 0 32px; } .dialog-content { - padding: 0 32px; + padding: 24px 32px 40px; } .dialog-actions { diff --git a/apps/red-ui/src/assets/styles/red-input.scss b/apps/red-ui/src/assets/styles/red-input.scss index be4b52a67..ff5b2f140 100644 --- a/apps/red-ui/src/assets/styles/red-input.scss +++ b/apps/red-ui/src/assets/styles/red-input.scss @@ -4,7 +4,7 @@ .red-input-group { display: flex; flex-direction: column; - margin-top: 13px; + margin-top: 24px; position: relative; .input-icon { @@ -12,14 +12,11 @@ right: 1px; bottom: 1px; background: $grey-5; - height: 30px; - display: flex; - justify-content: center; - align-items: center; + height: 32px; width: 32px; - border: 1px solid $grey-5; - border-top-right-radius: 8px; - border-bottom-right-radius: 8px; + border-left: 1px solid $grey-5; + border-top-right-radius: 7px; + border-bottom-right-radius: 7px; cursor: pointer; transition: background-color 0.25s ease; diff --git a/apps/red-ui/src/assets/styles/red-theme.scss b/apps/red-ui/src/assets/styles/red-theme.scss index 27f7daf06..3b3ad8f44 100644 --- a/apps/red-ui/src/assets/styles/red-theme.scss +++ b/apps/red-ui/src/assets/styles/red-theme.scss @@ -11,6 +11,7 @@ @import 'red-list'; @import 'red-checkbox'; @import 'red-toggle'; +@import 'red-toggle-button'; @import 'red-menu'; @import 'red-media-queries'; @import 'red-tables'; diff --git a/apps/red-ui/src/assets/styles/red-toggle-button.scss b/apps/red-ui/src/assets/styles/red-toggle-button.scss new file mode 100644 index 000000000..7091b475f --- /dev/null +++ b/apps/red-ui/src/assets/styles/red-toggle-button.scss @@ -0,0 +1,14 @@ +@import './red-variables'; + +.mat-button-toggle-standalone, +.mat-button-toggle-group { + border-radius: 100px !important; + box-shadow: none; + + .mat-button-toggle:not(.mat-button-toggle-checked) { + .mat-button-toggle-button { + background: $grey-6; + color: $grey-7; + } + } +}