diff --git a/apps/red-ui/src/app/icons/icons.module.ts b/apps/red-ui/src/app/icons/icons.module.ts index 0c8622230..7a0945248 100644 --- a/apps/red-ui/src/app/icons/icons.module.ts +++ b/apps/red-ui/src/app/icons/icons.module.ts @@ -44,6 +44,8 @@ export class IconsModule { 'lightning', 'logout', 'menu', + 'nav-first', + 'nav-last', 'needs-work', 'new-tab', 'notification', 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 70834b8bc..d7b24a809 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 @@ -217,17 +217,37 @@ (keydown)="preventKeyDefault($event)" (keyup)="preventKeyDefault($event)" [class.active-panel]="pagesPanelActive" - class="pages" + class="quick-navigation" tabindex="0" > - - + + +
+ + +
+
+ +
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 55c647921..75433a35b 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 @@ -58,7 +58,7 @@ box-sizing: border-box; display: flex; - .pages, + .quick-navigation, .annotations { overflow-y: scroll; outline: none; @@ -68,10 +68,44 @@ } } - .pages { + .quick-navigation { border-right: 1px solid $separator; min-width: 61px; - @include no-scroll-bar(); + overflow: hidden; + display: flex; + flex-direction: column; + + .jump { + min-height: 32px; + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; + transition: background-color 0.25s; + + &:hover { + background-color: $grey-6; + } + + mat-icon { + width: 16px; + height: 16px; + } + + &.disabled { + cursor: default; + + mat-icon { + opacity: 0.3; + } + } + } + + .pages { + @include no-scroll-bar(); + overflow: auto; + flex: 1; + } } .page-separator { 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 11c7055f5..78b726a8d 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 @@ -119,6 +119,9 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy { public analysisProgress: number; public analysisInterval: number; + public quickScrollFirstEnabled = false; + public quickScrollLastEnabled = true; + get indeterminateMode() { return ( this.analysisProgress > 100 || this.appStateService.activeFile.analysisDuration < 3 * 1000 // it takes longer than usual - switch to indeterminate @@ -342,11 +345,37 @@ export class FilePreviewScreenComponent implements OnInit, OnDestroy { this._scrollToFirstElement(elements); } - private _scrollQuickNavigation() { - const elements: any[] = this._quickNavigationElement.nativeElement.querySelectorAll(`#quick-nav-page-${this.activeViewerPage}`); + private _scrollQuickNavigationToPage(page: number) { + const elements: any[] = this._quickNavigationElement.nativeElement.querySelectorAll(`#quick-nav-page-${page}`); this._scrollToFirstElement(elements); } + private _scrollQuickNavigation() { + let quickNavPageIndex = this.displayedPages.findIndex((p) => p >= this.activeViewerPage); + if (quickNavPageIndex === -1 || this.displayedPages[quickNavPageIndex] !== this.activeViewerPage) { + quickNavPageIndex = Math.max(0, quickNavPageIndex - 1); + } + this._scrollQuickNavigationToPage(this.displayedPages[quickNavPageIndex]); + } + + public scrollQuickNavFirst() { + if (this.displayedPages.length > 0) { + this._scrollQuickNavigationToPage(this.displayedPages[0]); + } + } + + public scrollQuickNavLast() { + if (this.displayedPages.length > 0) { + this._scrollQuickNavigationToPage(this.displayedPages[this.displayedPages.length - 1]); + } + } + + public onQuickNavScroll($event) { + const { scrollHeight, scrollTop, clientHeight } = $event.target; + this.quickScrollFirstEnabled = scrollTop !== 0; + this.quickScrollLastEnabled = scrollHeight !== scrollTop + clientHeight; + } + private _scrollAnnotations() { if (this.firstSelectedAnnotation?.pageNumber === this.activeViewerPage) { return; diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html index 871bb552a..876718855 100644 --- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html +++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.html @@ -213,7 +213,7 @@
-
+
{{ fileStatus.numberOfPages }}
diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss index ec491ef19..34b886b01 100644 --- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss +++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.scss @@ -41,7 +41,7 @@ cdk-virtual-scroll-viewport { max-width: 25vw; } - .pages { + .quick-navigation { display: flex; flex-direction: row; align-items: center; diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json index a777c282e..1f94de8db 100644 --- a/apps/red-ui/src/assets/i18n/en.json +++ b/apps/red-ui/src/assets/i18n/en.json @@ -306,7 +306,11 @@ "new-tab-ssr": "Open Document in Server Side Rendering Mode", "html-debug": "Open Document HTML Debug", "download-original-file": "Download Original File", - "exit-fullscreen": "Exit Full Screen (F)" + "exit-fullscreen": "Exit Full Screen (F)", + "quick-nav": { + "jump-first": "Jump to first annotation", + "jump-last": "Jump to last annotation" + } }, "annotation-actions": { "message": { diff --git a/apps/red-ui/src/assets/icons/general/nav-first.svg b/apps/red-ui/src/assets/icons/general/nav-first.svg new file mode 100644 index 000000000..685ffebac --- /dev/null +++ b/apps/red-ui/src/assets/icons/general/nav-first.svg @@ -0,0 +1,15 @@ + + + ED22EA6D-C390-4471-B1E4-6B17BA55D5F9 + + + + + + + + + + + + diff --git a/apps/red-ui/src/assets/icons/general/nav-last.svg b/apps/red-ui/src/assets/icons/general/nav-last.svg new file mode 100644 index 000000000..1c0697770 --- /dev/null +++ b/apps/red-ui/src/assets/icons/general/nav-last.svg @@ -0,0 +1,15 @@ + + + F189455C-659F-4467-9C15-B17B152A29C5 + + + + + + + + + + + +