chore: angular mdc migration list (#1109)

dasch-swiss · Jun 22, 2023 · 9a59633 · 9a59633
1 parent 6a9e259
commit 9a59633
Show file tree

Hide file tree

Showing 27 changed files with 143 additions and 155 deletions.
diff --git a/apps/dsp-app/src/app/app.component.spec.ts b/apps/dsp-app/src/app/app.component.spec.ts
@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
 import { TestBed, waitForAsync } from '@angular/core/testing';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyListModule as MatListModule } from '@angular/material/legacy-list';
+import { MatListModule } from '@angular/material/list';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar';
 import { MatToolbarModule } from '@angular/material/toolbar';

diff --git a/apps/dsp-app/src/app/main/action/selected-resources/selected-resources.component.scss b/apps/dsp-app/src/app/main/action/selected-resources/selected-resources.component.scss
@@ -1,7 +1,7 @@
 .selected-resources {
   margin-top: 10px;
 
-  .mat-list-item {
+  .mat-mdc-list-item {
     height: auto;
 
     .mat-icon {
@@ -13,7 +13,7 @@
       white-space: normal !important;
     }
 
-    .mat-list-item {
+    .mat-mdc-list-item {
       margin-left: 0px;
     }
   }

diff --git a/apps/dsp-app/src/app/main/action/selected-resources/selected-resources.component.spec.ts b/apps/dsp-app/src/app/main/action/selected-resources/selected-resources.component.spec.ts
@@ -2,7 +2,7 @@ import { Component, ViewChild } from '@angular/core';
 import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
-import { MatLegacyListModule as MatListModule } from '@angular/material/legacy-list';
+import { MatListModule } from '@angular/material/list';
 
 import { SelectedResourcesComponent } from './selected-resources.component';
 

diff --git a/apps/dsp-app/src/app/main/dialog/dialog.component.spec.ts b/apps/dsp-app/src/app/main/dialog/dialog.component.spec.ts
@@ -13,7 +13,7 @@ import { MatDividerModule } from '@angular/material/divider';
 import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
-import { MatLegacyListModule as MatListModule } from '@angular/material/legacy-list';
+import { MatListModule } from '@angular/material/list';
 import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatTooltipModule } from '@angular/material/tooltip';

diff --git a/apps/dsp-app/src/app/main/header/header.component.spec.ts b/apps/dsp-app/src/app/main/header/header.component.spec.ts
@@ -3,7 +3,7 @@ import { Component, Input, ViewChild } from '@angular/core';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyListModule as MatListModule } from '@angular/material/legacy-list';
+import { MatListModule } from '@angular/material/list';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar';

diff --git a/apps/dsp-app/src/app/material-module.ts b/apps/dsp-app/src/app/material-module.ts
@@ -16,7 +16,7 @@ import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/materia
 import { MatGridListModule } from '@angular/material/grid-list';
 import { MatIconModule } from '@angular/material/icon';
 import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
-import { MatLegacyListModule as MatListModule } from '@angular/material/legacy-list';
+import { MatListModule } from '@angular/material/list';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatProgressBarModule } from '@angular/material/progress-bar';

diff --git a/apps/dsp-app/src/app/project/ontology/ontology.component.scss b/apps/dsp-app/src/app/project/ontology/ontology.component.scss
@@ -92,6 +92,12 @@ $width: 429px;
       text-align: left;
       display: inline-block;
     }
+
+    mat-list {
+      a {
+        cursor: pointer;
+      }
+    }
   }
 
   .ontology-editor-canvas {

diff --git a/apps/dsp-app/src/app/project/ontology/property-info/property-info.component.spec.ts b/apps/dsp-app/src/app/project/ontology/property-info/property-info.component.spec.ts
@@ -7,7 +7,7 @@ import {
 } from '@angular/material/dialog';
 import { MatDialogHarness } from '@angular/material/dialog/testing';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyListModule as MatListModule } from '@angular/material/legacy-list';
+import { MatListModule } from '@angular/material/list';
 import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

diff --git a/...sp-app/src/app/project/ontology/resource-class-form/resource-class-form.component.spec.ts b/...sp-app/src/app/project/ontology/resource-class-form/resource-class-form.component.spec.ts
@@ -9,7 +9,7 @@ import { MatDividerModule } from '@angular/material/divider';
 import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
-import { MatLegacyListModule as MatListModule } from '@angular/material/legacy-list';
+import { MatListModule } from '@angular/material/list';
 import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar';

