From 040bd527054dc7146cf41af591014f61c985be1c Mon Sep 17 00:00:00 2001
From: Matt Hill <MattDHill@users.noreply.github.com>
Date: Mon, 28 Nov 2022 11:46:53 -0700
Subject: [PATCH] revert app show to use header and fix back button (#1984)

---
 .../apps-routes/app-show/app-show.module.ts   |  2 ++
 .../apps-routes/app-show/app-show.page.html   | 25 ++++++-------------
 .../app-show-header.component.html            | 21 ++++++++++++++++
 .../app-show-header.component.scss            |  3 +++
 .../app-show-header.component.ts              | 13 ++++++++++
 frontend/projects/ui/src/styles.scss          | 11 +++++++-
 6 files changed, 56 insertions(+), 19 deletions(-)
 create mode 100644 frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-header/app-show-header.component.html
 create mode 100644 frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-header/app-show-header.component.scss
 create mode 100644 frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-header/app-show-header.component.ts

diff --git a/frontend/projects/ui/src/app/pages/apps-routes/app-show/app-show.module.ts b/frontend/projects/ui/src/app/pages/apps-routes/app-show/app-show.module.ts
index 5a8429a52..d338e9a81 100644
--- a/frontend/projects/ui/src/app/pages/apps-routes/app-show/app-show.module.ts
+++ b/frontend/projects/ui/src/app/pages/apps-routes/app-show/app-show.module.ts
@@ -8,6 +8,7 @@ import { StatusComponentModule } from 'src/app/components/status/status.componen
 import { AppConfigPageModule } from 'src/app/modals/app-config/app-config.module'
 import { LaunchablePipeModule } from 'src/app/pipes/launchable/launchable.module'
 import { UiPipeModule } from 'src/app/pipes/ui/ui.module'
+import { AppShowHeaderComponent } from './components/app-show-header/app-show-header.component'
 import { AppShowProgressComponent } from './components/app-show-progress/app-show-progress.component'
 import { AppShowStatusComponent } from './components/app-show-status/app-show-status.component'
 import { AppShowDependenciesComponent } from './components/app-show-dependencies/app-show-dependencies.component'
@@ -37,6 +38,7 @@ const routes: Routes = [
     ToButtonsPipe,
     ToDependenciesPipe,
     ToStatusPipe,
+    AppShowHeaderComponent,
     AppShowProgressComponent,
     AppShowStatusComponent,
     AppShowDependenciesComponent,
diff --git a/frontend/projects/ui/src/app/pages/apps-routes/app-show/app-show.page.html b/frontend/projects/ui/src/app/pages/apps-routes/app-show/app-show.page.html
index 99567b315..0953653cb 100644
--- a/frontend/projects/ui/src/app/pages/apps-routes/app-show/app-show.page.html
+++ b/frontend/projects/ui/src/app/pages/apps-routes/app-show/app-show.page.html
@@ -1,20 +1,9 @@
-<ion-header>
-  <ion-toolbar>
-    <ion-buttons slot="start">
-      <ion-back-button defaultHref="services"></ion-back-button>
-    </ion-buttons>
-    <ion-title>Service Details</ion-title>
-  </ion-toolbar>
-</ion-header>
-
-<ion-content class="ion-padding">
-  <ng-container *ngIf="pkg$ | async as pkg">
-    <div class="ion-text-center ion-padding-top">
-      <img [src]="pkg['static-files'].icon" alt="" style="width: 84px" />
-      <h1>{{ pkg.manifest.title }}</h1>
-      <h4>{{ pkg.manifest.version | displayEmver }}</h4>
-    </div>
+<ng-container *ngIf="pkg$ | async as pkg">
+  <!-- header -->
+  <app-show-header [pkg]="pkg"></app-show-header>
 
+  <!-- content -->
+  <ion-content class="ion-padding">
     <!-- ** installing, updating, restoring ** -->
     <ng-container *ngIf="showProgress(pkg); else installed">
       <app-show-progress
@@ -86,5 +75,5 @@
         </ion-grid>
       </ng-template>
     </ng-template>
-  </ng-container>
-</ion-content>
+  </ion-content>
+</ng-container>
diff --git a/frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-header/app-show-header.component.html b/frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-header/app-show-header.component.html
new file mode 100644
index 000000000..cd90592fb
--- /dev/null
+++ b/frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-header/app-show-header.component.html
@@ -0,0 +1,21 @@
+<ion-header>
+  <ion-toolbar>
+    <ion-buttons slot="start">
+      <ion-back-button defaultHref="services"></ion-back-button>
+    </ion-buttons>
+    <ion-item lines="none" color="light">
+      <ion-thumbnail slot="start">
+        <img [src]="pkg['static-files'].icon" alt="" />
+      </ion-thumbnail>
+      <ion-label>
+        <h1
+          class="montserrat"
+          [class.less-large]="pkg.manifest.title.length > 20"
+        >
+          {{ pkg.manifest.title }}
+        </h1>
+        <h2>{{ pkg.manifest.version | displayEmver }}</h2>
+      </ion-label>
+    </ion-item>
+  </ion-toolbar>
+</ion-header>
diff --git a/frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-header/app-show-header.component.scss b/frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-header/app-show-header.component.scss
new file mode 100644
index 000000000..ff3ff0ceb
--- /dev/null
+++ b/frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-header/app-show-header.component.scss
@@ -0,0 +1,3 @@
+.less-large {
+  font-size: 18px !important;
+}
\ No newline at end of file
diff --git a/frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-header/app-show-header.component.ts b/frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-header/app-show-header.component.ts
new file mode 100644
index 000000000..fd234a9e9
--- /dev/null
+++ b/frontend/projects/ui/src/app/pages/apps-routes/app-show/components/app-show-header/app-show-header.component.ts
@@ -0,0 +1,13 @@
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
+import { PackageDataEntry } from 'src/app/services/patch-db/data-model'
+
+@Component({
+  selector: 'app-show-header',
+  templateUrl: './app-show-header.component.html',
+  styleUrls: ['./app-show-header.component.scss'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class AppShowHeaderComponent {
+  @Input()
+  pkg!: PackageDataEntry
+}
diff --git a/frontend/projects/ui/src/styles.scss b/frontend/projects/ui/src/styles.scss
index eaaf238c1..e7bdfb8fc 100644
--- a/frontend/projects/ui/src/styles.scss
+++ b/frontend/projects/ui/src/styles.scss
@@ -157,8 +157,17 @@ img {
 
 ion-back-button {
   margin-left: 16px;
+  height: 36px;
+  width: 36px;
+  --min-height: 0;
+  --min-width: 0;
+  min-width: 0;
+  --icon-font-size: 36px;
   &::part(native) {
-    border: 1px solid white;
+    border: 1px solid gray;
+  }
+  &::part(icon) {
+    min-width: 20px;
   }
 }