diff --git a/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.scss b/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.scss index f37816eb9..23bddbc23 100644 --- a/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.scss +++ b/apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.scss @@ -1,6 +1,4 @@ .content-container { - width: 100vw; - cdk-virtual-scroll-viewport { ::ng-deep.cdk-virtual-scroll-content-wrapper { grid-template-columns: 2fr 1fr 1fr 1fr auto 11px; 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..b67417b41 100644 --- a/apps/red-ui/src/app/modules/admin/admin.module.ts +++ b/apps/red-ui/src/app/modules/admin/admin.module.ts @@ -15,7 +15,6 @@ import { UserListingScreenComponent } from './screens/user-listing/user-listing- import { WatermarkScreenComponent } from './screens/watermark/watermark-screen.component'; import { AdminBreadcrumbsComponent } from './components/breadcrumbs/admin-breadcrumbs.component'; import { RuleSetActionsComponent } from './components/rule-set-actions/rule-set-actions.component'; -import { TabsComponent } from './components/tabs/tabs.component'; import { AceEditorModule } from 'ng2-ace-editor'; import { ColorPickerModule } from 'ngx-color-picker'; import { AddEditFileAttributeDialogComponent } from './dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component'; @@ -33,6 +32,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, @@ -64,11 +64,11 @@ const screens = [ const components = [ AdminBreadcrumbsComponent, RuleSetActionsComponent, - TabsComponent, ComboChartComponent, 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..dd49f134e --- /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..c8ac63e79 --- /dev/null +++ b/apps/red-ui/src/app/modules/admin/components/side-nav/side-nav.component.ts @@ -0,0 +1,47 @@ +import { Component, Input, OnInit } from '@angular/core'; +import { PermissionsService } from '../../../../services/permissions.service'; +import { UserPreferenceService } from '../../../../services/user-preference.service'; +import { AppStateService } from '../../../../state/app-state.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 _appStateService: AppStateService, + public readonly userPreferenceService: UserPreferenceService, + public readonly permissionsService: PermissionsService + ) {} + + ngOnInit(): void {} + + public get prefix() { + if (!!this._appStateService.activeDictionaryType) { + return '../../'; + } + + return '../'; + } +} diff --git a/apps/red-ui/src/app/modules/admin/components/tabs/tabs.component.html b/apps/red-ui/src/app/modules/admin/components/tabs/tabs.component.html deleted file mode 100644 index c93576d79..000000000 --- a/apps/red-ui/src/app/modules/admin/components/tabs/tabs.component.html +++ /dev/null @@ -1,10 +0,0 @@ - -
- {{ tab.label || tab.screen | translate }} -
- diff --git a/apps/red-ui/src/app/modules/admin/components/tabs/tabs.component.scss b/apps/red-ui/src/app/modules/admin/components/tabs/tabs.component.scss deleted file mode 100644 index e7a72018d..000000000 --- a/apps/red-ui/src/app/modules/admin/components/tabs/tabs.component.scss +++ /dev/null @@ -1,3 +0,0 @@ -:host { - display: flex; -} diff --git a/apps/red-ui/src/app/modules/admin/components/tabs/tabs.component.ts b/apps/red-ui/src/app/modules/admin/components/tabs/tabs.component.ts deleted file mode 100644 index 67ff06292..000000000 --- a/apps/red-ui/src/app/modules/admin/components/tabs/tabs.component.ts +++ /dev/null @@ -1,35 +0,0 @@ -import { Component, Input, OnInit } from '@angular/core'; -import { Router } from '@angular/router'; -import { AppStateService } from '../../../../state/app-state.service'; -import { UserPreferenceService } from '../../../../services/user-preference.service'; -import { PermissionsService } from '../../../../services/permissions.service'; - -@Component({ - selector: 'redaction-tabs', - templateUrl: './tabs.component.html', - styleUrls: ['./tabs.component.scss'] -}) -export class TabsComponent implements OnInit { - @Input() public screen: 'rules' | 'dictionaries' | 'watermark' | 'default-colors' | 'file-attributes'; - - public tabs: { screen: string; onlyDevMode?: boolean; onlyAdmin?: boolean; label?: string }[] = [ - { screen: 'dictionaries' }, - { screen: 'rules', onlyDevMode: true, label: 'rule-editor' }, - { screen: 'default-colors' }, - { screen: 'watermark' }, - { screen: 'file-attributes', onlyAdmin: true } - ]; - - constructor( - public readonly userPreferenceService: UserPreferenceService, - public readonly permissionsService: PermissionsService, - private readonly _router: Router, - private readonly _appStateService: AppStateService - ) {} - - ngOnInit(): void {} - - public switchView(screen: string) { - this._router.navigate(['main/admin/project-templates/' + this._appStateService.activeRuleSetId + '/' + screen]); - } -} diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss index f3114a403..fa5bc1e46 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss +++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss @@ -198,8 +198,4 @@ } } } - - > .content-container { - width: 100%; - } } diff --git a/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html index a40ad07ed..62a0e63a7 100644 --- a/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html +++ b/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html @@ -1,113 +1,119 @@ -
-
- +
+
-
- + + +
+
+
+ +
+ +
-
-
-
-
- - {{ 'audit-screen.table-header.title' | translate: { length: logs?.totalHits || 0 } }} - -
- -
·
-
-
- - - - {{ category | translate }} - - - -
-
- - - - -
- - - -
- - - -
+
+
+
+ + {{ 'audit-screen.table-header.title' | translate: { length: logs?.totalHits || 0 } }} + +
+
·
-
- - - - - -
+ +
+ + + + {{ category | translate }} + + + +
+
+ + + + +
+ + + +
+ + + +
+
·
+
+ + + + + +
-
+
-
- - - - - -
- +
+ + + + + +
+ +
-
-
- - - - -
-
- - - - -
-
- {{ log.message }} -
-
- {{ log.recordDate | date: 'd MMM. yyyy, hh:mm a' }} -
-
- -
-
- {{ log.category }} -
+
+ + + +
- + + + + +
+
+ {{ log.message }} +
+
+ {{ log.recordDate | date: 'd MMM. yyyy, hh:mm a' }} +
+
+ +
+
+ {{ log.category }} +
+
+
+ +
diff --git a/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.scss index f67c74342..ed783d9a8 100644 --- a/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.scss +++ b/apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.scss @@ -1,6 +1,4 @@ .content-container { - width: 100vw; - .header-item { justify-content: space-between; } diff --git a/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.html index a91352feb..b6ecf8f27 100644 --- a/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.html +++ b/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.html @@ -2,8 +2,6 @@
- -
@@ -12,6 +10,10 @@
+
+ + +
diff --git a/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.scss index 2379ca3d7..3bb8d5a0b 100644 --- a/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.scss +++ b/apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.scss @@ -1,6 +1,4 @@ .content-container { - width: 100vw; - cdk-virtual-scroll-viewport { ::ng-deep.cdk-virtual-scroll-content-wrapper { grid-template-columns: 2fr 1fr 2fr 11px; 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/dictionary-listing/dictionary-listing-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.scss index ecc1ef86c..e49e5d61f 100644 --- a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.scss +++ b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.scss @@ -22,8 +22,6 @@ redaction-table-col-name::ng-deep { } .content-container { - width: calc(100vw - 353px); - cdk-virtual-scroll-viewport { ::ng-deep.cdk-virtual-scroll-content-wrapper { grid-template-columns: auto 2fr 1fr 1fr 1fr 11px; diff --git a/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.html index 1de86471a..ac8450424 100644 --- a/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.html +++ b/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.html @@ -51,6 +51,10 @@
+
+ + +
diff --git a/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.scss index 34d713eec..a6a294618 100644 --- a/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.scss +++ b/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.scss @@ -20,9 +20,7 @@ } .content-container { - width: calc(100vw - 353px); padding: 15px; - @include inset-shadow; .actions-bar { display: flex; 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..cf3e4b47a 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 @@ -1,89 +1,96 @@ -
-
- +
+
-
- + + +
+
+
+ +
+ +
-
-
-
-
-
- +
+
+
+ + -
-
- - -
+ -
- - -
+
+ + +
-
- - -
+
+ + +
-
- - -
+
+ + +
-
- - -
+
+ + +
-
- - -
+
+ + +
-
- +
+ - + -
-
- +
+
+ +
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..d9f77b434 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,28 +1,5 @@ -@import '../../../../../assets/styles/red-mixins'; -@import '../../../../../assets/styles/red-variables'; - -.content-container { - width: 100vw; - @include inset-shadow; - - .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; - } +.content-container-content { + margin: 20px; } form { diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html index c3d752e6e..40569c5ac 100644 --- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html +++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.html @@ -2,14 +2,16 @@
- -
+
+ + +
diff --git a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.scss index 0be3ec515..239036305 100644 --- a/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.scss +++ b/apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.scss @@ -16,8 +16,6 @@ redaction-table-col-name::ng-deep { } .content-container { - width: 100vw; - .header-item { .attributes-actions-container { display: flex; 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..f8c7f3582 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 @@ -1,118 +1,124 @@ -
-
- +
+
-
- - -
-
+ -
-
-
-
-
-
{{ appConfigService.getConfig('BACKEND_APP_VERSION', '-') }}
-
+
+
+
-
-
-
{{ appConfigService.getConfig('FRONTEND_APP_VERSION', '-') }}
-
- -
-
-
{{ appConfigService.getConfig('APP_NAME', '-') }}
-
- -
-
-
{{ 'license-info-screen.copyright-claim-text' | translate: { currentYear: currentYear } }}
-
- -
-
-
-
- - - - - - - -
- -
-
-
{{ appConfigService.getConfig('LICENSE_CUSTOMER', '-') }}
-
- -
-
-
{{ appConfigService.getConfig('LICENSE_START', '-') }} / {{ appConfigService.getConfig('LICENSE_END', '-') }}
-
- -
-
{{ 'license-info-screen.licensed-page-count' | translate }}
-
{{ totalLicensedNumberOfPages }}
-
- -
-
-
{{ currentInfo.numberOfAnalyzedPages }}
-
- -
- -
-
{{ 'license-info-screen.total-analyzed' | translate: { date: totalInfo.startDate | date: 'longDate' } }}
-
{{ totalInfo.numberOfAnalyzedPages }}
-
- -
-
-
{{ currentInfo.numberOfAnalyzedPages }} ({{ analysisPercentageOfLicense | number: '1.0-2' }}%)
-
- -
-
-
{{ unlicensedInfo.numberOfAnalyzedPages }}
-
- - - - - - +
+ +
+
- - +
+
+
+
+
+
{{ appConfigService.getConfig('BACKEND_APP_VERSION', '-') }}
+
+ +
+
+
{{ appConfigService.getConfig('FRONTEND_APP_VERSION', '-') }}
+
+ +
+
+
{{ appConfigService.getConfig('APP_NAME', '-') }}
+
+ +
+
+
{{ 'license-info-screen.copyright-claim-text' | translate: { currentYear: currentYear } }}
+
+ +
+
+
+
+ + + + + + + +
+ +
+
+
{{ appConfigService.getConfig('LICENSE_CUSTOMER', '-') }}
+
+ +
+
+
{{ appConfigService.getConfig('LICENSE_START', '-') }} / {{ appConfigService.getConfig('LICENSE_END', '-') }}
+
+ +
+
{{ 'license-info-screen.licensed-page-count' | translate }}
+
{{ totalLicensedNumberOfPages }}
+
+ +
+
+
{{ currentInfo.numberOfAnalyzedPages }}
+
+ +
+ +
+
{{ 'license-info-screen.total-analyzed' | translate: { date: totalInfo.startDate | date: 'longDate' } }}
+
{{ totalInfo.numberOfAnalyzedPages }}
+
+ +
+
+
{{ currentInfo.numberOfAnalyzedPages }} ({{ analysisPercentageOfLicense | number: '1.0-2' }}%)
+
+ +
+
+
{{ unlicensedInfo.numberOfAnalyzedPages }}
+
+ + + + + + +
+ + + +
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..8c49b89fc 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,6 @@ @import '../../../../../assets/styles/red-variables'; .content-container { - width: 100vw; - @include inset-shadow; overflow: auto; @include scroll-bar; @@ -12,7 +10,7 @@ align-items: center; .grid-container { - width: calc(100vw - 40px); + width: calc(100% - 40px); 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..a20c7e523 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..e602d688d 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 @@ -12,8 +12,6 @@ redaction-table-col-name::ng-deep { } .content-container { - width: 100vw; - cdk-virtual-scroll-viewport { ::ng-deep.cdk-virtual-scroll-content-wrapper { grid-template-columns: auto 1fr 1fr 1fr 1fr 11px; diff --git a/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.html index 9e9831249..63aaeeb9e 100644 --- a/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.html +++ b/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.html @@ -2,8 +2,6 @@
- -
@@ -12,6 +10,10 @@
+
+ + +
-
- +
+
-
- + + +
+
+
+ +
+ +
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + + +
+ +
+ + +
+ +
+ + +
+ +
+ + + +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
+ + + +
+
-
-
-
-
- - -
- -
- - -
- -
- - -
- -
- - - -
- -
- - -
- -
- - -
- -
- - - -
-
-
-
- - -
-
- - -
-
- - -
-
-
-
-
- - - -
-
diff --git a/apps/red-ui/src/app/modules/admin/screens/smtp-config/smtp-config-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/smtp-config/smtp-config-screen.component.scss index 5e8fac9f7..5b53d4f8d 100644 --- a/apps/red-ui/src/app/modules/admin/screens/smtp-config/smtp-config-screen.component.scss +++ b/apps/red-ui/src/app/modules/admin/screens/smtp-config/smtp-config-screen.component.scss @@ -2,7 +2,6 @@ @import '../../../../../assets/styles/red-mixins'; .content-container { - width: 100vw; background-color: $grey-2; display: flex; justify-content: center; diff --git a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html index b8d14468f..d4a1a20cd 100644 --- a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html +++ b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html @@ -1,114 +1,120 @@ -
-
- +
+
-
- - - + + +
+
+
+ +
+ + + +
-
-
-
-
-
- +
+
+
+
+ +
+ + + {{ 'user-listing.table-header.title' | translate: { length: displayedEntities.length } }} + + + + + + +
- - {{ 'user-listing.table-header.title' | translate: { length: displayedEntities.length } }} - +
+
- - - + - -
+ -
-
+ - + - - - - - - -
-
-
- - - - - -
-
- -
- -
- -
-
{{ user.email || '-' }}
-
- -
-
{{ getDisplayRoles(user) }}
-
-
- - - - -
-
+
- -
-
- + + + + +
+
+ +
+ +
+ +
+
{{ user.email || '-' }}
+
+ +
+
{{ getDisplayRoles(user) }}
+
+
+ + + + +
+
+
+
+ +
+ +
+ +
diff --git a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.scss b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.scss index 31f73c518..b5f985509 100644 --- a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.scss +++ b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.scss @@ -1,6 +1,4 @@ .content-container { - width: calc(100vw - 353px); - .header-item { padding: 0 24px 0 10px; } diff --git a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.html index 621ed8f13..d85f80a3b 100644 --- a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.html +++ b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.html @@ -2,16 +2,17 @@
- -
+
+ + +
-
+
+
-
+
+
diff --git a/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.scss b/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.scss index 73cf4c93b..ca14f39fe 100644 --- a/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.scss +++ b/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.scss @@ -25,8 +25,6 @@ } } } - - width: calc(100vw - 466px); } .right-container { 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 0a9fab83f..84d0edc4a 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/projects/screens/project-overview-screen/project-overview-screen.component.scss b/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.scss index a1719e9b1..c578cb5e8 100644 --- a/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.scss +++ b/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.scss @@ -72,10 +72,6 @@ cdk-virtual-scroll-viewport { } } -.content-container { - width: calc(100vw - 375px); -} - .right-container { display: flex; width: 375px; 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/de.json b/apps/red-ui/src/assets/i18n/de.json index 6ee520bad..daa4bdd5b 100644 --- a/apps/red-ui/src/assets/i18n/de.json +++ b/apps/red-ui/src/assets/i18n/de.json @@ -10,7 +10,7 @@ "dev-mode": "[DEV-MODUS]", "upload-status": { "error": { - "file-size": "Datei zu groß. Das Limit ist {{Größe}} MB.", + "file-size": "Datei zu groß. Das Limit ist {{size}} MB.", "generic": "Datei konnte nicht hochgeladen werden ..." }, "dialog": { @@ -257,7 +257,7 @@ "documents": "{{count}} Dokumente", "analysed-pages": "{{count}} Seiten", "people": "{{count}} Benutzer", - "created-on": "Erstellt am {{Datum}}", + "created-on": "Erstellt am {{date}}", "due-date": "Geburtstermin}}" }, "description": "Beschreibung" @@ -630,7 +630,7 @@ } }, "table-header": { - "title": "{{Länge}} Wörterbücher" + "title": "{{length}} Wörterbücher" }, "table-col-names": { "type": "Art", @@ -647,10 +647,10 @@ "project-templates": "Projektvorlagen", "project-templates-listing": { "table-header": { - "title": "{{Länge}} Projektvorlagen" + "title": "{{length}} Projektvorlagen" }, - "entries": "{{Länge}} Einträge", - "dictionaries": "{{Länge}} Wörterbücher", + "entries": "{{length}} Einträge", + "dictionaries": "{{length}} Wörterbücher", "action": { "delete": "Vorlage löschen", "edit": "Vorlage bearbeiten" @@ -666,7 +666,7 @@ }, "user-listing": { "table-header": { - "title": "{{Länge}} Benutzer" + "title": "{{length}} Benutzer" }, "table-col-names": { "name": "Name", @@ -722,7 +722,7 @@ "reset-filters": "Filter zurücksetzen", "overwrite-files-dialog": { "title": "Die Datei existiert bereits!", - "question": "{{Dateiname}} existiert bereits. Was möchten Sie tun?", + "question": "{{filename}} existiert bereits. Was möchten Sie tun?", "options": { "overwrite": "Überschreiben", "skip": "Überspringen", @@ -744,14 +744,14 @@ "licensing-period": "Lizenzzeitraum", "analyzed-pages": "Analysierte Seiten", "usage-details": "Verwendungsdetails", - "total-analyzed": "Insgesamt analysierte Seiten seit {{Datum}}", + "total-analyzed": "Insgesamt analysierte Seiten seit {{date}}", "current-analyzed": "Analysierte Seiten im aktuellen Lizenzierungszeitraum", "unlicensed-analyzed": "Nicht lizenzierte analysierte Seiten" }, "default-colors": "Standardfarben", "default-colors-screen": { "table-header": { - "title": "{{Länge}} Standardfarben" + "title": "{{length}} Standardfarben" }, "table-col-names": { "key": "Art", @@ -778,7 +778,7 @@ }, "downloads-list": { "table-header": { - "title": "{{Länge}} Downloads" + "title": "{{length}} Downloads" }, "no-data": "Keine aktiven Downloads.", "table-col-names": { diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index afe458bb8..88ded3be0 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -754,6 +754,7 @@ }, "digital-signature": "Digital Signature", "project-templates": "Project Templates", + "settings": "Settings", "project-templates-listing": { "table-header": { "title": "{{length}} project templates" @@ -1130,8 +1131,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-breadcrumbs.scss b/apps/red-ui/src/assets/styles/red-breadcrumbs.scss index cfc6b8f54..dd9567bb3 100644 --- a/apps/red-ui/src/assets/styles/red-breadcrumbs.scss +++ b/apps/red-ui/src/assets/styles/red-breadcrumbs.scss @@ -9,34 +9,34 @@ margin-right: 6px; } - .breadcrumb { - text-decoration: none; - color: $grey-1; - font-weight: 600; - width: fit-content; - white-space: nowrap; - - &.back-to-projects { - display: flex !important; - justify-content: center; - align-items: center; - - mat-icon { - margin-right: 8px; - } - } - - &:last-child { - @include line-clamp(1); - } - - &.active { - color: $primary; - } - } - mat-icon { width: 16px; min-width: 16px; } } + +.breadcrumb { + text-decoration: none; + color: $grey-1; + font-weight: 600; + width: fit-content; + white-space: nowrap; + + &.back-to-projects { + display: flex !important; + justify-content: center; + align-items: center; + + mat-icon { + margin-right: 8px; + } + } + + &:last-child { + @include line-clamp(1); + } + + &.active { + color: $primary; + } +} 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..41380d7de 100644 --- a/apps/red-ui/src/assets/styles/red-grid.scss +++ b/apps/red-ui/src/assets/styles/red-grid.scss @@ -10,7 +10,6 @@ z-index: 1; border-bottom: 1px solid $separator; box-sizing: border-box; - @include inset-shadow; > *:not(:last-child) { margin-right: 10px; @@ -19,9 +18,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 bb8e49431..db844d535 100644 --- a/apps/red-ui/src/assets/styles/red-page-layout.scss +++ b/apps/red-ui/src/assets/styles/red-page-layout.scss @@ -12,6 +12,19 @@ body { line-height: 16px; } +section.settings { + display: flex; + + .page-header, + .red-content-inner { + width: calc(100vw - 200px); + } + + redaction-side-nav { + height: calc(100vh - 61px); + } +} + .page-header { display: flex; justify-content: space-between; @@ -21,6 +34,7 @@ body { width: 100vw; box-sizing: border-box; background-color: $white; + border-bottom: 1px solid $separator; .filters { display: flex; @@ -68,6 +82,10 @@ body { .red-content-inner { height: calc(100% - 50px); } + + .overlay-shadow { + top: 50px; + } } .red-content-inner { @@ -76,27 +94,14 @@ body { position: absolute; bottom: 0; width: 100%; - height: calc(100% - 110px); - z-index: 1; + height: calc(100% - 111px); 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; - - &.extended { - width: calc(100vw - 60px) !important; - } + width: 100%; .dialog { border-radius: 8px; @@ -142,9 +147,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 {