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 d5fc3d609..98decd5c8 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,4 +1,4 @@
{{initials}}
-
{{username || ('initials-avatar.unassigned.label' | translate)}}
+
{{username || ('initials-avatar.unassigned.label' | translate)}}
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 3952ae0d8..3508353d3 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,10 +1,5 @@ @import "../../../assets/styles/red-variables"; -.name { - font-size: 13px; - line-height: 16px; -} - .flex-row { flex-wrap: wrap; gap: 12px; diff --git a/apps/red-ui/src/app/components/status-bar/status-bar.component.html b/apps/red-ui/src/app/components/status-bar/status-bar.component.html index 20c45cc8a..c9a84a7b7 100644 --- a/apps/red-ui/src/app/components/status-bar/status-bar.component.html +++ b/apps/red-ui/src/app/components/status-bar/status-bar.component.html @@ -1,6 +1,6 @@
-
{{ rect.title }}
+
{{ rect.label }}
diff --git a/apps/red-ui/src/app/components/status-bar/status-bar.component.scss b/apps/red-ui/src/app/components/status-bar/status-bar.component.scss index 983674178..6e071c74c 100644 --- a/apps/red-ui/src/app/components/status-bar/status-bar.component.scss +++ b/apps/red-ui/src/app/components/status-bar/status-bar.component.scss @@ -38,20 +38,40 @@ .rectangle { height: 4px; - &.grey { - background-color: $grey-4; + &.unassigned { + background-color: $grey-5; } - &.yellow { + &.under-review { background-color: $yellow-1; } - &.blue { - background-color: $blue-1; + &.under-approval { + background-color: $red-1; } - &.green { - background-color: $green-1; + &.approved { + background-color: $blue-2; + } + + &.submitted { + background-color: $blue-3; + } + + &.efsa { + background-color: $blue-4; + } + + &.finished { + background-color: $green-2; + } + + &.active { + background-color: $primary; + } + + &.archived { + background-color: rgba($red-1, 0.1); } } } diff --git a/apps/red-ui/src/app/components/status-bar/status-bar.component.ts b/apps/red-ui/src/app/components/status-bar/status-bar.component.ts index a6a23e4b1..097e31299 100644 --- a/apps/red-ui/src/app/components/status-bar/status-bar.component.ts +++ b/apps/red-ui/src/app/components/status-bar/status-bar.component.ts @@ -1,4 +1,5 @@ import { Component, Input, OnInit, ViewEncapsulation } from '@angular/core'; +import { Color } from '../../utils/types'; @Component({ selector: 'redaction-status-bar', @@ -10,13 +11,16 @@ export class StatusBarComponent implements OnInit { @Input() public config: { length: number, - color: 'green' | 'blue' | 'red' | 'grey' | 'yellow', - title?: string, + color: Color, + label?: string, }[] = []; @Input() public small = false; + @Input() + public labelClass = ''; + constructor() { } 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 b6ddefadb..f9bf6c2bc 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 @@ -84,7 +84,8 @@
+ [labelClass]="'subtitle'" + [config]="[{ length: 1, label: 'Unassigned', color: 'unassigned'}]">
645
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 8df97f57d..3c513245a 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 @@ -65,8 +65,6 @@ redaction-pdf-viewer { } .assign-reviewer { - font-size: 13px; - line-height: 16px; margin-left: 12px; } @@ -92,8 +90,6 @@ redaction-pdf-viewer { } .page-number { - font-size: 13px; - line-height: 18px; font-weight: 600; } 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 35aebac00..a0cf36f71 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 @@ -57,7 +57,7 @@
@@ -79,8 +79,11 @@
- - +
diff --git a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts index b8ed1fe29..f593f255e 100644 --- a/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts +++ b/apps/red-ui/src/app/screens/project-listing-screen/project-listing-screen.component.ts @@ -1,14 +1,14 @@ -import {Component, OnInit} from '@angular/core'; -import {Project, ProjectControllerService} from "@redaction/red-ui-http"; -import {MatDialog} from "@angular/material/dialog"; -import {AddEditProjectDialogComponent} from "./add-edit-project-dialog/add-edit-project-dialog.component"; -import {ConfirmationDialogComponent} from "../../common/confirmation-dialog/confirmation-dialog.component"; -import {TranslateService} from "@ngx-translate/core"; -import {NotificationService} from "../../notification/notification.service"; -import {AppStateService, ProjectWrapper} from "../../state/app-state.service"; -import {UserService} from "../../user/user.service"; -import {ProjectDetailsDialogComponent} from "../project-overview-screen/project-details-dialog/project-details-dialog.component"; -import {DataSeries} from "../../simple-doughnut-chart/simple-doughnut-chart.component"; +import { Component, OnInit } from '@angular/core'; +import { Project, ProjectControllerService } from '@redaction/red-ui-http'; +import { MatDialog } from '@angular/material/dialog'; +import { AddEditProjectDialogComponent } from './add-edit-project-dialog/add-edit-project-dialog.component'; +import { ConfirmationDialogComponent } from '../../common/confirmation-dialog/confirmation-dialog.component'; +import { TranslateService } from '@ngx-translate/core'; +import { NotificationService } from '../../notification/notification.service'; +import { AppStateService, ProjectWrapper } from '../../state/app-state.service'; +import { UserService } from '../../user/user.service'; +import { ProjectDetailsDialogComponent } from '../project-overview-screen/project-details-dialog/project-details-dialog.component'; +import { DataSeries } from '../../simple-doughnut-chart/simple-doughnut-chart.component'; @Component({ selector: 'redaction-project-listing-screen', @@ -34,8 +34,10 @@ export class ProjectListingScreenComponent implements OnInit { ngOnInit(): void { this.appStateService.reset(); this.projectsChartData = [ - {value: this.activeProjects, color: '#DD4D50', label: 'active-projects'}, - {value: this.inactiveProjects, color: '#f8eded', label: 'Archived'}]; + // {value: this.activeProjects, color: '#DD4D50', label: 'active-projects'}, + // {value: this.inactiveProjects, color: '#f8eded', label: 'Archived'}]; + { value: 3, color: 'active', label: 'active-projects' }, + { value: 7, color: 'archived', label: 'Archived' }]; } openAddProjectDialog(project?: Project): void { @@ -55,7 +57,7 @@ export class ProjectListingScreenComponent implements OnInit { $event.stopPropagation(); const dialogRef = this._dialog.open(ConfirmationDialogComponent, { width: '400px', - maxWidth: '90vw', + maxWidth: '90vw' }); dialogRef.afterClosed().subscribe(result => { @@ -84,7 +86,7 @@ export class ProjectListingScreenComponent implements OnInit { } get activeProjects() { - return this.appStateService.allProjects.reduce((i, p) => i+(p.project.status === Project.StatusEnum.ACTIVE ? 1 :0), 0) + return this.appStateService.allProjects.reduce((i, p) => i + (p.project.status === Project.StatusEnum.ACTIVE ? 1 : 0), 0); } get inactiveProjects() { 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 aa5127646..76d3649af 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 @@ -61,7 +61,7 @@
@@ -110,7 +110,7 @@ > -
+
{{ appStateService.activeProject.project.description }}
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 b80225463..ca6ca4ac8 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 @@ -24,11 +24,6 @@ } .project-details-container { - .description { - font-size: 13px; - line-height: 18px; - } - .members-container { gap: 5px; } diff --git a/apps/red-ui/src/app/simple-doughnut-chart/simple-doughnut-chart.component.html b/apps/red-ui/src/app/simple-doughnut-chart/simple-doughnut-chart.component.html index 78e32dad6..3039d2652 100644 --- a/apps/red-ui/src/app/simple-doughnut-chart/simple-doughnut-chart.component.html +++ b/apps/red-ui/src/app/simple-doughnut-chart/simple-doughnut-chart.component.html @@ -1,16 +1,30 @@ - - - - - -
- {{val.value}} {{val.label}} +
+ + + + + + +
+
{{ title }}
+
{{ subtitle }}
+
+ +
+
+
+ + +
+
+
diff --git a/apps/red-ui/src/app/simple-doughnut-chart/simple-doughnut-chart.component.scss b/apps/red-ui/src/app/simple-doughnut-chart/simple-doughnut-chart.component.scss index e69de29bb..eb2072a28 100644 --- a/apps/red-ui/src/app/simple-doughnut-chart/simple-doughnut-chart.component.scss +++ b/apps/red-ui/src/app/simple-doughnut-chart/simple-doughnut-chart.component.scss @@ -0,0 +1,66 @@ +@import "../../assets/styles/red-variables"; + +.container { + position: absolute; +} + +.text-container { + position: absolute; + top: 0; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.breakdown-container { + display: flex; + flex-direction: column; + align-items: center; + gap: 8px; + + div { + width: fit-content; + display: flex; + flex-direction: column; + gap: 8px; + } +} + +circle { + &.unassigned { + stroke: $grey-5; + } + + &.under-review { + stroke: $yellow-1; + } + + &.under-approval { + stroke: $red-1; + } + + &.approved { + stroke: $blue-2; + } + + &.submitted { + stroke: $blue-3; + } + + &.efsa { + stroke: $blue-4; + } + + &.finished { + stroke: $green-2; + } + + &.active { + stroke: $primary; + } + + &.archived { + stroke: rgba($red-1, 0.1); + } +} diff --git a/apps/red-ui/src/app/simple-doughnut-chart/simple-doughnut-chart.component.ts b/apps/red-ui/src/app/simple-doughnut-chart/simple-doughnut-chart.component.ts index a5798d713..b44c1826b 100644 --- a/apps/red-ui/src/app/simple-doughnut-chart/simple-doughnut-chart.component.ts +++ b/apps/red-ui/src/app/simple-doughnut-chart/simple-doughnut-chart.component.ts @@ -1,13 +1,12 @@ import {Component, Input, OnInit} from '@angular/core'; - +import { Color } from '../utils/types'; export class DataSeries { value: number; - color: string; + color: Color; label: string; } - @Component({ selector: 'redaction-simple-doughnut-chart', templateUrl: './simple-doughnut-chart.component.html', @@ -16,17 +15,17 @@ export class DataSeries { export class SimpleDoughnutChartComponent implements OnInit { @Input() title: string; - @Input() subtitle: number; + @Input() subtitle: string; @Input() data: DataSeries[] = []; @Input() angleOffset = -90; @Input() radius = 80; @Input() strokeWidth = 20; - chartData: any[] = []; - perimeter: number; - cx = 0; - cy = 0; - size = 0; + public chartData: any[] = []; + public perimeter: number; + public cx = 0; + public cy = 0; + public size = 0; constructor() { } @@ -65,10 +64,6 @@ export class SimpleDoughnutChartComponent implements OnInit { return circumference - strokeDiff; } - degreesToRadians(angle) { - return angle * (Math.PI / 180); - } - dataPercentage(dataVal) { return dataVal / this.dataTotal; } @@ -76,5 +71,4 @@ export class SimpleDoughnutChartComponent implements OnInit { returnCircleTransformValue(index) { return `rotate(${this.chartData[index].degrees}, ${this.cx}, ${this.cy})`; } - } diff --git a/apps/red-ui/src/app/utils/types.d.ts b/apps/red-ui/src/app/utils/types.d.ts new file mode 100644 index 000000000..8a532fcba --- /dev/null +++ b/apps/red-ui/src/app/utils/types.d.ts @@ -0,0 +1,10 @@ +export type Color = + 'unassigned' | + 'under-review' | + 'under-approval' | + 'approved' | + 'submitted' | + 'efsa' | + 'finished' | + 'active' | + 'archived'; diff --git a/apps/red-ui/src/assets/styles/red-controls.scss b/apps/red-ui/src/assets/styles/red-controls.scss index 85930a2fa..d3bfc0d3f 100644 --- a/apps/red-ui/src/assets/styles/red-controls.scss +++ b/apps/red-ui/src/assets/styles/red-controls.scss @@ -9,7 +9,7 @@ cursor: pointer; color: $accent; background: $white; - font-family: 'Inter', sans-serif; + font-family: Inter, sans-serif; font-size: 13px; letter-spacing: 0; line-height: 14px; 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 200d1424c..fe7918429 100644 --- a/apps/red-ui/src/assets/styles/red-page-layout.scss +++ b/apps/red-ui/src/assets/styles/red-page-layout.scss @@ -5,8 +5,10 @@ html, body { margin: 0; padding: 0; height: 100vh; - font-family: 'Inter', sans-serif; + font-family: Inter, sans-serif; color: $accent; + font-size: 13px; + line-height: 16px; } .page-header { @@ -57,9 +59,6 @@ html, body { } .filters { - font-size: 13px; - line-height: 14px; - > div { padding: 10px 14px; } @@ -157,8 +156,6 @@ html, body { .breadcrumb { text-decoration: none; color: $accent; - font-size: 13px; - line-height: 18px; font-weight: 600; @include line-clamp(1); max-width: 320px; diff --git a/apps/red-ui/src/assets/styles/red-tables.scss b/apps/red-ui/src/assets/styles/red-tables.scss index 818888e5e..759bcf2d3 100644 --- a/apps/red-ui/src/assets/styles/red-tables.scss +++ b/apps/red-ui/src/assets/styles/red-tables.scss @@ -10,7 +10,6 @@ .actions { display: flex; - font-size: 13px; div { padding: 10px 14px; @@ -41,9 +40,7 @@ } .table-item-title { - font-size: 13px; font-weight: 600; - line-height: 18px; @include line-clamp(1); } diff --git a/apps/red-ui/src/assets/styles/red-variables.scss b/apps/red-ui/src/assets/styles/red-variables.scss index 67531990d..46645f5e2 100644 --- a/apps/red-ui/src/assets/styles/red-variables.scss +++ b/apps/red-ui/src/assets/styles/red-variables.scss @@ -8,13 +8,18 @@ $dark: #000; $grey-1: #283241; $grey-2: #ECECEE; -$grey-3: #aaacb3; +$grey-3: #AAACB3; $grey-4: #E2E4E9; +$grey-5: #D3D5DA; $blue-1: #4875F7; +$blue-2: #48C9F7; +$blue-3: #5B97DB; +$blue-4: #374C81; $red-1: #F65757; $yellow-1: #FFB83B; $green-1: #46CE7D; +$green-2: #5CE594; $separator: rgba(226,228,233,0.9);