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

WIP on master

Browse Source 
RED-8748 - Integrated component view in DocuMine
This commit is contained in:
Valentin Mihai 2024-07-29 01:02:46 +03:00
parent aaef6c7649
commit dbc609765b
10 changed files with 303 additions and 257 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
apps/red-ui/src/app/modules/file-preview/components/documine-export/documine-export.component.html
View File

@ -6,7 +6,6 @@
[matMenuTriggerFor]="bulkComponentDownloadMenu" [matMenuTriggerFor]="bulkComponentDownloadMenu"
[matTooltipPosition]="'above'" [matTooltipPosition]="'above'"
[matTooltip]="'documine-export.export-tooltip' | translate" [matTooltip]="'documine-export.export-tooltip' | translate"
[hidden]="true"
class="red-tab" class="red-tab"
> >
{{ 'documine-export.export' | translate }} {{ 'documine-export.export' | translate }}

13
apps/red-ui/src/app/modules/file-preview/components/documine-export/documine-export.component.ts
View File

@ -1,6 +1,6 @@
import { Component, Input } from '@angular/core'; import { Component, input, Input } from '@angular/core';
import { firstValueFrom } from 'rxjs'; import { firstValueFrom } from 'rxjs';
import { Dossier } from '@red/domain'; import { Dossier, File } from '@red/domain';
import { ComponentLogService } from '@services/files/component-log.service'; import { ComponentLogService } from '@services/files/component-log.service';
import { MatTooltip } from '@angular/material/tooltip'; import { MatTooltip } from '@angular/material/tooltip';
import { TranslateModule } from '@ngx-translate/core'; import { TranslateModule } from '@ngx-translate/core';
@ -13,15 +13,18 @@ import { MatMenu, MatMenuItem, MatMenuTrigger } from '@angular/material/menu';
imports: [MatTooltip, TranslateModule, MatMenuTrigger, MatMenu, MatMenuItem], imports: [MatTooltip, TranslateModule, MatMenuTrigger, MatMenu, MatMenuItem],
}) })
export class DocumineExportComponent { export class DocumineExportComponent {
@Input() dossier: Dossier; readonly dossier = input<Dossier>();
readonly file = input<File>();
constructor(private readonly _componentLogService: ComponentLogService) {} constructor(private readonly _componentLogService: ComponentLogService) {}
downloadComponentAsJSON() { downloadComponentAsJSON() {
return firstValueFrom(this._componentLogService.exportJSON(this.dossier.dossierTemplateId, this.dossier.dossierId)); return firstValueFrom(
this._componentLogService.exportJSON(this.dossier().dossierTemplateId, this.dossier().dossierId, this.file()),
);
} }
async downloadComponentAsXML() { async downloadComponentAsXML() {
return firstValueFrom(this._componentLogService.exportXML(this.dossier.dossierTemplateId, this.dossier.dossierId)); return firstValueFrom(this._componentLogService.exportXML(this.dossier().dossierTemplateId, this.dossier().dossierId, this.file()));
} }
} }

130
apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.html
View File

