more fixes to the css

Author: Tomasz Dłuski

EntityFrameworkCore.Diagrams/EntityFrameworkCore.Diagrams.Frontend/angular.json

@@ -15,7 +15,6 @@
                     "builder": "@angular-devkit/build-angular:browser",
                     "configurations": {
                         "production": {
-                            "browserTarget": "angular8:build:production"
                         }
                     },
                     "options": {

EntityFrameworkCore.Diagrams/EntityFrameworkCore.Diagrams.Frontend/src-website/app/components/demo/demo.component.html

@@ -17,15 +17,15 @@ <h2 #viewInFullscreen>View in fullscreen</h2>
             Fullscreen mode lets you see how actual app looks like.
             Some features are available only in fullscreen mode, e.g. minimap and toolbar expand-collapse.
         </p>
-        <button type="button" class="toggle-fullscreen-btn" md-raised-button (click)="toggleFullscreen()">
+        <button type="button" class="toggle-fullscreen-btn" mat-raised-button (click)="toggleFullscreen()">
             <mat-icon>fullscreen_enter</mat-icon>
             Fullscreen
         </button>
     </section>
 
     <efd-root [allowToolbarCollapse]="fullscreen" (diagramLoad)="onDiagramLoaded($event)"></efd-root>
 
-    <button *ngIf="fullscreen" type="button" class="toggle-fullscreen-btn" md-fab matTooltip="Exit fullscreen mode"
+    <button *ngIf="fullscreen" type="button" class="toggle-fullscreen-btn" mat-fab matTooltip="Exit fullscreen mode"
         [matTooltipPosition]="right" (click)="toggleFullscreen()">
         <mat-icon>fullscreen_exit</mat-icon>
     </button>

EntityFrameworkCore.Diagrams/EntityFrameworkCore.Diagrams.Frontend/src-website/app/components/homepage/homepage.component.html

@@ -1,7 +1,7 @@
 <header>
     <h1 class="mat-h1">Database Diagrams</h1>
     <h2 class="mat-h2">Entity Framework Core model visualization</h2>
-    <a [routerLink]="['/guides/getting-started']" md-raised-button>Get Started</a>
+    <a [routerLink]="['/guides/getting-started']" mat-raised-button>Get Started</a>
 </header>
 
 <main>

EntityFrameworkCore.Diagrams/EntityFrameworkCore.Diagrams.Frontend/src-website/styles.scss

@@ -9,8 +9,8 @@ html {
     body {
         margin: 0;
 
-        [md-button],
-        [md-raised-button] {
+        [mat-button],
+        [mat-raised-button] {
             text-transform: uppercase;
         }
     }

EntityFrameworkCore.Diagrams/EntityFrameworkCore.Diagrams.Frontend/src/app/components/db-diagram/db-diagram.component.html

@@ -1,5 +1,5 @@
 
-<md-spinner *ngIf="!model"></md-spinner>
+<mat-spinner *ngIf="!model"></mat-spinner>
 
 <h1 *ngIf="!model.entities || model.entities.length === 0">Database model is empty</h1>
 

EntityFrameworkCore.Diagrams/EntityFrameworkCore.Diagrams.Frontend/src/app/components/db-entity-diagram-figure/db-entity-diagram-figure.component.html

@@ -9,7 +9,7 @@
         </button>
     </mat-card-title>
     <mat-card-content [class.collapsed]="entityLayout.collapsed">
-        <mat-table #table [dataSource]="propertiesDataSource">
+        <mat-table cdk-table #table [dataSource]="propertiesDataSource">
             <!-- Key Column -->
             <ng-container cdkColumnDef="key">
                 <mat-header-cell *cdkHeaderCellDef>
@@ -53,4 +53,4 @@
             <mat-row *cdkRowDef="let row; columns: modelLayout.entitiesTableSettings.displayedColumnsKeys;"></mat-row>
         </mat-table>
     </mat-card-content>
-</mat-card>
+</mat-card>

EntityFrameworkCore.Diagrams/EntityFrameworkCore.Diagrams.Frontend/src/app/components/db-entity-diagram-figure/db-entity-diagram-figure.component.ts

@@ -96,7 +96,7 @@ export class DbEntityDiagramFigureComponent implements OnInit, OnChanges, AfterV
     }
 
     ngAfterViewInit() {
-        // NOTE: force md-table to display initial data. Seems like a bug in library
+        // NOTE: force mat-table to display initial data. Seems like a bug in library
         this._changeDetector.detectChanges();
 
         const entityElement = this._el.nativeElement as HTMLElement;

EntityFrameworkCore.Diagrams/EntityFrameworkCore.Diagrams.Frontend/src/app/components/export-dialog/export-dialog.component.html

@@ -1,22 +1,22 @@
 
-<h2 md-dialog-title>Export</h2>
+<h2 mat-dialog-title>Export</h2>
 
-<md-dialog-content>
+<mat-dialog-content>
 
-    <md-radio-group [(ngModel)]="selectedExportType">
-        <md-radio-button [value]="exportTypeLayout">Layout only</md-radio-button>
-        <md-radio-button [value]="exportTypeModelWithLayout">Model with Layout</md-radio-button>
-    </md-radio-group>
+    <mat-radio-group [(ngModel)]="selectedExportType">
+        <mat-radio-button [value]="exportTypeLayout">Layout only</mat-radio-button>
+        <mat-radio-button [value]="exportTypeModelWithLayout">Model with Layout</mat-radio-button>
+    </mat-radio-group>
 
-</md-dialog-content>
+</mat-dialog-content>
 
-<md-dialog-actions>
+<mat-dialog-actions>
 
-    <a [efdDownloadData]="exportData" [efdDownloadFilename]="exportFilename" md-button (click)="close()">
+    <a [efdDownloadData]="exportData" [efdDownloadFilename]="exportFilename" mat-button (click)="close()">
         <mat-icon>file_download</mat-icon>
         Export
     </a>
 
-    <button md-button md-dialog-close>Cancel</button>
+    <button mat-button mat-dialog-close>Cancel</button>
 
-</md-dialog-actions>
+</mat-dialog-actions>

EntityFrameworkCore.Diagrams/EntityFrameworkCore.Diagrams.Frontend/src/app/components/export-dialog/export-dialog.component.scss

@@ -5,11 +5,11 @@
     display: flex;
     flex-direction: column;
 
-    md-dialog-content {
+    mat-dialog-content {
         flex: 1;
         padding: 16px;
 
-        md-radio-button {
+        mat-radio-button {
             display: block;
             margin-bottom: 16px;
         }

EntityFrameworkCore.Diagrams/EntityFrameworkCore.Diagrams.Frontend/src/app/components/scaling-toolbar/scaling-toolbar.component.html

@@ -4,7 +4,7 @@
 </button>
 
 
-<button type="button" md-button (click)="resetZoom()">
+<button type="button" mat-button (click)="resetZoom()">
     {{ scale * 100 | number:'1.0-0' }} %
 </button>