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

Redo admin navigation done

Browse Source
This commit is contained in:
Adina Țeudan 2021-04-27 18:35:31 +03:00
parent 10ef2f6bfe
commit 0b1300dfb4
38 changed files with 636 additions and 690 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/red-ui/src/app/components/downloads-list-screen/downloads-list-screen.component.scss
View File

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

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

@ -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';
@ -65,7 +64,6 @@ const screens = [
const components = [
AdminBreadcrumbsComponent,
RuleSetActionsComponent,
TabsComponent,
ComboChartComponent,
ComboSeriesVerticalComponent,
UsersStatsComponent,

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

@ -8,8 +8,8 @@
(!item.onlyDevMode || userPreferenceService.areDevFeaturesEnabled) &&
(!item.userManagerOnly || permissionsService.canManageUsers())
"
[routerLink]="'../' + item.screen"
[routerLinkActiveOptions]="{ exact: true }"
[routerLink]="prefix + item.screen"
[routerLinkActiveOptions]="{ exact: false }"
routerLinkActive="active"
>
{{ item.label || item.screen | translate }}

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

@ -1,7 +1,7 @@
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';
import { AppStateService } from '../../../../state/app-state.service';
@Component({
selector: 'redaction-side-nav',
@ -30,16 +30,18 @@ export class SideNavComponent implements OnInit {
};
constructor(
private readonly _router: Router,
private readonly _appStateService: AppStateService,
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]);
// }
public get prefix() {
if (!!this._appStateService.activeDictionaryType) {
return '../../';
}
return '../';
}
}

10
apps/red-ui/src/app/modules/admin/components/tabs/tabs.component.html
View File

@ -1,10 +0,0 @@
<ng-container *ngFor="let tab of tabs">
<div
class="red-tab"
*ngIf="(!tab.onlyAdmin || permissionsService.isAdmin()) && (!tab.onlyDevMode || userPreferenceService.areDevFeaturesEnabled)"
(click)="switchView(tab.screen)"
[class.active]="tab.screen === screen"
>
{{ tab.label || tab.screen | translate }}
</div>
</ng-container>

3
apps/red-ui/src/app/modules/admin/components/tabs/tabs.component.scss
View File

@ -1,3 +0,0 @@
:host {
display: flex;
}

35
apps/red-ui/src/app/modules/admin/components/tabs/tabs.component.ts
View File

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

4
apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/file-attributes-csv-import-dialog.component.scss
View File

@ -198,8 +198,4 @@
}
}
}
> .content-container {
width: 100%;
}
}

208
apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.html
View File

