diff --git a/apps/red-ui/src/app/modules/icons/icons.module.ts b/apps/red-ui/src/app/modules/icons/icons.module.ts index 78e1045d3..39b841ab4 100644 --- a/apps/red-ui/src/app/modules/icons/icons.module.ts +++ b/apps/red-ui/src/app/modules/icons/icons.module.ts @@ -18,6 +18,7 @@ export class IconsModule { 'analyse', 'approved', 'arrow-down', + 'arrow-down-o', 'arrow-right', 'arrow-up', 'assign', diff --git a/apps/red-ui/src/app/modules/projects/components/scroll-button/scroll-button.component.html b/apps/red-ui/src/app/modules/projects/components/scroll-button/scroll-button.component.html new file mode 100644 index 000000000..0e14b3070 --- /dev/null +++ b/apps/red-ui/src/app/modules/projects/components/scroll-button/scroll-button.component.html @@ -0,0 +1,3 @@ + diff --git a/apps/red-ui/src/app/modules/projects/components/scroll-button/scroll-button.component.scss b/apps/red-ui/src/app/modules/projects/components/scroll-button/scroll-button.component.scss new file mode 100644 index 000000000..a90c7d912 --- /dev/null +++ b/apps/red-ui/src/app/modules/projects/components/scroll-button/scroll-button.component.scss @@ -0,0 +1,19 @@ +@import 'apps/red-ui/src/assets/styles/red-variables'; + +.scroll-button { + background-color: $white; + position: absolute; + bottom: 30px; + right: 0; + height: 40px; + width: 44px; + border: none; + border-radius: 8px 0 0 8px; + box-shadow: -1px 1px 5px 0 rgba(40, 50, 65, 0.25); +} + +mat-icon { + width: 22px; + height: 22px; + color: $grey-7; +} diff --git a/apps/red-ui/src/app/modules/projects/components/scroll-button/scroll-button.component.ts b/apps/red-ui/src/app/modules/projects/components/scroll-button/scroll-button.component.ts new file mode 100644 index 000000000..9b2760de1 --- /dev/null +++ b/apps/red-ui/src/app/modules/projects/components/scroll-button/scroll-button.component.ts @@ -0,0 +1,37 @@ +import { Component, HostListener, Input } from '@angular/core'; +import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling'; + +@Component({ + selector: 'redaction-scroll-button', + templateUrl: './scroll-button.component.html', + styleUrls: ['./scroll-button.component.scss'] +}) +export class ScrollButtonComponent { + @Input() + scrollViewport: CdkVirtualScrollViewport; + @Input() + itemSize: number; + + scroll(): void { + const scrollOffset = this.scrollViewport.measureScrollOffset('top'); + const ligaturePortion = 50; + const viewportSize = this.scrollViewport.getViewportSize() - ligaturePortion; + + this.scrollViewport.scrollToOffset(scrollOffset + viewportSize, 'smooth'); + } + + showScrollButton(): boolean { + const reachedBottom = this.scrollViewport.measureScrollOffset('bottom') === 0; + const scrollSize = this.scrollViewport.getDataLength() * this.itemSize; + const scrollIsNeeded = this.scrollViewport.getViewportSize() < scrollSize; + + return scrollIsNeeded && !reachedBottom; + } + + @HostListener('document:keyup', ['$event']) + spaceAndPageDownScroll(event: KeyboardEvent): void { + if (['Space', 'PageDown'].includes(event.code)) { + this.scroll(); + } + } +} diff --git a/apps/red-ui/src/app/modules/projects/projects.module.ts b/apps/red-ui/src/app/modules/projects/projects.module.ts index d82c8a7ef..d69c044fa 100644 --- a/apps/red-ui/src/app/modules/projects/projects.module.ts +++ b/apps/red-ui/src/app/modules/projects/projects.module.ts @@ -44,6 +44,7 @@ import { EditProjectDictionaryComponent } from './dialogs/edit-project-dialog/di import { EditProjectTeamMembersComponent } from './dialogs/edit-project-dialog/team-members/edit-project-team-members.component'; import { TeamMembersManagerComponent } from './components/team-members-manager/team-members-manager.component'; import { TeamMembersDialogComponent } from './dialogs/team-members-dialog/team-members-dialog.component'; +import { ScrollButtonComponent } from './components/scroll-button/scroll-button.component'; const screens = [ ProjectListingScreenComponent, @@ -59,7 +60,8 @@ const dialogs = [ ForceRedactionDialogComponent, RemoveAnnotationsDialogComponent, DocumentInfoDialogComponent, - AssignReviewerApproverDialogComponent + AssignReviewerApproverDialogComponent, + DossierDictionaryDialogComponent ]; const components = [ @@ -84,6 +86,7 @@ const components = [ EditProjectDictionaryComponent, EditProjectTeamMembersComponent, TeamMembersManagerComponent, + ScrollButtonComponent, ...screens, ...dialogs @@ -101,7 +104,7 @@ const services = [ ]; @NgModule({ - declarations: [...components, DossierDictionaryDialogComponent], + declarations: [...components], providers: [...services], imports: [CommonModule, SharedModule, FileUploadDownloadModule, ProjectsRoutingModule] }) diff --git a/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.html b/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.html index e8e69eb5b..8cb7cfac4 100644 --- a/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.html +++ b/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.html @@ -104,7 +104,7 @@ type="no-match" > - +
+ +
diff --git a/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.scss b/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.scss index ca14f39fe..2cf33f158 100644 --- a/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.scss +++ b/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.scss @@ -2,6 +2,8 @@ @import '../../../../../assets/styles/red-variables'; .content-container { + position: relative; + cdk-virtual-scroll-viewport { ::ng-deep.cdk-virtual-scroll-content-wrapper { grid-template-columns: 2fr 1fr 1fr auto 11px; diff --git a/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.ts b/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.ts index e4f7f72fb..7944d214b 100644 --- a/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.ts +++ b/apps/red-ui/src/app/modules/projects/screens/project-listing-screen/project-listing-screen.component.ts @@ -47,12 +47,13 @@ export class ProjectListingScreenComponent } = { statusFilters: [] }; + readonly itemSize = 85; protected readonly _searchKey = 'name'; protected readonly _sortKey = 'project-listing'; private _projectAutoUpdateTimer: Subscription; private _lastScrollPosition: number; - @ViewChild(CdkVirtualScrollViewport) private _scrollBar: CdkVirtualScrollViewport; + @ViewChild(CdkVirtualScrollViewport) scrollBar: CdkVirtualScrollViewport; @ViewChild('statusFilter') private _statusFilterComponent: FilterComponent; @ViewChild('peopleFilter') private _peopleFilterComponent: FilterComponent; @@ -146,7 +147,7 @@ export class ProjectListingScreenComponent ) .subscribe((event) => { if (event instanceof NavigationStart && event.url !== '/main/projects') { - this._lastScrollPosition = this._scrollBar.measureScrollOffset('top'); + this._lastScrollPosition = this.scrollBar.measureScrollOffset('top'); } }); } @@ -155,7 +156,7 @@ export class ProjectListingScreenComponent this._appStateService.reset(); this._loadEntitiesFromState(); this.ngOnInit(); - this._scrollBar.scrollTo({ top: this._lastScrollPosition }); + this.scrollBar.scrollTo({ top: this._lastScrollPosition }); } ngOnDetach() { diff --git a/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.html b/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.html index 46ce68abe..07be6abf3 100644 --- a/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.html +++ b/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.html @@ -184,7 +184,7 @@ type="no-match" > - +
+ +
diff --git a/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.ts b/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.ts index ff8e153db..5f9ae355f 100644 --- a/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.ts +++ b/apps/red-ui/src/app/modules/projects/screens/project-overview-screen/project-overview-screen.component.ts @@ -48,6 +48,7 @@ export class ProjectOverviewScreenComponent needsWorkFilters: FilterModel[]; statusFilters: FilterModel[]; } = { needsWorkFilters: [], statusFilters: [] }; + readonly itemSize = 80; protected readonly _searchKey = 'searchField'; protected readonly _selectionKey = 'fileId'; protected readonly _sortKey = 'project-overview'; @@ -59,7 +60,7 @@ export class ProjectOverviewScreenComponent private _lastScrollPosition: number; private _lastOpenedFileId = ''; - @ViewChild(CdkVirtualScrollViewport) private _scrollBar: CdkVirtualScrollViewport; + @ViewChild(CdkVirtualScrollViewport) scrollBar: CdkVirtualScrollViewport; @ViewChild('statusFilter') private _statusFilterComponent: FilterComponent; @ViewChild('peopleFilter') private _peopleFilterComponent: FilterComponent; @@ -147,7 +148,7 @@ export class ProjectOverviewScreenComponent .pipe(filter((events) => events instanceof NavigationStart)) .subscribe((event: NavigationStart) => { if (!event.url.endsWith(this._appStateService.activeProjectId)) { - this._lastScrollPosition = this._scrollBar.measureScrollOffset('top'); + this._lastScrollPosition = this.scrollBar.measureScrollOffset('top'); } }); } @@ -162,7 +163,7 @@ export class ProjectOverviewScreenComponent ngOnAttach() { this._loadEntitiesFromState(); this.ngOnInit(); - this._scrollBar.scrollTo({ top: this._lastScrollPosition }); + this.scrollBar.scrollTo({ top: this._lastScrollPosition }); } ngOnDetach() { diff --git a/apps/red-ui/src/assets/icons/general/arrow-down-o.svg b/apps/red-ui/src/assets/icons/general/arrow-down-o.svg new file mode 100644 index 000000000..65c93afa2 --- /dev/null +++ b/apps/red-ui/src/assets/icons/general/arrow-down-o.svg @@ -0,0 +1,18 @@ + + + +