Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

Redo admin nav WIP

Browse Source
This commit is contained in:
Adina Țeudan 2021-04-26 22:22:35 +03:00
parent 5fbcab2b43
commit 10ef2f6bfe
21 changed files with 264 additions and 204 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/red-ui/src/app/modules/admin/admin.module.ts
View File

@ -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

54
apps/red-ui/src/app/modules/admin/components/breadcrumbs/admin-breadcrumbs.component.html
View File

@ -1,57 +1,5 @@
<div class="menu flex-2 visible-lg breadcrumbs-container">
<a
class="breadcrumb"
[routerLink]="'/main/admin/project-templates'"
[routerLinkActiveOptions]="{ exact: true }"
routerLinkActive="active"
translate="project-templates"
*ngIf="root || !!appStateService.activeRuleSet"
></a>
<a
class="breadcrumb"
[routerLink]="'/main/admin/digital-signature'"
[routerLinkActiveOptions]="{ exact: true }"
routerLinkActive="active"
translate="digital-signature"
*ngIf="root && permissionService.isAdmin()"
></a>
<a
class="breadcrumb"
[routerLink]="'/main/admin/license-info'"
[routerLinkActiveOptions]="{ exact: true }"
routerLinkActive="active"
translate="license-information"
*ngIf="root && permissionService.isAdmin()"
></a>
<a
class="breadcrumb"
[routerLink]="'/main/admin/audit'"
[routerLinkActiveOptions]="{ exact: true }"
routerLinkActive="active"
translate="audit"
*ngIf="root && permissionService.isAdmin()"
></a>
<a
class="breadcrumb"
[routerLink]="'/main/admin/users'"
[routerLinkActiveOptions]="{ exact: true }"
routerLinkActive="active"
translate="user-management"
*ngIf="root && permissionService.canManageUsers()"
></a>
<a
class="breadcrumb"
[routerLink]="'/main/admin/smtp-config'"
[routerLinkActiveOptions]="{ exact: true }"
routerLinkActive="active"
translate="configurations"
*ngIf="root && permissionService.isAdmin()"
></a>
<a class="breadcrumb" [routerLink]="'/main/admin/project-templates'" translate="project-templates" *ngIf="root || !!appStateService.activeRuleSet"></a>
<ng-container *ngIf="appStateService.activeRuleSet">
<mat-icon svgIcon="red:arrow-right"></mat-icon>

17
apps/red-ui/src/app/modules/admin/components/side-nav/side-nav.component.html Normal file
View File

@ -0,0 +1,17 @@
<div class="all-caps-label" [translate]="type"></div>
<ng-container *ngFor="let item of items[type]">
<div
class="item"
*ngIf="
(!item.onlyAdmin || permissionsService.isAdmin()) &&
(!item.onlyDevMode || userPreferenceService.areDevFeaturesEnabled) &&
(!item.userManagerOnly || permissionsService.canManageUsers())
"
[routerLink]="'../' + item.screen"
[routerLinkActiveOptions]="{ exact: true }"
routerLinkActive="active"
>
{{ item.label || item.screen | translate }}
</div>
</ng-container>

32
apps/red-ui/src/app/modules/admin/components/side-nav/side-nav.component.scss Normal file
View File

@ -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;
}
}
}

45
apps/red-ui/src/app/modules/admin/components/side-nav/side-nav.component.ts Normal file
View File

@ -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]);
// }
}

6
apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html
View File

@ -2,8 +2,6 @@
<div class="page-header">
<redaction-admin-breadcrumbs class="flex-1"></redaction-admin-breadcrumbs>
<redaction-tabs [screen]="'dictionaries'"></redaction-tabs>
<div class="flex-1 actions">
<redaction-rule-set-actions> </redaction-rule-set-actions>
@ -12,6 +10,10 @@
</div>
<div class="red-content-inner">
<div class="overlay-shadow"></div>
<redaction-side-nav type="project-templates"></redaction-side-nav>
<div class="content-container">
<div class="header-item">
<div class="select-all-container">

