feat - scrollstrategy noop for angular dialogs

thus the annoying expanding effect of the dialogs is removed

Author: 4drianMatei

frontend/src/app/app.component.ts

@@ -20,6 +20,9 @@ import { Bookmark } from './core/model/bookmark';
 import { Router } from '@angular/router';
 import { AddToHistoryService } from './core/user/add-to-history.service';
 import { environment } from '../environments/environment';
+import { ScrollStrategyOptions } from '@angular/cdk/overlay';
+import { ScrollStrategy } from '@angular/cdk/overlay/scroll/scroll-strategy';
+import { LoginDialogHelperService } from './core/login-dialog-helper.service';
 
 @Component({
   selector: 'app-root',
@@ -45,17 +48,21 @@ export class AppComponent implements OnInit {
   favIcon: HTMLLinkElement = document.querySelector('#favicon');
   readonly environment = environment;
 
+  scrollStrategy: ScrollStrategy;
+
   constructor(private keycloakService: KeycloakService,
               private userInfoStore: UserInfoStore,
               private userDataStore: UserDataStore,
               private userDataHistoryStore: UserDataHistoryStore,
               private userDataPinnedStore: UserDataPinnedStore,
               private historyDialog: MatDialog,
               private loginDialog: MatDialog,
+              private loginDialogHelperService: LoginDialogHelperService,
               private cookieService: CookieService,
               private feedbackService: FeedbackService,
               protected router: Router,
-              private addToHistoryService: AddToHistoryService) {
+              private addToHistoryService: AddToHistoryService,
+              private readonly  scrollStrategyOptions: ScrollStrategyOptions) {
     this.innerWidth = 100;
   }
 
@@ -86,18 +93,13 @@ export class AppComponent implements OnInit {
         )
       }
     });
