feat: collapse detail titles into header bar

frontend/app/android/capacitor.settings.gradle

@@ -45,7 +45,7 @@ include ':capacitor-splash-screen'
 project(':capacitor-splash-screen').projectDir = new File('../../../node_modules/.pnpm/@capacitor+splash-screen@5.0.6_@capacitor+core@5.5.0/node_modules/@capacitor/splash-screen/android')
 
 include ':transistorsoft-capacitor-background-fetch'
-project(':transistorsoft-capacitor-background-fetch').projectDir = new File('../../../node_modules/.pnpm/@transistorsoft+capacitor-background-fetch@1.0.2_@capacitor+core@5.5.0/node_modules/@transistorsoft/capacitor-background-fetch/android')
+project(':transistorsoft-capacitor-background-fetch').projectDir = new File('../../../node_modules/.pnpm/@transistorsoft+capacitor-background-fetch@5.1.1_@capacitor+core@5.5.0/node_modules/@transistorsoft/capacitor-background-fetch/android')
 
 include ':capacitor-secure-storage-plugin'
-project(':capacitor-secure-storage-plugin').projectDir = new File('../../../node_modules/.pnpm/capacitor-secure-storage-plugin@0.8.1_@capacitor+core@5.5.0/node_modules/capacitor-secure-storage-plugin/android')
+project(':capacitor-secure-storage-plugin').projectDir = new File('../../../node_modules/.pnpm/capacitor-secure-storage-plugin@0.9.0_@capacitor+core@5.5.0/node_modules/capacitor-secure-storage-plugin/android')

frontend/app/src/app/modules/data/detail/data-detail.component.spec.ts

@@ -14,17 +14,15 @@
  */
 
 /* eslint-disable @typescript-eslint/no-non-null-assertion,@typescript-eslint/no-explicit-any */
-import {CUSTOM_ELEMENTS_SCHEMA, DebugElement} from '@angular/core';
+import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
 import {ComponentFixture, TestBed} from '@angular/core/testing';
 import {ActivatedRoute, RouterModule} from '@angular/router';
-import {IonTitle} from '@ionic/angular';
 import {TranslateLoader, TranslateModule, TranslateService} from '@ngx-translate/core';
 import {sampleThingsMap} from '../../../_helpers/data/sample-things';
 import {DataRoutingModule} from '../data-routing.module';
 import {DataModule} from '../data.module';
 import {DataProvider} from '../data.provider';
 import {DataDetailComponent} from './data-detail.component';
-import {By} from '@angular/platform-browser';
 import {Observable, of} from 'rxjs';
 import {StorageProvider} from '../../storage/storage.provider';
 import {LoggerModule, NgxLoggerLevel} from 'ngx-logger';
@@ -40,7 +38,6 @@ class TranslateFakeLoader implements TranslateLoader {
 describe('DataDetailComponent', () => {
   let comp: DataDetailComponent;
   let fixture: ComponentFixture<DataDetailComponent>;
-  let detailPage: DebugElement;
   let dataProvider: DataProvider;
   const sampleThing = sampleThingsMap.message[0];
   let translateService: TranslateService;
@@ -94,18 +91,12 @@ describe('DataDetailComponent', () => {
     spyOn(DataDetailComponent.prototype, 'getItem').and.callThrough();
     fixture = TestBed.createComponent(DataDetailComponent);
     comp = fixture.componentInstance;
-    detailPage = fixture.debugElement;
     translateService.use('foo');
     fixture.detectChanges();
   });
 
   it('should create component', () => expect(comp).toBeDefined());
 
-  it('should have appropriate title', async () => {
-    const title: DebugElement = detailPage.query(By.directive(IonTitle));
-    expect(title!.nativeElement.textContent).toBe('Foo');
-  });
-
   it('should get a data item', () => {
     comp.getItem(sampleThing.uid, false);
     expect(DataDetailComponent.prototype.getItem).toHaveBeenCalledWith(sampleThing.uid, false);

frontend/app/src/app/modules/data/detail/data-detail.component.ts

@@ -45,6 +45,8 @@ export class DataDetailComponent implements OnInit {
    */
   item?: SCThings | null = undefined;
 
+  collapse = false;
+
   @Input() inputItem?: SCThings;
 
   @Input() isModal = false;

frontend/app/src/app/modules/data/detail/data-detail.html

@@ -18,7 +18,12 @@
     <ion-buttons slot="start" *ngIf="!isModal">
       <ion-back-button></ion-back-button>
     </ion-buttons>
-    <ion-title>{{ 'data.detail.TITLE' | translate }}</ion-title>
+    <ion-title
+      *ngIf="item"
+      [style.opacity]="(collapse ? '1' : '0') + '!important'"
+      [style.translate]="collapse ? '0' : '0 10px'"
+      >{{ 'name' | thingTranslate: item }}</ion-title
+    >
     <ion-buttons [slot]="isModal ? 'start' : 'primary'">
       <stapps-share-button *ngIf="item" [title]="'name' | thingTranslate: item"></stapps-share-button>
       <stapps-favorite-button *ngIf="item" [item]="$any(item)"></stapps-favorite-button>
@@ -31,7 +36,12 @@
   </ion-toolbar>
 </ion-header>
 <ng-content select="[header]"></ng-content>
-<ion-content parallax class="ion-no-padding">
+<ion-content
+  parallax
+  class="ion-no-padding"
+  [scrollEvents]="true"
+  (ionScroll)="collapse = $any($event).detail.scrollTop > 50"
+>
   <ng-container [ngSwitch]="true">
     <ng-container *ngSwitchCase="!item && (isDisconnected | async)">
       <div class="centered-message-container">

frontend/app/src/app/modules/data/detail/data-detail.scss

@@ -19,3 +19,7 @@ ion-content > div {
   flex-direction: column;
   min-height: 100%;
 }
+
+ion-title {
+  transition: all 150ms ease;
+}