Fix global style error for mat-dialog-container (#432)

* Fix global style error for mat-dialog-container

* Refactor open(View)Settings to remove duplication

Author: omkar-ethz

scilog/src/app/app.component.scss

@@ -56,13 +56,6 @@
       height: 100vh;
     }
 
-  ::ng-deep .mat-toolbar{
-    z-index: 998;
-    position: fixed;
-    height: 50px;
-    flex: 1 1 auto;
-  }
-
   .flexExpand {
     flex: 1 1 auto;
 }

scilog/src/app/core/toolbar/toolbar.component.html

@@ -45,7 +45,7 @@
           <span [ngStyle]="{'font-weight':view.id == currentView ? 'bold' : 'normal' }">{{ view.name }}</span>
         </button>
       </ng-container>
-      <button mat-menu-item (click)="openViewSettings()">
+      <button mat-menu-item (click)="openSettings('viewSettings')">
         <mat-icon>save</mat-icon>
         <span>Save/Edit</span>
       </button>
@@ -62,7 +62,7 @@
       </span>
     </button>
     <mat-menu #menu="matMenu">
-      <button mat-menu-item (click)="openSettings()">
+      <button mat-menu-item (click)="openSettings('profileSettings')">
         <mat-icon>settings</mat-icon>
         <span>Settings</span>
       </button>

scilog/src/app/core/toolbar/toolbar.component.ts

@@ -110,29 +110,18 @@ export class ToolbarComponent implements OnInit {
     this.openMenu.emit();
   }
 
-  openSettings() {
+  openSettings(settingsType: "profileSettings" | "viewSettings") {
     const dialogConfig = new MatDialogConfig();
     dialogConfig.autoFocus = false;
     dialogConfig.disableClose = true;
-    dialogConfig.data = "profileSettings";
+    dialogConfig.data = settingsType;
+    dialogConfig.panelClass = "app-full-bleed-dialog";
     const dialogRef = this.dialog.open(SettingsComponent, dialogConfig);
     this.subscriptions.push(dialogRef.afterClosed().subscribe(data => {
       console.log(data);
     }));
   }
 
-  openViewSettings() {
-    const dialogConfig = new MatDialogConfig();
-    dialogConfig.autoFocus = false;
-    dialogConfig.disableClose = true;
-    dialogConfig.data = "viewSettings";
-    const dialogRef = this.dialog.open(SettingsComponent, dialogConfig);
-    this.subscriptions.push(dialogRef.afterClosed().subscribe(data => {
-      console.log(data);
-      console.log(this.views)
-    }));
-  }
-
   openSearch(){
     this.showSearch = true;
   }

scilog/src/app/logbook/core/settings/settings.component.css

@@ -15,11 +15,6 @@
 
 }
 
-::ng-deep .mat-dialog-container{
-padding: 0px;
-border-radius: 8px;
-}
-
 .main-content {
 
     /* padding-bottom: 60px; */

scilog/src/app/logbook/core/settings/view-settings/view-edit/view-edit.component.css

@@ -17,11 +17,6 @@
 
 }
 
-::ng-deep .mat-dialog-container{
-padding: 0px;
-border-radius: 8px;
-}
-
 .main-content {
 
     /* padding-bottom: 60px; */

scilog/src/app/logbook/core/settings/view-settings/view-settings.component.css

@@ -17,11 +17,6 @@
 
 }
 
-::ng-deep .mat-dialog-container{
-padding: 0px;
-border-radius: 8px;
-}
-
 .main-content {
 
     /* padding-bottom: 60px; */

scilog/src/styles.scss

@@ -10,3 +10,4 @@ body { height: calc(100%); margin: 0; font-family: Roboto, "Helvetica Neue", san
 @import "styles/roboto.scss";
 @import "styles/material-icons.scss";
 @import "prismjs/themes/prism.css";
+@import "styles/global";

scilog/src/styles/_global.scss

@@ -0,0 +1,4 @@
+.app-full-bleed-dialog .mat-dialog-container {
+    padding: 0;
+    border-radius: 8px;
+}