From 10ef2f6bfeb3833fe7b37b22909bc28cd7e7e958 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Mon, 26 Apr 2021 22:22:35 +0300 Subject: [PATCH] Redo admin nav WIP --- .../src/app/modules/admin/admin.module.ts | 2 + .../admin-breadcrumbs.component.html | 54 +---- .../side-nav/side-nav.component.html | 17 ++ .../side-nav/side-nav.component.scss | 32 +++ .../components/side-nav/side-nav.component.ts | 45 ++++ .../dictionary-listing-screen.component.html | 6 +- .../digital-signature-screen.component.html | 15 +- .../digital-signature-screen.component.scss | 21 +- .../license-information-screen.component.html | 4 + .../license-information-screen.component.scss | 5 +- .../rule-sets-listing-screen.component.html | 209 +++++++++--------- .../rule-sets-listing-screen.component.scss | 13 ++ .../document-info.component.scss | 1 - .../file-preview-screen.component.html | 3 +- .../project-listing-screen.component.html | 2 + .../project-overview-screen.component.html | 3 + .../empty-state/empty-state.component.ts | 2 +- apps/red-ui/src/assets/i18n/en.json | 7 +- .../src/assets/styles/red-components.scss | 9 + apps/red-ui/src/assets/styles/red-grid.scss | 5 +- .../src/assets/styles/red-page-layout.scss | 13 +- 21 files changed, 264 insertions(+), 204 deletions(-) create mode 100644 apps/red-ui/src/app/modules/admin/components/side-nav/side-nav.component.html create mode 100644 apps/red-ui/src/app/modules/admin/components/side-nav/side-nav.component.scss create mode 100644 apps/red-ui/src/app/modules/admin/components/side-nav/side-nav.component.ts diff --git a/apps/red-ui/src/app/modules/admin/admin.module.ts b/apps/red-ui/src/app/modules/admin/admin.module.ts index 3f31c7f61..ffdc7f950 100644 --- a/apps/red-ui/src/app/modules/admin/admin.module.ts +++ b/apps/red-ui/src/app/modules/admin/admin.module.ts @@ -33,6 +33,7 @@ import { UsersStatsComponent } from './components/users-stats/users-stats.compon import { ConfirmDeleteUsersDialogComponent } from './dialogs/confirm-delete-users-dialog/confirm-delete-users-dialog.component'; import { FileAttributesCsvImportDialogComponent } from './dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component'; import { ActiveFieldsListingComponent } from './dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component'; +import { SideNavComponent } from './components/side-nav/side-nav.component'; const dialogs = [ AddEditRuleSetDialogComponent, @@ -69,6 +70,7 @@ const components = [ ComboSeriesVerticalComponent, UsersStatsComponent, ActiveFieldsListingComponent, + SideNavComponent, ...dialogs, ...screens diff --git a/apps/red-ui/src/app/modules/admin/components/breadcrumbs/admin-breadcrumbs.component.html b/apps/red-ui/src/app/modules/admin/components/breadcrumbs/admin-breadcrumbs.component.html index 0031814ab..0d36682a3 100644 --- a/apps/red-ui/src/app/modules/admin/components/breadcrumbs/admin-breadcrumbs.component.html +++ b/apps/red-ui/src/app/modules/admin/components/breadcrumbs/admin-breadcrumbs.component.html @@ -1,57 +1,5 @@
- - - - - - - - - - - + diff --git a/apps/red-ui/src/app/modules/admin/components/side-nav/side-nav.component.html b/apps/red-ui/src/app/modules/admin/components/side-nav/side-nav.component.html new file mode 100644 index 000000000..3bccf3166 --- /dev/null +++ b/apps/red-ui/src/app/modules/admin/components/side-nav/side-nav.component.html @@ -0,0 +1,17 @@ +
+ + +
+ {{ item.label || item.screen | translate }} +
+ diff --git a/apps/red-ui/src/app/modules/admin/components/side-nav/side-nav.component.scss b/apps/red-ui/src/app/modules/admin/components/side-nav/side-nav.component.scss new file mode 100644 index 000000000..fb3cba8fe --- /dev/null +++ b/apps/red-ui/src/app/modules/admin/components/side-nav/side-nav.component.scss @@ -0,0 +1,32 @@ +@import '../../../../../assets/styles/red-variables'; + +:host { + display: block; + min-width: 200px; + background-color: $grey-2; + border-right: 1px solid $separator; + box-sizing: border-box; + padding: 8px; + + .all-caps-label { + padding: 16px; + } + + .item { + margin-bottom: 4px; + border-radius: 20px; + padding: 9px 16px; + cursor: pointer; + transition: background-color 0.2s; + font-weight: 500; + + &:not(.active):hover { + background-color: rgba($primary, 0.2); + } + + &.active { + background-color: $primary; + color: $white; + } + } +} diff --git a/apps/red-ui/src/app/modules/admin/components/side-nav/side-nav.component.ts b/apps/red-ui/src/app/modules/admin/components/side-nav/side-nav.component.ts new file mode 100644 index 000000000..09d3ef4d3 --- /dev/null +++ b/apps/red-ui/src/app/modules/admin/components/side-nav/side-nav.component.ts @@ -0,0 +1,45 @@ +import { Component, Input, OnInit } from '@angular/core'; +import { PermissionsService } from '../../../../services/permissions.service'; +import { Router } from '@angular/router'; +import { UserPreferenceService } from '../../../../services/user-preference.service'; + +@Component({ + selector: 'redaction-side-nav', + templateUrl: './side-nav.component.html', + styleUrls: ['./side-nav.component.scss'] +}) +export class SideNavComponent implements OnInit { + @Input() type: 'settings' | 'project-templates'; + + public items: { [key: string]: { screen: string; onlyDevMode?: boolean; onlyAdmin?: boolean; userManagerOnly?: boolean; label?: string }[] } = { + settings: [ + { screen: 'project-templates' }, + { screen: 'digital-signature', onlyAdmin: true }, + { screen: 'license-info', label: 'license-information', onlyAdmin: true }, + { screen: 'audit', onlyAdmin: true }, + { screen: 'users', label: 'user-management', userManagerOnly: true }, + { screen: 'smtp-config', label: 'configurations', onlyAdmin: true } + ], + 'project-templates': [ + { screen: 'dictionaries' }, + { screen: 'rules', onlyDevMode: true, label: 'rule-editor' }, + { screen: 'default-colors' }, + { screen: 'watermark' }, + { screen: 'file-attributes', onlyAdmin: true } + ] + }; + + constructor( + private readonly _router: Router, + public readonly userPreferenceService: UserPreferenceService, + public readonly permissionsService: PermissionsService + ) {} + + ngOnInit(): void {} + + // + // public navigate(screen: string) { + // if (this.type === '') + // this._router.navigate(['main/admin/project-templates/' + this._appStateService.activeRuleSetId + '/' + screen]); + // } +} diff --git a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html index 44dd56a15..22c86f093 100644 --- a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html +++ b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html @@ -2,8 +2,6 @@
- -
@@ -12,6 +10,10 @@
+
+ + +
diff --git a/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html index b122fc718..cfa528f97 100644 --- a/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html +++ b/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html @@ -15,16 +15,21 @@
+
+ + +
-
-
- - -
+
diff --git a/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.scss index 70c529036..17eb5a001 100644 --- a/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.scss +++ b/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.scss @@ -1,30 +1,11 @@ -@import '../../../../../assets/styles/red-mixins'; -@import '../../../../../assets/styles/red-variables'; - .content-container { - width: 100vw; - @include inset-shadow; + width: 100%; .content-container-content { margin: 20px; } } -.no-certificate { - position: absolute; - width: 100%; - top: 0; - bottom: 20px; - display: flex; - justify-content: center; - align-items: center; - flex-direction: column; - - redaction-icon-button { - margin-top: 12px; - } -} - form { display: flex; flex-direction: column; diff --git a/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.html index f84a78b72..76e695513 100644 --- a/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.html +++ b/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.html @@ -16,6 +16,10 @@
+
+ + +
diff --git a/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.scss index afa5c1d69..de4acc112 100644 --- a/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.scss +++ b/apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.scss @@ -2,8 +2,7 @@ @import '../../../../../assets/styles/red-variables'; .content-container { - width: 100vw; - @include inset-shadow; + width: 100%; overflow: auto; @include scroll-bar; @@ -12,7 +11,7 @@ align-items: center; .grid-container { - width: calc(100vw - 40px); + width: calc(100vw - 240px); display: grid; grid-template-columns: 1fr 2fr; margin: 20px 20px 50px 20px; diff --git a/apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.html index e9cf7fcb8..0946cb4f1 100644 --- a/apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.html +++ b/apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.html @@ -1,20 +1,13 @@
-
- +
-
- + - +
+
+
-
-
-
-
-
- +
+
+
+
+ +
+ + + {{ 'project-templates-listing.table-header.title' | translate: { length: displayedEntities.length } }} + + +
+ + + +
- - {{ 'project-templates-listing.table-header.title' | translate: { length: displayedEntities.length } }} - -
+
+
-
-
- - - - - -
-
- - - - - - -
-
- -
- -
-
- {{ ruleSet.name }} -
-
-
- - {{ 'project-templates-listing.dictionaries' | translate: { length: ruleSet.dictionariesCount } }} -
-
-
- -
- -
-
- {{ ruleSet.dateAdded | date: 'd MMM. yyyy' }} -
-
-
- {{ ruleSet.dateModified | date: 'd MMM. yyyy' }} -
- - -
+ + + +
- + + + + + + +
+
+ +
+ +
+
+ {{ ruleSet.name }} +
+
+
+ + {{ 'project-templates-listing.dictionaries' | translate: { length: ruleSet.dictionariesCount } }} +
+
+
+ +
+ +
+
+ {{ ruleSet.dateAdded | date: 'd MMM. yyyy' }} +
+
+
+ {{ ruleSet.dateModified | date: 'd MMM. yyyy' }} +
+ + +
+
+
+ +
diff --git a/apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.scss index 0e4487311..50a7dc267 100644 --- a/apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.scss +++ b/apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.scss @@ -1,6 +1,19 @@ @import '../../../../../assets/styles/red-variables'; @import '../../../../../assets/styles/red-mixins'; +section { + display: flex; + + .page-header, + .red-content-inner { + width: calc(100vw - 200px); + } + + redaction-side-nav { + height: calc(100vh - 61px); + } +} + .header-item { padding: 0 24px 0 10px; } diff --git a/apps/red-ui/src/app/modules/projects/components/document-info/document-info.component.scss b/apps/red-ui/src/app/modules/projects/components/document-info/document-info.component.scss index 3e0d3e4c4..2b1362ac9 100644 --- a/apps/red-ui/src/app/modules/projects/components/document-info/document-info.component.scss +++ b/apps/red-ui/src/app/modules/projects/components/document-info/document-info.component.scss @@ -8,7 +8,6 @@ background: white; z-index: 1; width: 100%; - @include inset-shadow; } .right-content { diff --git a/apps/red-ui/src/app/modules/projects/screens/file-preview-screen/file-preview-screen.component.html b/apps/red-ui/src/app/modules/projects/screens/file-preview-screen/file-preview-screen.component.html index bff887116..e7e99efcb 100644 --- a/apps/red-ui/src/app/modules/projects/screens/file-preview-screen/file-preview-screen.component.html +++ b/apps/red-ui/src/app/modules/projects/screens/file-preview-screen/file-preview-screen.component.html @@ -190,9 +190,10 @@
+
+
-
+
+
diff --git a/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.html b/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.html index 587c1606f..6054f7350 100644 --- a/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.html +++ b/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.html @@ -81,6 +81,9 @@ >
+ +
+
diff --git a/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.ts b/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.ts index 5a1a0c9e5..9367ebd8b 100644 --- a/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.ts +++ b/apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.ts @@ -1,4 +1,4 @@ -import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild } from '@angular/core'; +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; @Component({ selector: 'redaction-empty-state', diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index f798c728c..117d0582a 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -750,6 +750,7 @@ }, "digital-signature": "Digital Signature", "project-templates": "Project Templates", + "settings": "Settings", "project-templates-listing": { "table-header": { "title": "{{length}} project templates" @@ -1126,8 +1127,10 @@ }, "digital-signature-screen": { "title": "Digital Signature", - "no-key": "No Digital Signature certificate is configured. For signing redacted documents please upload a PCKS.12 certificate.", - "upload-key": "Upload Certificate", + "no-data": { + "title": "No Digital Signature certificate is configured. For signing redacted documents please upload a PCKS.12 certificate.", + "action": "Upload Certificate" + }, "reason": { "label": "Reason", "placeholder": "Reason" diff --git a/apps/red-ui/src/assets/styles/red-components.scss b/apps/red-ui/src/assets/styles/red-components.scss index ae670d201..10aa722de 100644 --- a/apps/red-ui/src/assets/styles/red-components.scss +++ b/apps/red-ui/src/assets/styles/red-components.scss @@ -1,4 +1,5 @@ @import 'red-variables'; +@import 'red-mixins'; .oval, .square { @@ -179,3 +180,11 @@ stroke: $red-1; background-color: $red-1; } + +.overlay-shadow { + @include inset-shadow; + position: fixed; + width: 100%; + height: 4px; + z-index: 2; +} diff --git a/apps/red-ui/src/assets/styles/red-grid.scss b/apps/red-ui/src/assets/styles/red-grid.scss index 768ef2948..8865ab11c 100644 --- a/apps/red-ui/src/assets/styles/red-grid.scss +++ b/apps/red-ui/src/assets/styles/red-grid.scss @@ -8,9 +8,9 @@ display: flex; align-items: center; z-index: 1; + border-top: 1px solid $separator; border-bottom: 1px solid $separator; box-sizing: border-box; - @include inset-shadow; > *:not(:last-child) { margin-right: 10px; @@ -19,9 +19,10 @@ .actions { display: flex; align-items: center; + justify-content: flex-end; > *:not(:last-child) { - margin-right: 25px; + margin-right: 16px; } } } diff --git a/apps/red-ui/src/assets/styles/red-page-layout.scss b/apps/red-ui/src/assets/styles/red-page-layout.scss index 6007ddc1f..33818c533 100644 --- a/apps/red-ui/src/assets/styles/red-page-layout.scss +++ b/apps/red-ui/src/assets/styles/red-page-layout.scss @@ -76,20 +76,11 @@ body { position: absolute; bottom: 0; width: 100%; - height: calc(100% - 110px); - z-index: 1; + height: calc(100% - 112px); transition: height ease-in-out 0.2s; } .content-container { - .overlay-shadow { - @include inset-shadow; - position: fixed; - width: 100%; - height: 4px; - z-index: 1; - } - overflow: hidden; transition: width ease-in-out 0.2s, min-width ease-in-out 0.2s; position: relative; @@ -142,9 +133,7 @@ body { border-left: 1px solid $grey-4; box-sizing: border-box; background: $white; - z-index: 1; overflow: hidden; - @include inset-shadow; transition: width ease-in-out 0.2s, min-width ease-in-out 0.2s; &:hover {