@ -1,64 +1,76 @@
<div (click)="select()" [ngClass]="{ selected: selected, editing: editing }" class="component-value"> <div (click)="select()" [ngClass]="{ selected: selected, editing: editing }" class="component-value">
<div class="component">{{ entryLabel }}</div> <div class="component">{{ entryLabel }}</div>
<div *ngIf="!editing; else editValue" class="value"> @if (!editing) {
<div class="text"> <div class="value">
<span <div class="text">
*ngFor="let componentValue of entry.componentValues" @for (componentValue of entry.componentValues; track componentValue) {
[innerHTML]="transformNewLines(componentValue.value ?? componentValue.originalValue)" <span [innerHTML]="transformNewLines(componentValue.value ?? componentValue.originalValue)"></span>
> }
</span> </div>
</div> <div class="actions">
<div class="actions"> @if (canEdit) {
<iqser-circle-button <iqser-circle-button
(action)="edit()" (action)="edit()"
*ngIf="canEdit" [tooltip]="'component-management.actions.edit' | translate"
[tooltip]="'component-management.actions.edit' | translate" icon="iqser:edit"
icon="iqser:edit" ></iqser-circle-button>
></iqser-circle-button> @if (hasUpdatedValues) {
<div *ngIf="hasUpdatedValues && canEdit" class="changes-dot"></div> <div class="changes-dot"></div>
</div> }
</div> }
<mat-icon *ngIf="!editing" class="arrow-right" svgIcon="red:arrow-right"></mat-icon>
</div>
<ng-template #editValue>
<div (cdkDropListDropped)="drop($event)" cdkDropList>
<div *ngFor="let value of entry.componentValues; let index = index" cdkDrag class="editing-value">
<mat-icon cdkDragHandle class="draggable" svgIcon="red:draggable-dots"></mat-icon>
<div class="iqser-input-group w-full">
<textarea [id]="'value-input-' + index" [(ngModel)]="value.value" rows="1" type="text"></textarea>
</div> </div>
<iqser-circle-button
(action)="removeValue(index)"
[tooltip]="'component-management.actions.delete' | translate"
class="remove-value"
icon="iqser:trash"
></iqser-circle-button>
</div> </div>
</div> } @else {
<div class="editing-actions"> <div (cdkDropListDropped)="drop($event)" cdkDropList>
<iqser-icon-button @for (value of entry.componentValues; track value) {
(action)="save()" <div cdkDrag class="editing-value">
[disabled]="disabled" <mat-icon
[label]="'component-management.actions.save' | translate" [class.hidden-button]="entry.componentValues.length === 1"
[type]="iconButtonTypes.primary" cdkDragHandle
></iqser-icon-button> class="draggable"
<div (click)="deselect($event)" class="all-caps-label cancel" translate="component-management.actions.cancel"></div> svgIcon="red:draggable-dots"
<div class="flex right"> ></mat-icon>
<iqser-circle-button <div class="iqser-input-group w-full">
(action)="undo()" <textarea [id]="'value-input-' + $index" [(ngModel)]="value.value" rows="1" type="text"></textarea>
*ngIf="hasUpdatedValues && canEdit" </div>
[tooltip]="'component-management.actions.undo' | translate" <iqser-circle-button
class="undo-value" (action)="removeValue($index)"
icon="red:undo" [tooltip]="'component-management.actions.delete' | translate"
showDot [class.hidden-button]="entry.componentValues.length === 1"
></iqser-circle-button> class="remove-value"
<iqser-circle-button icon="iqser:trash"
(action)="add()" ></iqser-circle-button>
[tooltip]="'component-management.actions.add' | translate" </div>
class="add-value" }
icon="iqser:plus"
></iqser-circle-button>
</div> </div>
</div> <div class="editing-actions">
</ng-template> <iqser-icon-button
(action)="save()"
[disabled]="disabled"
[label]="'component-management.actions.save' | translate"
[type]="iconButtonTypes.primary"
></iqser-icon-button>
<div (click)="deselect($event)" class="all-caps-label cancel" translate="component-management.actions.cancel"></div>
<div class="flex right">
@if (hasUpdatedValues && canEdit) {
<iqser-circle-button
(action)="undo()"
[tooltip]="'component-management.actions.undo' | translate"
class="undo-value"
icon="red:undo"
showDot
></iqser-circle-button>
}
<iqser-circle-button
(action)="add()"
[tooltip]="'component-management.actions.add' | translate"
class="add-value"
icon="iqser:plus"
></iqser-circle-button>
</div>
</div>
}
@if (!editing) {
<mat-icon class="arrow-right" svgIcon="red:arrow-right"></mat-icon>
}
</div>

24
apps/red-ui/src/app/modules/file-preview/components/editable-structured-component-value/editable-structured-component-value.component.scss
View File

