diff --git a/apps/red-ui/src/app/app.module.ts b/apps/red-ui/src/app/app.module.ts index 90587e9f3..afdd131e0 100644 --- a/apps/red-ui/src/app/app.module.ts +++ b/apps/red-ui/src/app/app.module.ts @@ -118,6 +118,8 @@ import { SearchInputComponent } from './components/search-input/search-input.com import { AppRoutingModule } from './app-routing.module'; import { AddEditFileAttributeDialogComponent } from './dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component'; import { ConfirmDeleteFileAttributeDialogComponent } from './dialogs/confirm-delete-file-attribute-dialog/confirm-delete-file-attribute-dialog.component'; +import { DocumentInfoDialogComponent } from './dialogs/document-info-dialog/document-info-dialog.component'; +import { DocumentInfoComponent } from './components/document-info/document-info.component'; export function HttpLoaderFactory(httpClient: HttpClient) { return new TranslateHttpLoader(httpClient, '/assets/i18n/', '.json'); @@ -222,7 +224,9 @@ const matImports = [ FileAttributesListingScreenComponent, SearchInputComponent, AddEditFileAttributeDialogComponent, - ConfirmDeleteFileAttributeDialogComponent + ConfirmDeleteFileAttributeDialogComponent, + DocumentInfoDialogComponent, + DocumentInfoComponent ], imports: [ BrowserModule, diff --git a/apps/red-ui/src/app/components/document-info/document-info.component.html b/apps/red-ui/src/app/components/document-info/document-info.component.html new file mode 100644 index 000000000..ed28e1bde --- /dev/null +++ b/apps/red-ui/src/app/components/document-info/document-info.component.html @@ -0,0 +1,39 @@ +
+
+ + +
+
+ +
+ Attributes go here +
+ +
+
+ + {{ 'file-preview.tabs.document-info.details.project' | translate: { projectName: project.name } }} +
+
+ + {{ 'file-preview.tabs.document-info.details.pages' | translate: { pages: file.numberOfPages } }} +
+
+ + {{ 'file-preview.tabs.document-info.details.created-on' | translate: { date: file.added | date: 'mediumDate' } }} +
+
+ + {{ 'file-preview.tabs.document-info.details.due' | translate: { date: project.project.dueDate | date: 'mediumDate' } }} +
+
diff --git a/apps/red-ui/src/app/components/document-info/document-info.component.scss b/apps/red-ui/src/app/components/document-info/document-info.component.scss new file mode 100644 index 000000000..87eaf014a --- /dev/null +++ b/apps/red-ui/src/app/components/document-info/document-info.component.scss @@ -0,0 +1,22 @@ +@import '../../../assets/styles/red-variables'; + +.right-title > div { + display: flex; + + > redaction-circle-button:not(:last-child) { + margin-right: 2px; + } +} + +.section { + padding: 25px; + flex-direction: column; + + > div { + justify-content: flex-start; + } + + &:not(:last-child) { + border-bottom: 1px solid $separator; + } +} diff --git a/apps/red-ui/src/app/components/document-info/document-info.component.ts b/apps/red-ui/src/app/components/document-info/document-info.component.ts new file mode 100644 index 000000000..d17f725ce --- /dev/null +++ b/apps/red-ui/src/app/components/document-info/document-info.component.ts @@ -0,0 +1,21 @@ +import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core'; +import { FileStatus } from '@redaction/red-ui-http'; +import { AppStateService } from '../../state/app-state.service'; + +@Component({ + selector: 'redaction-document-info', + templateUrl: './document-info.component.html', + styleUrls: ['./document-info.component.scss'] +}) +export class DocumentInfoComponent implements OnInit { + @Input() file: FileStatus; + @Output() closeDocumentInfoView = new EventEmitter(); + + constructor(private _appStateService: AppStateService) {} + + ngOnInit(): void {} + + public get project() { + return this._appStateService.getProjectById(this.file.projectId); + } +} diff --git a/apps/red-ui/src/app/components/file-actions/file-actions.component.html b/apps/red-ui/src/app/components/file-actions/file-actions.component.html index fba698805..72b362611 100644 --- a/apps/red-ui/src/app/components/file-actions/file-actions.component.html +++ b/apps/red-ui/src/app/components/file-actions/file-actions.component.html @@ -49,6 +49,15 @@ > + + (); actionMenuOpen: boolean; @@ -40,6 +41,10 @@ export class FileActionsComponent implements OnInit { } } + public toggleViewDocumentInfo() { + this.actionPerformed.emit('view-document-info'); + } + public get tooltipPosition() { return this.screen === 'file-preview' ? 'below' : 'above'; } diff --git a/apps/red-ui/src/app/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html b/apps/red-ui/src/app/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html index e9c1a3078..1f407e450 100644 --- a/apps/red-ui/src/app/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html +++ b/apps/red-ui/src/app/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.html @@ -1,13 +1,13 @@
- {{ (fileAttribute ? 'add-edit-file-attribute.title.edit' : 'add-edit-file-attribute.title.new') | translate: { name: fileAttribute?.name } }} + {{ (fileAttribute ? 'add-edit-file-attribute.title.edit' : 'add-edit-file-attribute.title.new') | translate: { name: fileAttribute?.label } }}
- +
diff --git a/apps/red-ui/src/app/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts b/apps/red-ui/src/app/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts index c84ef475a..d43eb3ccc 100644 --- a/apps/red-ui/src/app/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts +++ b/apps/red-ui/src/app/dialogs/add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component.ts @@ -1,8 +1,9 @@ import { Component, Inject } from '@angular/core'; import { FormBuilder, FormGroup, Validators } from '@angular/forms'; import { AppStateService } from '../../state/app-state.service'; -import { FileAttribute, FileAttributesControllerService } from '@redaction/red-ui-http'; +import { FileAttributeConfig, FileAttributesControllerService } from '@redaction/red-ui-http'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; +import { computerize } from '../../utils/functions'; @Component({ selector: 'redaction-add-edit-file-attribute-dialog', @@ -11,7 +12,7 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; }) export class AddEditFileAttributeDialogComponent { public fileAttributeForm: FormGroup; - public fileAttribute: FileAttribute; + public fileAttribute: FileAttributeConfig; public ruleSetId: string; constructor( @@ -19,13 +20,13 @@ export class AddEditFileAttributeDialogComponent { private readonly _formBuilder: FormBuilder, private readonly _fileAttributesService: FileAttributesControllerService, public dialogRef: MatDialogRef, - @Inject(MAT_DIALOG_DATA) public data: { fileAttribute: FileAttribute; ruleSetId: string } + @Inject(MAT_DIALOG_DATA) public data: { fileAttribute: FileAttributeConfig; ruleSetId: string } ) { this.fileAttribute = data.fileAttribute; this.ruleSetId = data.ruleSetId; this.fileAttributeForm = this._formBuilder.group({ - name: [this.fileAttribute?.name, Validators.required], + label: [this.fileAttribute?.label, Validators.required], readonly: [this.fileAttribute ? !this.fileAttribute.editable : false], visible: [this.fileAttribute?.visible] }); @@ -48,12 +49,13 @@ export class AddEditFileAttributeDialogComponent { } async saveFileAttribute() { - const fileAttribute = { + const fileAttribute: FileAttributeConfig = { id: this.fileAttribute?.id, editable: !this.fileAttributeForm.get('readonly').value, + csvColumnHeader: this.fileAttribute?.csvColumnHeader || computerize(this.fileAttributeForm.get('label').value), ...this.fileAttributeForm.getRawValue() }; - await this._fileAttributesService.setFileAttributesConfiguration({ fileAttributes: [fileAttribute] }, this.ruleSetId).toPromise(); + await this._fileAttributesService.setFileAttributesConfiguration(fileAttribute, this.ruleSetId).toPromise(); this.dialogRef.close(fileAttribute); } } diff --git a/apps/red-ui/src/app/dialogs/confirm-delete-file-attribute-dialog/confirm-delete-file-attribute-dialog.component.html b/apps/red-ui/src/app/dialogs/confirm-delete-file-attribute-dialog/confirm-delete-file-attribute-dialog.component.html index 2b44d76b5..a9f8b28d8 100644 --- a/apps/red-ui/src/app/dialogs/confirm-delete-file-attribute-dialog/confirm-delete-file-attribute-dialog.component.html +++ b/apps/red-ui/src/app/dialogs/confirm-delete-file-attribute-dialog/confirm-delete-file-attribute-dialog.component.html @@ -1,6 +1,6 @@
- {{ 'confirm-delete-file-attribute.title' | translate: { name: fileAttribute.name } }} + {{ 'confirm-delete-file-attribute.title' | translate: { name: fileAttribute.label } }}
diff --git a/apps/red-ui/src/app/dialogs/confirm-delete-file-attribute-dialog/confirm-delete-file-attribute-dialog.component.ts b/apps/red-ui/src/app/dialogs/confirm-delete-file-attribute-dialog/confirm-delete-file-attribute-dialog.component.ts index 62b3509a0..041d25ea5 100644 --- a/apps/red-ui/src/app/dialogs/confirm-delete-file-attribute-dialog/confirm-delete-file-attribute-dialog.component.ts +++ b/apps/red-ui/src/app/dialogs/confirm-delete-file-attribute-dialog/confirm-delete-file-attribute-dialog.component.ts @@ -1,6 +1,6 @@ import { Component, Inject } from '@angular/core'; import { AppStateService } from '../../state/app-state.service'; -import { FileAttribute, FileAttributesControllerService } from '@redaction/red-ui-http'; +import { FileAttributeConfig, FileAttributesControllerService } from '@redaction/red-ui-http'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; @Component({ @@ -9,7 +9,7 @@ import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; styleUrls: ['./confirm-delete-file-attribute-dialog.component.scss'] }) export class ConfirmDeleteFileAttributeDialogComponent { - public fileAttribute: FileAttribute; + public fileAttribute: FileAttributeConfig; public ruleSetId: string; public checkboxes = [{ value: false }, { value: false }]; @@ -17,7 +17,7 @@ export class ConfirmDeleteFileAttributeDialogComponent { private readonly _appStateService: AppStateService, private readonly _fileAttributesService: FileAttributesControllerService, public dialogRef: MatDialogRef, - @Inject(MAT_DIALOG_DATA) public data: { fileAttribute: FileAttribute; ruleSetId: string } + @Inject(MAT_DIALOG_DATA) public data: { fileAttribute: FileAttributeConfig; ruleSetId: string } ) { this.fileAttribute = data.fileAttribute; this.ruleSetId = data.ruleSetId; diff --git a/apps/red-ui/src/app/dialogs/dialog.service.ts b/apps/red-ui/src/app/dialogs/dialog.service.ts index 263d5215c..d35edbca1 100644 --- a/apps/red-ui/src/app/dialogs/dialog.service.ts +++ b/apps/red-ui/src/app/dialogs/dialog.service.ts @@ -3,7 +3,7 @@ import { MatDialog, MatDialogRef } from '@angular/material/dialog'; import { Colors, DictionaryControllerService, - FileAttribute, + FileAttributeConfig, FileManagementControllerService, FileStatus, ManualRedactionControllerService, @@ -30,6 +30,7 @@ import { RemoveAnnotationsDialogComponent } from './remove-annotations-dialog/re import { ForceRedactionDialogComponent } from './force-redaction-dialog/force-redaction-dialog.component'; import { AddEditFileAttributeDialogComponent } from './add-edit-file-attribute-dialog/add-edit-file-attribute-dialog.component'; import { ConfirmDeleteFileAttributeDialogComponent } from './confirm-delete-file-attribute-dialog/confirm-delete-file-attribute-dialog.component'; +import { DocumentInfoDialogComponent } from './document-info-dialog/document-info-dialog.component'; const dialogConfig = { width: '662px', @@ -339,7 +340,11 @@ export class DialogService { return ref; } - public openAddEditFileAttributeDialog(fileAttribute: FileAttribute, ruleSetId: string, cb?: Function): MatDialogRef { + public openAddEditFileAttributeDialog( + fileAttribute: FileAttributeConfig, + ruleSetId: string, + cb?: Function + ): MatDialogRef { const ref = this._dialog.open(AddEditFileAttributeDialogComponent, { ...dialogConfig, data: { fileAttribute, ruleSetId }, @@ -356,7 +361,7 @@ export class DialogService { } public openConfirmDeleteFileAttributeDialog( - fileAttribute: FileAttribute, + fileAttribute: FileAttributeConfig, ruleSetId: string, cb?: Function ): MatDialogRef { @@ -375,6 +380,22 @@ export class DialogService { return ref; } + public openDocumentInfoDialog(file: FileStatus, cb?: Function): MatDialogRef { + const ref = this._dialog.open(DocumentInfoDialogComponent, { + ...dialogConfig, + data: file, + autoFocus: true + }); + + ref.afterClosed().subscribe((result) => { + if (result && cb) { + cb(result); + } + }); + + return ref; + } + openRemoveAnnotationModal($event: MouseEvent, annotation: AnnotationWrapper, callback: () => void) { $event?.stopPropagation(); diff --git a/apps/red-ui/src/app/dialogs/document-info-dialog/document-info-dialog.component.html b/apps/red-ui/src/app/dialogs/document-info-dialog/document-info-dialog.component.html new file mode 100644 index 000000000..631db7764 --- /dev/null +++ b/apps/red-ui/src/app/dialogs/document-info-dialog/document-info-dialog.component.html @@ -0,0 +1,24 @@ +
+
+ + +
+ {{ file.filename }} + + + + + + + + +
+
+ +
+ + + +
diff --git a/apps/red-ui/src/app/dialogs/document-info-dialog/document-info-dialog.component.scss b/apps/red-ui/src/app/dialogs/document-info-dialog/document-info-dialog.component.scss new file mode 100644 index 000000000..e69de29bb diff --git a/apps/red-ui/src/app/dialogs/document-info-dialog/document-info-dialog.component.ts b/apps/red-ui/src/app/dialogs/document-info-dialog/document-info-dialog.component.ts new file mode 100644 index 000000000..1e8ea59ec --- /dev/null +++ b/apps/red-ui/src/app/dialogs/document-info-dialog/document-info-dialog.component.ts @@ -0,0 +1,36 @@ +import { Component, Inject, OnInit } from '@angular/core'; +import { FormBuilder, FormGroup } from '@angular/forms'; +import { FileAttributesControllerService, FileStatus } from '@redaction/red-ui-http'; +import { AppStateService } from '../../state/app-state.service'; +import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; + +@Component({ + selector: 'redaction-document-info-dialog', + templateUrl: './document-info-dialog.component.html', + styleUrls: ['./document-info-dialog.component.scss'] +}) +export class DocumentInfoDialogComponent implements OnInit { + public documentInfoForm: FormGroup; + public file: FileStatus; + + constructor( + private readonly _appStateService: AppStateService, + private readonly _formBuilder: FormBuilder, + private readonly _fileAttributesService: FileAttributesControllerService, + public dialogRef: MatDialogRef, + @Inject(MAT_DIALOG_DATA) public data: FileStatus + ) { + this.file = this.data; + console.log(this.data); + + this.documentInfoForm = this._formBuilder.group({ + // name: [this.fileAttribute?.name, Validators.required], + // readonly: [this.fileAttribute ? !this.fileAttribute.editable : false], + // visible: [this.fileAttribute?.visible] + }); + } + + ngOnInit(): void {} + + public saveDocumentInfo() {} +} diff --git a/apps/red-ui/src/app/icons/icons.module.ts b/apps/red-ui/src/app/icons/icons.module.ts index a4f14eae0..164c8c62a 100644 --- a/apps/red-ui/src/app/icons/icons.module.ts +++ b/apps/red-ui/src/app/icons/icons.module.ts @@ -64,8 +64,9 @@ export class IconsModule { 'sort-asc', 'sort-desc', 'status', - 'status-expand', 'status-collapse', + 'status-expand', + 'status-info', 'template', 'thumb-down', 'thumb-up', diff --git a/apps/red-ui/src/app/screens/admin/file-attributes-listing-screen/file-attributes-listing-screen.component.html b/apps/red-ui/src/app/screens/admin/file-attributes-listing-screen/file-attributes-listing-screen.component.html index 633bf9e2a..b4feb342a 100644 --- a/apps/red-ui/src/app/screens/admin/file-attributes-listing-screen/file-attributes-listing-screen.component.html +++ b/apps/red-ui/src/app/screens/admin/file-attributes-listing-screen/file-attributes-listing-screen.component.html @@ -50,7 +50,7 @@
-
+
- {{ attribute.name }} + {{ attribute.label }}
diff --git a/apps/red-ui/src/app/screens/admin/file-attributes-listing-screen/file-attributes-listing-screen.component.ts b/apps/red-ui/src/app/screens/admin/file-attributes-listing-screen/file-attributes-listing-screen.component.ts index 15cf578f9..19cbd4db5 100644 --- a/apps/red-ui/src/app/screens/admin/file-attributes-listing-screen/file-attributes-listing-screen.component.ts +++ b/apps/red-ui/src/app/screens/admin/file-attributes-listing-screen/file-attributes-listing-screen.component.ts @@ -1,7 +1,7 @@ import { Component, OnInit } from '@angular/core'; import { PermissionsService } from '../../../utils/permissions.service'; import { FormBuilder, FormGroup } from '@angular/forms'; -import { FileAttribute, FileAttributesControllerService } from '@redaction/red-ui-http'; +import { FileAttributeConfig, FileAttributesControllerService } from '@redaction/red-ui-http'; import { AppStateService } from '../../../state/app-state.service'; import { ActivatedRoute } from '@angular/router'; import { debounce } from '../../../utils/debounce'; @@ -15,8 +15,8 @@ import { DialogService } from '../../../dialogs/dialog.service'; }) export class FileAttributesListingScreenComponent implements OnInit { public searchForm: FormGroup; - public attributes: FileAttribute[] = []; - public displayedAttributes: FileAttribute[] = []; + public attributes: FileAttributeConfig[] = []; + public displayedAttributes: FileAttributeConfig[] = []; public selectedFileAttributeIds: string[] = []; public viewReady = false; @@ -47,6 +47,7 @@ export class FileAttributesListingScreenComponent implements OnInit { try { const response = await this._fileAttributesService.getFileAttributesConfiguration(this._appStateService.activeRuleSetId).toPromise(); this.attributes = response?.fileAttributes || []; + } catch (e) { } finally { this.displayedAttributes = [...this.attributes]; this._executeSearch(); @@ -71,24 +72,24 @@ export class FileAttributesListingScreenComponent implements OnInit { if (!value) { value = { query: this.searchForm.get('query').value }; } - this.displayedAttributes = this.attributes.filter((attribute) => attribute.name.toLowerCase().includes(value.query.toLowerCase())); + this.displayedAttributes = this.attributes.filter((attribute) => attribute.label.toLowerCase().includes(value.query.toLowerCase())); } - public openAddEditAttributeDialog($event: MouseEvent, fileAttribute?: FileAttribute) { + public openAddEditAttributeDialog($event: MouseEvent, fileAttribute?: FileAttributeConfig) { $event.stopPropagation(); this._dialogService.openAddEditFileAttributeDialog(fileAttribute, this._appStateService.activeRuleSetId, async () => { await this._loadData(); }); } - public openConfirmDeleteAttributeDialog($event: MouseEvent, fileAttribute?: FileAttribute) { + public openConfirmDeleteAttributeDialog($event: MouseEvent, fileAttribute?: FileAttributeConfig) { $event.stopPropagation(); this._dialogService.openConfirmDeleteFileAttributeDialog(fileAttribute, this._appStateService.activeRuleSetId, async () => { await this._loadData(); }); } - public toggleAttributeSelected($event: MouseEvent, attribute: FileAttribute) { + public toggleAttributeSelected($event: MouseEvent, attribute: FileAttributeConfig) { $event.stopPropagation(); const idx = this.selectedFileAttributeIds.indexOf(attribute.id); if (idx === -1) { @@ -114,7 +115,7 @@ export class FileAttributesListingScreenComponent implements OnInit { return this.selectedFileAttributeIds.length > 0; } - public isAttributeSelected(attribute: FileAttribute) { + public isAttributeSelected(attribute: FileAttributeConfig) { return this.selectedFileAttributeIds.indexOf(attribute.id) !== -1; } } diff --git a/apps/red-ui/src/app/screens/admin/rule-sets-listing-screen/rule-sets-listing-screen.component.ts b/apps/red-ui/src/app/screens/admin/rule-sets-listing-screen/rule-sets-listing-screen.component.ts index 7c7b9d617..06cc809fa 100644 --- a/apps/red-ui/src/app/screens/admin/rule-sets-listing-screen/rule-sets-listing-screen.component.ts +++ b/apps/red-ui/src/app/screens/admin/rule-sets-listing-screen/rule-sets-listing-screen.component.ts @@ -6,7 +6,7 @@ import { PermissionsService } from '../../../utils/permissions.service'; import { FormBuilder, FormGroup } from '@angular/forms'; import { debounce } from '../../../utils/debounce'; import { RuleSetModel } from '@redaction/red-ui-http'; -import { UserPreferenceService } from '../../../common/service/user-preference.service'; +import { UserPreferenceService } from '../../../utils/user-preference.service'; @Component({ selector: 'redaction-rule-sets-listing-screen', 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 94f66155c..cc7d8f9ce 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 @@ -129,7 +129,11 @@
- +
-
-
-
- -
-
-
-
-
- -
-
- - -
-
- +
+ + + + +
+
+
- -
-
- {{ activeViewerPage }} - {{ displayedAnnotations[activeViewerPage]?.annotations?.length || 0 }} - -
- +
-
- {{ 'file-preview.no-annotations-for-page' | translate }} +
+ +
+
+ + +
+
+ +
+
+ +
+
+ {{ activeViewerPage }} - {{ displayedAnnotations[activeViewerPage]?.annotations?.length || 0 }} +
-
-
- -
- -
-
- {{ annotation.typeLabel | translate }} -
-
- {{ annotation.descriptor | translate }}: {{ annotation.dictionary | humanize: false }} -
-
- : {{ annotation.content }} +
+ {{ 'file-preview.no-annotations-for-page' | translate }} +
+ +
+
+
+ +
+ +
+
+ {{ annotation.typeLabel | translate }} +
+
+ {{ annotation.descriptor | translate }}: {{ annotation.dictionary | humanize: false }} +
+
+ : {{ annotation.content }} +
+
- -
- - + + +
-
+
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 965a39992..b5e7470f2 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 @@ -30,27 +30,20 @@ width: 350px; min-width: 350px; - .right-title { + &.has-scrollbar:hover { + ::ng-deep redaction-document-info .right-title, + ::ng-deep redaction-document-info .section { + padding-right: 13px; + } + } + + ::ng-deep.right-title { height: 70px; display: flex; border-bottom: 1px solid $separator; align-items: center; justify-content: space-between; padding: 0 24px; - - .close-icon { - height: 14px; - width: 14px; - cursor: pointer; - } - - > div { - display: flex; - - redaction-circle-button { - margin-left: 2px; - } - } } .right-content { diff --git a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts index 31c9a8f79..1f00a497f 100644 --- a/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts +++ b/apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts @@ -146,6 +146,22 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy { hideSkipped = false; + private _viewDocumentInfo = false; + + public get viewDocumentInfo(): boolean { + return this._viewDocumentInfo; + } + + public set viewDocumentInfo(value: boolean) { + this._viewDocumentInfo = value; + if (!value) { + setTimeout(() => { + this._scrollQuickNavigation(); + this.scrollToSelectedAnnotation(); + }, 0); + } + } + updateViewMode() { const allAnnotations = this._instance.annotManager.getAnnotationsList(); @@ -329,13 +345,16 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy { @debounce() private _scrollViews() { + if (this.viewDocumentInfo) { + return; + } this._scrollQuickNavigation(); this._scrollAnnotations(); } @debounce() private scrollToSelectedAnnotation() { - if (!this.selectedAnnotations || this.selectedAnnotations.length === 0) { + if (this.viewDocumentInfo || !this.selectedAnnotations || this.selectedAnnotations.length === 0) { return; } const elements: any[] = this._annotationsElement.nativeElement.querySelectorAll(`div[annotation-id="${this.firstSelectedAnnotation.id}"].active`); @@ -602,6 +621,9 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy { } public computeQuickNavButtonsState() { + if (this.viewDocumentInfo) { + return; + } const element: HTMLElement = this._quickNavigationElement.nativeElement.querySelector(`#pages`); const { scrollTop, scrollHeight, clientHeight } = element; this.quickScrollFirstEnabled = scrollTop !== 0; @@ -670,6 +692,11 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy { this._updateCanPerformActions(); await this.appStateService.reloadActiveProjectFiles(); return; + + case 'view-document-info': + this.viewDocumentInfo = !this.viewDocumentInfo; + return; + default: this._updateCanPerformActions(); } diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index c0b0643b4..07b4df286 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -291,6 +291,18 @@ "view-toggle": "Redacted View", "tabs": { "quick-navigation": "Quick Navigation", + "document-info": { + "label": "Document Info", + "close": "Close Document Info", + "edit": "Edit Document Info", + "details": { + "project": "in {{projectName}}", + "pages": "{{pages}} pages", + "revised-pages": "{{pages}} revised pages", + "created-on": "Created on: {{date}}", + "due": "Due: {{date}}" + } + }, "annotations": { "label": "Workload" } @@ -303,6 +315,7 @@ "assign-me": "Assign to me", "last-reviewer": "Last Reviewed by:", "fullscreen": "Full Screen (F)", + "document-info": "Your Document Info lives here. This includes metadata required on each document.", "new-tab-ssr": "Open Document in Server Side Rendering Mode", "html-debug": "Open Document HTML Debug", "download-original-file": "Download Original File", @@ -732,6 +745,11 @@ "checkbox-1": "All documents it is used on will be impacted", "checkbox-2": "All inputted details on the documents will be lost" }, + "document-info": { + "title": "Introduce Document Info", + "save": "Save Document Info", + "save-approval": "Save and Send for Approval" + }, "user-listing": { "table-header": { "title": "{{length}} users" diff --git a/apps/red-ui/src/assets/icons/general/status-info.svg b/apps/red-ui/src/assets/icons/general/status-info.svg new file mode 100644 index 000000000..7f75f904d --- /dev/null +++ b/apps/red-ui/src/assets/icons/general/status-info.svg @@ -0,0 +1,27 @@ + + + F8E3057D-BE44-469F-9E28-9A04A0B36DF0 + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/red-ui/src/assets/styles/red-components.scss b/apps/red-ui/src/assets/styles/red-components.scss index c61dbc680..b5f038b3c 100644 --- a/apps/red-ui/src/assets/styles/red-components.scss +++ b/apps/red-ui/src/assets/styles/red-components.scss @@ -74,7 +74,7 @@ mat-icon { width: 10px; - margin-right: 4px; + margin-right: 6px; } &:not(:last-child) {