chore: angular mdc migration slider (#1119)

dasch-swiss · Jun 27, 2023 · 27c7d86 · 27c7d86
1 parent 3fb0647
commit 27c7d86
Show file tree

Hide file tree

Showing 8 changed files with 33 additions and 46 deletions.
diff --git a/apps/dsp-app/src/app/material-module.ts b/apps/dsp-app/src/app/material-module.ts
@@ -23,7 +23,7 @@ import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatSlideToggleModule } from '@angular/material/slide-toggle';
-import { MatLegacySliderModule as MatSliderModule } from '@angular/material/legacy-slider';
+import { MatSliderModule } from '@angular/material/slider';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatSortModule } from '@angular/material/sort';
 import { MatTabsModule } from '@angular/material/tabs';

diff --git a/apps/dsp-app/src/app/workspace/resource/representation/audio/audio.component.html b/apps/dsp-app/src/app/workspace/resource/representation/audio/audio.component.html
@@ -87,9 +87,19 @@
                         min="0"
                         [max]="getDuration()"
                         step="1"
-                        [value]="currentTime"
-                        (input)="onSliderChangeEnd($event)"
-                    ></mat-slider>
+                        #ngSlider
+                        ><input
+                            matSliderThumb
+                            [value]="currentTime"
+                            (input)="
+                                onSliderChangeEnd({
+                                    source: ngSliderThumb,
+                                    parent: ngSlider,
+                                    value: ngSliderThumb.value
+                                })
+                            "
+                            #ngSliderThumb="matSliderThumb"
+                    /></mat-slider>
                 </div>
                 <button
                     mat-icon-button

diff --git a/apps/dsp-app/src/app/workspace/resource/representation/audio/audio.component.scss b/apps/dsp-app/src/app/workspace/resource/representation/audio/audio.component.scss
@@ -35,10 +35,5 @@
 .time-slider-container {
     .time-slider {
         width: 90%;
-        ::ng-deep {
-            .mat-slider-track-background {
-                background-color: whitesmoke !important;
-            }
-        }
     }
 }
diff --git a/apps/dsp-app/src/app/workspace/resource/representation/audio/audio.component.spec.ts b/apps/dsp-app/src/app/workspace/resource/representation/audio/audio.component.spec.ts
@@ -4,7 +4,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
 import { MatMenuModule } from '@angular/material/menu';
-import { MatLegacySliderModule as MatSliderModule } from '@angular/material/legacy-slider';
+import { MatSliderModule } from '@angular/material/slider';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { BrowserModule } from '@angular/platform-browser';
 import { of } from 'rxjs';

diff --git a/.../dsp-app/src/app/workspace/resource/representation/still-image/still-image.component.html b/.../dsp-app/src/app/workspace/resource/representation/still-image/still-image.component.html
@@ -36,17 +36,30 @@
 <div class="toolbar bottom">
     <!-- navigation -->
     <div class="navigation horizontal" *ngIf="compoundNavigation">
+        <!-- TODO: The 'tickInterval' property no longer exists -->
         <mat-slider
             [color]="'primary'"
             [disabled]="compoundNavigation.totalPages < 2"
             [max]="compoundNavigation.totalPages"
             [min]="1"
             [step]="1"
-            [thumbLabel]="true"
-            [tickInterval]="'auto'"
             [(ngModel)]="compoundNavigation.page"
-            (change)="openPage($event.value)"
-        >
+            showTickMarks
+            discrete
+            #ngSlider
+            ><input
+                matSliderThumb
+                (change)="
+                    openPage(
+                        {
+                            source: ngSliderThumb,
+                            parent: ngSlider,
+                            value: ngSliderThumb.value
+                        }.value
+                    )
+                "
+                #ngSliderThumb="matSliderThumb"
+            />
         </mat-slider>
     </div>
     <!-- toolbar -->

diff --git a/.../dsp-app/src/app/workspace/resource/representation/still-image/still-image.component.scss b/.../dsp-app/src/app/workspace/resource/representation/still-image/still-image.component.scss
@@ -83,9 +83,8 @@
     &.horizontal {
       width: 100%;
 
-      .mat-slider {
+      .mat-mdc-slider {
         width: 100%;
-        height: 4px;
         bottom: 20px;
       }
     }

diff --git a/apps/dsp-app/src/styles.scss b/apps/dsp-app/src/styles.scss
@@ -79,7 +79,6 @@ body {
   }
 }
 
-/* TODO(mdc-migration): The following rule targets internal classes of card that may no longer apply for the MDC version.*/
 .grid-card .mat-mdc-card-header > div.mat-card-header-text {
   margin: 0 0 !important;
 }
@@ -244,22 +243,6 @@ button.space-reducer {
   }
 }
 
-// moving image player: overwrite mat-slider
-.progress {
-  .mat-slider-track-background {
-    background-color: whitesmoke !important;
-  }
-
-  .mat-slider-wrapper {
-    top: 12px !important;
-  }
-
-  .mat-slider-thumb {
-    background-color: $yellow !important;
-    border-color: $yellow !important;
-  }
-}
-
 .ontology-editor {
   .mat-drawer-inner-container {
     width: 200px;

diff --git a/apps/dsp-app/src/styles/_elements.scss b/apps/dsp-app/src/styles/_elements.scss
@@ -801,16 +801,3 @@ $gc-small: $form-width - $gc-large - 4;
   }
 }
 
-// --------------------------------------
-
-//
-// slider in compound object viewer
-.navigation.horizontal {
-  .mat-slider-track-background {
-    background-color: $primary_200;
-  }
-  .mat-slider-thumb {
-    background-color: $primary_400;
-  }
-}
-