@ -59,7 +59,6 @@
&:not(.header):hover, &:not(.header):hover,
&.selected { &.selected {
background-color: var(--iqser-grey-8); background-color: var(--iqser-grey-8);
border-left: 4px solid var(--iqser-primary);
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
@ -67,18 +66,31 @@
cursor: pointer; cursor: pointer;
} }
.component {
margin-left: 22px;
}
.value { .value {
margin-right: 26px; margin-right: 26px;
}
}
&:hover {
.component {
margin-left: 26px;
}
.value {
.actions { .actions {
iqser-circle-button { iqser-circle-button {
visibility: visible; visibility: visible;
} }
} }
} }
}
&.selected {
border-left: 4px solid var(--iqser-primary);
.component {
margin-left: 22px;
}
.arrow-right { .arrow-right {
visibility: visible; visibility: visible;
@ -129,6 +141,10 @@
} }
} }
.hidden-button {
visibility: hidden;
}
::ng-deep .add-value { ::ng-deep .add-value {
mat-icon { mat-icon {
transform: scale(2); transform: scale(2);

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

@ -1,7 +1,7 @@
<div class="page-header"> <div class="page-header">
<div class="flex"> <div class="flex">
<redaction-view-switch *ngIf="!isDocumine"></redaction-view-switch> <redaction-view-switch *ngIf="!isDocumine"></redaction-view-switch>
<redaction-documine-export *ngIf="isDocumine" [dossier]="state.dossier()"></redaction-documine-export> <redaction-documine-export *ngIf="isDocumine" [dossier]="state.dossier()" [file]="state.file()"></redaction-documine-export>
</div> </div>
<!-- TODO: mode this file preview header to a separate component--> <!-- TODO: mode this file preview header to a separate component-->

373
apps/red-ui/src/app/modules/file-preview/components/file-workload/file-workload.component.html
View File

@ -32,197 +32,212 @@
</ng-template> </ng-template>
</ng-container> </ng-container>
<div class="right-content"> @if (displayedAnnotations$ | async; as annotations) {
<ng-container *ngIf="!isDocumine"> <div class="right-content">
<redaction-readonly-banner <ng-container *ngIf="!isDocumine">
*ngIf="showAnalysisDisabledBanner; else readOnlyBanner" <redaction-readonly-banner
[customTranslation]="translations.analysisDisabled" *ngIf="showAnalysisDisabledBanner; else readOnlyBanner"
></redaction-readonly-banner> [customTranslation]="translations.analysisDisabled"
<ng-template #readOnlyBanner> ></redaction-readonly-banner>
<redaction-readonly-banner *ngIf="state.isReadonly()"></redaction-readonly-banner> <ng-template #readOnlyBanner>
</ng-template> <redaction-readonly-banner *ngIf="state.isReadonly()"></redaction-readonly-banner>
</ng-container> </ng-template>
</ng-container>
<div *ngIf="multiSelectService.active()" class="multi-select"> <div *ngIf="multiSelectService.active()" class="multi-select">
<div class="selected-wrapper"> <div class="selected-wrapper">
<iqser-round-checkbox <iqser-round-checkbox
(click)="annotationManager.deselect()" (click)="annotationManager.deselect()"
[indeterminate]="listingService.areSomeSelected$ | async" [indeterminate]="listingService.areSomeSelected$ | async"
type="with-bg" type="with-bg"
></iqser-round-checkbox> ></iqser-round-checkbox>
<span class="all-caps-label">{{ listingService.selectedLength$ | async }} selected </span> <span class="all-caps-label">{{ listingService.selectedLength$ | async }} selected </span>
<redaction-annotation-actions <redaction-annotation-actions
*ngIf="listingService.areSomeSelected$ | async" *ngIf="listingService.areSomeSelected$ | async"
[alwaysVisible]="true" [alwaysVisible]="true"
[annotations]="listingService.selectedEntities$ | async" [annotations]="listingService.selectedEntities$ | async"
[canPerformAnnotationActions]="state.isWritable()" [canPerformAnnotationActions]="state.isWritable()"
buttonType="primary" buttonType="primary"
tooltipPosition="above" tooltipPosition="above"
></redaction-annotation-actions> ></redaction-annotation-actions>
</div>
<iqser-circle-button
(action)="multiSelectService.deactivate()"
[tooltip]="'file-preview.tabs.multi-select.close' | translate"
[type]="circleButtonTypes.primary"
icon="iqser:close"
tooltipPosition="before"
></iqser-circle-button>
</div>
<div class="annotations-wrapper" [class.documine-direction]="isDocumine">
<div [class.border-left]="isDocumine">
<div
#quickNavigation
*ngIf="!(documentInfoService.shown() && isDocumine); else documentInfo"
(keydown)="preventKeyDefault($event)"
(keyup)="preventKeyDefault($event)"
[class.active-panel]="pagesPanelActive"
class="quick-navigation"
tabindex="0"
>
<div
(click)="scrollQuickNavFirst()"
[class.disabled]="pdf.currentPage() === 1"
[matTooltip]="'file-preview.quick-nav.jump-first' | translate"
[class.documine-height]="isDocumine"
class="jump"
matTooltipPosition="above"
>
<mat-icon svgIcon="iqser:nav-first"></mat-icon>
</div>
<redaction-pages (click)="pagesPanelActive = true" [pages]="displayedPages"></redaction-pages>
<div
(click)="scrollQuickNavLast()"
[class.disabled]="pdf.currentPage() === state.file()?.numberOfPages"
[matTooltip]="'file-preview.quick-nav.jump-last' | translate"
[class.documine-height]="isDocumine"
class="jump"
matTooltipPosition="above"
>
<mat-icon svgIcon="iqser:nav-last"></mat-icon>
</div>
</div>
</div>
<div class="content" [class.documine-width]="isDocumine">
<div
*ngIf="!viewModeService.isEarmarks()"
[attr.anotation-page-header]="pdf.currentPage()"
[hidden]="excludedPagesService.shown()"
class="workload-separator"
>
<span *ngIf="!!pdf.currentPage()" class="flex-align-items-center">
<ng-container *ngIf="!isDocumine; else documineHeader">
<iqser-circle-button
(action)="excludedPagesService.toggle()"
*ngIf="currentPageIsExcluded()"
[size]="14"
[tooltip]="'file-preview.excluded-from-redaction' | translate | capitalize"
class="mr-10 primary"
icon="red:exclude-pages"
tooltipPosition="above"
></iqser-circle-button>
<span
[translateParams]="{ page: pdf.currentPage(), count: activeAnnotations.length }"
[translate]="'page'"
class="all-caps-label"
></span>
</ng-container>
</span>
<div *ngIf="multiSelectService.active()">
<div
(click)="selectAllOnActivePage()"
class="all-caps-label primary pointer"
translate="file-preview.tabs.annotations.select-all"
></div>
<div
(click)="deselectAllOnActivePage()"
class="all-caps-label primary pointer"
translate="file-preview.tabs.annotations.select-none"
></div>
</div>
</div> </div>
<div <iqser-circle-button
#annotationsElement (action)="multiSelectService.deactivate()"
(keydown)="preventKeyDefault($event)" [tooltip]="'file-preview.tabs.multi-select.close' | translate"
(keyup)="preventKeyDefault($event)" [type]="circleButtonTypes.primary"
[class.active-panel]="!pagesPanelActive" icon="iqser:close"
[hidden]="excludedPagesService.shown()" tooltipPosition="before"
class="annotations" ></iqser-circle-button>
id="annotations-list" </div>
tabindex="1"
> <div class="annotations-wrapper" [class.documine-direction]="isDocumine">
<ng-container *ngIf="pdf.currentPage() && !displayedAnnotations.get(pdf.currentPage())?.length"> <div [class.border-left]="isDocumine">
<iqser-empty-state <div
[horizontalPadding]="24" #quickNavigation
[text]="'file-preview.no-data.title' | translate" *ngIf="!(documentInfoService.shown() && isDocumine); else documentInfo"
[verticalPadding]="40" (keydown)="preventKeyDefault($event)"
icon="iqser:document" (keyup)="preventKeyDefault($event)"
[class.active-panel]="pagesPanelActive"
class="quick-navigation"
tabindex="0"
>
<div
(click)="scrollQuickNavFirst()"
[class.disabled]="pdf.currentPage() === 1"
[matTooltip]="'file-preview.quick-nav.jump-first' | translate"
[class.documine-height]="isDocumine"
class="jump"
matTooltipPosition="above"
> >
<ng-container *ngIf="currentPageIsExcluded() && displayedPages.length"> <mat-icon svgIcon="iqser:nav-first"></mat-icon>
{{ 'file-preview.tabs.annotations.page-is' | translate }}
<a
(click)="excludedPagesService.toggle()"
class="with-underline"
translate="file-preview.excluded-from-redaction"
></a
>.
</ng-container>
<ng-container *ngIf="(fileDataService.allLength$ | async) === 0 || filterService.noAnnotationsFilterChecked">
{{ 'file-preview.tabs.annotations.no-annotations' | translate }}
</ng-container>
<ng-container
*ngIf="
(fileDataService.allLength$ | async) > 0 &&
displayedPages.length === 0 &&
!filterService.noAnnotationsFilterChecked
"
>{{ 'file-preview.tabs.annotations.wrong-filters' | translate }}
<a (click)="filterService.reset()" class="with-underline" translate="file-preview.tabs.annotations.reset"></a>
{{ 'file-preview.tabs.annotations.the-filters' | translate }}
</ng-container>
</iqser-empty-state>
<div *ngIf="displayedPages.length" class="no-annotations-buttons-container mt-32">
<iqser-icon-button
(action)="jumpToPreviousWithAnnotations()"
[disabled]="pdf.currentPage() <= displayedPages[0]"
[label]="'file-preview.tabs.annotations.jump-to-previous' | translate"
[type]="iconButtonTypes.dark"
icon="iqser:nav-prev"
></iqser-icon-button>
<iqser-icon-button
(action)="jumpToNextWithAnnotations()"
[disabled]="pdf.currentPage() >= displayedPages[displayedPages.length - 1]"
[label]="'file-preview.tabs.annotations.jump-to-next' | translate"
[type]="iconButtonTypes.dark"
class="mt-8"
icon="iqser:nav-next"
></iqser-icon-button>
</div> </div>
</ng-container>
<redaction-annotations-list <redaction-pages (click)="pagesPanelActive = true" [pages]="displayedPages"></redaction-pages>
(pagesPanelActive)="pagesPanelActive = $event"
[annotations]="(displayedAnnotations$ | async)?.get(pdf.currentPage())" <div
></redaction-annotations-list> (click)="scrollQuickNavLast()"
[class.disabled]="pdf.currentPage() === state.file()?.numberOfPages"
[matTooltip]="'file-preview.quick-nav.jump-last' | translate"
[class.documine-height]="isDocumine"
class="jump"
matTooltipPosition="above"
>
<mat-icon svgIcon="iqser:nav-last"></mat-icon>
</div>
</div>
</div> </div>
<redaction-page-exclusion *ngIf="excludedPagesService.shown()"></redaction-page-exclusion> <div class="content" [class.documine-width]="isDocumine">
@if (state.file().excluded && documentInfoService.hidden()) {
<iqser-empty-state
[horizontalPadding]="40"
[text]="'file-preview.tabs.is-excluded' | translate"
icon="red:needs-work"
></iqser-empty-state>
} @else {
<div
*ngIf="!viewModeService.isEarmarks()"
[attr.anotation-page-header]="pdf.currentPage()"
[hidden]="excludedPagesService.shown()"
class="workload-separator"
>
<span *ngIf="!!pdf.currentPage()" class="flex-align-items-center">
<ng-container *ngIf="!isDocumine; else documineHeader">
<iqser-circle-button
(action)="excludedPagesService.toggle()"
*ngIf="currentPageIsExcluded()"
[size]="14"
[tooltip]="'file-preview.excluded-from-redaction' | translate | capitalize"
class="mr-10 primary"
icon="red:exclude-pages"
tooltipPosition="above"
></iqser-circle-button>
<span
[translateParams]="{ page: pdf.currentPage(), count: activeAnnotations.length }"
[translate]="'page'"
class="all-caps-label"
></span>
</ng-container>
</span>
<div *ngIf="multiSelectService.active()">
<div
(click)="selectAllOnActivePage()"
class="all-caps-label primary pointer"
translate="file-preview.tabs.annotations.select-all"
></div>
<div
(click)="deselectAllOnActivePage()"
class="all-caps-label primary pointer"
translate="file-preview.tabs.annotations.select-none"
></div>
</div>
</div>
<div
#annotationsElement
(keydown)="preventKeyDefault($event)"
(keyup)="preventKeyDefault($event)"
[class.active-panel]="!pagesPanelActive"
[hidden]="excludedPagesService.shown()"
class="annotations"
id="annotations-list"
tabindex="1"
>
<ng-container *ngIf="pdf.currentPage() && !displayedAnnotations.get(pdf.currentPage())?.length">
<iqser-empty-state
[horizontalPadding]="24"
[text]="'file-preview.no-data.title' | translate"
[verticalPadding]="40"
icon="iqser:document"
>
<ng-container *ngIf="currentPageIsExcluded() && displayedPages.length">
{{ 'file-preview.tabs.annotations.page-is' | translate }}
<a
(click)="excludedPagesService.toggle()"
class="with-underline"
translate="file-preview.excluded-from-redaction"
></a
>.
</ng-container>
<ng-container
*ngIf="(fileDataService.allLength$ | async) === 0 || filterService.noAnnotationsFilterChecked"
>
{{ 'file-preview.tabs.annotations.no-annotations' | translate }}
</ng-container>
<ng-container
*ngIf="
(fileDataService.allLength$ | async) > 0 &&
displayedPages.length === 0 &&
!filterService.noAnnotationsFilterChecked
"
>{{ 'file-preview.tabs.annotations.wrong-filters' | translate }}
<a
(click)="filterService.reset()"
class="with-underline"
translate="file-preview.tabs.annotations.reset"
></a>
{{ 'file-preview.tabs.annotations.the-filters' | translate }}
</ng-container>
</iqser-empty-state>
<div *ngIf="displayedPages.length" class="no-annotations-buttons-container mt-32">
<iqser-icon-button
(action)="jumpToPreviousWithAnnotations()"
[disabled]="pdf.currentPage() <= displayedPages[0]"
[label]="'file-preview.tabs.annotations.jump-to-previous' | translate"
[type]="iconButtonTypes.dark"
icon="iqser:nav-prev"
></iqser-icon-button>
<iqser-icon-button
(action)="jumpToNextWithAnnotations()"
[disabled]="pdf.currentPage() >= displayedPages[displayedPages.length - 1]"
[label]="'file-preview.tabs.annotations.jump-to-next' | translate"
[type]="iconButtonTypes.dark"
class="mt-8"
icon="iqser:nav-next"
></iqser-icon-button>
</div>
</ng-container>
<redaction-annotations-list
(pagesPanelActive)="pagesPanelActive = $event"
[annotations]="annotations.get(pdf.currentPage())"
></redaction-annotations-list>
</div>
}
<redaction-page-exclusion *ngIf="excludedPagesService.shown()"></redaction-page-exclusion>
</div>
</div> </div>
</div> </div>
</div> }
<ng-template #annotationFilterActionTemplate let-filter="filter"> <ng-template #annotationFilterActionTemplate let-filter="filter">
<iqser-circle-button <iqser-circle-button

4
apps/red-ui/src/app/modules/file-preview/components/right-container/file-preview-right-container.component.html
View File

@ -1,6 +1,6 @@
<ng-container *ngIf="state.file() as file"> <ng-container *ngIf="state.file() as file">
<iqser-empty-state <iqser-empty-state
*ngIf="file.excluded && documentInfoService.hidden()" *ngIf="file.excluded && documentInfoService.hidden() && !this.isDocumine"
[horizontalPadding]="40" [horizontalPadding]="40"
[text]="'file-preview.tabs.is-excluded' | translate" [text]="'file-preview.tabs.is-excluded' | translate"
icon="red:needs-work" icon="red:needs-work"
@ -8,5 +8,5 @@
<redaction-document-info *ngIf="documentInfoService.shown() && !isDocumine" id="document-info"></redaction-document-info> <redaction-document-info *ngIf="documentInfoService.shown() && !isDocumine" id="document-info"></redaction-document-info>
<redaction-file-workload *ngIf="!file.excluded"></redaction-file-workload> <redaction-file-workload *ngIf="!file.excluded || isDocumine"></redaction-file-workload>
</ng-container> </ng-container>

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

@ -39,7 +39,7 @@
} }
&.documine-container { &.documine-container {
width: 70%; width: 60%;
} }
} }

