PLAN-1778: New mat tabs (#2035)

Updating the mat-tabs to use the new one instead of the legacy tab. Jira: https://sig-gis.atlassian.net/browse/PLAN-1778
OurPlanscape · Dec 23, 2024 · eb1f411 · eb1f411
1 parent ac7ad0b
commit eb1f411
Show file tree

Hide file tree

Showing 5 changed files with 10 additions and 2 deletions.
diff --git a/src/interface/src/app/map/map.module.ts b/src/interface/src/app/map/map.module.ts
@@ -17,6 +17,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { FeaturesModule } from '../features/features.module';
 import { OutsideRegionDialogComponent } from './outside-region-dialog/outside-region-dialog.component';
 import { InvalidLinkDialogComponent } from './invalid-link-dialog/invalid-link-dialog.component';
+import { MatTabsModule } from '@angular/material/tabs';
 
 @NgModule({
   declarations: [
@@ -41,6 +42,7 @@ import { InvalidLinkDialogComponent } from './invalid-link-dialog/invalid-link-d
     FormsModule,
     ReactiveFormsModule,
     FeaturesModule,
+    MatTabsModule,
   ],
   exports: [MapComponent],
 })

diff --git a/src/interface/src/app/material/legacy-material.module.ts b/src/interface/src/app/material/legacy-material.module.ts
@@ -23,7 +23,6 @@ import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/
 import { MatSortModule } from '@angular/material/sort';
 import { MatStepperModule } from '@angular/material/stepper';
 import { MatLegacyTableModule as MatTableModule } from '@angular/material/legacy-table';
-import { MatLegacyTabsModule as MatTabsModule } from '@angular/material/legacy-tabs';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
 import { MatTreeModule } from '@angular/material/tree';
@@ -55,7 +54,6 @@ import { MatDialogModule } from '@angular/material/dialog';
     MatSortModule,
     MatStepperModule,
     MatTableModule,
-    MatTabsModule,
     MatToolbarModule,
     MatTooltipModule,
     MatTreeModule,

diff --git a/src/interface/src/app/plan/plan-summary/saved-scenarios/saved-scenarios.component.html b/src/interface/src/app/plan/plan-summary/saved-scenarios/saved-scenarios.component.html
@@ -42,6 +42,7 @@
       </mat-slide-toggle>
       <mat-tab-group
         mat-align-tabs="start"
+        class="custom-tab-group"
         (selectedTabChange)="tabChange($event)">
         <mat-tab label="ACTIVE">
           <mat-card-content>
@@ -164,6 +165,7 @@ <h4 class="scenarios-title">Scenarios</h4>
     ">
     <mat-tab-group
       mat-align-tabs="start"
+      class="custom-tab-group"
       (selectedTabChange)="tabChange($event)">
       <mat-tab label="Active">
         <mat-card-content>

diff --git a/src/interface/src/app/plan/plan-summary/saved-scenarios/saved-scenarios.component.scss b/src/interface/src/app/plan/plan-summary/saved-scenarios/saved-scenarios.component.scss
@@ -177,3 +177,7 @@ app-section-loader {
   overflow: hidden;
   flex: 1;
 }
+
+.custom-tab-group ::ng-deep .mat-mdc-tab-header .mat-mdc-tab-label-container .mat-mdc-tab {
+  flex-grow: 0;
+}
diff --git a/src/interface/src/app/plan/plan.module.ts b/src/interface/src/app/plan/plan.module.ts
@@ -48,6 +48,7 @@ import { NotesSidebarComponent } from '../../styleguide/notes-sidebar/notes-side
 import { TreatmentCardComponent } from '../../styleguide/treatment-card/treatment-card.component';
 import { TreatmentsTabComponent } from './create-scenarios/treatments-tab/treatments-tab.component';
 import { OpacityControlComponent } from './plan-map/opacity-control/opacity-control.component';
+import { MatTabsModule } from '@angular/material/tabs';
 
 /** Components used in the plan flow. */
 @NgModule({
@@ -107,6 +108,7 @@ import { OpacityControlComponent } from './plan-map/opacity-control/opacity-cont
     NotesSidebarComponent,
     OpacitySliderComponent,
     OpacityControlComponent,
+    MatTabsModule,
   ],
 })
 export class PlanModule {}