@let installed = installedInfo$ | async;
-
-
![App icon]()
-
-
{{ item.title }}
-
+
diff --git a/src/app/apps/details/details.component.scss b/src/app/apps/details/details.component.scss
index 5e537a6b..f75fd044 100644
--- a/src/app/apps/details/details.component.scss
+++ b/src/app/apps/details/details.component.scss
@@ -1,12 +1,21 @@
+app-channel-app-details {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ min-height: 0;
+}
+
.full-description {
img {
max-width: 100%;
}
}
-.app-details-icon {
- max-width: 25vw;
- max-height: 25vw;
- height: auto;
- object-fit: contain;
+.hero-icon {
+ border-radius: 0.75rem;
+ flex: 0 0 auto;
+}
+
+.detail-footer {
+ flex: 0 0 auto;
}
diff --git a/src/app/apps/details/details.component.ts b/src/app/apps/details/details.component.ts
index 24fe8691..a4bc9084 100644
--- a/src/app/apps/details/details.component.ts
+++ b/src/app/apps/details/details.component.ts
@@ -1,10 +1,10 @@
-import {Component, ElementRef, Inject, OnDestroy, OnInit, Renderer2, ViewChild, ViewEncapsulation, ChangeDetectionStrategy} from '@angular/core';
-import {AppManagerService, IncompatibleReason, PackageManifest, RepositoryItem} from "../../core/services";
+import {ChangeDetectionStrategy, Component, ElementRef, Inject, OnDestroy, OnInit, Renderer2, ViewChild, ViewEncapsulation} from '@angular/core';
+import {AppManagerService, DeviceManagerService, IncompatibleReason, PackageManifest, RepositoryItem} from "../../core/services";
import {noop, Observable, of} from "rxjs";
-import { AsyncPipe, NgOptimizedImage } from "@angular/common";
+import {AsyncPipe, NgOptimizedImage} from "@angular/common";
import {open as openPath} from "@tauri-apps/plugin-shell";
import {
- NgbActiveModal,
+ NgbActiveOffcanvas,
NgbDropdown,
NgbDropdownItem,
NgbDropdownMenu,
@@ -19,15 +19,15 @@ import {ExternalLinkDirective} from "../../shared/directives";
@Component({
selector: 'app-channel-app-details',
imports: [
- AsyncPipe,
- NgOptimizedImage,
- NgbDropdown,
- NgbDropdownItem,
- NgbDropdownMenu,
- NgbDropdownToggle,
- SharedModule,
- ExternalLinkDirective
-],
+ AsyncPipe,
+ NgOptimizedImage,
+ NgbDropdown,
+ NgbDropdownItem,
+ NgbDropdownMenu,
+ NgbDropdownToggle,
+ SharedModule,
+ ExternalLinkDirective
+ ],
templateUrl: './details.component.html',
styleUrl: './details.component.scss',
changeDetection: ChangeDetectionStrategy.Eager,
@@ -38,27 +38,42 @@ export class DetailsComponent implements OnInit, OnDestroy {
fullDescriptionHtml$: Observable
;
installedInfo$?: Observable;
- incompatible$: Observable;
+ incompatible$!: Observable;
+ devices$: Observable;
+ selectedDevice: Device;
@ViewChild('fullDescription', {static: true})
fullDescription!: ElementRef;
- parent?: AppsComponent;
-
-
private unsubscribeClickListener!: () => void;
constructor(
- public modal: NgbActiveModal,
+ public offcanvas: NgbActiveOffcanvas,
public item: RepositoryItem,
@Inject('device') public device: Device,
+ @Inject('parent') private parent: AppsComponent,
private appManager: AppManagerService,
+ private deviceManager: DeviceManagerService,
private renderer2: Renderer2
) {
this.manifest = item.manifest!;
- this.incompatible$ = fromPromise(this.appManager.checkIncompatibility(device, item));
+ this.selectedDevice = device;
+ this.devices$ = this.deviceManager.devices$;
this.fullDescriptionHtml$ = item.fullDescriptionUrl ? fromPromise(fetch(item.fullDescriptionUrl)
.then(resp => resp.text())) : of('');
+ this.refreshForDevice();
+ }
+
+ onDeviceChange(name: string): void {
+ let next: Device | undefined;
+ this.devices$.subscribe(devices => next = devices?.find(d => d.name === name)).unsubscribe();
+ if (!next) return;
+ this.selectedDevice = next;
+ this.refreshForDevice();
+ }
+
+ private refreshForDevice(): void {
+ this.incompatible$ = fromPromise(this.appManager.checkIncompatibility(this.selectedDevice, this.item));
this.reloadInstalledInfo();
}
@@ -75,15 +90,20 @@ export class DetailsComponent implements OnInit, OnDestroy {
this.unsubscribeClickListener();
}
+ launchApp(id: string) {
+ this.parent.launchApp(id);
+ }
+
installPackage(item: RepositoryItem, channel: 'stable' | 'beta' = 'stable') {
- this.parent?.installPackage(item, channel).then((installed) => installed && this.reloadInstalledInfo());
+ this.parent.installPackage(item, channel, this.selectedDevice)
+ .then((installed) => installed && this.reloadInstalledInfo());
}
removePackage(item: PackageInfo) {
- this.parent?.removePackage(item).then((removed) => removed && this.reloadInstalledInfo());
+ this.parent.removePackage(item).then((removed) => removed && this.reloadInstalledInfo());
}
private reloadInstalledInfo(): void {
- this.installedInfo$ = fromPromise(this.appManager.info(this.device, this.item.id));
+ this.installedInfo$ = fromPromise(this.appManager.info(this.selectedDevice, this.item.id));
}
}
diff --git a/src/app/apps/installed/details/details.component.html b/src/app/apps/installed/details/details.component.html
new file mode 100644
index 00000000..6dbae694
--- /dev/null
+++ b/src/app/apps/installed/details/details.component.html
@@ -0,0 +1,68 @@
+
+
+
+ @if (pkg.appDescription) {
+
About
+
{{ pkg.appDescription }}
+ }
+
Details
+
+ - App ID
+ {{ pkg.id }}- Vendor
+ - {{ pkg.vendor }}
+ }
+ @if (pkg.type) {
+ - Type
+ - {{ pkg.type }}
+ }
+ - Path
+ {{ pkg.folderPath }}- Disk usage
+ -
+ @let du = diskUsage$ | async;
+ @if (!du || (!du.result && !du.error)) {
+ Calculating…
+ } @else if (du.error) {
+ Unavailable
+ } @else if (du.result) {
+ {{ du.result.total * 1024 | filesize:sizeOptions }}
+ }
+
+ @if (sourceUrl) {
+ - Website
+ -
+ {{ sourceUrl }}
+
+ }
+
+
+
- @for (pkg of installed; track pkg.id) {
- -
-
-
-
![]()
-
-
{{ pkg.title }}
-
- v{{ pkg.version }}
- @let rpkg = repoPackages && repoPackages[pkg.id];
- @if (rpkg && rpkg.manifest?.hasUpdate(pkg.version)) {
- › v{{ rpkg.manifest?.version }}
- }
-
-
-
+
+
+
+ @if (selectedPkg && device) {
+
+ } @else {
+
+
+
Select an installed app to see details
+
+
+
+
+