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

RED-4819: Responsive action panel.

Browse Source
This commit is contained in:
Nicoleta Panaghiu 2022-08-25 12:43:14 +03:00
parent 0346231fc1
commit 7f22678774
8 changed files with 85 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/red-ui/src/app/modules/file-preview/components/user-management/user-management.component.html
View File

@ -1,7 +1,7 @@
<iqser-status-bar [configs]="statusBarConfig$ | async" [small]="true"></iqser-status-bar>
<ng-container *ngIf="stateService.file$ | async as file">
<div class="all-caps-label mr-16 ml-8">
<div class="all-caps-label mr-16 ml-8 label">
{{ translations[file.workflowStatus] | translate }}
<span *ngIf="file.isUnderReview || file.isUnderApproval">{{ 'by' | translate }}:</span>
</div>

10
apps/red-ui/src/app/modules/file-preview/components/user-management/user-management.component.scss
View File

@ -15,3 +15,13 @@
margin-right: 2px;
}
}
@media only screen and (max-width: 1015px) {
.label {
display: none;
}
iqser-status-bar {
margin-right: 1rem;
}
}

5
apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.html
View File

@ -5,7 +5,7 @@
<redaction-view-switch (switchView)="switchView($event)"></redaction-view-switch>
</div>
<div class="flex-1 actions-container">
<div class="flex-2 actions-container" #actionsWrapper>
<redaction-processing-indicator [file]="file" class="mr-16"></redaction-processing-indicator>
<redaction-user-management></redaction-user-management>
@ -13,7 +13,7 @@
<ng-container *ngIf="permissionsService.isApprover(dossier) && !!file.lastReviewer">
<div class="vertical-line"></div>
<div class="all-caps-label mr-16 ml-8">
<div class="all-caps-label mr-16 ml-8 label">
{{ 'file-preview.last-assignee' | translate: { status: file.workflowStatus } }}
</div>
@ -30,6 +30,7 @@
[file]="file"
fileActionsHelpModeKey="document_features_in_editor"
type="file-preview"
[minWidth]="width"
></redaction-file-actions>
<iqser-circle-button

11
apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.scss
View File