+    this.scrollStrategy = this.scrollStrategyOptions.noop();
   }
 
   @HostListener('window:keydown.control.p', ['$event'])
   showPinned(event: KeyboardEvent) {
     if (!this.userIsLoggedIn) {
-      const dialogConfig = new MatDialogConfig();
-
-      dialogConfig.disableClose = true;
-      dialogConfig.autoFocus = true;
-      dialogConfig.data = {
-        message: 'You need to be logged in to see the Pinned Bookmarks popup'
-      };
+      const dialogConfig = this.loginDialogHelperService.loginDialogConfig('You need to be logged in to see the Pinned Bookmarks popup');
 
       this.loginDialog.open(LoginRequiredDialogComponent, dialogConfig);
     } else {
@@ -108,6 +110,7 @@ export class AppComponent implements OnInit {
       dialogConfig.autoFocus = true;
       dialogConfig.width = this.getRelativeWidth();
       dialogConfig.height = this.getRelativeHeight();
+      dialogConfig.scrollStrategy = this.scrollStrategy;
       dialogConfig.data = {
         bookmarks$: this.userDataPinnedStore.getPinnedBookmarks$(this.userId, 1),
         title: '<i class="fas fa-thumbtack"></i> Pinned'
@@ -143,13 +146,7 @@ export class AppComponent implements OnInit {
   @HostListener('window:keydown.control.h', ['$event'])
   showHistory(event: KeyboardEvent) {
     if (!this.userIsLoggedIn) {
-      const dialogConfig = new MatDialogConfig();
-
-      dialogConfig.disableClose = true;
-      dialogConfig.autoFocus = true;
-      dialogConfig.data = {
-        message: 'You need to be logged in to see the History Bookmarks popup'
-      };
+      const dialogConfig = this.loginDialogHelperService.loginDialogConfig('You need to be logged in to see the History Bookmarks popup');
 
       this.loginDialog.open(LoginRequiredDialogComponent, dialogConfig);
     } else {
@@ -160,6 +157,7 @@ export class AppComponent implements OnInit {
       dialogConfig.autoFocus = true;
       dialogConfig.width = this.getRelativeWidth();
       dialogConfig.height = this.getRelativeHeight();
+      dialogConfig.scrollStrategy = this.scrollStrategy;
       dialogConfig.data = {
         bookmarks$: this.userDataHistoryStore.getAllHistory$(this.userId),
         title: '<i class="fas fa-history"></i> History'

frontend/src/app/core/login-dialog-helper.service.ts

@@ -1,13 +1,23 @@
 import { Injectable } from '@angular/core';
 import { MatDialogConfig } from '@angular/material/dialog';
+import { ScrollStrategyOptions } from '@angular/cdk/overlay';
+import { ScrollStrategy } from '@angular/cdk/overlay/scroll/scroll-strategy';
 
 @Injectable()
 export class LoginDialogHelperService {
+
+  scrollStrategy: ScrollStrategy;
+
+  constructor(private readonly scrollStrategyOptions: ScrollStrategyOptions) {
+    this.scrollStrategy = this.scrollStrategyOptions.noop();
+  }
+
   loginDialogConfig(message: string) {
     const dialogConfig = new MatDialogConfig();
 
     dialogConfig.disableClose = true;
     dialogConfig.autoFocus = true;
+    dialogConfig.scrollStrategy = this.scrollStrategy;
     dialogConfig.data = {
       message: message
     };

frontend/src/app/shared/bookmark-list-element/bookmark-list-element.component.ts

@@ -26,6 +26,8 @@ import { NavigationEnd, Router } from '@angular/router';
 import { LoginDialogHelperService } from '../../core/login-dialog-helper.service';
 import { AddToHistoryService } from '../../core/user/add-to-history.service';
 import { Clipboard } from '@angular/cdk/clipboard';
+import { ScrollStrategy } from '@angular/cdk/overlay/scroll/scroll-strategy';
+import { ScrollStrategyOptions } from '@angular/cdk/overlay';
 
 @Component({
   selector: 'app-bookmark-list-element',
@@ -67,6 +69,8 @@ export class BookmarkListElementComponent extends TagFollowingBaseComponent impl
 
   copyLinkButtonText = '';
 
+  scrollStrategy: ScrollStrategy;
+
   constructor(private router: Router,
               private playYoutubeDialog: MatDialog,
               public loginDialog: MatDialog,
@@ -85,7 +89,8 @@ export class BookmarkListElementComponent extends TagFollowingBaseComponent impl
               private loginDialogHelperService: LoginDialogHelperService,
               private myBookmarksStore: MyBookmarksStore,
               public addToHistoryService: AddToHistoryService,
-              private clipboard: Clipboard) {
+              private clipboard: Clipboard,
+              private readonly  scrollStrategyOptions: ScrollStrategyOptions) {
     super(loginDialog, userDataWatchedTagsStore);
 
     // START force reload on same root - solution taken from https://github.com/angular/angular/issues/13831
@@ -103,6 +108,8 @@ export class BookmarkListElementComponent extends TagFollowingBaseComponent impl
     });
     // END force reload on same root - solution taken from https://github.com/angular/angular/issues/13831
     // apparently still an issue around the topic - need to keep an eye on it - https://github.com/angular/angular/issues/21115
+
+    this.scrollStrategy = this.scrollStrategyOptions.noop();
   }
 
   ngOnInit(): void {
@@ -123,16 +130,17 @@ export class BookmarkListElementComponent extends TagFollowingBaseComponent impl
     dialogConfig.disableClose = false;
     dialogConfig.autoFocus = true;
 
-    let relativeWidth = (this.innerWidth * 80) / 100; // take up to 80% of the screen size
+    let relativeWidth = (this.innerWidth * 70) / 100; // take up to 80% of the screen size
     if (this.innerWidth > 1500) {
-      relativeWidth = (1500 * 80) / 100;
+      relativeWidth = (1500 * 70) / 100;
     } else {
-      relativeWidth = (this.innerWidth * 80) / 100;
+      relativeWidth = (this.innerWidth * 70) / 100;
     }
 
     const relativeHeight = (relativeWidth * 9) / 16 + 120; // 16:9 to which we add 120 px for the dialog action buttons ("close")
     dialogConfig.width = relativeWidth + 'px';
     dialogConfig.height = relativeHeight + 'px';
+    dialogConfig.scrollStrategy = this.scrollStrategy;
 
     dialogConfig.data = {
       bookmark: bookmark,
@@ -187,6 +195,7 @@ export class BookmarkListElementComponent extends TagFollowingBaseComponent impl
     const dialogConfig = new MatDialogConfig();
     dialogConfig.disableClose = true;
     dialogConfig.autoFocus = true;
+    dialogConfig.scrollStrategy = this.scrollStrategy;
     dialogConfig.data = {
       bookmark: bookmark,
       userData$: this.userData$
@@ -243,6 +252,7 @@ export class BookmarkListElementComponent extends TagFollowingBaseComponent impl
     dialogConfig.disableClose = true;
     dialogConfig.autoFocus = true;
     dialogConfig.minWidth = 380;
+    dialogConfig.scrollStrategy = this.scrollStrategy;
     dialogConfig.data = {
       bookmark: bookmark,
       userIsLoggedIn: this.userIsLoggedIn,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Codever",
-  "version": "6.4.0",
+  "version": "6.5.0",
   "description": "Codever - bookmarks and snippets manager for developers & co",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",