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

Display document info over workload

Browse Source
This commit is contained in:
Adina Țeudan 2021-03-24 23:24:13 +02:00
parent 9659cbe289
commit f268726402
6 changed files with 149 additions and 150 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
apps/red-ui/src/app/components/document-info/document-info.component.html
View File

@ -15,8 +15,9 @@
</div>
</div>
<div class="content" redactionHasScrollbar>
<div class="section">
Attributes go here
1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4 1 2 3 4
</div>
<div class="section small-label stats-subtitle">
@ -37,3 +38,4 @@
<span>{{ 'file-preview.tabs.document-info.details.due' | translate: { date: project.project.dueDate | date: 'mediumDate' } }}</span>
</div>
</div>
</div>

27
apps/red-ui/src/app/components/document-info/document-info.component.scss
View File

@ -1,4 +1,29 @@
@import '../../../assets/styles/red-variables';
@import '../../../assets/styles/red-mixins';
:host {
display: block;
position: absolute;
height: 100%;
background: white;
z-index: 1;
width: 100%;
@include inset-shadow;
}
.content {
max-height: calc(100% - 71px);
@include scroll-bar;
overflow: hidden;
&:hover {
overflow: auto;
}
&.has-scrollbar .section {
padding-right: 13px;
}
}
.right-title > div {
display: flex;
@ -9,7 +34,7 @@
}
.section {
padding: 25px;
padding: 24px;
flex-direction: column;
> div {

6
apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.html
View File

@ -203,11 +203,10 @@
></redaction-pdf-viewer>
</div>
<div class="right-container" redactionHasScrollbar>
<redaction-document-info *ngIf="viewDocumentInfo" [file]="fileData.fileStatus" (closeDocumentInfoView)="viewDocumentInfo = false">
<div class="right-container">
<redaction-document-info *ngIf="viewReady && viewDocumentInfo" [file]="fileData.fileStatus" (closeDocumentInfoView)="viewDocumentInfo = false">
</redaction-document-info>
<ng-container *ngIf="!viewDocumentInfo">
<div class="right-title heading" translate="file-preview.tabs.annotations.label">
<div>
<redaction-filter
@ -320,7 +319,6 @@
</div>
</div>
</div>
</ng-container>
</div>
</div>
</section>

8
apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.scss
View File

@ -29,13 +29,7 @@
padding: 0;
width: 350px;
min-width: 350px;
&.has-scrollbar:hover {
::ng-deep redaction-document-info .right-title,
::ng-deep redaction-document-info .section {
padding-right: 13px;
}
}
position: relative;
::ng-deep.right-title {
height: 70px;

24
apps/red-ui/src/app/screens/file/file-preview-screen/file-preview-screen.component.ts
View File

@ -146,21 +146,7 @@ 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);
}
}
public viewDocumentInfo = false;
updateViewMode() {
const allAnnotations = this._instance.annotManager.getAnnotationsList();
@ -345,16 +331,13 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy {
@debounce()
private _scrollViews() {
if (this.viewDocumentInfo) {
return;
}
this._scrollQuickNavigation();
this._scrollAnnotations();
}
@debounce()
private scrollToSelectedAnnotation() {
if (this.viewDocumentInfo || !this.selectedAnnotations || this.selectedAnnotations.length === 0) {
if (!this.selectedAnnotations || this.selectedAnnotations.length === 0) {
return;
}
const elements: any[] = this._annotationsElement.nativeElement.querySelectorAll(`div[annotation-id="${this.firstSelectedAnnotation.id}"].active`);
@ -621,9 +604,6 @@ 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;