Feat: Farmer tool improvements

apps/picsa-tools/budget-tool/src/app/pages/view/budget-view.page.html

@@ -1,43 +1,28 @@
-<div class="page-content" *mobxAutorun>
-  <picsa-sidenav-layout #picsaSidenav>
-    <!-- Header -->
-    <button
-      desktopHeader
-      mat-button
-      color="primary"
-      *ngIf="!isEditorOpen"
-      aria-label="Share"
-      (click)="showShareDialog()"
-    >
-      <mat-icon>share</mat-icon>{{'Share' | translate }}
-    </button>
-    <button
-      mobileHeader
-      mat-button
-      color="primary"
-      *ngIf="!isEditorOpen"
-      aria-label="Share"
-      (click)="showShareDialog()"
-    >
-      <mat-icon>share</mat-icon>{{'Share' | translate }}
-    </button>
+<picsa-sidenav-layout #picsaSidenav *mobxAutorun>
+  <!-- Header -->
+  <button desktopHeader mat-button color="primary" *ngIf="!isEditorOpen" aria-label="Share" (click)="showShareDialog()">
+    <mat-icon>share</mat-icon>{{'Share' | translate }}
+  </button>
+  <button mobileHeader mat-button color="primary" *ngIf="!isEditorOpen" aria-label="Share" (click)="showShareDialog()">
+    <mat-icon>share</mat-icon>{{'Share' | translate }}
+  </button>
 
-    <!-- Sidenav -->
-    <budget-editor-sidebar sidenav (emitClose)="picsaSidenav.close()"></budget-editor-sidebar>
+  <!-- Sidenav -->
+  <budget-editor-sidebar sidenav (emitClose)="picsaSidenav.close()"></budget-editor-sidebar>
 
-    <!-- Main content -->
-    <div content class="page-content" style="overflow-y: hidden; overflow-x: auto; padding: 0">
-      <!-- hide overflow so that editor can be stored outside bottom of page -->
-      <budget-table *ngIf="store.activeBudget" [budget]="store.activeBudget" @fadeInOut></budget-table>
+  <!-- Main content -->
+  <ng-container content>
+    <!-- hide overflow so that editor can be stored outside bottom of page -->
+    <budget-table *ngIf="store.activeBudget" [budget]="store.activeBudget" @fadeInOut></budget-table>
 
-      <!-- Updated Editor -->
+    <!-- Updated Editor -->
+    <div class="editor-popup slide-in" [class.active]="isEditorOpen">
       <budget-editor
         *ngIf="store.activeType && store.activeBudget && store.activeBudget.data"
         [activePeriod]="store.activePeriod"
         [activeType]="store.activeType"
-        [@flyInOut]="isEditorOpen ? 'in' : 'out'"
         (handleNextClick)="handleEditorNext()"
       ></budget-editor>
     </div>
-  </picsa-sidenav-layout>
-</div>
+  </ng-container>
+</picsa-sidenav-layout>

apps/picsa-tools/budget-tool/src/app/pages/view/budget-view.page.scss

@@ -0,0 +1,24 @@
+// HACK - copied from options tool, should generalise
+.editor-popup {
+  position: fixed;
+  z-index: 2;
+
+  width: 100%;
+  top: 0;
+  left: 0;
+  display: flex;
+
+  // Include margin for top/bottom banners
+  // Inherit footer-height from farmer content or use fallback value if not defined
+  margin-top: 56px;
+  margin-bottom: var(--footer-height, 0px);
+  height: calc(100% - 56px - var(--footer-height, 0px));
+}
+
+.slide-in {
+  transition: transform 0.3s ease-in-out;
+  transform: translateY(100vh);
+}
+.slide-in.active {
+  transform: translateY(0);
+}

apps/picsa-tools/budget-tool/src/app/pages/view/budget-view.page.ts

@@ -2,7 +2,7 @@ import { Component, OnDestroy, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute } from '@angular/router';
 import { PicsaCommonComponentsService } from '@picsa/components/src';
