From 794716c3172cbee3755bf8e0e1ae6dcf767decc4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Adina=20=C8=9Aeudan?= Date: Mon, 23 Nov 2020 22:29:26 +0200 Subject: [PATCH] Refactor buttons --- apps/red-ui/src/app/app.module.ts | 10 +- .../file-actions/file-actions.component.html | 163 +++++++++--------- .../file-actions/file-actions.component.scss | 1 + .../file-actions/file-actions.component.ts | 4 + .../app/common/filter/filter.component.html | 14 +- .../app/common/filter/filter.component.scss | 14 -- .../src/app/common/filter/filter.component.ts | 8 +- .../initials-avatar.component.html | 8 +- .../initials-avatar.component.scss | 8 +- .../chevron-button.component.html | 5 + .../chevron-button.component.scss | 8 + .../chevron-button.component.ts | 16 ++ .../circle-button.component.html | 12 ++ .../circle-button.component.scss | 25 +++ .../circle-button/circle-button.component.ts | 20 +++ .../icon-button/icon-button.component.html | 5 + .../icon-button/icon-button.component.scss | 7 + .../icon-button/icon-button.component.ts | 18 ++ .../user-button/user-button.component.html | 4 + .../user-button/user-button.component.scss | 23 +++ .../user-button/user-button.component.ts | 15 ++ .../comments/comments.component.html | 14 +- .../components/comments/comments.component.ts | 4 +- .../base-screen/base-screen.component.html | 66 ++----- .../annotation-actions.component.html | 63 +++---- .../annotation-actions.component.ts | 4 - .../file-preview-screen.component.html | 55 +++--- .../file-preview-screen.component.scss | 26 ++- .../project-listing-screen.component.html | 88 +++++----- .../project-listing-screen.component.scss | 7 - .../bulk-actions/bulk-actions.component.html | 76 +++----- .../bulk-actions/bulk-actions.component.scss | 2 + .../project-details.component.html | 22 +-- .../project-details.component.ts | 26 +-- .../project-overview-screen.component.html | 63 +++++-- .../project-overview-screen.component.scss | 12 ++ .../project-overview-screen.component.ts | 21 +++ apps/red-ui/src/assets/i18n/en.json | 24 +-- .../src/assets/icons/general/arrow-down.svg | 16 +- .../src/assets/icons/general/upload.svg | 2 +- apps/red-ui/src/assets/styles/red-button.scss | 92 +++++----- .../src/assets/styles/red-page-layout.scss | 40 ++--- .../src/assets/styles/red-variables.scss | 8 +- 43 files changed, 621 insertions(+), 498 deletions(-) create mode 100644 apps/red-ui/src/app/components/buttons/chevron-button/chevron-button.component.html create mode 100644 apps/red-ui/src/app/components/buttons/chevron-button/chevron-button.component.scss create mode 100644 apps/red-ui/src/app/components/buttons/chevron-button/chevron-button.component.ts create mode 100644 apps/red-ui/src/app/components/buttons/circle-button/circle-button.component.html create mode 100644 apps/red-ui/src/app/components/buttons/circle-button/circle-button.component.scss create mode 100644 apps/red-ui/src/app/components/buttons/circle-button/circle-button.component.ts create mode 100644 apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.html create mode 100644 apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.scss create mode 100644 apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.ts create mode 100644 apps/red-ui/src/app/components/buttons/user-button/user-button.component.html create mode 100644 apps/red-ui/src/app/components/buttons/user-button/user-button.component.scss create mode 100644 apps/red-ui/src/app/components/buttons/user-button/user-button.component.ts diff --git a/apps/red-ui/src/app/app.module.ts b/apps/red-ui/src/app/app.module.ts index c6d05a9c1..985274066 100644 --- a/apps/red-ui/src/app/app.module.ts +++ b/apps/red-ui/src/app/app.module.ts @@ -79,6 +79,10 @@ import { DictionaryAnnotationIconComponent } from './components/dictionary-annot import { BulkActionsComponent } from './screens/project-overview-screen/bulk-actions/bulk-actions.component'; import { HttpCacheInterceptor } from '@redaction/red-cache'; import { HiddenActionComponent } from './common/hidden-action/hidden-action.component'; +import { IconButtonComponent } from './components/buttons/icon-button/icon-button.component'; +import { UserButtonComponent } from './components/buttons/user-button/user-button.component'; +import { CircleButtonComponent } from './components/buttons/circle-button/circle-button.component'; +import { ChevronButtonComponent } from './components/buttons/chevron-button/chevron-button.component'; export function HttpLoaderFactory(httpClient: HttpClient) { return new TranslateHttpLoader(httpClient, '/assets/i18n/', '.json'); @@ -125,7 +129,11 @@ export function HttpLoaderFactory(httpClient: HttpClient) { DictionaryAnnotationIconComponent, BulkActionsComponent, FileActionsComponent, - HiddenActionComponent + HiddenActionComponent, + IconButtonComponent, + UserButtonComponent, + CircleButtonComponent, + ChevronButtonComponent ], imports: [ BrowserModule, diff --git a/apps/red-ui/src/app/common/file-actions/file-actions.component.html b/apps/red-ui/src/app/common/file-actions/file-actions.component.html index 411c2c36b..e0a6fc4dc 100644 --- a/apps/red-ui/src/app/common/file-actions/file-actions.component.html +++ b/apps/red-ui/src/app/common/file-actions/file-actions.component.html @@ -1,107 +1,102 @@
- + - + - - - -
+ + - -
+ - + - - - - +
diff --git a/apps/red-ui/src/app/common/file-actions/file-actions.component.scss b/apps/red-ui/src/app/common/file-actions/file-actions.component.scss index dbbf24e1a..2e6383863 100644 --- a/apps/red-ui/src/app/common/file-actions/file-actions.component.scss +++ b/apps/red-ui/src/app/common/file-actions/file-actions.component.scss @@ -1,5 +1,6 @@ .file-actions { display: flex; + gap: 2px; } .reviewer { diff --git a/apps/red-ui/src/app/common/file-actions/file-actions.component.ts b/apps/red-ui/src/app/common/file-actions/file-actions.component.ts index 60deaecc9..6dca70ad1 100644 --- a/apps/red-ui/src/app/common/file-actions/file-actions.component.ts +++ b/apps/red-ui/src/app/common/file-actions/file-actions.component.ts @@ -44,6 +44,10 @@ export class FileActionsComponent implements OnInit { return this.screen === 'file-preview' ? 'below' : 'above'; } + public get buttonType() { + return this.screen === 'file-preview' ? 'default' : 'dark-bg'; + } + openDeleteFileDialog($event: MouseEvent, fileStatusWrapper: FileStatusWrapper) { this._dialogService.openDeleteFilesDialog($event, fileStatusWrapper.projectId, [fileStatusWrapper.fileId], () => { this.actionPerformed.emit('delete'); diff --git a/apps/red-ui/src/app/common/filter/filter.component.html b/apps/red-ui/src/app/common/filter/filter.component.html index 6e141a0d6..960ef0382 100644 --- a/apps/red-ui/src/app/common/filter/filter.component.html +++ b/apps/red-ui/src/app/common/filter/filter.component.html @@ -1,10 +1,12 @@
- -
+ +
diff --git a/apps/red-ui/src/app/common/filter/filter.component.scss b/apps/red-ui/src/app/common/filter/filter.component.scss index cb51b163f..529547668 100644 --- a/apps/red-ui/src/app/common/filter/filter.component.scss +++ b/apps/red-ui/src/app/common/filter/filter.component.scss @@ -1,19 +1,5 @@ @import '../../../assets/styles/red-variables'; -.filter-root { - position: relative; - - .dot { - background: $primary; - height: 10px; - width: 10px; - border-radius: 50%; - position: absolute; - top: 0; - left: 0; - } -} - .filter-menu-header { display: flex; justify-content: space-between; diff --git a/apps/red-ui/src/app/common/filter/filter.component.ts b/apps/red-ui/src/app/common/filter/filter.component.ts index bcee24caa..ed8062031 100644 --- a/apps/red-ui/src/app/common/filter/filter.component.ts +++ b/apps/red-ui/src/app/common/filter/filter.component.ts @@ -1,8 +1,8 @@ -import { ChangeDetectorRef, Component, EventEmitter, Input, OnChanges, Output, SimpleChanges, TemplateRef, ViewChild } from '@angular/core'; +import { ChangeDetectorRef, Component, EventEmitter, Input, Output, TemplateRef, ViewChild } from '@angular/core'; import { AppStateService } from '../../state/app-state.service'; import { FilterModel } from './model/filter.model'; import { handleCheckedValue } from './utils/filter-utils'; -import { MatMenu, MatMenuTrigger } from '@angular/material/menu'; +import { MatMenuTrigger } from '@angular/material/menu'; @Component({ selector: 'redaction-filter', @@ -10,12 +10,12 @@ import { MatMenu, MatMenuTrigger } from '@angular/material/menu'; styleUrls: ['./filter.component.scss'] }) export class FilterComponent { - @Input() filterTemplate: TemplateRef; @Output() filtersChanged = new EventEmitter(); + @Input() filterTemplate: TemplateRef; @Input() filters: FilterModel[] = []; @Input() filterLabel = 'filter-menu.label'; - @Input() hasArrow = true; @Input() icon: string; + @Input() chevron = false; @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger; diff --git a/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.html b/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.html index 3ee32e3b7..25ffe79be 100644 --- a/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.html +++ b/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.html @@ -1,9 +1,5 @@ -
-
+
+
{{ initials }}
diff --git a/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.scss b/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.scss index 9388ce641..fc9200dc0 100644 --- a/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.scss +++ b/apps/red-ui/src/app/common/initials-avatar/initials-avatar.component.scss @@ -1,6 +1,6 @@ -@import '../../../assets/styles/red-variables'; - -.flex-row { +.wrapper { + display: flex; + align-items: center; width: fit-content; - gap: 12px; + gap: 6px; } diff --git a/apps/red-ui/src/app/components/buttons/chevron-button/chevron-button.component.html b/apps/red-ui/src/app/components/buttons/chevron-button/chevron-button.component.html new file mode 100644 index 000000000..4ad4baf78 --- /dev/null +++ b/apps/red-ui/src/app/components/buttons/chevron-button/chevron-button.component.html @@ -0,0 +1,5 @@ + +
diff --git a/apps/red-ui/src/app/components/buttons/chevron-button/chevron-button.component.scss b/apps/red-ui/src/app/components/buttons/chevron-button/chevron-button.component.scss new file mode 100644 index 000000000..efc59ac7f --- /dev/null +++ b/apps/red-ui/src/app/components/buttons/chevron-button/chevron-button.component.scss @@ -0,0 +1,8 @@ +button { + padding: 0 10px 0 14px; + + mat-icon { + width: 7px; + margin: 0 3.5px; + } +} diff --git a/apps/red-ui/src/app/components/buttons/chevron-button/chevron-button.component.ts b/apps/red-ui/src/app/components/buttons/chevron-button/chevron-button.component.ts new file mode 100644 index 000000000..93c4758b6 --- /dev/null +++ b/apps/red-ui/src/app/components/buttons/chevron-button/chevron-button.component.ts @@ -0,0 +1,16 @@ +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; + +@Component({ + selector: 'redaction-chevron-button', + templateUrl: './chevron-button.component.html', + styleUrls: ['./chevron-button.component.scss'] +}) +export class ChevronButtonComponent implements OnInit { + @Input() text: string; + @Input() showDot = false; + @Input() primary = false; + + constructor() {} + + ngOnInit(): void {} +} diff --git a/apps/red-ui/src/app/components/buttons/circle-button/circle-button.component.html b/apps/red-ui/src/app/components/buttons/circle-button/circle-button.component.html new file mode 100644 index 000000000..5ec714b6f --- /dev/null +++ b/apps/red-ui/src/app/components/buttons/circle-button/circle-button.component.html @@ -0,0 +1,12 @@ +
+ +
diff --git a/apps/red-ui/src/app/components/buttons/circle-button/circle-button.component.scss b/apps/red-ui/src/app/components/buttons/circle-button/circle-button.component.scss new file mode 100644 index 000000000..9f927a1ae --- /dev/null +++ b/apps/red-ui/src/app/components/buttons/circle-button/circle-button.component.scss @@ -0,0 +1,25 @@ +@import '../../../../assets/styles/red-variables'; + +button { + height: 34px; + width: 34px; + line-height: 34px; + + mat-icon { + width: 14px; + } + + &.primary { + &.mat-button-disabled { + background-color: $grey-6; + color: $white !important; + } + } + + &.warn { + background-color: $yellow-2; + &:hover { + background-color: $yellow-2; + } + } +} diff --git a/apps/red-ui/src/app/components/buttons/circle-button/circle-button.component.ts b/apps/red-ui/src/app/components/buttons/circle-button/circle-button.component.ts new file mode 100644 index 000000000..d9d067a0f --- /dev/null +++ b/apps/red-ui/src/app/components/buttons/circle-button/circle-button.component.ts @@ -0,0 +1,20 @@ +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; + +@Component({ + selector: 'redaction-circle-button', + templateUrl: './circle-button.component.html', + styleUrls: ['./circle-button.component.scss'] +}) +export class CircleButtonComponent implements OnInit { + @Input() icon: string; + @Input() tooltip: string; + @Input() tooltipPosition: 'above' | 'below' | 'before' | 'after' = 'above'; + @Input() tooltipClass: string; + @Input() disabled = false; + @Input() type: 'default' | 'primary' | 'warn' | 'dark-bg' = 'default'; + @Output() action = new EventEmitter(); + + constructor() {} + + ngOnInit(): void {} +} diff --git a/apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.html b/apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.html new file mode 100644 index 000000000..a5d497466 --- /dev/null +++ b/apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.html @@ -0,0 +1,5 @@ + +
diff --git a/apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.scss b/apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.scss new file mode 100644 index 000000000..340b222c1 --- /dev/null +++ b/apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.scss @@ -0,0 +1,7 @@ +button { + padding: 0 14px 0 10px; + + mat-icon { + width: 14px; + } +} diff --git a/apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.ts b/apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.ts new file mode 100644 index 000000000..6e75cfa02 --- /dev/null +++ b/apps/red-ui/src/app/components/buttons/icon-button/icon-button.component.ts @@ -0,0 +1,18 @@ +import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core'; + +@Component({ + selector: 'redaction-icon-button', + templateUrl: './icon-button.component.html', + styleUrls: ['./icon-button.component.scss'] +}) +export class IconButtonComponent implements OnInit { + @Input() icon: string; + @Input() text: string; + @Input() showDot = false; + @Input() primary = false; + @Output() action = new EventEmitter(); + + constructor() {} + + ngOnInit(): void {} +} diff --git a/apps/red-ui/src/app/components/buttons/user-button/user-button.component.html b/apps/red-ui/src/app/components/buttons/user-button/user-button.component.html new file mode 100644 index 000000000..2aaa65363 --- /dev/null +++ b/apps/red-ui/src/app/components/buttons/user-button/user-button.component.html @@ -0,0 +1,4 @@ + diff --git a/apps/red-ui/src/app/components/buttons/user-button/user-button.component.scss b/apps/red-ui/src/app/components/buttons/user-button/user-button.component.scss new file mode 100644 index 000000000..1da22f3b7 --- /dev/null +++ b/apps/red-ui/src/app/components/buttons/user-button/user-button.component.scss @@ -0,0 +1,23 @@ +@import '../../../../assets/styles/red-variables'; + +:host { + button { + padding: 0 10px 0 5px; + font-weight: 400 !important; + + &:hover { + background-color: $grey-6; + } + + mat-icon { + width: 7px; + margin: 0 3.5px; + } + } + + &[aria-expanded='true'] { + button { + background: rgba($primary, 0.1); + } + } +} diff --git a/apps/red-ui/src/app/components/buttons/user-button/user-button.component.ts b/apps/red-ui/src/app/components/buttons/user-button/user-button.component.ts new file mode 100644 index 000000000..689c967ef --- /dev/null +++ b/apps/red-ui/src/app/components/buttons/user-button/user-button.component.ts @@ -0,0 +1,15 @@ +import { Component, Input, OnInit } from '@angular/core'; +import { UserWrapper } from '../../../user/user.service'; + +@Component({ + selector: 'redaction-user-button', + templateUrl: './user-button.component.html', + styleUrls: ['./user-button.component.scss'] +}) +export class UserButtonComponent implements OnInit { + @Input() user: UserWrapper; + + constructor() {} + + ngOnInit(): void {} +} diff --git a/apps/red-ui/src/app/components/comments/comments.component.html b/apps/red-ui/src/app/components/comments/comments.component.html index fd81b1f31..6759f8fe0 100644 --- a/apps/red-ui/src/app/components/comments/comments.component.html +++ b/apps/red-ui/src/app/components/comments/comments.component.html @@ -1,10 +1,10 @@
-
+
-
+
@@ -25,19 +25,17 @@ }) }}
-
+
-
+
- +
- +
diff --git a/apps/red-ui/src/app/components/comments/comments.component.ts b/apps/red-ui/src/app/components/comments/comments.component.ts index 4f9cac5e9..52d51edbc 100644 --- a/apps/red-ui/src/app/components/comments/comments.component.ts +++ b/apps/red-ui/src/app/components/comments/comments.component.ts @@ -42,6 +42,9 @@ export class CommentsComponent { public toggleAddingComment($event?: MouseEvent): void { $event?.stopPropagation(); this.addingComment = !this.addingComment; + if (this.addingComment) { + this.expanded = true; + } this._changeDetectorRef.detectChanges(); } @@ -54,7 +57,6 @@ export class CommentsComponent { id: commentResponse.commentId, user: this._userService.userId }); - this.expanded = true; }); this.commentForm.reset(); this.toggleAddingComment(); diff --git a/apps/red-ui/src/app/screens/base-screen/base-screen.component.html b/apps/red-ui/src/app/screens/base-screen/base-screen.component.html index 0de302aea..24cd01505 100644 --- a/apps/red-ui/src/app/screens/base-screen/base-screen.component.html +++ b/apps/red-ui/src/app/screens/base-screen/base-screen.component.html @@ -5,26 +5,13 @@ - - +
- +
- + {{ appStateService.activeProject.project.projectName }}
@@ -53,12 +32,7 @@ {{ appStateService.activeFile.filename }} @@ -68,32 +42,12 @@
- + - + - - + + + - + + - + - + - + +
diff --git a/apps/red-ui/src/app/screens/file/annotation-actions/annotation-actions.component.ts b/apps/red-ui/src/app/screens/file/annotation-actions/annotation-actions.component.ts index 9dc7bf801..7706b5551 100644 --- a/apps/red-ui/src/app/screens/file/annotation-actions/annotation-actions.component.ts +++ b/apps/red-ui/src/app/screens/file/annotation-actions/annotation-actions.component.ts @@ -106,8 +106,4 @@ export class AnnotationActionsComponent implements OnInit { get dictionaryColor() { return this.appStateService.getDictionaryColor('suggestion-add-dictionary'); } - - get suggestRemoveLabel() { - return 'suggestRemoveLabel'; - } } diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html index 35a8a3edd..dbb76b0ed 100644 --- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html +++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html @@ -26,10 +26,10 @@ ]" > -
{{ appStateService.activeFile.status.toLowerCase().replace('_', '-') | translate }}
+
{{ appStateService.activeFile.status.toLowerCase().replace('_', '-') | translate }}
- - + +
+ + + + + +
+
+ - +
@@ -87,6 +95,7 @@ (filtersChanged)="filtersChanged($event)" [filterTemplate]="annotationFilterTemplate" [filters]="annotationFilters" + [chevron]="true" >
diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss index 8440762a4..43fa82073 100644 --- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss +++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss @@ -13,14 +13,11 @@ redaction-pdf-viewer { width: 1px; height: 30px; background-color: $grey-4; - margin: 0 8px; -} - -.mr-8 { - margin-right: 8px; + margin: 0 16px; } .assign-reviewer { + margin-left: 6px; text-decoration: underline; } @@ -28,7 +25,6 @@ redaction-pdf-viewer { display: flex; justify-content: flex-end; align-items: center; - gap: 10px; } .right-fixed-container { @@ -128,3 +124,21 @@ redaction-pdf-viewer { padding: 24px; text-align: center; } + +.assign-actions-wrapper { + display: flex; + gap: 2px; + margin-left: 8px; +} + +.mr-8 { + margin-right: 8px; +} + +.mr-16 { + margin-right: 16px; +} + +.ml-8 { + margin-left: 8px; +} diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html index 35f85c661..006e86cf7 100644 --- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html +++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.html @@ -1,18 +1,16 @@
-
+
@@ -21,14 +19,16 @@ [filterLabel]="'filters.needs-work'" [filterTemplate]="needsWorkTemplate" [filters]="needsWorkFilters" - [hasArrow]="false" [icon]="'red:needs-work'" >
- +
@@ -99,54 +99,48 @@
- + - + -
- -
- - +
diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss index f883f9bf8..218ff3640 100644 --- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss +++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.scss @@ -1,12 +1,5 @@ @import '../../../assets/styles/red-mixins'; -.add-project-btn { - .mat-icon { - width: 14px; - color: $white; - } -} - .left-container { width: calc(100vw - #{$right-container-width} - 90px); diff --git a/apps/red-ui/src/app/screens/project-overview-screen/bulk-actions/bulk-actions.component.html b/apps/red-ui/src/app/screens/project-overview-screen/bulk-actions/bulk-actions.component.html index 06a8fb920..3b13dd77a 100644 --- a/apps/red-ui/src/app/screens/project-overview-screen/bulk-actions/bulk-actions.component.html +++ b/apps/red-ui/src/app/screens/project-overview-screen/bulk-actions/bulk-actions.component.html @@ -1,27 +1,19 @@ - + tooltip="project-overview.bulk.delete" + type="dark-bg" + icon="red:trash" + > - + tooltip="project-overview.bulk.assign" + type="dark-bg" + icon="red:assign" + > @@ -29,39 +21,23 @@ - + tooltip="project-overview.approve" + type="dark-bg" + icon="red:check-alt" + > - + - + + diff --git a/apps/red-ui/src/app/screens/project-overview-screen/bulk-actions/bulk-actions.component.scss b/apps/red-ui/src/app/screens/project-overview-screen/bulk-actions/bulk-actions.component.scss index e7a72018d..0bb0ac011 100644 --- a/apps/red-ui/src/app/screens/project-overview-screen/bulk-actions/bulk-actions.component.scss +++ b/apps/red-ui/src/app/screens/project-overview-screen/bulk-actions/bulk-actions.component.scss @@ -1,3 +1,5 @@ :host { display: flex; + align-items: center; + gap: 2px; } diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.html b/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.html index 4e11a000b..a944e3bfe 100644 --- a/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.html +++ b/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.html @@ -1,22 +1,4 @@ -
- - -
- -
-
- -
+
{{ appStateService.activeProject.project.projectName }}
@@ -36,7 +18,7 @@
+{{ overflowCount }}
-
+
+
diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.ts b/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.ts index 850e51230..672885fcc 100644 --- a/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.ts +++ b/apps/red-ui/src/app/screens/project-overview-screen/project-details/project-details.component.ts @@ -1,4 +1,4 @@ -import { Component, OnInit, Output, EventEmitter, Input, ChangeDetectorRef } from '@angular/core'; +import { ChangeDetectorRef, Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; import { AppStateService } from '../../../state/app-state.service'; import { groupBy } from '../../../utils/functions'; import { DoughnutChartConfig } from '../../../components/simple-doughnut-chart/simple-doughnut-chart.component'; @@ -17,8 +17,8 @@ import { StatusSorter } from '../../../common/sorters/status-sorter'; export class ProjectDetailsComponent implements OnInit { public documentsChartData: DoughnutChartConfig[] = []; @Input() public filters: { needsWorkFilters: FilterModel[]; statusFilters: FilterModel[] }; - @Output() public reloadProjects = new EventEmitter(); @Output() public filtersChanged = new EventEmitter(); + @Output() public openAssignProjectMembersDialog = new EventEmitter(); constructor( public readonly appStateService: AppStateService, @@ -44,28 +44,6 @@ export class ProjectDetailsComponent implements OnInit { return this.appStateService.activeProject.project.memberIds.length > 6 ? this.appStateService.activeProject.project.memberIds.length - 6 : 0; } - public openEditProjectDialog($event: MouseEvent) { - this._dialogService.openEditProjectDialog($event, this.appStateService.activeProject.project); - } - - public openDeleteProjectDialog($event: MouseEvent) { - this._dialogService.openDeleteProjectDialog($event, this.appStateService.activeProject.project, () => { - this._router.navigate(['/ui/projects']); - }); - } - - public openAssignProjectMembersDialog(): void { - this._dialogService.openAssignProjectMembersAndOwnerDialog(null, this.appStateService.activeProject.project, () => { - this.reloadProjects.emit(); - this._changeDetectorRef.detectChanges(); - }); - } - - public downloadRedactionReport($event: MouseEvent): void { - $event.stopPropagation(); - this.appStateService.downloadRedactionReport(); - } - public calculateChartConfig(): void { if (this.appStateService.activeProject) { const groups = groupBy(this.appStateService.activeProject?.files, 'status'); diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html index c96fac12c..3fdee5740 100644 --- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html +++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html @@ -1,20 +1,18 @@
-
+
-
- - +
+ + + + + +
@@ -184,6 +210,7 @@ [fileStatus]="fileStatus" (actionPerformed)="calculateData()" *ngIf="!fileStatus.isProcessing" + class="mr-4" > diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss index b0b59132b..ddbee161d 100644 --- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss +++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss @@ -65,3 +65,15 @@ color: lighten($accent, 10%); } } + +.ml-6 { + margin-left: 6px; +} + +.ml-14 { + margin-left: 14px; +} + +.mr-4 { + margin-right: 4px; +} diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts index 7751c4294..4580068d6 100644 --- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts +++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts @@ -286,4 +286,25 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy { this.selectedFileIds = []; this.reloadProjects(); } + + public openEditProjectDialog($event: MouseEvent) { + this._dialogService.openEditProjectDialog($event, this.appStateService.activeProject.project); + } + + public openDeleteProjectDialog($event: MouseEvent) { + this._dialogService.openDeleteProjectDialog($event, this.appStateService.activeProject.project, () => { + this._router.navigate(['/ui/projects']); + }); + } + + public downloadRedactionReport($event: MouseEvent): void { + $event.stopPropagation(); + this.appStateService.downloadRedactionReport(); + } + + public openAssignProjectMembersDialog(): void { + this._dialogService.openAssignProjectMembersAndOwnerDialog(null, this.appStateService.activeProject.project, () => { + this.reloadProjects(); + }); + } } diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index 996b8950f..b7a6156d8 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -62,13 +62,13 @@ "needs-work": "Analyzed" }, "report": { - "unavailable": "Redaction Report is only available once all files have been approved.", - "unavailable-single": "Redaction Report is only available once this file has been approved.", + "unavailable": "Redaction report is only available once all files have been approved.", + "unavailable-single": "Redaction report is only available once this file has been approved.", "action": "Download Redaction Report" }, "project-listing": { "reanalyse": { - "action": "Reanalyse entire Project" + "action": "Reanalyse entire project" }, "assign": { "action": "Assign Owner & Members" @@ -126,8 +126,6 @@ } }, "project-details": { - "edit": "Edit", - "delete": "Delete", "dialog": { "title": "Project Details", "info": { @@ -142,6 +140,12 @@ "members": "Members" }, "project-overview": { + "header-actions": { + "edit": "Edit", + "delete": "Delete", + "assign": "Assign Owner & Members", + "upload-document": "Upload Document" + }, "download-redacted-file": "Download Redacted File", "under-approval": "For Approval", "approve": "Approve", @@ -162,7 +166,7 @@ } }, "report": { - "action": "Download Redaction Report" + "action": "Download redaction report" }, "assign": { "action": "Assign Reviewer" @@ -214,13 +218,11 @@ "description": "Description" }, "header": "Project Overview", - "upload-document": "Upload Document", "no-project": "Requested project: {{projectId}} does not exist! Back to Project Listing. ", "bulk": { - "delete": "Delete documents", - "assign": "Assign reviewer", - "change-state": "Change state", - "reanalyse": "Reanalyse documents", + "delete": "Delete Documents", + "assign": "Assign Reviewer", + "reanalyse": "Reanalyse Documents", "reanalyse-error-outdated": "Not all selected documents can be reanalysed, some may not be assigned to you or may not be outdated." } }, diff --git a/apps/red-ui/src/assets/icons/general/arrow-down.svg b/apps/red-ui/src/assets/icons/general/arrow-down.svg index b33ce6d10..a5dcfcbd0 100644 --- a/apps/red-ui/src/assets/icons/general/arrow-down.svg +++ b/apps/red-ui/src/assets/icons/general/arrow-down.svg @@ -1,3 +1,13 @@ - - - + + + 9A0E7FCD-AD02-40D9-BEF9-48F61351C288 + + + + + + + + + + diff --git a/apps/red-ui/src/assets/icons/general/upload.svg b/apps/red-ui/src/assets/icons/general/upload.svg index bde05f03a..bd680c4fc 100644 --- a/apps/red-ui/src/assets/icons/general/upload.svg +++ b/apps/red-ui/src/assets/icons/general/upload.svg @@ -1,5 +1,5 @@ - + upload diff --git a/apps/red-ui/src/assets/styles/red-button.scss b/apps/red-ui/src/assets/styles/red-button.scss index 42ec6a74e..9aa2bc910 100644 --- a/apps/red-ui/src/assets/styles/red-button.scss +++ b/apps/red-ui/src/assets/styles/red-button.scss @@ -9,14 +9,6 @@ display: flex !important; align-items: center; - &.mat-primary { - font-weight: 500 !important; - } - - &:not(.mat-primary) { - font-weight: 400 !important; - } - .mat-button-wrapper { display: flex; align-items: center; @@ -24,50 +16,62 @@ } } -.mat-button[aria-expanded='true'], -.mat-button.overlay { - background: rgba($primary, 0.1); -} +redaction-icon-button, +redaction-chevron-button, +redaction-circle-button { + position: relative; + transition: background-color 0.2s; -.mat-button, -.mat-flat-button, -.mat-icon-button { - gap: 6px; + button { + font-weight: 400 !important; - mat-icon { - width: 14px; - } -} + &.overlay { + background: rgba($primary, 0.1); + } -.arrow-button mat-icon { - width: 9px; - margin-left: 3px; -} + &:not(.overlay):hover { + background-color: $grey-6; + } -.mat-icon-button { - transition: background-color 0.25s ease-in-out; - width: 34px !important; - height: 34px !important; - line-height: 34px !important; + &.primary { + font-weight: 500 !important; + background-color: $primary; + color: $white; - &.warn { - background-color: $yellow-2; - } + &:hover { + background-color: $red-2; + } + } - &.primary { - background-color: $primary; - color: $white !important; - - &.mat-button-disabled { - background-color: rgba($primary, 0.7); + &.dark-bg:hover { + background-color: $grey-4; } } - &:hover:not(.warn):not(.primary) { - background-color: $grey-2; - } - - &.dark:hover { - background-color: $grey-4; + .dot { + background: $primary; + height: 10px; + width: 10px; + border-radius: 50%; + position: absolute; + top: 0; + left: 0; + } +} + +redaction-chevron-button, +redaction-icon-button { + &[aria-expanded='true'] { + button { + background: rgba($primary, 0.1); + } + } +} + +redaction-circle-button { + &[aria-expanded='true'] { + button { + background: $grey-4; + } } } diff --git a/apps/red-ui/src/assets/styles/red-page-layout.scss b/apps/red-ui/src/assets/styles/red-page-layout.scss index b8f790b41..1782fe506 100644 --- a/apps/red-ui/src/assets/styles/red-page-layout.scss +++ b/apps/red-ui/src/assets/styles/red-page-layout.scss @@ -24,6 +24,21 @@ body { box-sizing: border-box; background-color: $white; z-index: 3; + + .filters { + gap: 2px; + display: flex; + align-items: center; + > div:first-child { + margin-right: 6px; + } + } + + .actions { + display: flex; + align-items: center; + gap: 2px; + } } .red-content-inner { @@ -33,33 +48,12 @@ body { .right-fixed-container { border-left: 1px solid $grey-4; background: $white; - height: calc(100vh - 110px - 2 * #{$right-container-padding}); + height: calc(100vh - 110px - 2 * #{$right-container-vertical-padding}); width: $right-container-inside-width; - padding: $right-container-padding; + padding: $right-container-vertical-padding $right-container-horizontal-padding; position: fixed; right: 0; z-index: 2; - - .actions-row { - display: flex; - height: 40px; - margin-left: -10px; - } -} - -.filters { - div { - margin-right: 6px; - } - - button { - flex-direction: row-reverse; - } -} - -.flex-row { - display: flex; - align-items: center; } .flex { diff --git a/apps/red-ui/src/assets/styles/red-variables.scss b/apps/red-ui/src/assets/styles/red-variables.scss index c4876cd03..de9150e16 100644 --- a/apps/red-ui/src/assets/styles/red-variables.scss +++ b/apps/red-ui/src/assets/styles/red-variables.scss @@ -14,6 +14,7 @@ $blue-2: #48c9f7; $blue-3: #5b97db; $blue-4: #374c81; $red-1: #dd4d50; +$red-2: #f16164; $yellow-1: #ffb83b; $yellow-2: #fdbd00; $green-1: #00ff00; @@ -28,7 +29,6 @@ $dark: $black; $separator: rgba(226, 228, 233, 0.9); $right-container-inside-width: 340px; -$right-container-padding: 24px; -$right-container-width: calc( - #{$right-container-inside-width} + 2 *#{$right-container-padding} + 1px -); +$right-container-horizontal-padding: 24px; +$right-container-vertical-padding: 16px; +$right-container-width: calc(#{$right-container-inside-width} + 2 *#{$right-container-horizontal-padding} + 1px);