From 30de74e85841f9b62045895a658781abeeadf74e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Mon, 15 Mar 2021 15:29:09 +0200 Subject: [PATCH] New tabs design --- apps/red-ui/src/app/app.module.ts | 4 +- .../rule-set-view-switch.component.html | 10 ----- .../rule-set-view-switch.component.scss | 0 .../rule-set-view-switch/tabs.component.html | 10 +++++ .../rule-set-view-switch/tabs.component.scss | 3 ++ ...-switch.component.ts => tabs.component.ts} | 19 ++++++--- .../default-colors-screen.component.html | 2 +- .../dictionary-listing-screen.component.html | 2 +- .../rules-screen/rules-screen.component.html | 2 +- .../watermark-screen.component.html | 2 +- .../watermark-screen.component.scss | 4 +- .../file-preview-screen.component.html | 41 ++++++++++++------- .../file-preview-screen.component.ts | 8 ++-- apps/red-ui/src/assets/styles/red-tabs.scss | 29 +++++++++++++ apps/red-ui/src/assets/styles/red-theme.scss | 1 + .../src/assets/styles/red-toggle-button.scss | 5 --- 16 files changed, 94 insertions(+), 48 deletions(-) delete mode 100644 apps/red-ui/src/app/components/rule-set-view-switch/rule-set-view-switch.component.html delete mode 100644 apps/red-ui/src/app/components/rule-set-view-switch/rule-set-view-switch.component.scss create mode 100644 apps/red-ui/src/app/components/rule-set-view-switch/tabs.component.html create mode 100644 apps/red-ui/src/app/components/rule-set-view-switch/tabs.component.scss rename apps/red-ui/src/app/components/rule-set-view-switch/{rule-set-view-switch.component.ts => tabs.component.ts} (55%) create mode 100644 apps/red-ui/src/assets/styles/red-tabs.scss diff --git a/apps/red-ui/src/app/app.module.ts b/apps/red-ui/src/app/app.module.ts index bcd985e8a..de1c1fa38 100644 --- a/apps/red-ui/src/app/app.module.ts +++ b/apps/red-ui/src/app/app.module.ts @@ -99,7 +99,7 @@ import { HasScrollbarDirective } from './utils/has-scrollbar.directive'; import { RuleSetsListingScreenComponent } from './screens/admin/rule-sets-listing-screen/rule-sets-listing-screen.component'; import { AddEditRuleSetDialogComponent } from './screens/admin/rule-sets-listing-screen/add-edit-rule-set-dialog/add-edit-rule-set-dialog.component'; import { RuleSetActionsComponent } from './components/rule-set-actions/rule-set-actions.component'; -import { RuleSetViewSwitchComponent } from './components/rule-set-view-switch/rule-set-view-switch.component'; +import { TabsComponent } from './components/rule-set-view-switch/tabs.component'; import { MatSliderModule } from '@angular/material/slider'; import { PendingChangesGuard } from './utils/can-deactivate.guard'; import { OverwriteFilesDialogComponent } from './dialogs/overwrite-files-dialog/overwrite-files-dialog.component'; @@ -370,7 +370,7 @@ const matImports = [ FileDownloadBtnComponent, ProjectListingActionsComponent, RuleSetActionsComponent, - RuleSetViewSwitchComponent, + TabsComponent, LicenseInformationScreenComponent, DefaultColorsScreenComponent, EditColorDialogComponent, diff --git a/apps/red-ui/src/app/components/rule-set-view-switch/rule-set-view-switch.component.html b/apps/red-ui/src/app/components/rule-set-view-switch/rule-set-view-switch.component.html deleted file mode 100644 index 810deb91e..000000000 --- a/apps/red-ui/src/app/components/rule-set-view-switch/rule-set-view-switch.component.html +++ /dev/null @@ -1,10 +0,0 @@ -
-
- - {{ 'dictionaries' | translate }} - {{ 'rule-editor' | translate }} - {{ 'default-colors' | translate }} - {{ 'watermark' | translate }} - -
-
diff --git a/apps/red-ui/src/app/components/rule-set-view-switch/rule-set-view-switch.component.scss b/apps/red-ui/src/app/components/rule-set-view-switch/rule-set-view-switch.component.scss deleted file mode 100644 index e69de29bb..000000000 diff --git a/apps/red-ui/src/app/components/rule-set-view-switch/tabs.component.html b/apps/red-ui/src/app/components/rule-set-view-switch/tabs.component.html new file mode 100644 index 000000000..0ffea530a --- /dev/null +++ b/apps/red-ui/src/app/components/rule-set-view-switch/tabs.component.html @@ -0,0 +1,10 @@ + +
+ {{ tab.label || tab.screen | translate }} +
+ diff --git a/apps/red-ui/src/app/components/rule-set-view-switch/tabs.component.scss b/apps/red-ui/src/app/components/rule-set-view-switch/tabs.component.scss new file mode 100644 index 000000000..e7a72018d --- /dev/null +++ b/apps/red-ui/src/app/components/rule-set-view-switch/tabs.component.scss @@ -0,0 +1,3 @@ +:host { + display: flex; +} diff --git a/apps/red-ui/src/app/components/rule-set-view-switch/rule-set-view-switch.component.ts b/apps/red-ui/src/app/components/rule-set-view-switch/tabs.component.ts similarity index 55% rename from apps/red-ui/src/app/components/rule-set-view-switch/rule-set-view-switch.component.ts rename to apps/red-ui/src/app/components/rule-set-view-switch/tabs.component.ts index 7ff1508c8..d73b195b5 100644 --- a/apps/red-ui/src/app/components/rule-set-view-switch/rule-set-view-switch.component.ts +++ b/apps/red-ui/src/app/components/rule-set-view-switch/tabs.component.ts @@ -4,13 +4,20 @@ import { AppStateService } from '../../state/app-state.service'; import { UserPreferenceService } from '../../common/service/user-preference.service'; @Component({ - selector: 'redaction-rule-set-view-switch', - templateUrl: './rule-set-view-switch.component.html', - styleUrls: ['./rule-set-view-switch.component.scss'] + selector: 'redaction-tabs', + templateUrl: './tabs.component.html', + styleUrls: ['./tabs.component.scss'] }) -export class RuleSetViewSwitchComponent implements OnInit { +export class TabsComponent implements OnInit { @Input() public screen: 'rules' | 'dictionaries' | 'watermark' | 'default-colors'; + public tabs: { screen: string; onlyDevMode?: boolean; label?: string }[] = [ + { screen: 'dictionaries' }, + { screen: 'rules', onlyDevMode: true, label: 'rule-editor' }, + { screen: 'default-colors' }, + { screen: 'watermark' } + ]; + constructor( public readonly userPreferenceService: UserPreferenceService, private readonly _router: Router, @@ -19,7 +26,7 @@ export class RuleSetViewSwitchComponent implements OnInit { ngOnInit(): void {} - public switchView($event) { - this._router.navigate(['ui/admin/project-templates/' + this._appStateService.activeRuleSetId + '/' + $event.value]); + public switchView(screen: string) { + this._router.navigate(['ui/admin/project-templates/' + this._appStateService.activeRuleSetId + '/' + screen]); } } diff --git a/apps/red-ui/src/app/screens/admin/default-colors-screen/default-colors-screen.component.html b/apps/red-ui/src/app/screens/admin/default-colors-screen/default-colors-screen.component.html index f08b9cc43..f2eecf50f 100644 --- a/apps/red-ui/src/app/screens/admin/default-colors-screen/default-colors-screen.component.html +++ b/apps/red-ui/src/app/screens/admin/default-colors-screen/default-colors-screen.component.html @@ -2,7 +2,7 @@
- +
diff --git a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html index d5dfaca40..d56e2703f 100644 --- a/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html +++ b/apps/red-ui/src/app/screens/admin/dictionary-listing-screen/dictionary-listing-screen.component.html @@ -2,7 +2,7 @@
- +
diff --git a/apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.html b/apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.html index 3fb484ad7..6966e1e74 100644 --- a/apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.html +++ b/apps/red-ui/src/app/screens/admin/rules-screen/rules-screen.component.html @@ -2,7 +2,7 @@
- +
diff --git a/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.html b/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.html index 6c13f2d92..ea6c8c85b 100644 --- a/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.html +++ b/apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.html @@ -2,7 +2,7 @@
- +
-
-
- - -
{{ 'file-preview.standard' | translate }}
- - -
{{ 'file-preview.delta' | translate }}
- - -
- {{ 'file-preview.redacted' | translate }} -
- - +
+
+ {{ 'file-preview.standard' | translate }} +
+
+ {{ 'file-preview.delta' | translate }} +
+
+ {{ 'file-preview.redacted' | translate }}
diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts index 22853dd02..605826eee 100644 --- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts +++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts @@ -89,8 +89,8 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy { return this._instance?.docViewer?.getCurrentPage(); } - get canNotSwitchToRedactedView() { - return this.permissionsService.fileRequiresReanalysis(); + get canSwitchToRedactedView() { + return !this.permissionsService.fileRequiresReanalysis(); } get canSwitchToDeltaView() { @@ -715,8 +715,8 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy { } } - switchView($event: MatButtonToggleChange) { - this.viewMode = $event.value; + switchView(viewMode: ViewMode) { + this.viewMode = viewMode; this.updateViewMode(); } diff --git a/apps/red-ui/src/assets/styles/red-tabs.scss b/apps/red-ui/src/assets/styles/red-tabs.scss new file mode 100644 index 000000000..8cbc5e753 --- /dev/null +++ b/apps/red-ui/src/assets/styles/red-tabs.scss @@ -0,0 +1,29 @@ +@import './red-variables'; + +.red-tab { + &:not(:last-child) { + margin-right: 2px; + } + + height: 30px; + line-height: 30px; + padding: 0 14px; + border-radius: 17px; + transition: background-color 0.2s; + cursor: pointer; + + &:not(.disabled):not(.active):hover { + background-color: $grey-6; + } + + &.active { + background-color: rgba($primary, 0.1); + font-weight: 600; + color: $primary; + } + + &.disabled { + color: rgba($grey-1, 0.3); + cursor: not-allowed; + } +} diff --git a/apps/red-ui/src/assets/styles/red-theme.scss b/apps/red-ui/src/assets/styles/red-theme.scss index f7531a252..46008285d 100644 --- a/apps/red-ui/src/assets/styles/red-theme.scss +++ b/apps/red-ui/src/assets/styles/red-theme.scss @@ -26,3 +26,4 @@ @import 'red-slider'; @import 'red-loading'; @import 'red-progress-bar'; +@import 'red-tabs'; diff --git a/apps/red-ui/src/assets/styles/red-toggle-button.scss b/apps/red-ui/src/assets/styles/red-toggle-button.scss index 07c95ccad..13bea0ab6 100644 --- a/apps/red-ui/src/assets/styles/red-toggle-button.scss +++ b/apps/red-ui/src/assets/styles/red-toggle-button.scss @@ -12,11 +12,6 @@ color: $grey-7; } } - - .mat-button-toggle:not(:first-of-type):not(:last-of-type) { - border-left: 1px solid $white; - border-right: 1px solid $white; - } } .mat-button-toggle-disabled {