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

Pull request #70: Ui updates

Browse Source 
Merge in RED/ui from ui-updates to master

* commit '4b73e3893e26391268182037fde35ce8e037894a':
  UI updates
  Project overview actions order
  File actions order & icons, assign dialog fixes
  Top navigation down arrow
This commit is contained in:
Timo Bejan 2020-12-14 17:05:12 +01:00
commit 006704ff03
29 changed files with 308 additions and 167 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

113
apps/red-ui/src/app/common/file-actions/file-actions.component.html
View File

@ -4,9 +4,9 @@
(action)="openDeleteFileDialog($event, fileStatus)"
*ngIf="permissionsService.canDeleteFile(fileStatus)"
[tooltipPosition]="tooltipPosition"
tooltip="project-overview.delete.action"
icon="red:trash"
[type]="buttonType"
icon="red:trash"
tooltip="project-overview.delete.action"
>
</redaction-circle-button>
@ -14,50 +14,9 @@
<redaction-circle-button
(action)="assignReviewer($event, fileStatus)"
*ngIf="permissionsService.canAssignReviewer(fileStatus) && screen === 'project-overview'"
[icon]="permissionsService.isManagerAndOwner() ? 'red:assign' : 'red:assign-me'"
[tooltipPosition]="tooltipPosition"
[tooltip]="permissionsService.isManagerAndOwner() ? 'project-overview.assign' : 'project-overview.assign-me'"
[icon]="permissionsService.isManagerAndOwner() ? 'red:assign' : 'red:assign-me'"
[type]="buttonType"
>
</redaction-circle-button>
<!-- file state actions -->
<redaction-circle-button
(action)="setFileApproved($event, fileStatus)"
*ngIf="permissionsService.canApprove(fileStatus)"
[tooltipPosition]="tooltipPosition"
tooltip="project-overview.approve"
icon="red:check-alt"
[type]="buttonType"
>
</redaction-circle-button>
<redaction-circle-button
(action)="setFileUnderApproval($event, fileStatus)"
*ngIf="permissionsService.canSetUnderApproval(fileStatus)"
[tooltipPosition]="tooltipPosition"
tooltip="project-overview.under-approval"
icon="red:check-alt"
[type]="buttonType"
>
</redaction-circle-button>
<redaction-circle-button
(action)="setFileUnderApproval($event, fileStatus)"
*ngIf="permissionsService.canUndoApproval(fileStatus)"
[tooltipPosition]="tooltipPosition"
tooltip="project-overview.under-approval"
icon="red:undo"
[type]="buttonType"
>
</redaction-circle-button>
<redaction-circle-button
(action)="setFileUnderReview($event, fileStatus)"
*ngIf="permissionsService.canUndoUnderApproval(fileStatus)"
[tooltipPosition]="tooltipPosition"
tooltip="project-overview.under-review"
icon="red:undo"
[type]="buttonType"
>
</redaction-circle-button>
@ -66,12 +25,12 @@
<redaction-circle-button
(action)="downloadFileRedactionReport($event, fileStatus)"
*ngIf="permissionsService.canShowRedactionReportDownloadBtn(fileStatus)"
[tooltipPosition]="tooltipPosition"
[tooltipClass]="'small'"
[tooltip]="fileStatus.isApproved ? 'report.action' : 'report.unavailable-single'"
[disabled]="!fileStatus.isApproved"
icon="red:report"
[tooltipClass]="'small'"
[tooltipPosition]="tooltipPosition"
[tooltip]="fileStatus.isApproved ? 'report.action' : 'report.unavailable-single'"
[type]="buttonType"
icon="red:report"
>
</redaction-circle-button>
@ -80,9 +39,55 @@
(action)="downloadFile($event, fileStatus)"
*ngIf="permissionsService.canDownloadRedactedFile(fileStatus)"
[tooltipPosition]="tooltipPosition"
tooltip="project-overview.download-redacted-file"
icon="red:download"
[type]="buttonType"
icon="red:download"
tooltip="project-overview.download-redacted-file"
>
</redaction-circle-button>
<!-- file state actions -->
<!-- Ready for approval-->
<redaction-circle-button
(action)="setFileUnderApproval($event, fileStatus)"
*ngIf="permissionsService.canSetUnderApproval(fileStatus)"
[tooltipPosition]="tooltipPosition"
[type]="buttonType"
icon="red:ready-for-approval"
tooltip="project-overview.under-approval"
>
</redaction-circle-button>
<!-- Back to review -->
<redaction-circle-button
(action)="setFileUnderReview($event, fileStatus, true)"
*ngIf="permissionsService.canUndoUnderApproval(fileStatus)"
[tooltipPosition]="tooltipPosition"
[type]="buttonType"
icon="red:undo"
tooltip="project-overview.under-review"
>
</redaction-circle-button>
<!-- Approved-->
<redaction-circle-button
(action)="setFileApproved($event, fileStatus)"
*ngIf="permissionsService.canApprove(fileStatus)"
[tooltipPosition]="tooltipPosition"
[type]="buttonType"
icon="red:approved"
tooltip="project-overview.approve"
>
</redaction-circle-button>
<!-- Back to approval -->
<redaction-circle-button
(action)="setFileUnderApproval($event, fileStatus)"
*ngIf="permissionsService.canUndoApproval(fileStatus)"
[tooltipPosition]="tooltipPosition"
[type]="buttonType"
icon="red:undo"
tooltip="project-overview.under-approval"
>
</redaction-circle-button>
@ -91,10 +96,10 @@
(action)="reanalyseFile($event, fileStatus)"
*ngIf="permissionsService.canReanalyseFile(fileStatus) && screen === 'file-preview'"
[tooltipPosition]="'before'"
tooltip="file-preview.reanalyse-notification"
type="warn"
tooltipClass="warn small"
icon="red:refresh"
tooltip="file-preview.reanalyse-notification"
tooltipClass="warn small"
type="warn"
>
</redaction-circle-button>
@ -103,8 +108,8 @@
(action)="reanalyseFile($event, fileStatus)"
*ngIf="permissionsService.canReanalyseFile(fileStatus) && screen === 'project-overview'"
[tooltipPosition]="tooltipPosition"
tooltip="project-overview.reanalyse.action"
icon="red:refresh"
tooltip="project-overview.reanalyse.action"
type="dark-bg"
>
</redaction-circle-button>

