chore: code tidying

e-picsa · Oct 1, 2024 · c308379 · c308379
1 parent 4749b2c
commit c308379
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 8 deletions.
diff --git a/apps/picsa-tools/farmer-content/src/app/pages/module-home/module-home.component.html b/apps/picsa-tools/farmer-content/src/app/pages/module-home/module-home.component.html
@@ -11,7 +11,7 @@
       <!-- content -->
       @for(step of content.steps; track $index){
       <mat-tab>
-        <div class="tab-content">
+        <div class="tab-content" [attr.data-tool-content]="toolTabIndex() === $index">
           @for(block of step; track $index){ @switch (block.type) {
 
           <!-- Text -->
@@ -38,8 +38,6 @@ <h2>{{ 'Review' | translate }}</h2>
             <router-outlet #toolRouter></router-outlet>
           </div>
           } } }
-          <!-- show title on first tab -->
-          @if($first){ }
         </div>
       </mat-tab>
       }

diff --git a/apps/picsa-tools/farmer-content/src/app/pages/module-home/module-home.component.scss b/apps/picsa-tools/farmer-content/src/app/pages/module-home/module-home.component.scss
@@ -49,11 +49,10 @@
   max-height: var(--tab-height);
   overflow: auto;
 }
+.tab-content[data-tool-content='true'] {
+  --page-padding: 0px;
+}
 // HACK - reduce page size when using header
 .page[data-has-header='true'] {
   max-height: calc(var(--tab-height) - 3.5rem);
 }
-// HACK - remove page padding from nested tool routes
-.tool-route {
-  --page-padding: 0px;
-}
diff --git a/apps/picsa-tools/farmer-content/src/app/pages/module-home/module-home.component.ts b/apps/picsa-tools/farmer-content/src/app/pages/module-home/module-home.component.ts
@@ -1,5 +1,5 @@
 import { CommonModule } from '@angular/common';
-import { ChangeDetectionStrategy, Component, computed, effect, model, OnDestroy, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, effect, model, OnDestroy, OnInit, signal } from '@angular/core';
 import { toSignal } from '@angular/core/rxjs-interop';
 import { MatTabsModule } from '@angular/material/tabs';
 import { ActivatedRoute, Router, RouterOutlet } from '@angular/router';
@@ -50,6 +50,9 @@ export class FarmerContentModuleHomeComponent implements OnInit, OnDestroy {
   /** Selected tab index. Used to programatically change tabs from custom footer */
   public selectedIndex = model(0);
 
+  /** Track whether tool is active in mat-stepper  */
+  public toolTabIndex = signal(-1);
+
   /** Store any user-generated photos within a folder named after module */
   public photoAlbum = computed(() => {
     const content = this.content();
@@ -100,6 +103,7 @@ export class FarmerContentModuleHomeComponent implements OnInit, OnDestroy {
   private handleContentChangeEffects(stepContent: IFarmerContentStep[]) {
     const toolBlock = stepContent.find((b) => b.type === 'tool') as StepTool | undefined;
     if (toolBlock) {
+      this.toolTabIndex.set(this.selectedIndex());
       this.setToolUrl(toolBlock.tool);
     }
     // toogle app header if required by tool