@ -1,113 +1,119 @@
<section>
<div class="page-header">
<redaction-admin-breadcrumbs class="flex-1" [root]="true"></redaction-admin-breadcrumbs>
<section class="settings">
<div class="overlay-shadow"></div>
<div class="actions">
<redaction-circle-button
class="ml-6"
*ngIf="permissionsService.isUser()"
[routerLink]="['/main/projects/']"
tooltip="common.close"
tooltipPosition="below"
icon="red:close"
></redaction-circle-button>
<redaction-side-nav type="settings"></redaction-side-nav>
<div>
<div class="page-header">
<div class="breadcrumb" translate="audit"></div>
<div class="actions">
<redaction-circle-button
class="ml-6"
*ngIf="permissionsService.isUser()"
[routerLink]="['/main/projects/']"
tooltip="common.close"
tooltipPosition="below"
icon="red:close"
></redaction-circle-button>
</div>
</div>
</div>
<div class="red-content-inner">
<div class="content-container">
<div class="header-item">
<span class="all-caps-label">
{{ 'audit-screen.table-header.title' | translate: { length: logs?.totalHits || 0 } }}
</span>
<div class="actions-wrapper">
<redaction-pagination
[settings]="{ currentPage: logs?.page || 0, totalPages: totalPages }"
(pageChanged)="pageChanged($event)"
></redaction-pagination>
<div class="separator">·</div>
<form [formGroup]="filterForm">
<div class="red-input-group w-150 mr-20">
<mat-form-field class="no-label">
<mat-select formControlName="category">
<mat-option *ngFor="let category of categories" [value]="category">
{{ category | translate }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="red-input-group w-150">
<mat-form-field class="no-label">
<mat-select formControlName="userId">
<mat-select-trigger>
<redaction-initials-avatar
*ngIf="filterForm.get('userId').value !== ALL_USERS"
size="small"
[userId]="filterForm.get('userId').value"
[withName]="true"
></redaction-initials-avatar>
<div *ngIf="filterForm.get('userId').value === ALL_USERS" [translate]="ALL_USERS"></div>
</mat-select-trigger>
<mat-option *ngFor="let userId of userIds" [value]="userId">
<redaction-initials-avatar
*ngIf="userId !== ALL_USERS"
size="small"
[userId]="userId"
[withName]="true"
></redaction-initials-avatar>
<div *ngIf="userId === ALL_USERS" [translate]="ALL_USERS"></div>
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="red-content-inner">
<div class="content-container">
<div class="header-item">
<span class="all-caps-label">
{{ 'audit-screen.table-header.title' | translate: { length: logs?.totalHits || 0 } }}
</span>
<div class="actions-wrapper">
<redaction-pagination
[settings]="{ currentPage: logs?.page || 0, totalPages: totalPages }"
(pageChanged)="pageChanged($event)"
></redaction-pagination>
<div class="separator">·</div>
<div class="red-input-group datepicker-wrapper mr-20">
<input placeholder="dd/mm/yy" [matDatepicker]="fromPicker" formControlName="from" />
<mat-datepicker-toggle matSuffix [for]="fromPicker">
<mat-icon matDatepickerToggleIcon svgIcon="red:calendar"></mat-icon>
</mat-datepicker-toggle>
<mat-datepicker #fromPicker></mat-datepicker>
</div>
<form [formGroup]="filterForm">
<div class="red-input-group w-150 mr-20">
<mat-form-field class="no-label">
<mat-select formControlName="category">
<mat-option *ngFor="let category of categories" [value]="category">
{{ category | translate }}
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="red-input-group w-150">
<mat-form-field class="no-label">
<mat-select formControlName="userId">
<mat-select-trigger>
<redaction-initials-avatar
*ngIf="filterForm.get('userId').value !== ALL_USERS"
size="small"
[userId]="filterForm.get('userId').value"
[withName]="true"
></redaction-initials-avatar>
<div *ngIf="filterForm.get('userId').value === ALL_USERS" [translate]="ALL_USERS"></div>
</mat-select-trigger>
<mat-option *ngFor="let userId of userIds" [value]="userId">
<redaction-initials-avatar
*ngIf="userId !== ALL_USERS"
size="small"
[userId]="userId"
[withName]="true"
></redaction-initials-avatar>
<div *ngIf="userId === ALL_USERS" [translate]="ALL_USERS"></div>
</mat-option>
</mat-select>
</mat-form-field>
</div>
<div class="separator">·</div>
<div class="red-input-group datepicker-wrapper mr-20">
<input placeholder="dd/mm/yy" [matDatepicker]="fromPicker" formControlName="from" />
<mat-datepicker-toggle matSuffix [for]="fromPicker">
<mat-icon matDatepickerToggleIcon svgIcon="red:calendar"></mat-icon>
</mat-datepicker-toggle>
<mat-datepicker #fromPicker></mat-datepicker>
</div>
<div class="mr-20" translate="audit-screen.to"></div>
<div class="mr-20" translate="audit-screen.to"></div>
<div class="red-input-group datepicker-wrapper">
<input placeholder="dd/mm/yy" [matDatepicker]="toPicker" formControlName="to" />
<mat-datepicker-toggle matSuffix [for]="toPicker">
<mat-icon matDatepickerToggleIcon svgIcon="red:calendar"></mat-icon>
</mat-datepicker-toggle>
<mat-datepicker #toPicker></mat-datepicker>
</div>
</form>
<div class="red-input-group datepicker-wrapper">
<input placeholder="dd/mm/yy" [matDatepicker]="toPicker" formControlName="to" />
<mat-datepicker-toggle matSuffix [for]="toPicker">
<mat-icon matDatepickerToggleIcon svgIcon="red:calendar"></mat-icon>
</mat-datepicker-toggle>
<mat-datepicker #toPicker></mat-datepicker>
</div>
</form>
</div>
</div>
</div>
<div class="table-header" redactionSyncWidth="table-item">
<redaction-table-col-name label="audit-screen.table-col-names.message" column="message"></redaction-table-col-name>
<redaction-table-col-name label="audit-screen.table-col-names.date" column="date"></redaction-table-col-name>
<redaction-table-col-name label="audit-screen.table-col-names.user" column="user" class="user-column"></redaction-table-col-name>
<redaction-table-col-name label="audit-screen.table-col-names.category" column="category"></redaction-table-col-name>
<div class="scrollbar-placeholder"></div>
</div>
<redaction-empty-state *ngIf="!logs?.totalHits" icon="red:document" screen="audit-screen"></redaction-empty-state>
<cdk-virtual-scroll-viewport [itemSize]="80" redactionHasScrollbar>
<div class="table-item pointer" *cdkVirtualFor="let log of logs?.data">
<div>
{{ log.message }}
</div>
<div class="small-label">
{{ log.recordDate | date: 'd MMM. yyyy, hh:mm a' }}
</div>
<div class="user-column">
<redaction-initials-avatar size="small" [userId]="log.userId" [withName]="true"></redaction-initials-avatar>
</div>
<div>
{{ log.category }}
</div>
<div class="table-header" redactionSyncWidth="table-item">
<redaction-table-col-name label="audit-screen.table-col-names.message" column="message"></redaction-table-col-name>
<redaction-table-col-name label="audit-screen.table-col-names.date" column="date"></redaction-table-col-name>
<redaction-table-col-name label="audit-screen.table-col-names.user" column="user" class="user-column"></redaction-table-col-name>
<redaction-table-col-name label="audit-screen.table-col-names.category" column="category"></redaction-table-col-name>
<div class="scrollbar-placeholder"></div>
</div>
</cdk-virtual-scroll-viewport>
<redaction-empty-state *ngIf="!logs?.totalHits" icon="red:document" screen="audit-screen"></redaction-empty-state>
<cdk-virtual-scroll-viewport [itemSize]="80" redactionHasScrollbar>
<div class="table-item pointer" *cdkVirtualFor="let log of logs?.data">
<div>
{{ log.message }}
</div>
<div class="small-label">
{{ log.recordDate | date: 'd MMM. yyyy, hh:mm a' }}
</div>
<div class="user-column">
<redaction-initials-avatar size="small" [userId]="log.userId" [withName]="true"></redaction-initials-avatar>
</div>
<div>
{{ log.category }}
</div>
<div class="scrollbar-placeholder"></div>
</div>
</cdk-virtual-scroll-viewport>
</div>
</div>
</div>
</section>

2
apps/red-ui/src/app/modules/admin/screens/audit/audit-screen.component.scss
View File

@ -1,6 +1,4 @@
.content-container {
width: 100vw;
.header-item {
justify-content: space-between;
}

6
apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-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]="'default-colors'"></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">
<span class="all-caps-label">

2
apps/red-ui/src/app/modules/admin/screens/default-colors/default-colors-screen.component.scss
View File

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

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

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

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

@ -51,6 +51,10 @@
</div>
<div class="flex red-content-inner">
<div class="overlay-shadow"></div>
<redaction-side-nav type="project-templates"></redaction-side-nav>
<div class="content-container">
<div class="actions-bar">
<div class="red-input-group w-450 mr-32">

2
apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.scss
View File

@ -20,9 +20,7 @@
}
.content-container {
width: calc(100vw - 353px);
padding: 15px;
@include inset-shadow;
.actions-bar {
display: flex;

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

@ -1,94 +1,96 @@
<section>
<div class="page-header">
<redaction-admin-breadcrumbs [root]="true" class="flex-1"></redaction-admin-breadcrumbs>
<section class="settings">
<div class="overlay-shadow"></div>
<div class="actions">
<redaction-circle-button
*ngIf="permissionsService.isUser()"
[routerLink]="['/main/projects/']"
class="ml-6"
icon="red:close"
tooltip="common.close"
tooltipPosition="below"
></redaction-circle-button>
<redaction-side-nav type="settings"></redaction-side-nav>
<div>
<div class="page-header">
<div class="breadcrumb" translate="digital-signature"></div>
<div class="actions">
<redaction-circle-button
*ngIf="permissionsService.isUser()"
[routerLink]="['/main/projects/']"
class="ml-6"
icon="red:close"
tooltip="common.close"
tooltipPosition="below"
></redaction-circle-button>
</div>
</div>
</div>
<div class="red-content-inner">
<div class="overlay-shadow"></div>
<div class="red-content-inner">
<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" />
<redaction-side-nav type="settings"></redaction-side-nav>
<redaction-empty-state
*ngIf="!hasDigitalSignatureSet"
screen="digital-signature-screen"
buttonIcon="red:upload"
(action)="fileInput.click()"
></redaction-empty-state>
<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 class="red-input-group required w-300" [class.hidden]="!hasDigitalSignatureSet">
<label translate="digital-signature-screen.certificate-name.label"></label>
<input
formControlName="certificateName"
name="certificateName"
[placeholder]="'digital-signature-screen.certificate-name.placeholder' | translate"
/>
</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" *ngIf="!digitalSignatureExists">
<label translate="digital-signature-screen.password.label"></label>
<input formControlName="keySecret" name="keySecret" [placeholder]="'digital-signature-screen.password.placeholder' | translate" />
</div>
<div class="red-input-group required w-300" [class.hidden]="!hasDigitalSignatureSet">
<label translate="digital-signature-screen.certificate-name.label"></label>
<input
formControlName="certificateName"
name="certificateName"
[placeholder]="'digital-signature-screen.certificate-name.placeholder' | translate"
/>
</div>
<div class="red-input-group w-300" [class.hidden]="!hasDigitalSignatureSet">
<label translate="digital-signature-screen.reason.label"></label>
<input formControlName="reason" name="reason" [placeholder]="'digital-signature-screen.reason.placeholder' | translate" />
</div>
<div class="red-input-group required w-300" [class.hidden]="!hasDigitalSignatureSet" *ngIf="!digitalSignatureExists">
<label translate="digital-signature-screen.password.label"></label>
<input formControlName="keySecret" name="keySecret" [placeholder]="'digital-signature-screen.password.placeholder' | translate" />
</div>
<div class="red-input-group w-300" [class.hidden]="!hasDigitalSignatureSet">
<label translate="digital-signature-screen.location.label"></label>
<input formControlName="location" name="location" [placeholder]="'digital-signature-screen.location.placeholder' | translate" />
</div>
<div class="red-input-group w-300" [class.hidden]="!hasDigitalSignatureSet">
<label translate="digital-signature-screen.reason.label"></label>
<input formControlName="reason" name="reason" [placeholder]="'digital-signature-screen.reason.placeholder' | translate" />
</div>
<div class="red-input-group w-300" [class.hidden]="!hasDigitalSignatureSet">
<label translate="digital-signature-screen.contact-info.label"></label>
<input
formControlName="contactInfo"
name="contactInfo"
[placeholder]="'digital-signature-screen.contact-info.placeholder' | translate"
/>
</div>
<div class="red-input-group w-300" [class.hidden]="!hasDigitalSignatureSet">
<label translate="digital-signature-screen.location.label"></label>
<input formControlName="location" name="location" [placeholder]="'digital-signature-screen.location.placeholder' | translate" />
</div>
<div class="changes-box" [class.hidden]="!hasDigitalSignatureSet">
<redaction-icon-button
[disabled]="digitalSignatureForm.invalid"
icon="red:check"
(action)="saveDigitalSignature()"
text="digital-signature-screen.action.save"
type="primary"
></redaction-icon-button>
<div class="red-input-group w-300" [class.hidden]="!hasDigitalSignatureSet">
<label translate="digital-signature-screen.contact-info.label"></label>
<input
formControlName="contactInfo"
name="contactInfo"
[placeholder]="'digital-signature-screen.contact-info.placeholder' | translate"
/>
</div>
<redaction-icon-button
*ngIf="digitalSignatureExists"
icon="red:trash"
(action)="removeDigitalSignature()"
text="digital-signature-screen.action.delete"
type="primary"
></redaction-icon-button>
<div class="changes-box" [class.hidden]="!hasDigitalSignatureSet">
<redaction-icon-button
[disabled]="digitalSignatureForm.invalid"
icon="red:check"
(action)="saveDigitalSignature()"
text="digital-signature-screen.action.save"
type="primary"
></redaction-icon-button>
<redaction-icon-button
*ngIf="digitalSignatureExists"
icon="red:trash"
(action)="removeDigitalSignature()"
text="digital-signature-screen.action.delete"
type="primary"
></redaction-icon-button>
<div
(click)="loadDigitalSignatureAndInitializeForm()"
translate="digital-signature-screen.action.reset"
*ngIf="!digitalSignatureExists"
class="all-caps-label cancel"
></div>
</div>
</form>
<div
(click)="loadDigitalSignatureAndInitializeForm()"
translate="digital-signature-screen.action.reset"
*ngIf="!digitalSignatureExists"
class="all-caps-label cancel"
></div>
</div>
</form>
</div>
</div>
</div>
</div>

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

@ -1,9 +1,5 @@
.content-container {
width: 100%;
.content-container-content {
margin: 20px;
}
.content-container-content {
margin: 20px;
}
form {

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

@ -2,14 +2,16 @@
<div class="page-header">
<redaction-admin-breadcrumbs class="flex-1"></redaction-admin-breadcrumbs>
<redaction-tabs [screen]="'file-attributes'"></redaction-tabs>
<div class="actions flex-1">
<redaction-circle-button [routerLink]="['../..']" tooltip="common.close" tooltipPosition="below" icon="red:close"></redaction-circle-button>
</div>
</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">

2
apps/red-ui/src/app/modules/admin/screens/file-attributes-listing/file-attributes-listing-screen.component.scss
View File

@ -16,8 +16,6 @@ redaction-table-col-name::ng-deep {
}
.content-container {
width: 100vw;
.header-item {
.attributes-actions-container {
display: flex;

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

@ -1,122 +1,124 @@
<section *ngIf="viewReady">
<div class="page-header">
<redaction-admin-breadcrumbs [root]="true" class="flex-1"></redaction-admin-breadcrumbs>
<section class="settings">
<div class="overlay-shadow"></div>
<div class="actions">
<button (click)="sendMail()" color="primary" mat-flat-button translate="license-info-screen.email-report"></button>
<redaction-circle-button
*ngIf="permissionsService.isUser()"
[routerLink]="['/main/projects/']"
class="ml-6"
icon="red:close"
tooltip="common.close"
tooltipPosition="below"
></redaction-circle-button>
</div>
</div>
<redaction-side-nav type="settings"></redaction-side-nav>
<div class="red-content-inner">
<div class="overlay-shadow"></div>
<div *ngIf="viewReady">
<div class="page-header">
<div class="breadcrumb" translate="license-information"></div>
<redaction-side-nav type="settings"></redaction-side-nav>
<div class="content-container">
<div class="grid-container">
<div class="row">
<div translate="license-info-screen.backend-version"></div>
<div>{{ appConfigService.getConfig('BACKEND_APP_VERSION', '-') }}</div>
</div>
<div class="row">
<div translate="license-info-screen.frontend-version"></div>
<div>{{ appConfigService.getConfig('FRONTEND_APP_VERSION', '-') }}</div>
</div>
<div class="row">
<div translate="license-info-screen.custom-app-title"></div>
<div>{{ appConfigService.getConfig('APP_NAME', '-') }}</div>
</div>
<div class="row">
<div translate="license-info-screen.copyright-claim-title"></div>
<div>{{ 'license-info-screen.copyright-claim-text' | translate: { currentYear: currentYear } }}</div>
</div>
<div class="row">
<div translate="license-info-screen.end-user-license-title"></div>
<div translate="license-info-screen.end-user-license-text"></div>
</div>
<!-- TODO-->
<!-- <div class="row">-->
<!-- <div translate="license-info-screen.3rd-party-title"></div>-->
<!-- <div>Future feature: we will provide that with the /info endpoint</div>-->
<!-- </div>-->
<div class="section-title all-caps-label" translate="license-info-screen.licensing-details"></div>
<div class="row">
<div translate="license-info-screen.licensed-to"></div>
<div>{{ appConfigService.getConfig('LICENSE_CUSTOMER', '-') }}</div>
</div>
<div class="row">
<div translate="license-info-screen.licensing-period"></div>
<div>{{ appConfigService.getConfig('LICENSE_START', '-') }} / {{ appConfigService.getConfig('LICENSE_END', '-') }}</div>
</div>
<div class="row">
<div>{{ 'license-info-screen.licensed-page-count' | translate }}</div>
<div>{{ totalLicensedNumberOfPages }}</div>
</div>
<div class="row">
<div translate="license-info-screen.analyzed-pages"></div>
<div>{{ currentInfo.numberOfAnalyzedPages }}</div>
</div>
<div class="section-title all-caps-label" translate="license-info-screen.usage-details"></div>
<div class="row">
<div>{{ 'license-info-screen.total-analyzed' | translate: { date: totalInfo.startDate | date: 'longDate' } }}</div>
<div>{{ totalInfo.numberOfAnalyzedPages }}</div>
</div>
<div class="row">
<div translate="license-info-screen.current-analyzed"></div>
<div>{{ currentInfo.numberOfAnalyzedPages }} ({{ analysisPercentageOfLicense | number: '1.0-2' }}%)</div>
</div>
<div class="row" *ngIf="!!unlicensedInfo">
<div translate="license-info-screen.unlicensed-analyzed"></div>
<div>{{ unlicensedInfo.numberOfAnalyzedPages }}</div>
</div>
<!-- TODO-->
<!-- <div class="row">-->
<!-- <div>Progress bar</div>-->
<!-- <div></div>-->
<!-- </div>-->
<div class="actions">
<button (click)="sendMail()" color="primary" mat-flat-button translate="license-info-screen.email-report"></button>
<redaction-circle-button
*ngIf="permissionsService.isUser()"
[routerLink]="['/main/projects/']"
class="ml-6"
icon="red:close"
tooltip="common.close"
tooltipPosition="below"
></redaction-circle-button>
</div>
</div>
<combo-chart-component
[view]="[1000, 300]"
[scheme]="comboBarScheme"
[legend]="true"
[colorSchemeLine]="lineChartScheme"
[results]="barChart"
[animations]="true"
[lineChart]="lineChartSeries"
[xAxis]="true"
[yAxis]="true"
[showGridLines]="true"
[showYAxisLabel]="true"
[showRightYAxisLabel]="true"
[yAxisLabel]="'license-info-screen.chart.pages-per-month' | translate"
[yAxisLabelRight]="'license-info-screen.chart.total-pages' | translate"
[legendTitle]="'license-info-screen.chart.legend' | translate"
>
</combo-chart-component>
<div class="red-content-inner">
<div class="content-container">
<div class="grid-container">
<div class="row">
<div translate="license-info-screen.backend-version"></div>
<div>{{ appConfigService.getConfig('BACKEND_APP_VERSION', '-') }}</div>
</div>
<div class="row">
<div translate="license-info-screen.frontend-version"></div>
<div>{{ appConfigService.getConfig('FRONTEND_APP_VERSION', '-') }}</div>
</div>
<div class="row">
<div translate="license-info-screen.custom-app-title"></div>
<div>{{ appConfigService.getConfig('APP_NAME', '-') }}</div>
</div>
<div class="row">
<div translate="license-info-screen.copyright-claim-title"></div>
<div>{{ 'license-info-screen.copyright-claim-text' | translate: { currentYear: currentYear } }}</div>
</div>
<div class="row">
<div translate="license-info-screen.end-user-license-title"></div>
<div translate="license-info-screen.end-user-license-text"></div>
</div>
<!-- TODO-->
<!-- <div class="row">-->
<!-- <div translate="license-info-screen.3rd-party-title"></div>-->
<!-- <div>Future feature: we will provide that with the /info endpoint</div>-->
<!-- </div>-->
<div class="section-title all-caps-label" translate="license-info-screen.licensing-details"></div>
<div class="row">
<div translate="license-info-screen.licensed-to"></div>
<div>{{ appConfigService.getConfig('LICENSE_CUSTOMER', '-') }}</div>
</div>
<div class="row">
<div translate="license-info-screen.licensing-period"></div>
<div>{{ appConfigService.getConfig('LICENSE_START', '-') }} / {{ appConfigService.getConfig('LICENSE_END', '-') }}</div>
</div>
<div class="row">
<div>{{ 'license-info-screen.licensed-page-count' | translate }}</div>
<div>{{ totalLicensedNumberOfPages }}</div>
</div>
<div class="row">
<div translate="license-info-screen.analyzed-pages"></div>
<div>{{ currentInfo.numberOfAnalyzedPages }}</div>
</div>
<div class="section-title all-caps-label" translate="license-info-screen.usage-details"></div>
<div class="row">
<div>{{ 'license-info-screen.total-analyzed' | translate: { date: totalInfo.startDate | date: 'longDate' } }}</div>
<div>{{ totalInfo.numberOfAnalyzedPages }}</div>
</div>
<div class="row">
<div translate="license-info-screen.current-analyzed"></div>
<div>{{ currentInfo.numberOfAnalyzedPages }} ({{ analysisPercentageOfLicense | number: '1.0-2' }}%)</div>
</div>
<div class="row" *ngIf="!!unlicensedInfo">
<div translate="license-info-screen.unlicensed-analyzed"></div>
<div>{{ unlicensedInfo.numberOfAnalyzedPages }}</div>
</div>
<!-- TODO-->
<!-- <div class="row">-->
<!-- <div>Progress bar</div>-->
<!-- <div></div>-->
<!-- </div>-->
</div>
<combo-chart-component
[view]="[1000, 300]"
[scheme]="comboBarScheme"
[legend]="true"
[colorSchemeLine]="lineChartScheme"
[results]="barChart"
[animations]="true"
[lineChart]="lineChartSeries"
[xAxis]="true"
[yAxis]="true"
[showGridLines]="true"
[showYAxisLabel]="true"
[showRightYAxisLabel]="true"
[yAxisLabel]="'license-info-screen.chart.pages-per-month' | translate"
[yAxisLabelRight]="'license-info-screen.chart.total-pages' | translate"
[legendTitle]="'license-info-screen.chart.legend' | translate"
>
</combo-chart-component>
</div>
</div>
</div>
</section>

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

@ -2,7 +2,6 @@
@import '../../../../../assets/styles/red-variables';
.content-container {
width: 100%;
overflow: auto;
@include scroll-bar;
@ -11,7 +10,7 @@
align-items: center;
.grid-container {
width: calc(100vw - 240px);
width: calc(100% - 40px);
display: grid;
grid-template-columns: 1fr 2fr;
margin: 20px 20px 50px 20px;

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

@ -1,11 +1,11 @@
<section>
<section class="settings">
<div class="overlay-shadow"></div>
<redaction-side-nav type="settings"></redaction-side-nav>
<div>
<div class="page-header">
<redaction-admin-breadcrumbs class="flex-1" [root]="true"></redaction-admin-breadcrumbs>
<div class="breadcrumb" translate="project-templates"></div>
<redaction-circle-button
*ngIf="permissionsService.isUser()"

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

@ -1,19 +1,6 @@
@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;
}
@ -25,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;

6
apps/red-ui/src/app/modules/admin/screens/rules/rules-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]="'rules'"></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="editor-container">
<ace-editor
#editorComponent

1
apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.scss
View File

@ -3,7 +3,6 @@
.editor-container {
width: 100%;
padding: 15px;
@include inset-shadow;
}
.page-header .actions {

263
apps/red-ui/src/app/modules/admin/screens/smtp-config/smtp-config-screen.component.html
View File

@ -1,136 +1,141 @@
<section>
<div class="page-header">
<redaction-admin-breadcrumbs [root]="true" class="flex-1"></redaction-admin-breadcrumbs>
<section class="settings">
<div class="overlay-shadow"></div>
<div class="actions">
<redaction-circle-button
*ngIf="permissionsService.isUser()"
[routerLink]="['/main/projects/']"
class="ml-6"
icon="red:close"
tooltip="common.close"
tooltipPosition="below"
></redaction-circle-button>
<redaction-side-nav type="settings"></redaction-side-nav>
<div>
<div class="page-header">
<div class="breadcrumb" translate="configurations"></div>
<div class="actions">
<redaction-circle-button
*ngIf="permissionsService.isUser()"
[routerLink]="['/main/projects/']"
class="ml-6"
icon="red:close"
tooltip="common.close"
tooltipPosition="below"
></redaction-circle-button>
</div>
</div>
</div>
<div class="red-content-inner">
<div class="content-container">
<div class="overlay-shadow"></div>
<div class="dialog">
<div class="dialog-header">
<div class="heading-l" translate="smtp-config-screen.title"></div>
<div translate="smtp-config-screen.subtitle"></div>
<div class="red-content-inner">
<div class="content-container">
<div class="dialog">
<div class="dialog-header">
<div class="heading-l" translate="smtp-config-screen.title"></div>
<div translate="smtp-config-screen.subtitle"></div>
</div>
<form [formGroup]="configForm" (submit)="save()">
<div class="dialog-content">
<div class="dialog-content-left">
<div class="red-input-group required">
<label translate="smtp-config-screen.form.host"></label>
<input
formControlName="host"
name="host"
type="text"
placeholder="{{ 'smtp-config-screen.form.host-placeholder' | translate }}"
/>
</div>
<div class="red-input-group w-100">
<label translate="smtp-config-screen.form.port"></label>
<input
formControlName="port"
name="port"
type="number"
placeholder="{{ 'smtp-config-screen.form.port-placeholder' | translate }}"
/>
</div>
<div class="red-input-group required">
<label translate="smtp-config-screen.form.from"></label>
<input
formControlName="from"
name="from"
type="email"
placeholder="{{ 'smtp-config-screen.form.from-placeholder' | translate }}"
/>
</div>
<div class="red-input-group">
<label translate="smtp-config-screen.form.from-display-name"></label>
<input
formControlName="fromDisplayName"
name="fromDisplayName"
type="text"
placeholder="{{ 'smtp-config-screen.form.from-display-name-placeholder' | translate }}"
/>
<span class="hint" translate="smtp-config-screen.form.from-display-name-hint"></span>
</div>
<div class="red-input-group">
<label translate="smtp-config-screen.form.reply-to"></label>
<input
formControlName="replyTo"
name="replyTo"
type="text"
placeholder="{{ 'smtp-config-screen.form.reply-to-placeholder' | translate }}"
/>
</div>
<div class="red-input-group">
<label translate="smtp-config-screen.form.reply-to-display-name"></label>
<input
formControlName="replyToDisplayName"
name="replyToDisplayName"
type="text"
placeholder="{{ 'smtp-config-screen.form.reply-to-display-name-placeholder' | translate }}"
/>
</div>
<div class="red-input-group">
<label translate="smtp-config-screen.form.envelope-from"></label>
<input
formControlName="envelopeFrom"
name="envelopeFrom"
type="text"
placeholder="{{ 'smtp-config-screen.form.envelope-from-placeholder' | translate }}"
/>
<span class="hint" translate="smtp-config-screen.form.envelope-from-hint"></span>
</div>
</div>
<div>
<div class="red-input-group">
<label translate="smtp-config-screen.form.ssl"></label>
<mat-slide-toggle formControlName="ssl" color="primary"></mat-slide-toggle>
</div>
<div class="red-input-group">
<label translate="smtp-config-screen.form.starttls"></label>
<mat-slide-toggle formControlName="starttls" color="primary"></mat-slide-toggle>
</div>
<div class="red-input-group">
<label translate="smtp-config-screen.form.auth"></label>
<mat-slide-toggle formControlName="auth" color="primary"></mat-slide-toggle>
</div>
<div
class="link-action"
*ngIf="configForm.get('auth').value"
(click)="openAuthConfigDialog(true)"
translate="smtp-config-screen.form.change-credentials"
></div>
</div>
</div>
<div class="dialog-actions">
<button [disabled]="configForm.invalid || !changed" color="primary" mat-flat-button type="submit">
{{ 'smtp-config-screen.actions.save' | translate }}
</button>
<redaction-icon-button
[disabled]="configForm.invalid"
text="smtp-config-screen.actions.test-connection"
(action)="testConnection()"
type="show-bg"
></redaction-icon-button>
</div>
</form>
</div>
<form [formGroup]="configForm" (submit)="save()">
<div class="dialog-content">
<div class="dialog-content-left">
<div class="red-input-group required">
<label translate="smtp-config-screen.form.host"></label>
<input
formControlName="host"
name="host"
type="text"
placeholder="{{ 'smtp-config-screen.form.host-placeholder' | translate }}"
/>
</div>
<div class="red-input-group w-100">
<label translate="smtp-config-screen.form.port"></label>
<input
formControlName="port"
name="port"
type="number"
placeholder="{{ 'smtp-config-screen.form.port-placeholder' | translate }}"
/>
</div>
<div class="red-input-group required">
<label translate="smtp-config-screen.form.from"></label>
<input
formControlName="from"
name="from"
type="email"
placeholder="{{ 'smtp-config-screen.form.from-placeholder' | translate }}"
/>
</div>
<div class="red-input-group">
<label translate="smtp-config-screen.form.from-display-name"></label>
<input
formControlName="fromDisplayName"
name="fromDisplayName"
type="text"
placeholder="{{ 'smtp-config-screen.form.from-display-name-placeholder' | translate }}"
/>
<span class="hint" translate="smtp-config-screen.form.from-display-name-hint"></span>
</div>
<div class="red-input-group">
<label translate="smtp-config-screen.form.reply-to"></label>
<input
formControlName="replyTo"
name="replyTo"
type="text"
placeholder="{{ 'smtp-config-screen.form.reply-to-placeholder' | translate }}"
/>
</div>
<div class="red-input-group">
<label translate="smtp-config-screen.form.reply-to-display-name"></label>
<input
formControlName="replyToDisplayName"
name="replyToDisplayName"
type="text"
placeholder="{{ 'smtp-config-screen.form.reply-to-display-name-placeholder' | translate }}"
/>
</div>
<div class="red-input-group">
<label translate="smtp-config-screen.form.envelope-from"></label>
<input
formControlName="envelopeFrom"
name="envelopeFrom"
type="text"
placeholder="{{ 'smtp-config-screen.form.envelope-from-placeholder' | translate }}"
/>
<span class="hint" translate="smtp-config-screen.form.envelope-from-hint"></span>
</div>
</div>
<div>
<div class="red-input-group">
<label translate="smtp-config-screen.form.ssl"></label>
<mat-slide-toggle formControlName="ssl" color="primary"></mat-slide-toggle>
</div>
<div class="red-input-group">
<label translate="smtp-config-screen.form.starttls"></label>
<mat-slide-toggle formControlName="starttls" color="primary"></mat-slide-toggle>
</div>
<div class="red-input-group">
<label translate="smtp-config-screen.form.auth"></label>
<mat-slide-toggle formControlName="auth" color="primary"></mat-slide-toggle>
</div>
<div
class="link-action"
*ngIf="configForm.get('auth').value"
(click)="openAuthConfigDialog(true)"
translate="smtp-config-screen.form.change-credentials"
></div>
</div>
</div>
<div class="dialog-actions">
<button [disabled]="configForm.invalid || !changed" color="primary" mat-flat-button type="submit">
{{ 'smtp-config-screen.actions.save' | translate }}
</button>
<redaction-icon-button
[disabled]="configForm.invalid"
text="smtp-config-screen.actions.test-connection"
(action)="testConnection()"
type="show-bg"
></redaction-icon-button>
</div>
</form>
</div>
</div>
</div>

1
apps/red-ui/src/app/modules/admin/screens/smtp-config/smtp-config-screen.component.scss
View File

@ -2,7 +2,6 @@
@import '../../../../../assets/styles/red-mixins';
.content-container {
width: 100vw;
background-color: $grey-2;
display: flex;
justify-content: center;

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

@ -1,114 +1,120 @@
<section>
<div class="page-header">
<redaction-admin-breadcrumbs class="flex-1" [root]="true"></redaction-admin-breadcrumbs>
<section class="settings">
<div class="overlay-shadow"></div>
<div class="actions">
<redaction-search-input [form]="searchForm" [placeholder]="'user-listing.search'"></redaction-search-input>
<redaction-icon-button
(action)="openAddEditUserDialog($event)"
*ngIf="permissionsService.isAdmin()"
icon="red:plus"
text="user-listing.add-new"
type="primary"
></redaction-icon-button>
<redaction-circle-button
class="ml-6"
*ngIf="permissionsService.isUser()"
[routerLink]="['/main/projects/']"
tooltip="common.close"
tooltipPosition="below"
icon="red:close"
></redaction-circle-button>
<redaction-side-nav type="settings"></redaction-side-nav>
<div>
<div class="page-header">
<div class="breadcrumb" translate="user-management"></div>
<div class="actions">
<redaction-search-input [form]="searchForm" [placeholder]="'user-listing.search'"></redaction-search-input>
<redaction-icon-button
(action)="openAddEditUserDialog($event)"
*ngIf="permissionsService.isAdmin()"
icon="red:plus"
text="user-listing.add-new"
type="primary"
></redaction-icon-button>
<redaction-circle-button
class="ml-6"
*ngIf="permissionsService.isUser()"
[routerLink]="['/main/projects/']"
tooltip="common.close"
tooltipPosition="below"
icon="red:close"
></redaction-circle-button>
</div>
</div>
</div>
<div class="red-content-inner">
<div class="content-container" [class.extended]="collapsedDetails">
<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" [class.extended]="collapsedDetails">
<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">
{{ 'user-listing.table-header.title' | translate: { length: displayedEntities.length } }}
</span>
<ng-container *ngIf="areSomeEntitiesSelected && !loading">
<redaction-circle-button
(action)="bulkDelete()"
[disabled]="!canDeleteSelected"
[tooltip]="canDeleteSelected ? 'user-listing.bulk.delete' : 'user-listing.bulk.delete-disabled'"
tooltipPosition="after"
type="dark-bg"
icon="red:trash"
></redaction-circle-button>
</ng-container>
<mat-spinner *ngIf="loading" diameter="15"></mat-spinner>
</div>
<span class="all-caps-label">
{{ 'user-listing.table-header.title' | translate: { length: displayedEntities.length } }}
</span>
<div class="table-header" redactionSyncWidth="table-item">
<div class="select-oval-placeholder"></div>
<ng-container *ngIf="areSomeEntitiesSelected && !loading">
<redaction-circle-button
(action)="bulkDelete()"
[disabled]="!canDeleteSelected"
[tooltip]="canDeleteSelected ? 'user-listing.bulk.delete' : 'user-listing.bulk.delete-disabled'"
tooltipPosition="after"
type="dark-bg"
icon="red:trash"
></redaction-circle-button>
</ng-container>
<redaction-table-col-name label="user-listing.table-col-names.name"></redaction-table-col-name>
<mat-spinner *ngIf="loading" diameter="15"></mat-spinner>
</div>
<redaction-table-col-name label="user-listing.table-col-names.email"></redaction-table-col-name>
<div class="table-header" redactionSyncWidth="table-item">
<div class="select-oval-placeholder"></div>
<redaction-table-col-name label="user-listing.table-col-names.active" class="flex-center"></redaction-table-col-name>
<redaction-table-col-name label="user-listing.table-col-names.name"></redaction-table-col-name>
<redaction-table-col-name label="user-listing.table-col-names.roles"></redaction-table-col-name>
<redaction-table-col-name label="user-listing.table-col-names.email"></redaction-table-col-name>
<redaction-table-col-name label="user-listing.table-col-names.active" class="flex-center"></redaction-table-col-name>
<redaction-table-col-name label="user-listing.table-col-names.roles"></redaction-table-col-name>
<div></div>
<div class="scrollbar-placeholder"></div>
</div>
<redaction-empty-state *ngIf="!displayedEntities.length" screen="user-listing" type="no-match"></redaction-empty-state>
<cdk-virtual-scroll-viewport [itemSize]="80" redactionHasScrollbar>
<!-- Table lines -->
<div class="table-item" *cdkVirtualFor="let user of displayedEntities">
<div class="selection-column" (click)="toggleEntitySelected($event, user)">
<redaction-round-checkbox [active]="isEntitySelected(user)"></redaction-round-checkbox>
</div>
<div>
<redaction-initials-avatar [user]="user" [withName]="true" [showYou]="true"></redaction-initials-avatar>
</div>
<div class="small-label">{{ user.email || '-' }}</div>
<div class="center">
<mat-slide-toggle [checked]="userService.isActive(user)" color="primary" (toggleChange)="toggleActive(user)"></mat-slide-toggle>
</div>
<div class="small-label">{{ getDisplayRoles(user) }}</div>
<div class="actions-container">
<div class="action-buttons">
<redaction-circle-button
(action)="openAddEditUserDialog($event, user)"
tooltip="user-listing.action.edit"
type="dark-bg"
icon="red:edit"
>
</redaction-circle-button>
<redaction-circle-button
(action)="openDeleteUserDialog([user], $event)"
tooltip="user-listing.action.delete"
type="dark-bg"
icon="red:trash"
[disabled]="user.userId === userService.userId"
>
</redaction-circle-button>
</div>
</div>
<div></div>
<div class="scrollbar-placeholder"></div>
</div>
</cdk-virtual-scroll-viewport>
</div>
<div class="right-container" redactionHasScrollbar [class.collapsed]="collapsedDetails">
<redaction-users-stats (toggleCollapse)="toggleCollapsedDetails()" [chartData]="chartData"></redaction-users-stats>
<redaction-empty-state *ngIf="!displayedEntities.length" screen="user-listing" type="no-match"></redaction-empty-state>
<cdk-virtual-scroll-viewport [itemSize]="80" redactionHasScrollbar>
<!-- Table lines -->
<div class="table-item" *cdkVirtualFor="let user of displayedEntities">
<div class="selection-column" (click)="toggleEntitySelected($event, user)">
<redaction-round-checkbox [active]="isEntitySelected(user)"></redaction-round-checkbox>
</div>
<div>
<redaction-initials-avatar [user]="user" [withName]="true" [showYou]="true"></redaction-initials-avatar>
</div>
<div class="small-label">{{ user.email || '-' }}</div>
<div class="center">
<mat-slide-toggle [checked]="userService.isActive(user)" color="primary" (toggleChange)="toggleActive(user)"></mat-slide-toggle>
</div>
<div class="small-label">{{ getDisplayRoles(user) }}</div>
<div class="actions-container">
<div class="action-buttons">
<redaction-circle-button
(action)="openAddEditUserDialog($event, user)"
tooltip="user-listing.action.edit"
type="dark-bg"
icon="red:edit"
>
</redaction-circle-button>
<redaction-circle-button
(action)="openDeleteUserDialog([user], $event)"
tooltip="user-listing.action.delete"
type="dark-bg"
icon="red:trash"
[disabled]="user.userId === userService.userId"
>
</redaction-circle-button>
</div>
</div>
<div class="scrollbar-placeholder"></div>
</div>
</cdk-virtual-scroll-viewport>
</div>
<div class="right-container" redactionHasScrollbar [class.collapsed]="collapsedDetails">
<redaction-users-stats (toggleCollapse)="toggleCollapsedDetails()" [chartData]="chartData"></redaction-users-stats>
</div>
</div>
</div>
</section>

2
apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.scss
View File

@ -1,6 +1,4 @@
.content-container {
width: calc(100vw - 353px);
.header-item {
padding: 0 24px 0 10px;
}

7
apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.html
View File

@ -2,16 +2,17 @@
<div class="page-header">
<redaction-admin-breadcrumbs class="flex-1"></redaction-admin-breadcrumbs>
<redaction-tabs [screen]="'watermark'"></redaction-tabs>
<div class="actions flex-1">
<redaction-circle-button [routerLink]="['../..']" tooltip="common.close" tooltipPosition="below" icon="red:close"></redaction-circle-button>
</div>
</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="overlay-shadow"></div>
<div #viewer class="viewer"></div>
<div class="changes-box" *ngIf="changed && permissionsService.isAdmin()">
<redaction-icon-button

6
apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.scss
View File

@ -5,12 +5,8 @@
justify-content: flex-end;
}
.red-content-inner {
flex-direction: row-reverse;
}
.content-container {
width: calc(100vw - 353px);
order: 1;
.viewer {
height: 100%;

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

@ -22,7 +22,6 @@
.content-container {
position: relative;
width: calc(100vw - 350px);
}
.right-container {

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

@ -25,8 +25,6 @@
}
}
}
width: calc(100vw - 466px);
}
.right-container {

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

@ -72,10 +72,6 @@ cdk-virtual-scroll-viewport {
}
}
.content-container {
width: calc(100vw - 375px);
}
.right-container {
display: flex;
width: 375px;

22
apps/red-ui/src/assets/i18n/de.json
View File

@ -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": "<b>{{Dateiname}}</b> existiert bereits. Was möchten Sie tun?",
"question": "<b>{{filename}}</b> 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": {

52
apps/red-ui/src/assets/styles/red-breadcrumbs.scss
View File

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

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

@ -8,7 +8,6 @@
display: flex;
align-items: center;
z-index: 1;
border-top: 1px solid $separator;
border-bottom: 1px solid $separator;
box-sizing: border-box;

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

@ -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,18 +94,14 @@ body {
position: absolute;
bottom: 0;
width: 100%;
height: calc(100% - 112px);
height: calc(100% - 111px);
transition: height ease-in-out 0.2s;
}
.content-container {
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;