15
apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html
View File

@ -15,16 +15,21 @@
</div>
<div class="red-content-inner">
<div class="overlay-shadow"></div>
<redaction-side-nav type="settings"></redaction-side-nav>
<div class="content-container">
<div class="content-container-content">
<form [formGroup]="digitalSignatureForm" (keyup)="formChanged()" autocomplete="off" *ngIf="digitalSignatureForm">
<input #fileInput (change)="fileChanged($event, fileInput)" hidden class="file-upload-input" type="file" />
<div *ngIf="!hasDigitalSignatureSet" class="no-certificate">
<div class="heading-l" translate="digital-signature-screen.no-key"></div>
<redaction-icon-button (action)="fileInput.click()" icon="red:upload" text="digital-signature-screen.upload-key" type="primary">
</redaction-icon-button>
</div>
<redaction-empty-state
*ngIf="!hasDigitalSignatureSet"
screen="digital-signature-screen"
buttonIcon="red:upload"
(action)="fileInput.click()"
></redaction-empty-state>
<div class="red-input-group required w-300" [class.hidden]="!hasDigitalSignatureSet">
<label translate="digital-signature-screen.certificate-name.label"></label>

21
apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.scss
View File

@ -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;

4
apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.html
View File

@ -16,6 +16,10 @@
</div>
<div class="red-content-inner">
<div class="overlay-shadow"></div>
<redaction-side-nav type="settings"></redaction-side-nav>
<div class="content-container">
<div class="grid-container">
<div class="row">

5
apps/red-ui/src/app/modules/admin/screens/license-information/license-information-screen.component.scss
View File

@ -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;

209
apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.html
View File

