diff --git a/ui/src/app/components/status/status.component.html b/ui/src/app/components/status/status.component.html index ed8323acb..f1e4a8d6c 100644 --- a/ui/src/app/components/status/status.component.html +++ b/ui/src/app/components/status/status.component.html @@ -6,15 +6,14 @@ > {{ disconnected ? 'Unknown' : rendering.display }} - + ... - Installing - {{ installProgress }}% + Installing... {{ installProgress }}% - Finalizing install. This could take a minute + Finalizing install. This could take a minute... diff --git a/ui/src/app/components/status/status.component.scss b/ui/src/app/components/status/status.component.scss index fa7ddb2a7..e69de29bb 100644 --- a/ui/src/app/components/status/status.component.scss +++ b/ui/src/app/components/status/status.component.scss @@ -1,4 +0,0 @@ -.dots { - position: absolute; - bottom: 3px; -} \ No newline at end of file diff --git a/ui/src/app/pages/apps-routes/app-list/app-list-icon/app-list-icon.component.scss b/ui/src/app/pages/apps-routes/app-list/app-list-icon/app-list-icon.component.scss index 07f9ae8ee..c4b5c04ad 100644 --- a/ui/src/app/pages/apps-routes/app-list/app-list-icon/app-list-icon.component.scss +++ b/ui/src/app/pages/apps-routes/app-list/app-list-icon/app-list-icon.component.scss @@ -15,7 +15,7 @@ .warning-icon { position: absolute !important; left: 6px !important; - top: 0 !important; + top: 6px !important; font-size: 12px; border-radius: 100%; padding: 1px; diff --git a/ui/src/app/pages/apps-routes/app-list/app-list-icon/app-list-icon.component.ts b/ui/src/app/pages/apps-routes/app-list/app-list-icon/app-list-icon.component.ts index bc1ea9184..b48b2dd51 100644 --- a/ui/src/app/pages/apps-routes/app-list/app-list-icon/app-list-icon.component.ts +++ b/ui/src/app/pages/apps-routes/app-list/app-list-icon/app-list-icon.component.ts @@ -1,22 +1,22 @@ -import { ChangeDetectionStrategy, Component, Input } from "@angular/core"; -import { PkgInfo } from "src/app/util/get-package-info"; +import { ChangeDetectionStrategy, Component, Input } from '@angular/core' +import { PkgInfo } from 'src/app/util/get-package-info' @Component({ - selector: "app-list-icon", - templateUrl: "app-list-icon.component.html", - styleUrls: ["app-list-icon.component.scss"], + selector: 'app-list-icon', + templateUrl: 'app-list-icon.component.html', + styleUrls: ['app-list-icon.component.scss'], changeDetection: ChangeDetectionStrategy.OnPush, }) export class AppListIconComponent { @Input() - pkg: PkgInfo; + pkg: PkgInfo @Input() - connectionFailure = false; + connectionFailure = false - get color(): string { + get color (): string { return this.connectionFailure - ? "var(--ion-color-dark)" - : "var(--ion-color-" + this.pkg.primaryRendering.color + ")"; + ? 'var(--ion-color-dark)' + : 'var(--ion-color-' + this.pkg.primaryRendering.color + ')' } } diff --git a/ui/src/app/pages/apps-routes/app-list/app-list-reorder/app-list-reorder.component.html b/ui/src/app/pages/apps-routes/app-list/app-list-reorder/app-list-reorder.component.html index 635fbf06e..c85849b82 100644 --- a/ui/src/app/pages/apps-routes/app-list/app-list-reorder/app-list-reorder.component.html +++ b/ui/src/app/pages/apps-routes/app-list/app-list-reorder/app-list-reorder.component.html @@ -14,7 +14,7 @@ - + Update Available

- {{ localPkg.state | titlecase }}... + {{ (localPkg['install-progress'] | installState).display }}

diff --git a/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.html b/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.html index 5983cebca..9aeb5d347 100644 --- a/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.html +++ b/ui/src/app/pages/marketplace-routes/marketplace-show/marketplace-show.page.html @@ -32,7 +32,7 @@

- {{ localPkg.state | titlecase }}...{{ (localPkg['install-progress'] | installState).display }} + {{ (localPkg['install-progress'] | installState).display }}

diff --git a/ui/src/app/pipes/install-state.pipe.ts b/ui/src/app/pipes/install-state.pipe.ts index e186dfd47..0bdffcaaf 100644 --- a/ui/src/app/pipes/install-state.pipe.ts +++ b/ui/src/app/pipes/install-state.pipe.ts @@ -1,6 +1,6 @@ import { Pipe, PipeTransform } from '@angular/core' import { InstallProgress } from '../services/patch-db/data-model' -import { packageLoadingProgress, ProgressData } from '../util/package-loading-progress'; +import { packageLoadingProgress, ProgressData } from '../util/package-loading-progress' @Pipe({ name: 'installState', diff --git a/ui/src/app/services/api/embassy-mock-api.service.ts b/ui/src/app/services/api/embassy-mock-api.service.ts index 1850417b4..b5f8f068f 100644 --- a/ui/src/app/services/api/embassy-mock-api.service.ts +++ b/ui/src/app/services/api/embassy-mock-api.service.ts @@ -646,38 +646,29 @@ export class MockApiService extends ApiService { if (i === initialProgress.size) { initialProgress[phase.completion] = true } - let patch: any - if (initialProgress['unpack-complete']) { - patch = [ - { - op: PatchOp.REMOVE, - path: `/package-data/${id}/install-progress`, - }, - // { - // op: PatchOp.REMOVE, - // path: `/recovered-packages/${id}`, - // } as RemoveOperation, - ] - } else { - patch = [ - { - op: PatchOp.REPLACE, - path: `/package-data/${id}/install-progress`, - value: initialProgress, - }, - ] - } + + const patch = [ + { + op: PatchOp.REPLACE, + path: `/package-data/${id}/install-progress`, + value: initialProgress, + }, + ] this.updateMock(patch) } } setTimeout(() => { - const patch2 = [ + const patch2: any = [ { op: PatchOp.REPLACE, path: `/package-data/${id}`, value: Mock.LocalPkgs[id], }, + { + op: PatchOp.REMOVE, + path: `/package-data/${id}/install-progress`, + }, ] this.updateMock(patch2) }, 1000) diff --git a/ui/src/app/util/package-loading-progress.ts b/ui/src/app/util/package-loading-progress.ts index 7a0da7cf0..2a7d08133 100644 --- a/ui/src/app/util/package-loading-progress.ts +++ b/ui/src/app/util/package-loading-progress.ts @@ -28,17 +28,19 @@ export function packageLoadingProgress ( unpackWeight * unpacked, ) + const denominator = Math.floor( size * (downloadWeight + validateWeight + unpackWeight), ) const totalProgress = Math.floor(100 * numerator / denominator) + return { totalProgress, downloadProgress: Math.floor((100 * downloaded) / size), validateProgress: Math.floor((100 * validated) / size), unpackProgress: Math.floor((100 * unpacked) / size), isComplete: downloadComplete && validationComplete && unpackComplete, - display: totalProgress > 98 ? 'Finalizing' : `${totalProgress}%`, + display: totalProgress > 98 ? 'Finalizing...' : `Installing... ${totalProgress}%`, } }