9
apps/red-ui/src/app/modules/pdf-viewer/services/viewer-header.service.ts
View File

@ -275,6 +275,7 @@ export class ViewerHeaderService {
updateElements(): void { updateElements(): void {
this._pdf.instance?.UI.setHeaderItems(header => { this._pdf.instance?.UI.setHeaderItems(header => {
const documineButtons = this.#isDocumine ? 1 : 0;
const enabledItems: IHeaderElement[] = []; const enabledItems: IHeaderElement[] = [];
const groups: HeaderElementType[][] = [ const groups: HeaderElementType[][] = [
[HeaderElements.COMPARE_BUTTON, HeaderElements.CLOSE_COMPARE_BUTTON], [HeaderElements.COMPARE_BUTTON, HeaderElements.CLOSE_COMPARE_BUTTON],
@ -293,15 +294,15 @@ export class ViewerHeaderService {
groups.forEach(group => this.#pushGroup(enabledItems, group)); groups.forEach(group => this.#pushGroup(enabledItems, group));
const loadAllAnnotationsButton = this.#buttons.get(HeaderElements.LOAD_ALL_ANNOTATIONS); const loadAllAnnotationsButton = this.#buttons.get(HeaderElements.LOAD_ALL_ANNOTATIONS);
let startButtons = 11; let startButtons = 11 - documineButtons;
let deleteCount = 15; let deleteCount = 15 - documineButtons;
if (this.#isEnabled(HeaderElements.LOAD_ALL_ANNOTATIONS)) { if (this.#isEnabled(HeaderElements.LOAD_ALL_ANNOTATIONS)) {
if (!header.getItems().includes(loadAllAnnotationsButton)) { if (!header.getItems().includes(loadAllAnnotationsButton)) {
header.get('leftPanelButton').insertAfter(loadAllAnnotationsButton); header.get('leftPanelButton').insertAfter(loadAllAnnotationsButton);
} }
startButtons = 12; startButtons = 12 - documineButtons;
deleteCount = 16; deleteCount = 16 - documineButtons;
} else { } else {
header.delete(HeaderElements.LOAD_ALL_ANNOTATIONS); header.delete(HeaderElements.LOAD_ALL_ANNOTATIONS);
} }

2
apps/red-ui/src/styles.scss
View File

@ -164,7 +164,7 @@ $dark-accent-10: darken(vars.$accent, 10%);
body { body {
--workload-width: 350px; --workload-width: 350px;
--documine-workload-content-width: 287px; --documine-workload-content-width: 287px;
--structured-component-management-width: 30%; --structured-component-management-width: 40%;
--qiuck-navigation-width: 61px; --qiuck-navigation-width: 61px;
--iqser-app-name-font-family: OpenSans Extrabold, sans-serif; --iqser-app-name-font-family: OpenSans Extrabold, sans-serif;
--iqser-app-name-font-size: 13px; --iqser-app-name-font-size: 13px;