-import { ANIMATION_DEFAULTS_Y, FadeInOut, FlyInOut, OpenClosed } from '@picsa/shared/animations';
+import { FadeInOut, OpenClosed } from '@picsa/shared/animations';
 import { PicsaTranslateService } from '@picsa/shared/modules';
 import { Subject, takeUntil } from 'rxjs';
 
@@ -13,7 +13,7 @@ import { BudgetStore } from '../../store/budget.store';
   selector: 'budget-view',
   templateUrl: './budget-view.page.html',
   styleUrls: ['./budget-view.page.scss'],
-  animations: [FadeInOut({ inDelay: 200 }), OpenClosed, FlyInOut(ANIMATION_DEFAULTS_Y)],
+  animations: [FadeInOut({ inDelay: 200 }), OpenClosed],
 })
 // eslint-disable-next-line @angular-eslint/component-class-suffix
 export class BudgetViewPage implements OnInit, OnDestroy {

apps/picsa-tools/climate-tool/src/app/components/climate-chart-options/climate-chart-options.component.html

@@ -1,4 +1,4 @@
-<h3 style="margin-top: 0">{{ 'Station' | translate }}</h3>
+<button mat-button routerLink="../../"><mat-icon>map</mat-icon>View Map</button>
 <mat-divider></mat-divider>
 <h3>{{ 'Chart' | translate }}</h3>
 <climate-view-select></climate-view-select>

apps/picsa-tools/climate-tool/src/app/pages/site-view/site-view.page.html

@@ -2,7 +2,7 @@
 
 <!-- Header to inject into global header component -->
 <ng-template #headerPortal>
-  <div style="position: relative; display: flex; align-items: center">
+  <div style="position: relative; display: flex; align-items: center; width: 100%">
     <button mat-button color="primary" (click)="select.open()" style="font-size: 32px; height: 40px">
       @if(chartService.station){ {{chartService.station.name}} }
       <mat-icon iconPositionEnd>expand_more</mat-icon>

apps/picsa-tools/farmer-content/src/app/pages/module-home/module-home.component.ts

@@ -109,7 +109,12 @@ export class FarmerContentModuleHomeComponent implements OnInit, OnDestroy {
     // toogle app header if required by tool
     const hideHeader = toolBlock?.tool?.showHeader ? false : true;
     if (this.componentService.headerOptions().hideHeader !== hideHeader) {
-      this.componentService.patchHeader({ hideHeader });
+      this.componentService.patchHeader({ hideHeader, hideBackButton: hideHeader ? true : false });
+    }
+    // show back button in tools that have nested route
+    const hideBackButton = this.shouldHideBackButton(toolBlock?.tool);
+    if (this.componentService.headerOptions().hideBackButton !== hideBackButton) {
+      this.componentService.patchHeader({ hideBackButton });
     }
   }
 
@@ -131,4 +136,15 @@ export class FarmerContentModuleHomeComponent implements OnInit, OnDestroy {
       this.router.navigate([tool.href], { relativeTo: this.route, replaceUrl: true });
     }
   }
+
+  private shouldHideBackButton(tool?: IToolData) {
+    if (tool) {
+      // HACK - budget tool doesn't show back to site select as can be done from dropdownj
+      if (location.pathname.includes(`/climate`)) return true;
+      // default hide back button on tool home page, e.g. `/farmer/module/budget`
+      // but include on nested pages, e.g. `/farmer/module/budget`
+      return location.pathname.endsWith(`/${tool.href}`);
+    }
+    return true;
+  }
 }

libs/theme/src/_overrides.scss

@@ -18,6 +18,11 @@ button.mat-mdc-button > .mat-icon {
   min-width: 24px; // climate share icon not showing without
   height: 24px;
 }
+// Don't allow button labels to extend beyond their container
+.mdc-button__label {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
 
 mat-card.link {
   cursor: pointer;