@ -1,20 +1,13 @@
<section>
<div class="page-header">
<redaction-admin-breadcrumbs class="flex-1" [root]="true"></redaction-admin-breadcrumbs>
<div class="overlay-shadow"></div>
<div class="actions">
<redaction-search-input [form]="searchForm" [placeholder]="'project-templates-listing.search'"></redaction-search-input>
<redaction-side-nav type="settings"></redaction-side-nav>
<redaction-icon-button
*ngIf="permissionsService.isAdmin() && userPreferenceService.areDevFeaturesEnabled"
icon="red:plus"
(action)="openAddRuleSetDialog()"
text="project-templates-listing.add-new"
type="primary"
></redaction-icon-button>
<div>
<div class="page-header">
<redaction-admin-breadcrumbs class="flex-1" [root]="true"></redaction-admin-breadcrumbs>
<redaction-circle-button
class="ml-6"
*ngIf="permissionsService.isUser()"
[routerLink]="['/main/projects/']"
tooltip="common.close"
@ -22,102 +15,114 @@
icon="red:close"
></redaction-circle-button>
</div>
</div>
<div class="red-content-inner">
<div class="content-container">
<div class="header-item">
<div class="select-all-container">
<redaction-round-checkbox
(click)="toggleSelectAll()"
[active]="areAllEntitiesSelected"
[indeterminate]="areSomeEntitiesSelected && !areAllEntitiesSelected"
></redaction-round-checkbox>
<div class="red-content-inner">
<div class="content-container">
<div class="header-item">
<div class="select-all-container">
<redaction-round-checkbox
(click)="toggleSelectAll()"
[active]="areAllEntitiesSelected"
[indeterminate]="areSomeEntitiesSelected && !areAllEntitiesSelected"
></redaction-round-checkbox>
</div>
<span class="all-caps-label">
{{ 'project-templates-listing.table-header.title' | translate: { length: displayedEntities.length } }}
</span>
<div class="actions flex-1">
<redaction-search-input [form]="searchForm" [placeholder]="'project-templates-listing.search'"></redaction-search-input>
<redaction-icon-button
*ngIf="permissionsService.isAdmin() && userPreferenceService.areDevFeaturesEnabled"
icon="red:plus"
(action)="openAddRuleSetDialog()"
text="project-templates-listing.add-new"
type="primary"
></redaction-icon-button>
</div>
</div>
<span class="all-caps-label">
{{ 'project-templates-listing.table-header.title' | translate: { length: displayedEntities.length } }}
</span>
</div>
<div class="table-header" redactionSyncWidth="table-item" [class.no-data]="!allEntities.length">
<div class="select-oval-placeholder"></div>
<div class="table-header" redactionSyncWidth="table-item" [class.no-data]="!allEntities.length">
<div class="select-oval-placeholder"></div>
<redaction-table-col-name
label="project-templates-listing.table-col-names.name"
column="name"
(toggleSort)="toggleSort($event)"
[activeSortingOption]="sortingOption"
[withSort]="true"
></redaction-table-col-name>
<redaction-table-col-name label="project-templates-listing.table-col-names.created-by" class="user-column"></redaction-table-col-name>
<redaction-table-col-name
label="project-templates-listing.table-col-names.created-on"
column="dateAdded"
(toggleSort)="toggleSort($event)"
[activeSortingOption]="sortingOption"
[withSort]="true"
></redaction-table-col-name>
<redaction-table-col-name
label="project-templates-listing.table-col-names.modified-on"
column="dateModified"
(toggleSort)="toggleSort($event)"
[activeSortingOption]="sortingOption"
[withSort]="true"
></redaction-table-col-name>
<div class="scrollbar-placeholder"></div>
</div>
<redaction-empty-state *ngIf="!allEntities.length" icon="red:template" screen="project-templates-listing"></redaction-empty-state>
<redaction-empty-state
*ngIf="allEntities.length && !displayedEntities.length"
screen="project-templates-listing"
type="no-match"
></redaction-empty-state>
<cdk-virtual-scroll-viewport [itemSize]="100" redactionHasScrollbar>
<div
class="table-item pointer"
*cdkVirtualFor="let ruleSet of displayedEntities | sortBy: sortingOption.order:sortingOption.column"
[routerLink]="[ruleSet.ruleSetId, 'dictionaries']"
>
<div class="selection-column" (click)="toggleEntitySelected($event, ruleSet)">
<redaction-round-checkbox [active]="isEntitySelected(ruleSet)"></redaction-round-checkbox>
</div>
<div>
<div class="table-item-title heading">
{{ ruleSet.name }}
</div>
<div class="small-label stats-subtitle">
<div>
<mat-icon svgIcon="red:dictionary"></mat-icon>
{{ 'project-templates-listing.dictionaries' | translate: { length: ruleSet.dictionariesCount } }}
</div>
</div>
</div>
<div class="user-column">
<redaction-initials-avatar [userId]="ruleSet.createdBy" [withName]="true"> </redaction-initials-avatar>
</div>
<div class="small-label">
{{ ruleSet.dateAdded | date: 'd MMM. yyyy' }}
</div>
<div>
<div class="small-label">
{{ ruleSet.dateModified | date: 'd MMM. yyyy' }}
</div>
<redaction-rule-set-actions
class="actions-container"
[ruleSetId]="ruleSet.ruleSetId"
(loadRuleSetsData)="loadRuleSetsData()"
></redaction-rule-set-actions>
</div>
<redaction-table-col-name
label="project-templates-listing.table-col-names.name"
column="name"
(toggleSort)="toggleSort($event)"
[activeSortingOption]="sortingOption"
[withSort]="true"
></redaction-table-col-name>
<redaction-table-col-name label="project-templates-listing.table-col-names.created-by" class="user-column"></redaction-table-col-name>
<redaction-table-col-name
label="project-templates-listing.table-col-names.created-on"
column="dateAdded"
(toggleSort)="toggleSort($event)"
[activeSortingOption]="sortingOption"
[withSort]="true"
></redaction-table-col-name>
<redaction-table-col-name
label="project-templates-listing.table-col-names.modified-on"
column="dateModified"
(toggleSort)="toggleSort($event)"
[activeSortingOption]="sortingOption"
[withSort]="true"
></redaction-table-col-name>
<div class="scrollbar-placeholder"></div>
</div>
</cdk-virtual-scroll-viewport>
<redaction-empty-state *ngIf="!allEntities.length" icon="red:template" screen="project-templates-listing"></redaction-empty-state>
<redaction-empty-state
*ngIf="allEntities.length && !displayedEntities.length"
screen="project-templates-listing"
type="no-match"
></redaction-empty-state>
<cdk-virtual-scroll-viewport [itemSize]="100" redactionHasScrollbar>
<div
class="table-item pointer"
*cdkVirtualFor="let ruleSet of displayedEntities | sortBy: sortingOption.order:sortingOption.column"
[routerLink]="[ruleSet.ruleSetId, 'dictionaries']"
>
<div class="selection-column" (click)="toggleEntitySelected($event, ruleSet)">
<redaction-round-checkbox [active]="isEntitySelected(ruleSet)"></redaction-round-checkbox>
</div>
<div>
<div class="table-item-title heading">
{{ ruleSet.name }}
</div>
<div class="small-label stats-subtitle">
<div>
<mat-icon svgIcon="red:dictionary"></mat-icon>
{{ 'project-templates-listing.dictionaries' | translate: { length: ruleSet.dictionariesCount } }}
</div>
</div>
</div>
<div class="user-column">
<redaction-initials-avatar [userId]="ruleSet.createdBy" [withName]="true"> </redaction-initials-avatar>
</div>
<div class="small-label">
{{ ruleSet.dateAdded | date: 'd MMM. yyyy' }}
</div>
<div>
<div class="small-label">
{{ ruleSet.dateModified | date: 'd MMM. yyyy' }}
</div>
<redaction-rule-set-actions
class="actions-container"
[ruleSetId]="ruleSet.ruleSetId"
(loadRuleSetsData)="loadRuleSetsData()"
></redaction-rule-set-actions>
</div>
<div class="scrollbar-placeholder"></div>
</div>
</cdk-virtual-scroll-viewport>
</div>
</div>
</div>
</section>