@ -5,11 +5,14 @@
margin: 0 16px;
}
.page-header {
max-width: 100vw;
}
.actions-container {
display: flex;
justify-content: flex-end;
align-items: center;
min-width: fit-content;
}
.content-inner {
@ -62,3 +65,9 @@
redaction-pdf-viewer.hidden {
visibility: hidden;
}
@media only screen and (max-width: 1015px) {
.label {
display: none;
}
}

38
apps/red-ui/src/app/modules/file-preview/file-preview-screen.component.ts
View File

@ -1,4 +1,17 @@
import { ChangeDetectorRef, Component, HostListener, Injector, NgZone, OnDestroy, OnInit, TemplateRef, ViewChild } from '@angular/core';
import {
AfterViewInit,
ChangeDetectionStrategy,
ChangeDetectorRef,
Component,
ElementRef,
HostListener,
Injector,
NgZone,
OnDestroy,
OnInit,
TemplateRef,
ViewChild,
} from '@angular/core';
import { ActivatedRoute, ActivatedRouteSnapshot, NavigationExtras, Router } from '@angular/router';
import { Core } from '@pdftron/webviewer';
import {
@ -6,6 +19,7 @@ import {
bool,
CircleButtonTypes,
CustomError,
Debounce,
ErrorService,
FilterService,
List,
@ -59,19 +73,24 @@ const textActions = [TextPopups.ADD_DICTIONARY, TextPopups.ADD_FALSE_POSITIVE];
templateUrl: './file-preview-screen.component.html',
styleUrls: ['./file-preview-screen.component.scss'],
providers: filePreviewScreenProviders,
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnInit, OnDestroy, OnAttach, OnDetach, ComponentCanDeactivate {
export class FilePreviewScreenComponent
extends AutoUnsubscribe
implements AfterViewInit, OnInit, OnDestroy, OnAttach, OnDetach, ComponentCanDeactivate
{
readonly circleButtonTypes = CircleButtonTypes;
fullScreen = false;
readonly fileId = this.state.fileId;
readonly dossierId = this.state.dossierId;
readonly file$ = this.state.file$.pipe(tap(file => this._fileDataService.loadAnnotations(file)));
width: number;
@ViewChild('annotationFilterTemplate', {
read: TemplateRef,
static: false,
})
private readonly _filterTemplate: TemplateRef<unknown>;
@ViewChild('actionsWrapper', { static: false }) private _actionsWrapper: ElementRef;
constructor(
readonly pdf: PdfViewer,
@ -261,6 +280,13 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
this.pdfProxyService.loadViewer();
}
ngAfterViewInit() {
const _observer = new ResizeObserver((entries: ResizeObserverEntry[]) => {
this._updateItemWidth(entries[0]);
});
_observer.observe(this._actionsWrapper.nativeElement);
}
openManualAnnotationDialog(manualRedactionEntryWrapper: ManualRedactionEntryWrapper) {
return this._ngZone.run(() => {
const file = this.state.file;
@ -422,6 +448,12 @@ export class FilePreviewScreenComponent extends AutoUnsubscribe implements OnIni
return [oldAnnotations, newAnnotations];
}
@Debounce(30)
private _updateItemWidth(entry: ResizeObserverEntry): void {
this.width = entry.contentRect.width;
this._changeRef.detectChanges();
}
#getAnnotationsToDraw(oldAnnotations: AnnotationWrapper[], newAnnotations: AnnotationWrapper[]) {
const currentPage = this.pdf.currentPage;
const currentPageAnnotations = this._annotationManager.get(a => a.getPageNumber() === currentPage);

1
apps/red-ui/src/app/modules/shared-dossiers/components/file-actions/file-actions.component.html
View File

@ -17,6 +17,7 @@
[buttonType]="buttonType"
[helpModeKey]="fileActionsHelpModeKey"
[maxWidth]="maxWidth"
[minWidth]="minWidth"
[tooltipPosition]="tooltipPosition"
></redaction-expandable-file-actions>
</div>

1
apps/red-ui/src/app/modules/shared-dossiers/components/file-actions/file-actions.component.ts
View File

@ -52,6 +52,7 @@ export class FileActionsComponent implements OnChanges {
@Input() dossier: Dossier;
@Input() type: 'file-preview' | 'dossier-overview-list' | 'dossier-overview-workflow';
@Input() maxWidth: number;
@Input() minWidth: number;
@Input() fileActionsHelpModeKey: 'document_features_in_dossier' | 'document_features_in_editor' = 'document_features_in_dossier';
toggleTooltip?: string;
assignTooltip?: string;

32
apps/red-ui/src/app/modules/shared/components/expandable-file-actions/expandable-file-actions.component.ts
View File

@ -14,6 +14,7 @@ import { firstValueFrom } from 'rxjs';
})
export class ExpandableFileActionsComponent implements OnChanges {
@Input() maxWidth: number;
@Input() minWidth: number;
@Input() actions: Action[];
@Input() buttonType: CircleButtonType;
@Input() tooltipPosition: IqserTooltipPosition;
@ -34,19 +35,34 @@ export class ExpandableFileActionsComponent implements OnChanges {
}
ngOnChanges(changes: SimpleChanges) {
if (changes.actions || changes.maxWidth) {
if (changes.actions || changes.maxWidth || changes.minWidth) {
let count = 0;
if (this.maxWidth) {
const count = Math.floor(this.maxWidth / 36) || 1;
if (count >= this.actions.length) {
this.displayedButtons = [...this.actions];
this.hiddenButtons = [];
} else {
this.displayedButtons = this.actions.slice(0, count - 1);
this.hiddenButtons = this.actions.slice(count - 1);
count = Math.floor(this.maxWidth / 36) || 1;
} else {
this.displayedButtons = [...this.actions];
this.hiddenButtons = [];
}
if (this.minWidth <= 850) {
count = Math.floor(this.minWidth / (this.actions.length * 15)) || 1;
if (this.minWidth <= 450) {
this.displayedButtons = [];
this.hiddenButtons = [...this.actions];
return;
}
} else {
this.displayedButtons = [...this.actions];
this.hiddenButtons = [];
return;
}
if (count >= this.actions.length) {
this.displayedButtons = [...this.actions];
this.hiddenButtons = [];
} else {
this.displayedButtons = this.actions.slice(0, count - 1);
this.hiddenButtons = this.actions.slice(count - 1);
}
}