diff --git a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html index a33c01a53..a4ade48a0 100644 --- a/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html +++ b/apps/red-ui/src/app/modules/admin/dialogs/file-attributes-csv-import-dialog/active-fields-listing/active-fields-listing.component.html @@ -1,18 +1,10 @@
-
- - + [active]="areAllEntitiesSelected" + [indeterminate]="areSomeEntitiesSelected && !areAllEntitiesSelected" + >
{{ 'file-attributes-csv-import.table-header.title' | translate: { length: allEntities.length } }} @@ -86,9 +78,17 @@ - + - +
@@ -104,9 +104,8 @@ (mouseenter)="setHoveredColumn.emit(field.csvColumn)" (mouseleave)="setHoveredColumn.emit()" > -
-
- +
+
@@ -131,7 +130,7 @@ (action)="field.editingName = false; field.name = field.temporaryName" tooltip="file-attributes-csv-import.action.save-name" type="dark-bg" - icon="red:check-alt" + icon="red:check" > diff --git a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html index ab3fd4b2e..44dd56a15 100644 --- a/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html +++ b/apps/red-ui/src/app/modules/admin/screens/dictionary-listing/dictionary-listing-screen.component.html @@ -15,19 +15,11 @@
-
- - + [active]="areAllEntitiesSelected" + [indeterminate]="areSomeEntitiesSelected && !areAllEntitiesSelected" + >
@@ -89,9 +81,8 @@ *cdkVirtualFor="let dict of displayedEntities | sortBy: sortingOption.order:sortingOption.column" [routerLink]="[dict.type]" > -
-
- +
+
diff --git a/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.html index 2264a8179..1de86471a 100644 --- a/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.html +++ b/apps/red-ui/src/app/modules/admin/screens/dictionary-overview/dictionary-overview-screen.component.html @@ -127,12 +127,7 @@
- +
diff --git a/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html index f1d85e718..8e70ef9e2 100644 --- a/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html +++ b/apps/red-ui/src/app/modules/admin/screens/digital-signature/digital-signature-screen.component.html @@ -62,7 +62,7 @@
-
- - + [active]="areAllEntitiesSelected" + [indeterminate]="areSomeEntitiesSelected && !areAllEntitiesSelected" + >
@@ -75,10 +67,32 @@ column="label" > - + + + + +
@@ -95,14 +109,18 @@
-
-
- +
+
{{ attribute.label }}
+ +
+ Free text +
+
-
+
{{ attribute.csvColumnHeader }}
+
+ +
div:not(.scrollbar-placeholder) { @@ -58,7 +58,7 @@ redaction-table-col-name::ng-deep { &.has-scrollbar:hover { ::ng-deep.cdk-virtual-scroll-content-wrapper { - grid-template-columns: auto 2fr 1fr 2fr 3fr; + grid-template-columns: auto 2fr 1fr 1fr 1fr 1fr 1fr; } } } diff --git a/apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.html index 452c1d81b..fcba99e8e 100644 --- a/apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.html +++ b/apps/red-ui/src/app/modules/admin/screens/rule-sets-listing/rule-sets-listing-screen.component.html @@ -28,19 +28,11 @@
-
- - + [active]="areAllEntitiesSelected" + [indeterminate]="areSomeEntitiesSelected && !areAllEntitiesSelected" + >
@@ -90,9 +82,8 @@ *cdkVirtualFor="let ruleSet of displayedEntities | sortBy: sortingOption.order:sortingOption.column" [routerLink]="[ruleSet.ruleSetId, 'dictionaries']" > -
-
- +
+
diff --git a/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.html index b9c94af66..9e9831249 100644 --- a/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.html +++ b/apps/red-ui/src/app/modules/admin/screens/rules/rules-screen.component.html @@ -27,7 +27,7 @@
- +
diff --git a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html index a3e32833a..bf1d18db6 100644 --- a/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html +++ b/apps/red-ui/src/app/modules/admin/screens/user-listing/user-listing-screen.component.html @@ -26,20 +26,13 @@
-
- - + [active]="areAllEntitiesSelected" + [indeterminate]="areSomeEntitiesSelected && !areAllEntitiesSelected" + >
+ {{ 'user-listing.table-header.title' | translate: { length: displayedEntities.length } }} @@ -78,10 +71,10 @@
-
-
- +
+
+
diff --git a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.html b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.html index 454f9df46..621ed8f13 100644 --- a/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.html +++ b/apps/red-ui/src/app/modules/admin/screens/watermark/watermark-screen.component.html @@ -16,7 +16,7 @@
@@ -35,7 +35,7 @@ *ngIf="annotationPermissions.canAcceptSuggestion" tooltipPosition="before" tooltip="annotation-actions.accept-suggestion.label" - icon="red:check-alt" + icon="red:check" > diff --git a/apps/red-ui/src/app/modules/projects/components/comments/comments.component.html b/apps/red-ui/src/app/modules/projects/components/comments/comments.component.html index 196a22d4f..e357c5b33 100644 --- a/apps/red-ui/src/app/modules/projects/components/comments/comments.component.html +++ b/apps/red-ui/src/app/modules/projects/components/comments/comments.component.html @@ -35,7 +35,7 @@
- +
diff --git a/apps/red-ui/src/app/modules/projects/components/file-workload/file-workload.component.html b/apps/red-ui/src/app/modules/projects/components/file-workload/file-workload.component.html index 1a2ee8e7c..59307364c 100644 --- a/apps/red-ui/src/app/modules/projects/components/file-workload/file-workload.component.html +++ b/apps/red-ui/src/app/modules/projects/components/file-workload/file-workload.component.html @@ -18,13 +18,11 @@
-
- + {{ selectedAnnotations?.length || 0 }} selected
- + [active]="true" + >
diff --git a/apps/red-ui/src/app/modules/projects/components/file-workload/file-workload.component.scss b/apps/red-ui/src/app/modules/projects/components/file-workload/file-workload.component.scss index 91d22cdea..29d1a9e01 100644 --- a/apps/red-ui/src/app/modules/projects/components/file-workload/file-workload.component.scss +++ b/apps/red-ui/src/app/modules/projects/components/file-workload/file-workload.component.scss @@ -22,19 +22,14 @@ display: flex; align-items: center; - .select-oval, - .selection-icon { - margin-right: 8px; - color: inherit; + redaction-round-checkbox.inactive { + cursor: default; } .all-caps-label { + margin: 0 16px 0 8px; opacity: 1; } - - redaction-annotation-remove-actions { - margin-left: 16px; - } } } @@ -132,12 +127,6 @@ .active-icon-marker-container { min-width: 20px; - - .active-icon-marker { - color: $primary; - width: 20px; - height: 20px; - } } &.active { diff --git a/apps/red-ui/src/app/modules/projects/components/file-workload/file-workload.component.ts b/apps/red-ui/src/app/modules/projects/components/file-workload/file-workload.component.ts index 453a89196..d09b08029 100644 --- a/apps/red-ui/src/app/modules/projects/components/file-workload/file-workload.component.ts +++ b/apps/red-ui/src/app/modules/projects/components/file-workload/file-workload.component.ts @@ -6,7 +6,6 @@ import { MatDialogRef, MatDialogState } from '@angular/material/dialog'; import scrollIntoView from 'scroll-into-view-if-needed'; import { debounce } from '../../../../utils/debounce'; import { FileDataModel } from '../../../../models/file/file-data.model'; -import { AnnotationPermissions } from '../../../../models/file/annotation.permissions'; import { PermissionsService } from '../../../../services/permissions.service'; const COMMAND_KEY_ARRAY = ['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Escape']; diff --git a/apps/red-ui/src/app/modules/projects/dialogs/assign-owner-dialog/assign-owner-dialog.component.html b/apps/red-ui/src/app/modules/projects/dialogs/assign-owner-dialog/assign-owner-dialog.component.html index 2d3ee5428..ceaecbb0e 100644 --- a/apps/red-ui/src/app/modules/projects/dialogs/assign-owner-dialog/assign-owner-dialog.component.html +++ b/apps/red-ui/src/app/modules/projects/dialogs/assign-owner-dialog/assign-owner-dialog.component.html @@ -36,7 +36,7 @@
- +
diff --git a/apps/red-ui/src/app/modules/projects/screens/file-preview-screen/file-preview-screen.component.html b/apps/red-ui/src/app/modules/projects/screens/file-preview-screen/file-preview-screen.component.html index 2b4201897..1c3cd4fd4 100644 --- a/apps/red-ui/src/app/modules/projects/screens/file-preview-screen/file-preview-screen.component.html +++ b/apps/red-ui/src/app/modules/projects/screens/file-preview-screen/file-preview-screen.component.html @@ -102,7 +102,7 @@ diff --git a/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.html b/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.html index f8c08808d..2a38ea659 100644 --- a/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.html +++ b/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.html @@ -85,19 +85,11 @@
-
- - + [active]="areAllEntitiesSelected" + [indeterminate]="areSomeEntitiesSelected && !areAllEntitiesSelected" + >
@@ -178,9 +170,8 @@ class="table-item" [class.disabled]="fileStatus.isExcluded" > -
-
- +
+
diff --git a/apps/red-ui/src/app/modules/projects/services/annotation-actions.service.ts b/apps/red-ui/src/app/modules/projects/services/annotation-actions.service.ts index 954108a56..e7156534d 100644 --- a/apps/red-ui/src/app/modules/projects/services/annotation-actions.service.ts +++ b/apps/red-ui/src/app/modules/projects/services/annotation-actions.service.ts @@ -127,7 +127,7 @@ export class AnnotationActionsService { if (canAcceptRecommendation) { availableActions.push({ type: 'actionButton', - img: '/assets/icons/general/check-alt.svg', + img: '/assets/icons/general/check.svg', title: this._translateService.instant('annotation-actions.accept-recommendation.label'), onClick: () => { this._ngZone.run(() => { @@ -141,7 +141,7 @@ export class AnnotationActionsService { if (canAcceptSuggestion) { availableActions.push({ type: 'actionButton', - img: '/assets/icons/general/check-alt.svg', + img: '/assets/icons/general/check.svg', title: this._translateService.instant('annotation-actions.accept-suggestion.label'), onClick: () => { this._ngZone.run(() => { diff --git a/apps/red-ui/src/app/modules/shared/components/annotation-icon/annotation-icon.component.ts b/apps/red-ui/src/app/modules/shared/components/annotation-icon/annotation-icon.component.ts index 51b78ed2b..0dfde5895 100644 --- a/apps/red-ui/src/app/modules/shared/components/annotation-icon/annotation-icon.component.ts +++ b/apps/red-ui/src/app/modules/shared/components/annotation-icon/annotation-icon.component.ts @@ -17,7 +17,7 @@ export class AnnotationIconComponent implements OnInit { constructor() {} ngOnInit() { - this.icon.nativeElement.style.setProperty('--color', this.backgroundColor, ''); + this.icon.nativeElement.style.setProperty('--color', this.backgroundColor); } public get isHint() { diff --git a/apps/red-ui/src/app/modules/shared/components/checkbox/round-checkbox.component.html b/apps/red-ui/src/app/modules/shared/components/checkbox/round-checkbox.component.html new file mode 100644 index 000000000..2b5973057 --- /dev/null +++ b/apps/red-ui/src/app/modules/shared/components/checkbox/round-checkbox.component.html @@ -0,0 +1,4 @@ +
+ + +
diff --git a/apps/red-ui/src/app/modules/shared/components/checkbox/round-checkbox.component.scss b/apps/red-ui/src/app/modules/shared/components/checkbox/round-checkbox.component.scss new file mode 100644 index 000000000..07887913b --- /dev/null +++ b/apps/red-ui/src/app/modules/shared/components/checkbox/round-checkbox.component.scss @@ -0,0 +1,34 @@ +@import '../../../../../assets/styles/red-variables'; + +:host { + cursor: pointer; +} + +.wrapper { + width: var(--size); + height: var(--size); + box-sizing: border-box; + border-radius: 50%; + + &.inactive { + border: 1px solid $grey-5; + background-color: $white; + } + + .mat-icon { + color: $primary; + width: var(--size); + height: var(--size); + } + + &.red-bg { + .mat-icon { + color: $white; + } + + &.inactive { + border: 1px solid $grey-2; + background-color: transparent; + } + } +} diff --git a/apps/red-ui/src/app/modules/shared/components/checkbox/round-checkbox.component.ts b/apps/red-ui/src/app/modules/shared/components/checkbox/round-checkbox.component.ts new file mode 100644 index 000000000..3a96398eb --- /dev/null +++ b/apps/red-ui/src/app/modules/shared/components/checkbox/round-checkbox.component.ts @@ -0,0 +1,31 @@ +import { Component, ElementRef, HostBinding, Input, OnChanges, OnInit, SimpleChanges, ViewChild } from '@angular/core'; + +@Component({ + selector: 'redaction-round-checkbox', + templateUrl: './round-checkbox.component.html', + styleUrls: ['./round-checkbox.component.scss'] +}) +export class RoundCheckboxComponent implements OnInit, OnChanges { + @Input() size = 20; + @Input() active: boolean; + @Input() indeterminate: boolean; + @Input() type: 'default' | 'red-bg'; + + @ViewChild('wrapper', { static: true }) _wrapper: ElementRef; + + @HostBinding('class.active') _activeClass: boolean; + @HostBinding('class.inactive') _inactiveClass: boolean; + @HostBinding('class.indeterminate') _indeterminateClass: boolean; + + constructor() {} + + ngOnInit(): void { + this._wrapper.nativeElement.style.setProperty('--size', this.size + 'px'); + } + + ngOnChanges(changes: SimpleChanges): void { + this._activeClass = this.active && !this.indeterminate; + this._inactiveClass = !this.active && !this.indeterminate; + this._indeterminateClass = this.indeterminate; + } +} diff --git a/apps/red-ui/src/app/modules/shared/components/table-col-name/table-col-name.component.html b/apps/red-ui/src/app/modules/shared/components/table-col-name/table-col-name.component.html index e81c0fb02..27e9f2560 100644 --- a/apps/red-ui/src/app/modules/shared/components/table-col-name/table-col-name.component.html +++ b/apps/red-ui/src/app/modules/shared/components/table-col-name/table-col-name.component.html @@ -1,6 +1,7 @@
- + +
diff --git a/apps/red-ui/src/app/modules/shared/components/table-col-name/table-col-name.component.scss b/apps/red-ui/src/app/modules/shared/components/table-col-name/table-col-name.component.scss index 351794ed2..d59b7180c 100644 --- a/apps/red-ui/src/app/modules/shared/components/table-col-name/table-col-name.component.scss +++ b/apps/red-ui/src/app/modules/shared/components/table-col-name/table-col-name.component.scss @@ -17,6 +17,10 @@ height: 10px; margin-right: 6px; opacity: 0.7; + + &:not(:first-child) { + margin-left: 6px; + } } } diff --git a/apps/red-ui/src/app/modules/shared/components/table-col-name/table-col-name.component.ts b/apps/red-ui/src/app/modules/shared/components/table-col-name/table-col-name.component.ts index 9e77b2ac5..425f8f218 100644 --- a/apps/red-ui/src/app/modules/shared/components/table-col-name/table-col-name.component.ts +++ b/apps/red-ui/src/app/modules/shared/components/table-col-name/table-col-name.component.ts @@ -12,7 +12,10 @@ export class TableColNameComponent implements OnInit { @Input() public label: string; @Input() public withSort = false; @Input() public class: string; - @Input() public icon: string; + @Input() public leftIcon: string; + @Input() public rightIcon: string; + @Input() public rightIconTooltip: string; + @Output() public toggleSort = new EventEmitter(); constructor() {} diff --git a/apps/red-ui/src/app/modules/shared/shared.module.ts b/apps/red-ui/src/app/modules/shared/shared.module.ts index e8af01765..e10cbf5bc 100644 --- a/apps/red-ui/src/app/modules/shared/shared.module.ts +++ b/apps/red-ui/src/app/modules/shared/shared.module.ts @@ -28,6 +28,7 @@ import { FilterComponent } from './components/filter/filter.component'; import { EmptyStateComponent } from './components/empty-state/empty-state.component'; import { BaseListingComponent } from './base/base-listing.component'; import { SortByPipe } from './components/sort-pipe/sort-by.pipe'; +import { RoundCheckboxComponent } from './components/checkbox/round-checkbox.component'; const buttons = [ChevronButtonComponent, CircleButtonComponent, FileDownloadBtnComponent, IconButtonComponent, UserButtonComponent]; @@ -47,6 +48,7 @@ const components = [ EmptyStateComponent, BaseListingComponent, SortByPipe, + RoundCheckboxComponent, ...buttons ]; @@ -58,6 +60,6 @@ const modules = [MatConfigModule, TranslateModule, ScrollingModule, IconsModule, @NgModule({ declarations: [...components, ...utils], imports: [CommonModule, ...modules], - exports: [...modules, ...components, ...utils] + exports: [...modules, ...components, ...utils, RoundCheckboxComponent] }) export class SharedModule {} diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index 725086d5b..798fdce6d 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -780,9 +780,11 @@ }, "table-col-names": { "name": "Name", - "created-by": "Created by", + "type": "Input Type", "read-only": "Read-Only", - "csv-column": "CSV Column" + "csv-column": "CSV Column", + "primary": "Primary", + "primary-info-tooltip": "The value of the attribute set as primary shows up under the file name in the documents list." }, "no-data": { "title": "There are no file attributes yet." diff --git a/apps/red-ui/src/assets/icons/general/arrow-up.svg b/apps/red-ui/src/assets/icons/general/arrow-up.svg index 8d47a4299..de9dfd205 100644 --- a/apps/red-ui/src/assets/icons/general/arrow-up.svg +++ b/apps/red-ui/src/assets/icons/general/arrow-up.svg @@ -9,8 +9,6 @@ id="svg101"> - arrow-up - - - - - - diff --git a/apps/red-ui/src/assets/icons/general/check.svg b/apps/red-ui/src/assets/icons/general/check.svg old mode 100755 new mode 100644 index 37da65aad..eff76ca47 --- a/apps/red-ui/src/assets/icons/general/check.svg +++ b/apps/red-ui/src/assets/icons/general/check.svg @@ -1,10 +1,10 @@ - - - - - - - - - + + + + + + diff --git a/apps/red-ui/src/assets/styles/red-components.scss b/apps/red-ui/src/assets/styles/red-components.scss index 6e9a3f051..ae670d201 100644 --- a/apps/red-ui/src/assets/styles/red-components.scss +++ b/apps/red-ui/src/assets/styles/red-components.scss @@ -179,29 +179,3 @@ stroke: $red-1; background-color: $red-1; } - -.select-oval { - width: 20px; - height: 20px; - box-sizing: border-box; - border-radius: 50%; - border: 1px solid $grey-5; - background-color: $white; - cursor: pointer; - opacity: 0; - transition: opacity 0.2s; - - &.always-visible { - opacity: 1; - } - - &.primary-bg { - background-color: transparent; - } -} - -.selection-icon { - width: 20px !important; - color: $primary; - cursor: pointer; -} 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 2fdf6d02e..6007ddc1f 100644 --- a/apps/red-ui/src/assets/styles/red-page-layout.scss +++ b/apps/red-ui/src/assets/styles/red-page-layout.scss @@ -311,10 +311,6 @@ body { align-items: center; } -.pr-0 { - padding-right: 0 !important; -} - .mr-8 { margin-right: 8px !important; } diff --git a/apps/red-ui/src/assets/styles/red-tables.scss b/apps/red-ui/src/assets/styles/red-tables.scss index cd1f8b040..424d71358 100644 --- a/apps/red-ui/src/assets/styles/red-tables.scss +++ b/apps/red-ui/src/assets/styles/red-tables.scss @@ -47,9 +47,22 @@ cdk-virtual-scroll-viewport { border-bottom: 1px solid $separator; padding: 0 13px; - &:not(.scrollbar-placeholder):not(.pr-0) { + &:not(.scrollbar-placeholder):not(.selection-column) { min-width: 110px; } + + &.selection-column { + padding-right: 0 !important; + + redaction-round-checkbox { + opacity: 0; + transition: opacity 0.2s; + + &.active { + opacity: 1; + } + } + } } .table-item-title { @@ -94,10 +107,10 @@ cdk-virtual-scroll-viewport { &:hover { > div { background-color: #f9fafb; - } - .select-oval { - opacity: 1; + &.selection-column redaction-round-checkbox { + opacity: 1; + } } .action-buttons {