13
apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.scss
View File

@ -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;
}

1
apps/red-ui/src/app/modules/projects/components/document-info/document-info.component.scss
View File

@ -8,7 +8,6 @@
background: white;
z-index: 1;
width: 100%;
@include inset-shadow;
}
.right-content {

3
apps/red-ui/src/app/modules/projects/screens/file-preview-screen/file-preview-screen.component.html
View File

@ -190,9 +190,10 @@
</div>
</div>
<div class="overlay-shadow"></div>
<div class="red-content-inner">
<div class="content-container">
<div class="overlay-shadow"></div>
<redaction-pdf-viewer
*ngIf="displayPDFViewer"
(keyUp)="handleKeyEvent($event)"

2
apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.html
View File

@ -44,6 +44,8 @@
></redaction-icon-button>
</div>
<div class="overlay-shadow"></div>
<div class="red-content-inner">
<div class="content-container">
<div class="header-item">

3
apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.html
View File

@ -81,6 +81,9 @@
></redaction-circle-button>
</div>
</div>
<div class="overlay-shadow"></div>
<div class="red-content-inner">
<div class="content-container" [class.extended]="collapsedDetails">
<div class="header-item">

2
apps/red-ui/src/app/modules/shared/components/empty-state/empty-state.component.ts
View File

@ -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',

7
apps/red-ui/src/assets/i18n/en.json
View File

@ -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"

9
apps/red-ui/src/assets/styles/red-components.scss
View File

@ -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;
}

5
apps/red-ui/src/assets/styles/red-grid.scss
View File

@ -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;
}
}
}

13
apps/red-ui/src/assets/styles/red-page-layout.scss
View File

@ -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 {