text spinner component

ui/src/app/pages/apps-routes/app-config/app-config.module.ts

@@ -10,6 +10,7 @@ import { AppConfigObjectPageModule } from 'src/app/modals/app-config-object/app-
 import { AppConfigUnionPageModule } from 'src/app/modals/app-config-union/app-config-union.module'
 import { AppConfigValuePageModule } from 'src/app/modals/app-config-value/app-config-value.module'
 import { SharingModule } from 'src/app/modules/sharing.module'
+import { TextSpinnerComponentModule } from 'src/app/components/text-spinner/text-spinner.component.module'
 
 const routes: Routes = [
   {
@@ -25,6 +26,7 @@ const routes: Routes = [
     AppConfigObjectPageModule,
     AppConfigUnionPageModule,
     AppConfigValuePageModule,
+    TextSpinnerComponentModule,
     SharingModule,
     CommonModule,
     FormsModule,

ui/src/app/pages/apps-routes/app-config/app-config.page.html

@@ -12,14 +12,7 @@
 <ion-content class="ion-padding-top">
 
   <!-- loading -->
-  <ion-grid *ngIf="loadingText; else loaded" style="height: 100%;">
-    <ion-row class="ion-align-items-center ion-text-center" style="height: 100%;">
-      <ion-col>
-        <ion-spinner name="lines" color="warning"></ion-spinner>
-        <p>{{ loadingText }}</p>
-      </ion-col>
-    </ion-row>
-  </ion-grid>
+  <text-spinner *ngIf="loadingText; else loaded" [text]="loadingText"></text-spinner>
 
   <!-- not loading  -->
   <ng-template #loaded>

ui/src/app/pages/marketplace-routes/app-release-notes/app-release-notes.page.ts

@@ -1,5 +1,6 @@
-import { Component } from '@angular/core'
+import { Component, ViewChild } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
+import { IonContent } from '@ionic/angular'
 import { MarketplaceService } from '../marketplace.service'
 
 @Component({
@@ -8,6 +9,7 @@ import { MarketplaceService } from '../marketplace.service'
   styleUrls: ['./app-release-notes.page.scss'],
 })
 export class AppReleaseNotes {
+  @ViewChild(IonContent) content: IonContent
   error = ''
   selected: string
   pkgId: string
@@ -25,6 +27,10 @@ export class AppReleaseNotes {
     }
   }
 
+  ngAfterViewInit () {
+    this.content.scrollToPoint(undefined, 1)
+  }
+
   setSelected (selected: string) {
     if (this.selected === selected) {
       this.selected = null

ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.module.ts

@@ -6,6 +6,7 @@ import { MarketplaceListPage } from './marketplace-list.page'
 import { SharingModule } from '../../../modules/sharing.module'
 import { BadgeMenuComponentModule } from 'src/app/components/badge-menu-button/badge-menu.component.module'
 import { StatusComponentModule } from 'src/app/components/status/status.component.module'
+import { TextSpinnerComponentModule } from 'src/app/components/text-spinner/text-spinner.component.module'
 
 
 const routes: Routes = [
@@ -23,6 +24,7 @@ const routes: Routes = [
     StatusComponentModule,
     SharingModule,
     BadgeMenuComponentModule,
+    TextSpinnerComponentModule,
   ],
   declarations: [MarketplaceListPage],
 })

ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.html

@@ -11,7 +11,7 @@
 </ion-header>
 
 <ion-content class="ion-padding-top">
-  <ion-spinner *ngIf="pageLoading; else pageLoaded" class="center" name="lines" color="warning"></ion-spinner>
+  <text-spinner *ngIf="pageLoading; else pageLoaded" [text]="'loading marketplace'"></text-spinner>
 
   <ng-template #pageLoaded>
 

ui/src/app/pages/marketplace-routes/marketplace-list/marketplace-list.page.ts

@@ -1,8 +1,8 @@
-import { Component } from '@angular/core'
+import { Component, ViewChild } from '@angular/core'
 import { ApiService } from 'src/app/services/api/api.service'
 import { MarketplaceData, MarketplaceEOS, AvailablePreview } from 'src/app/services/api/api-types'
 import { wizardModal } from 'src/app/components/install-wizard/install-wizard.component'
-import { ModalController } from '@ionic/angular'
+import { IonContent, ModalController } from '@ionic/angular'
 import { WizardBaker } from 'src/app/components/install-wizard/prebaked-wizards'
 import { PatchDbModel } from 'src/app/services/patch-db/patch-db.service'
 import { PackageDataEntry, PackageState } from 'src/app/services/patch-db/data-model'
@@ -14,6 +14,7 @@ import { Subscription } from 'rxjs'
   styleUrls: ['./marketplace-list.page.scss'],
 })
 export class MarketplaceListPage {
+  @ViewChild(IonContent) content: IonContent
   pageLoading = true
   pkgsLoading = true
   error = ''
@@ -65,6 +66,10 @@ export class MarketplaceListPage {
     }
   }
 
+  ngAfterViewInit () {
+    this.content.scrollToPoint(undefined, 1)
+  }
+
   ngOnDestroy () {
     this.subs.forEach(sub => sub.unsubscribe())
   }

ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.module.ts

@@ -8,6 +8,7 @@ import { PwaBackComponentModule } from 'src/app/components/pwa-back-button/pwa-b
 import { BadgeMenuComponentModule } from 'src/app/components/badge-menu-button/badge-menu.component.module'
 import { StatusComponentModule } from 'src/app/components/status/status.component.module'
 import { InstallWizardComponentModule } from 'src/app/components/install-wizard/install-wizard.component.module'
+import { TextSpinnerComponentModule } from 'src/app/components/text-spinner/text-spinner.component.module'
 
 const routes: Routes = [
   {
@@ -21,6 +22,7 @@ const routes: Routes = [
     CommonModule,
     IonicModule,
     StatusComponentModule,
+    TextSpinnerComponentModule,
     RouterModule.forChild(routes),
     SharingModule,
     PwaBackComponentModule,

ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.html

@@ -12,7 +12,7 @@
 
 <ion-content class="ion-padding">
 
-  <ion-spinner *ngIf="!marketplaceService.pkgs[pkgId]" class="center" name="lines" color="warning"></ion-spinner>
+  <text-spinner *ngIf="!marketplaceService.pkgs[pkgId]" [text]="'fetching package'"></text-spinner>
 
   <ng-container *ngIf="marketplaceService.pkgs[pkgId] as pkg">
     <ion-item *ngIf="error" style="margin-bottom: 16px;">
@@ -162,7 +162,7 @@
                 </ion-label>
                 <ion-icon slot="end" name="chevron-forward-outline"></ion-icon>
               </ion-item>
-              <ion-item button detail="false" (click)="presentModalMd(pkg.manifest.)">
+              <ion-item button detail="false" (click)="presentModalMd('license')">
                 <ion-label>
                   <h2>License</h2>
                   <p>{{ pkg.manifest.license }}</p>

ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.ts

@@ -1,6 +1,6 @@
-import { Component } from '@angular/core'
+import { Component, ViewChild } from '@angular/core'
 import { ActivatedRoute } from '@angular/router'
-import { AlertController, ModalController, NavController } from '@ionic/angular'
+import { AlertController, IonContent, ModalController, NavController } from '@ionic/angular'
 import { wizardModal } from 'src/app/components/install-wizard/install-wizard.component'
 import { WizardBaker } from 'src/app/components/install-wizard/prebaked-wizards'
 import { Emver } from 'src/app/services/emver.service'
@@ -18,6 +18,7 @@ import { MarkdownPage } from 'src/app/modals/markdown/markdown.page'
   styleUrls: ['./marketplace-show.page.scss'],
 })
 export class MarketplaceShowPage {
+  @ViewChild(IonContent) content: IonContent
   error = ''
   pkgId: string
   installedPkg: PackageDataEntry
@@ -53,6 +54,10 @@ export class MarketplaceShowPage {
     this.getPkg()
   }
 
+  ngAfterViewInit () {
+    this.content.scrollToPoint(undefined, 1)
+  }
+
   ngOnDestroy () {
     this.subs.forEach(sub => sub.unsubscribe())
   }
@@ -95,10 +100,11 @@ export class MarketplaceShowPage {
     await alert.present()
   }
 
-  async presentModalMd (content: string) {
+  async presentModalMd (title: string) {
     const modal = await this.modalCtrl.create({
       componentProps: {
-        content,
+        title,
+        contentUrl: this.marketplaceService.pkgs[this.pkgId][title],
       },
       component: MarkdownPage,
     })