diff --git a/apps/dsp-app/src/app/project/ontology/resource-class-info/resource-class-info.component.html b/apps/dsp-app/src/app/project/ontology/resource-class-info/resource-class-info.component.html
@@ -62,7 +62,7 @@
                 *ngFor="let prop of propsToDisplay; let i = index;">
                 <div class="drag-n-drop-placeholder" *cdkDragPlaceholder></div>
                 <mat-list-item class="property" [disabled]="loadProperty">
-                    <span cdkDragHandle mat-list-icon class="list-icon gui-order">
+                    <span cdkDragHandle matListItemIcon class="list-icon gui-order">
                         <span [class.hide-on-hover]="canChangeGuiOrder && lastModificationDate && userCanEdit">
                             {{i + 1}})
                         </span>
@@ -73,16 +73,18 @@
                     </span>
                     <!-- display only properties if they exist in list of properties;
                      objectType is not a linkValue (otherwise we have the property twice) -->
-                    <app-resource-class-property-info class="property-info"
-                                       [propDef]="propsToDisplay[i].propDef"
-                                       [propCard]="propsToDisplay[i]"
-                                       [projectUuid]="projectUuid"
-                                       [resourceIri]="resourceClass.id"
-                                       [lastModificationDate]="lastModificationDate"
-                                       [userCanEdit]="userCanEdit"
-                                       (removePropertyFromClass)="removeProperty($event)"
-                                       (changeCardinalities)="changeCardinalities($event)">
-                    </app-resource-class-property-info>
+                    <span matListItemTitle>
+                        <app-resource-class-property-info class="property-info"
+                            [propDef]="propsToDisplay[i].propDef"
+                            [propCard]="propsToDisplay[i]"
+                            [projectUuid]="projectUuid"
+                            [resourceIri]="resourceClass.id"
+                            [lastModificationDate]="lastModificationDate"
+                            [userCanEdit]="userCanEdit"
+                            (removePropertyFromClass)="removeProperty($event)"
+                            (changeCardinalities)="changeCardinalities($event)">
+                        </app-resource-class-property-info>
+                    </span>
                 </mat-list-item>
             </div>
         </mat-list>