4
apps/red-ui/src/app/common/file-actions/file-actions.component.ts
View File

@ -85,12 +85,12 @@ export class FileActionsComponent implements OnInit {
});
}
setFileUnderReview($event: MouseEvent, fileStatus: FileStatusWrapper) {
setFileUnderReview($event: MouseEvent, fileStatus: FileStatusWrapper, ignoreDialogChanges = false) {
$event.stopPropagation();
// this._fileActionService.setFileUnderReview(fileStatus).subscribe(() => {
// this.reloadProjects('set-review');
// });
this._fileActionService.assignProjectReviewer(fileStatus, () => this.actionPerformed.emit('assign-reviewer'));
this._fileActionService.assignProjectReviewer(fileStatus, () => this.actionPerformed.emit('assign-reviewer'), ignoreDialogChanges);
}
reloadProjects(action: string) {

21
apps/red-ui/src/app/dialogs/add-edit-project-dialog/add-edit-project-dialog.component.html
View File

@ -7,8 +7,13 @@
<div class="dialog-content">
<div class="red-input-group required">
<label translate="project-listing.add-edit-dialog.form.name"></label>
<input formControlName="projectName" name="projectName" type="text" />
<label translate="project-listing.add-edit-dialog.form.name.label"></label>
<input
formControlName="projectName"
name="projectName"
type="text"
[placeholder]="'project-listing.add-edit-dialog.form.name.placeholder' | translate"
/>
</div>
<div class="red-input-group required" *ngIf="!project">
@ -23,8 +28,16 @@
</div>
<div class="red-input-group">
<label translate="project-listing.add-edit-dialog.form.description"></label>
<textarea formControlName="description" name="description" type="text" rows="5"></textarea>
<label translate="project-listing.add-edit-dialog.form.description.label"></label>
<textarea
#textarea
[class.has-scrollbar]="hasScrollbar"
formControlName="description"
name="description"
type="text"
rows="5"
[placeholder]="'project-listing.add-edit-dialog.form.description.placeholder' | translate"
></textarea>
</div>
<div class="due-date">

7
apps/red-ui/src/app/dialogs/add-edit-project-dialog/add-edit-project-dialog.component.ts
View File

@ -1,4 +1,4 @@
import { Component, Inject } from '@angular/core';
import { Component, ElementRef, Inject, ViewChild } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
import { Project } from '@redaction/red-ui-http';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
@ -14,6 +14,7 @@ import * as moment from 'moment';
export class AddEditProjectDialogComponent {
public projectForm: FormGroup;
public hasDueDate = true;
@ViewChild('textarea') private _textarea: ElementRef;
constructor(
private readonly _appStateService: AppStateService,
@ -29,6 +30,10 @@ export class AddEditProjectDialogComponent {
this.hasDueDate = !!this.project?.dueDate;
}
public get hasScrollbar() {
return this._textarea?.nativeElement.clientHeight < this._textarea?.nativeElement.scrollHeight;
}
public get changed() {
if (!this.project) {
return true;

4
apps/red-ui/src/app/dialogs/assign-owner-dialog/assign-owner-dialog.component.html
View File

@ -2,11 +2,11 @@
<div [translate]="'assign-' + data.type + '-owner.dialog.title'" class="dialog-header heading-l"></div>
<form (submit)="saveUsers()" [formGroup]="usersForm">
<div class="dialog-content">
<div class="dialog-content" [class.no-padding-bottom]="data.type === 'project'">
<div class="red-input-group">
<mat-form-field floatLabel="always">
<mat-label>{{ 'assign-' + data.type + '-owner.dialog.single-user' | translate }}</mat-label>
<mat-select formControlName="singleUser">
<mat-select formControlName="singleUser" class="w-300">
<mat-option *ngFor="let userId of singleUsersSelectOptions" [value]="userId">
{{ userService.getNameForId(userId) }}
</mat-option>

7
apps/red-ui/src/app/dialogs/assign-owner-dialog/assign-owner-dialog.component.scss
View File

@ -1,12 +1,17 @@
@import '../../../assets/styles/red-mixins';
.dialog-content {
.no-padding-bottom {
padding-bottom: 0;
}
.search-container {
width: 560px;
margin-top: 16px;
input {
width: 100%;
max-width: 100%;
}
}
.members-list {

5
apps/red-ui/src/app/dialogs/assign-owner-dialog/assign-owner-dialog.component.ts
View File

@ -12,6 +12,7 @@ class DialogData {
type: 'file' | 'project';
project?: ProjectWrapper;
files?: FileStatusWrapper[];
ignoreChanged?: boolean;
}
@Component({
@ -132,6 +133,10 @@ export class AssignOwnerDialogComponent {
}
public get changed(): boolean {
if (this.data.ignoreChanged) {
return true;
}
if (this.data.type === 'project') {
if (this.data.project.ownerId !== this.selectedSingleUser) {
return true;

4
apps/red-ui/src/app/dialogs/dialog.service.ts
View File

@ -204,10 +204,10 @@ export class DialogService {
return ref;
}
public openAssignFileReviewerDialog(file: FileStatus, cb?: Function): MatDialogRef<AssignOwnerDialogComponent> {
public openAssignFileReviewerDialog(file: FileStatus, cb?: Function, ignoreDialogChanges = false): MatDialogRef<AssignOwnerDialogComponent> {
const ref = this._dialog.open(AssignOwnerDialogComponent, {
...dialogConfig,
data: { type: 'file', files: [file] }
data: { type: 'file', files: [file], ignoreChanged: ignoreDialogChanges }
});
ref.afterClosed().subscribe(() => {

2
apps/red-ui/src/app/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.html
View File

@ -32,7 +32,7 @@
<div class="red-input-group" [class.required]="!isDocumentAdmin">
<label translate="manual-annotation.dialog.content.comment"></label>
<textarea formControlName="comment" name="comment" type="text" rows="4"></textarea>
<textarea #textarea [class.has-scrollbar]="hasScrollbar" class="w-300" formControlName="comment" name="comment" type="text" rows="4"></textarea>
</div>
<div class="red-input-group required" *ngIf="isDictionaryRequest">

8
apps/red-ui/src/app/dialogs/manual-redaction-dialog/manual-annotation-dialog.component.ts
View File

@ -1,4 +1,4 @@
import { Component, Inject, OnInit } from '@angular/core';
import { Component, ElementRef, Inject, OnInit, ViewChild } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { AppStateService } from '../../state/app-state.service';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog';
@ -31,6 +31,8 @@ export class ManualAnnotationDialogComponent implements OnInit {
legalOptions: LegalBasisOption[] = [];
@ViewChild('textarea') private _textarea: ElementRef;
constructor(
private readonly _appStateService: AppStateService,
private readonly _userService: UserService,
@ -77,6 +79,10 @@ export class ManualAnnotationDialogComponent implements OnInit {
}
}
public get hasScrollbar() {
return this._textarea?.nativeElement.clientHeight < this._textarea?.nativeElement.scrollHeight;
}
handleAddRedaction() {
this._enhanceManualRedaction(this.manualRedactionEntryWrapper.manualRedactionEntry);
this._manualAnnotationService.addAnnotation(this.manualRedactionEntryWrapper.manualRedactionEntry).subscribe(

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

@ -13,6 +13,7 @@ export class IconsModule {
const icons = [
'add',
'analyse',
'approved',
'arrow-down',
'arrow-up',
'arrow-right',
@ -49,6 +50,7 @@ export class IconsModule {
'preview',
'radio-indeterminate',
'radio-selected',
'ready-for-approval',
'refresh',
'report',
'search',

13
apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.html
View File

@ -6,7 +6,7 @@
<div class="dialog-content">
<div class="first-row">
<div class="red-input-group required w-300">
<div class="red-input-group required">
<label translate="add-edit-dictionary.form.name"></label>
<input
formControlName="type"
@ -17,7 +17,7 @@
/>
</div>
<div class="red-input-group required w-150">
<div class="red-input-group required">
<label translate="add-edit-dictionary.form.color"></label>
<input
class="hex-color-input"
@ -32,11 +32,16 @@
[colorPicker]="dictionaryForm.get('hexColor').value"
[cpOutputFormat]="'hex'"
(colorPickerChange)="dictionaryForm.get('hexColor').setValue($event)"
></div>
>
<mat-icon
svgIcon="red:color-picker"
*ngIf="!dictionaryForm.get('hexColor').value || dictionaryForm.get('hexColor').value?.length === 0"
></mat-icon>
</div>
</div>
</div>
<div class="red-input-group required w-150">
<div class="red-input-group required">
<label translate="add-edit-dictionary.form.rank"></label>
<input formControlName="rank" name="rank" type="number" placeholder="{{ 'add-edit-dictionary.form.rank-placeholder' | translate }}" />
</div>

14
apps/red-ui/src/app/screens/admin/dictionary-listing-screen/add-edit-dictionary-dialog/add-edit-dictionary-dialog.component.scss
View File

@ -1,15 +1,5 @@
@import '../../../../../assets/styles/red-variables';
.w-300 {
max-width: 300px;
width: 300px;
}
.w-150 {
max-width: 150px;
width: 150px;
}
.first-row {
display: flex;
@ -33,7 +23,3 @@
transition: background-color 0.25s ease;
color: $white;
}
.hex-color-input {
padding-right: 40px;
}

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

@ -22,47 +22,60 @@
<div class="right-container">
<div class="heading-xl" [translate]="'watermark-screen.title'"></div>
<form [formGroup]="configForm" (keyup)="configChanged()">
<div class="red-input-group">
<div class="red-input-group required">
<label translate="watermark-screen.form.text"></label>
<textarea formControlName="text" name="text" type="text" rows="10"></textarea>
<textarea
#textarea
formControlName="text"
[class.has-scrollbar]="hasScrollbar"
(mousemove)="triggerChanges()"
class="w-full"
name="text"
type="text"
rows="10"
></textarea>
</div>
<div class="red-input-group">
<div class="red-input-group required w-150">
<label translate="watermark-screen.form.color"></label>
<input
formControlName="hexColor"
class="hex-color-input"
name="hexColor"
type="text"
placeholder="{{ 'add-edit-dictionary.form.color-placeholder' | translate }}"
/>
<div
class="input-icon"
[style.background]="configForm.get('hexColor').value"
[colorPicker]="configForm.get('hexColor').value"
[cpOutputFormat]="'hex'"
(colorPickerChange)="configForm.get('hexColor').setValue($event); configChanged()"
>
<mat-icon svgIcon="red:color-picker"></mat-icon>
<mat-icon
*ngIf="!configForm.get('hexColor')?.value || configForm.get('hexColor').value?.length === 0"
svgIcon="red:color-picker"
></mat-icon>
</div>
</div>
<div class="red-input-group">
<div class="red-input-group required">
<label translate="watermark-screen.form.opacity"></label>
<input formControlName="opacity" name="opacity" type="number" (change)="configChanged()" />
<input class="w-75" formControlName="opacity" name="opacity" type="number" (change)="configChanged()" />
</div>
<div class="red-input-group">
<div class="red-input-group required">
<label translate="watermark-screen.form.font-size"></label>
<input formControlName="fontSize" name="fontSize" type="number" (change)="configChanged()" />
<input class="w-75" formControlName="fontSize" name="fontSize" type="number" (change)="configChanged()" />
</div>
</form>
<div class="actions-container">
<button color="primary" mat-flat-button (click)="save()" [disabled]="!changed" class="red-button">
<button color="primary" mat-flat-button (click)="save()" [disabled]="configForm.invalid || !changed" class="red-button">
{{ 'watermark-screen.action.save' | translate }}
</button>
<div class="all-caps-label pointer cancel" (click)="revert()" [translate]="'watermark-screen.action.revert'"></div>
<div class="all-caps-label pointer cancel" [class.disabled]="!changed" (click)="revert()" [translate]="'watermark-screen.action.revert'"></div>
</div>
</div>
</div>

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

@ -12,6 +12,11 @@
width: 353px;
min-width: 353px;
padding: 25px;
overflow: visible;
&:hover {
overflow: visible;
}
.heading-xl {
margin-bottom: 24px;
@ -27,3 +32,8 @@
}
}
}
.w-150 {
max-width: 150px;
width: 150px;
}

18
apps/red-ui/src/app/screens/admin/watermark-screen/watermark-screen.component.ts
View File

@ -5,7 +5,7 @@ import { AppStateService } from '../../../state/app-state.service';
import { FileDownloadService } from '../../file/service/file-download.service';
import { environment } from '../../../../environments/environment';
import { HttpClient } from '@angular/common/http';
import { FormBuilder, FormGroup } from '@angular/forms';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { debounce } from '../../../utils/debounce';
import { WatermarkControllerService, WatermarkModel } from '@redaction/red-ui-http';
import { NotificationService, NotificationType } from '../../../notification/notification.service';
@ -36,6 +36,8 @@ export class WatermarkScreenComponent implements OnInit {
@ViewChild('viewer', { static: true })
private _viewer: ElementRef;
@ViewChild('textarea') private _textarea: ElementRef;
public viewReady = false;
public configForm: FormGroup;
@ -100,6 +102,12 @@ export class WatermarkScreenComponent implements OnInit {
this.configChanged();
}
public triggerChanges() {}
public get hasScrollbar() {
return this._textarea?.nativeElement.clientHeight < this._textarea?.nativeElement.scrollHeight;
}
private _loadViewer() {
WebViewer(
{
@ -154,10 +162,10 @@ export class WatermarkScreenComponent implements OnInit {
private _initForm() {
this.configForm = this._formBuilder.group({
text: null,
hexColor: null,
opacity: null,
fontSize: null
text: [null, Validators.required],
hexColor: [null, Validators.required],
opacity: [null, Validators.required],
fontSize: [null, Validators.required]
});
}
}

1
apps/red-ui/src/app/screens/base-screen/base-screen.component.html
View File

@ -38,6 +38,7 @@
<mat-icon svgIcon="red:expand"></mat-icon>
{{ 'top-bar.navigation-items.back-to-projects' | translate }}
</a>
<mat-icon class="primary" *ngIf="!appStateService.activeProject && projectsView" svgIcon="red:arrow-down"></mat-icon>
<mat-icon *ngIf="appStateService.activeProject" svgIcon="red:arrow-right"></mat-icon>
<a
*ngIf="appStateService.activeProject"

18
apps/red-ui/src/app/screens/file/service/file-action.service.ts
View File

@ -44,13 +44,17 @@ export class FileActionService {
});
}
public assignProjectReviewer(file?: FileStatus, callback?: Function) {
this._dialogService.openAssignFileReviewerDialog(file ? file : this._appStateService.activeFile, async () => {
await this._appStateService.reloadActiveProjectFiles();
if (callback) {
callback();
}
});
public assignProjectReviewer(file?: FileStatus, callback?: Function, ignoreDialogChanges = false) {
this._dialogService.openAssignFileReviewerDialog(
file ? file : this._appStateService.activeFile,
async () => {
await this._appStateService.reloadActiveProjectFiles();
if (callback) {
callback();
}
},
ignoreDialogChanges
);
}
public async assignToMe(file?: FileStatus, callback?: Function) {

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

@ -23,7 +23,7 @@
></redaction-filter>
<form [formGroup]="searchForm">
<div class="red-input-group">
<input [placeholder]="'project-listing.search' | translate" formControlName="query" name="query" type="text" class="with-icon mt-0" />
<input [placeholder]="'project-listing.search' | translate" formControlName="query" name="query" type="text" class="w-250 with-icon mt-0" />
<mat-icon class="icon-right" svgIcon="red:search"></mat-icon>
</div>
</form>

36
apps/red-ui/src/app/screens/project-overview-screen/bulk-actions/bulk-actions.component.html
View File

@ -15,22 +15,6 @@
icon="red:assign"
></redaction-circle-button>
<redaction-circle-button
(action)="reanalyse()"
*ngIf="canReanalyse"
tooltip="project-overview.bulk.reanalyse"
type="dark-bg"
icon="red:refresh"
></redaction-circle-button>
<redaction-circle-button
(action)="approveDocuments()"
*ngIf="canApprove"
tooltip="project-overview.approve"
type="dark-bg"
icon="red:check-alt"
></redaction-circle-button>
<redaction-circle-button
(action)="downloadRedactedFiles()"
*ngIf="canDownloadRedactedFiles"
@ -44,10 +28,26 @@
*ngIf="canSetToUnderApproval"
tooltip="project-overview.under-approval"
type="dark-bg"
icon="red:check-alt"
icon="red:ready-for-approval"
>
</redaction-circle-button>
<redaction-circle-button (action)="setToUnderReview()" *ngIf="canSetToUnderReview" tooltip="project-overview.under-review" type="dark-bg" icon="red:refres">
<redaction-circle-button (action)="setToUnderReview()" *ngIf="canSetToUnderReview" tooltip="project-overview.under-review" type="dark-bg" icon="red:undo">
</redaction-circle-button>
<redaction-circle-button
(action)="approveDocuments()"
*ngIf="canApprove"
tooltip="project-overview.approve"
type="dark-bg"
icon="red:approved"
></redaction-circle-button>
<redaction-circle-button
(action)="reanalyse()"
*ngIf="canReanalyse"
tooltip="project-overview.bulk.reanalyse"
type="dark-bg"
icon="red:refresh"
></redaction-circle-button>
</ng-container>

1
apps/red-ui/src/app/screens/project-overview-screen/bulk-actions/bulk-actions.component.ts
View File

@ -87,6 +87,7 @@ export class BulkActionsComponent {
public get canSetToUnderReview() {
return this.selectedFiles.reduce((acc, file) => acc && this._permissionsService.canSetUnderReview(file), true);
}
public setToUnderReview() {
const promises = this.selectedFiles.map((file) => this._fileActionService.setFileUnderReview(file).toPromise());

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

@ -24,7 +24,13 @@
></redaction-filter>
<form [formGroup]="searchForm">
<div class="red-input-group">
<input [placeholder]="'project-overview.search' | translate" formControlName="query" name="query" type="text" class="with-icon mt-0" />
<input
[placeholder]="'project-overview.search' | translate"
formControlName="query"
name="query"
type="text"
class="w-250 with-icon mt-0"
/>
<mat-icon class="icon-right" svgIcon="red:search"></mat-icon>
</div>
</form>
@ -60,6 +66,13 @@
tooltipPosition="below"
icon="red:report"
></redaction-circle-button>
<redaction-circle-button
(action)="downloadRedactedFiles()"
*ngIf="canDownloadRedactedFiles"
tooltip="project-overview.header-actions.download-redacted-files"
tooltipPosition="below"
icon="red:download"
></redaction-circle-button>
<redaction-circle-button
*ngIf="permissionsService.displayReanalyseBtn()"
(action)="reanalyseProject()"
@ -69,15 +82,6 @@
tooltipPosition="below"
icon="red:refresh"
></redaction-circle-button>
<redaction-circle-button
(action)="downloadRedactedFiles()"
*ngIf="canDownloadRedactedFiles"
tooltip="project-overview.header-actions.download-redacted-files"
tooltipPosition="below"
icon="red:download"
></redaction-circle-button>
<redaction-circle-button
class="ml-14"
(action)="fileInput.click()"

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

@ -38,7 +38,7 @@
},
"top-bar": {
"navigation-items": {
"projects": "Projects",
"projects": "Active Projects",
"back-to-projects": "Back to Projects",
"my-account": {
"children": {
@ -100,11 +100,17 @@
}
},
"add-edit-dialog": {
"header-new": "New Project",
"header-new": "Create Project",
"header-edit": "Edit Project",
"form": {
"description": "Description",
"name": "Name",
"name": {
"label": "Project Name",
"placeholder": "Enter Name"
},
"description": {
"label": "Description",
"placeholder": "Enter Description"
},
"due-date": "Due Date",
"template": "Project Template"
},

13
apps/red-ui/src/assets/icons/general/approved.svg Normal file
View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>163F9A92-B60D-42FF-80C8-1135F4B95ECC</title>
<g id="Styleguide" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Styleguide-Actions" transform="translate(-62.000000, -567.000000)" fill="currentColor" fill-rule="nonzero">
<g id="Group-6" transform="translate(52.000000, 557.000000)">
<g id="status" transform="translate(10.000000, 10.000000)">
<path d="M14,0 L14,11.2 L11.2,11.2 L11.2,14 L0,14 L0,2.8 L2.8,2.8 L2.8,0 L14,0 Z M2.8,4.2 L1.4,4.2 L1.4,12.6 L9.8,12.6 L9.8,11.2 L2.8,11.2 L2.8,4.2 Z M12.6,1.4 L4.2,1.4 L4.2,9.8 L12.6,9.8 L12.6,1.4 Z M10.36,3.36 L11.34,4.34 L7.84,7.84 L5.74,5.74 L6.72,4.76 L7.84,5.88 L10.36,3.36 Z" id="approved"></path>
</g>
</g>
</g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 992 B

7
apps/red-ui/src/assets/icons/general/ready-for-approval.svg Normal file
View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="100px" height="100px" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>ready_for_approval</title>
<g id="ready_for_approval" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<path d="M50,0 C77.5,5.05166805e-15 100,22.5 100,50 C100,77.5 77.5,100 50,100 C22.5,100 -1.42108547e-14,77.5 -1.42108547e-14,50 C0,22.5 22.5,-5.05166805e-15 50,0 Z M50,10 C28,10 10,28 10,50 C10,72 28,90 50,90 C72,90 90,72 90,50 C90,28 72,10 50,10 Z M64,34 L71,41 L46,66 L31,51 L38,44 L46,52 L64,34 Z" fill="currentColor" fill-rule="nonzero"></path>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 694 B

33
apps/red-ui/src/assets/icons/general/undo.svg
View File

@ -1,20 +1,15 @@
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
width="438.536px" height="438.536px" viewBox="0 0 438.536 438.536"
style="enable-background:new 0 0 438.536 438.536;"
xml:space="preserve">
<g fill="currentColor">
<path d="M421.125,134.191c-11.608-27.03-27.217-50.347-46.819-69.949C354.7,44.639,331.384,29.033,304.353,17.42
C277.325,5.807,248.969,0.005,219.275,0.005c-27.978,0-55.052,5.277-81.227,15.843C111.879,26.412,88.61,41.305,68.243,60.531
l-37.12-36.835c-5.711-5.901-12.275-7.232-19.701-3.999C3.807,22.937,0,28.554,0,36.547v127.907c0,4.948,1.809,9.231,5.426,12.847
c3.619,3.617,7.902,5.426,12.85,5.426h127.907c7.996,0,13.61-3.807,16.846-11.421c3.234-7.423,1.903-13.988-3.999-19.701
l-39.115-39.398c13.328-12.563,28.553-22.222,45.683-28.98c17.131-6.757,35.021-10.138,53.675-10.138
c19.793,0,38.687,3.858,56.674,11.563c17.99,7.71,33.544,18.131,46.679,31.265c13.134,13.131,23.555,28.69,31.265,46.679
c7.703,17.987,11.56,36.875,11.56,56.674c0,19.798-3.856,38.686-11.56,56.672c-7.71,17.987-18.131,33.544-31.265,46.679
c-13.135,13.134-28.695,23.558-46.679,31.265c-17.987,7.707-36.881,11.561-56.674,11.561c-22.651,0-44.064-4.949-64.241-14.843
c-20.174-9.894-37.209-23.883-51.104-41.973c-1.331-1.902-3.521-3.046-6.567-3.429c-2.856,0-5.236,0.855-7.139,2.566
l-39.114,39.402c-1.521,1.53-2.33,3.478-2.426,5.853c-0.094,2.385,0.527,4.524,1.858,6.427
c20.749,25.125,45.871,44.587,75.373,58.382c29.502,13.798,60.625,20.701,93.362,20.701c29.694,0,58.05-5.808,85.078-17.416
c27.031-11.607,50.34-27.22,69.949-46.821c19.605-19.609,35.211-42.921,46.822-69.949s17.411-55.392,17.411-85.08
C438.536,189.569,432.732,161.22,421.125,134.191z"/>
</g>
<?xml version="1.0" encoding="UTF-8"?>
<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>B3EA3E95-AC5D-4F73-ACEB-7F071103E161</title>
<g id="Styleguide" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="Styleguide-Actions" transform="translate(-62.000000, -609.000000)">
<rect x="0" y="0" width="904" height="906"></rect>
<g id="Group-6" transform="translate(52.000000, 599.000000)">
<rect id="Rectangle" x="0" y="0" width="34" height="34" rx="17"></rect>
<g id="status" transform="translate(10.000000, 10.000000)" fill="currentColor" fill-rule="nonzero">
<path d="M7.7,2.38 L8.75,3.29 L6.86,5.18 L7.7,5.18 C11.2,5.18 14,8.05 14,11.48 L14,11.48 L12.6,11.48 C12.6,8.75 10.43,6.58 7.7,6.58 L7.7,6.58 L6.86,6.58 L8.75,8.47 L7.77,9.45 L4.2,5.88 L7.7,2.38 Z M3.5,2.38 L4.48,3.36 L1.96,5.88 L4.48,8.47 L3.5,9.45 L0,5.88 L3.5,2.38 Z" id="Back-to-review"></path>
</g>
</g>
</g>
</g>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

47
apps/red-ui/src/assets/styles/red-input.scss
View File

@ -19,6 +19,9 @@
border-bottom-right-radius: 7px;
cursor: pointer;
transition: background-color 0.25s ease;
display: flex;
align-items: center;
justify-content: center;
&:hover {
background: $grey-6;
@ -85,10 +88,41 @@
color: $grey-1;
opacity: 0.7;
}
&.w-75 {
width: 75px;
max-width: 75px;
}
&.w-250 {
width: 250px;
max-width: 250px;
}
&.w-300 {
width: 300px;
max-width: 300px;
}
&.w-full {
width: 100%;
max-width: 100%;
}
}
input {
max-width: 300px;
width: 300px;
&.hex-color-input {
width: 150px;
max-width: 150px;
}
}
mat-select {
width: 220px;
width: 400px;
max-width: 400px;
.mat-select-trigger {
height: 32px;
@ -100,10 +134,17 @@
}
textarea {
resize: none;
resize: vertical;
padding-top: 7px;
padding-bottom: 7px;
@include no-scroll-bar();
@include scroll-bar;
width: 400px;
max-width: 400px;
&.has-scrollbar {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
}
}
label {

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

@ -32,7 +32,6 @@
/* Track */
&::-webkit-scrollbar-track {
background: $grey-2;
//background: red;
}
/* Handle */

11
apps/red-ui/src/assets/styles/red-text-styles.scss
View File

@ -57,8 +57,15 @@ pre {
line-height: 14px;
transition: opacity 0.2s;
&.cancel:hover {
opacity: 1;
&.cancel {
&:hover {
opacity: 1;
}
&.disabled {
opacity: 0.3;
cursor: default;
}
}
}