diff --git a/apps/dsp-app/src/app/project/ontology/resource-class-info/resource-class-info.component.scss b/apps/dsp-app/src/app/project/ontology/resource-class-info/resource-class-info.component.scss
@@ -91,7 +91,7 @@
 
   .list-icon {
     font-size: 16px;
-    margin-left: -16px;
+    margin-right: 0px;
   }
 
   &.link {

diff --git a/...sp-app/src/app/project/ontology/resource-class-info/resource-class-info.component.spec.ts b/...sp-app/src/app/project/ontology/resource-class-info/resource-class-info.component.spec.ts
@@ -8,7 +8,7 @@ import { MatDialogModule } from '@angular/material/dialog';
 import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
-import { MatLegacyListModule as MatListModule } from '@angular/material/legacy-list';
+import { MatListModule } from '@angular/material/list';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar';
 import { MatTooltipModule } from '@angular/material/tooltip';

diff --git a/...ource-class-info/resource-class-property-info/resource-class-property-info.component.html b/...ource-class-info/resource-class-property-info/resource-class-property-info.component.html
@@ -32,19 +32,21 @@
             {{propDef.id | split: '#':1}}
         </span>
         <span class="fill-remaining-space center"></span>
-        <span>
+        <span class="cardinality-toggles">
             <mat-slide-toggle
                 data-name="multiple"
                 [checked]="propInfo.multiple"
                 [disabled]="!userCanEdit"
                 (toggleChange)="changeCardinalities.emit({ prop: propCard, propType: propType, targetCardinality: {key: 'multiple', value: !propInfo.multiple} })">
-            </mat-slide-toggle> multiple
+            </mat-slide-toggle>
+            <span class="toggle-label">multiple</span>
             <mat-slide-toggle
                 data-name="required"
                 [checked]="propInfo.required"
                 [disabled]="!userCanEdit"
                 (toggleChange)="changeCardinalities.emit({prop: propCard, propType: propType, targetCardinality: {key: 'required', value: !propInfo.required} })">
-            </mat-slide-toggle> required
+            </mat-slide-toggle>
+            <span class="toggle-label">required</span>
         </span>
     </div>
 </div>
diff --git a/...ource-class-info/resource-class-property-info/resource-class-property-info.component.scss b/...ource-class-info/resource-class-property-info/resource-class-property-info.component.scss
@@ -13,6 +13,12 @@
 .lower-prop-container {
   color: $primary_700;
   display: flex !important;
+
+  .cardinality-toggles {
+    .toggle-label {
+      font-size: 14px;
+    }
+  }
 }
 
 .mat-line {

diff --git a/...ce-class-info/resource-class-property-info/resource-class-property-info.component.spec.ts b/...ce-class-info/resource-class-property-info/resource-class-property-info.component.spec.ts
@@ -11,7 +11,7 @@ import {
 } from '@angular/material/dialog';
 import { MatDialogHarness } from '@angular/material/dialog/testing';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyListModule as MatListModule } from '@angular/material/legacy-list';
+import { MatListModule } from '@angular/material/list';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar';
 import { MatTooltipModule } from '@angular/material/tooltip';

diff --git a/apps/dsp-app/src/app/project/project.component.html b/apps/dsp-app/src/app/project/project.component.html
@@ -19,26 +19,21 @@
 
                     <!-- Description Section -->
                     <mat-divider></mat-divider>
-                    <mat-list-item [ngClass]="{ 'active': this.listItemSelected === '/project/' + projectUuid}" class="link section-title" (click)="open('/project/' + projectUuid)">
-                        <span class="section-label">
+                    <mat-list-item [ngClass]="{ 'active': this.listItemSelected === '/project/' + projectUuid}" class="section-title" (click)="open('/project/' + projectUuid)">
+                        <span matListItemTitle class="section-label">
                             <mat-icon class="sidenav-prefix-icon">description</mat-icon>
                             <p>Project Description</p>
+                            <mat-icon class="sidenav-suffix-icon">chevron_right</mat-icon>
                         </span>
-                        <span class="fill-remaining-space"></span>
-                        <span class="section-icon">
-                            <mat-icon>chevron_right</mat-icon>
-                        </span>
+
                     </mat-list-item>
 
                     <!-- Ontology Section -->
                     <mat-divider></mat-divider>
-                    <mat-list-item [ngClass]="{ 'active': listItemSelected === 'data-models'}" class="link section-title" (click)="open('data-models')">
-                        <span class="section-label">
+                    <mat-list-item [ngClass]="{ 'active': listItemSelected === 'data-models'}" class="section-title" (click)="open('data-models')">
+                        <span matListItemTitle class="section-label">
                             <mat-icon class="sidenav-prefix-icon">bubble_chart</mat-icon>
                             <p>Data Model</p>
-                        </span>
-                        <span class="fill-remaining-space"></span>
-                        <span class="section-icon">
                             <mat-icon>chevron_right</mat-icon>
                         </span>
                     </mat-list-item>
@@ -70,14 +65,11 @@
 
                     <div class="sidenav-footer"
                         *ngIf="projectAdmin">
-                        <mat-list-item [ngClass]="{ 'active': listItemSelected === 'settings'}" class="link section-title footer"
+                        <mat-list-item [ngClass]="{ 'active': listItemSelected === 'settings'}" class="section-title footer"
                             (click)="open('settings')">
-                            <span class="section-label">
+                            <span matListItemTitle class="section-label">
                                 <mat-icon class="sidenav-prefix-icon">settings</mat-icon>
                                 <div>Project Settings</div>
-                            </span>
-                            <span class="fill-remaining-space"></span>
-                            <span class="section-icon">
                                 <mat-icon>chevron_right</mat-icon>
                             </span>
                         </mat-list-item>

diff --git a/apps/dsp-app/src/app/project/project.component.scss b/apps/dsp-app/src/app/project/project.component.scss
@@ -21,8 +21,10 @@
   }
 
   .section-label {
+    width: 100%;
     color: $primary;
-    display: inline-flex;
+    display: inline-grid;
+    grid-template-columns: 18% 75% 7%;
     justify-content: center;
     align-items: center;
     font-size: 20px;
@@ -88,7 +90,6 @@
 }
 
 .sidenav-prefix-icon {
-  padding-right: 16px;
   font-size: 32px;
   width: 32px;
   height: 32px;

diff --git a/apps/dsp-app/src/app/user/membership/membership.component.spec.ts b/apps/dsp-app/src/app/user/membership/membership.component.spec.ts
@@ -4,7 +4,7 @@ import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyListModule as MatListModule } from '@angular/material/legacy-list';
+import { MatListModule } from '@angular/material/list';
 import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
 import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

diff --git a/apps/dsp-app/src/app/user/user-menu/user-menu.component.spec.ts b/apps/dsp-app/src/app/user/user-menu/user-menu.component.spec.ts
@@ -3,7 +3,7 @@ import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { MatButtonModule } from '@angular/material/button';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyListModule as MatListModule } from '@angular/material/legacy-list';
+import { MatListModule } from '@angular/material/list';
 import { MatMenuModule } from '@angular/material/menu';
 import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';