From 543411433b04e60ae8bc5ceaa64347cc88146f5c Mon Sep 17 00:00:00 2001 From: ABevier Date: Wed, 7 Jun 2023 19:07:42 -0400 Subject: [PATCH] add-confetti (#652) --- modules/desktop/electron/libs/package.ts | 3 +- modules/desktop/package.json | 2 + .../install-result-overlay.svelte | 63 +++++++++ .../package-banner/package-banner.svelte | 2 + .../package-card/package-card.svelte | 124 +++++++++--------- .../package-install-button.svelte | 2 +- .../package-installed-badge.svelte | 2 +- modules/desktop/src/libs/stores/pkgs.ts | 25 ++-- modules/desktop/src/libs/types.ts | 12 ++ modules/desktop/test/specs/app.e2e.ts | 29 ++-- modules/desktop/test/specs/utils.ts | 40 +++--- modules/ui/src/icons/fonts/tea-icons.eot | Bin 13520 -> 14072 bytes modules/ui/src/icons/fonts/tea-icons.svg | 5 + modules/ui/src/icons/fonts/tea-icons.ttf | Bin 13352 -> 13904 bytes modules/ui/src/icons/fonts/tea-icons.woff | Bin 9612 -> 9068 bytes modules/ui/src/icons/icons.css | 15 +++ pnpm-lock.yaml | 12 ++ 17 files changed, 232 insertions(+), 104 deletions(-) create mode 100644 modules/desktop/src/components/install-result-overlay/install-result-overlay.svelte diff --git a/modules/desktop/electron/libs/package.ts b/modules/desktop/electron/libs/package.ts index 5a43153..efb03c6 100644 --- a/modules/desktop/electron/libs/package.ts +++ b/modules/desktop/electron/libs/package.ts @@ -33,7 +33,8 @@ export async function loadPackageCache(): Promise { if (pkgs?.packages) { // Remove any temporary properties that may have been added to the package (like installation progress) for (const [key, value] of Object.entries(pkgs.packages)) { - const { install_progress_percentage, isUninstalling, synced, ...rest } = value; + const { install_progress_percentage, isUninstalling, synced, displayState, ...rest } = + value; pkgs.packages[key] = rest; } } diff --git a/modules/desktop/package.json b/modules/desktop/package.json index 7493683..1370198 100644 --- a/modules/desktop/package.json +++ b/modules/desktop/package.json @@ -44,6 +44,7 @@ "@testing-library/svelte": "^3.2.2", "@testing-library/webdriverio": "^3.2.1", "@types/bcryptjs": "^2.4.2", + "@types/canvas-confetti": "^1.6.0", "@types/js-yaml": "^4.0.5", "@types/mixpanel-browser": "^2.38.1", "@types/testing-library__jest-dom": "^5.14.5", @@ -94,6 +95,7 @@ "axios": "^1.3.2", "bcryptjs": "^2.4.3", "buffer": "^6.0.3", + "canvas-confetti": "^1.6.0", "chokidar": "^3.5.3", "custom-electron-titlebar": "4.2.0-beta.0", "dayjs": "^1.11.7", diff --git a/modules/desktop/src/components/install-result-overlay/install-result-overlay.svelte b/modules/desktop/src/components/install-result-overlay/install-result-overlay.svelte new file mode 100644 index 0000000..6805766 --- /dev/null +++ b/modules/desktop/src/components/install-result-overlay/install-result-overlay.svelte @@ -0,0 +1,63 @@ + + +
+ {#if pkg.displayState?.kind === "INSTALLATION_ERROR"} +
+
+
Install Failed
+
+ +
+ +
+ {/if} +
diff --git a/modules/desktop/src/components/package-banner/package-banner.svelte b/modules/desktop/src/components/package-banner/package-banner.svelte index 8ffd5b2..d592562 100644 --- a/modules/desktop/src/components/package-banner/package-banner.svelte +++ b/modules/desktop/src/components/package-banner/package-banner.svelte @@ -16,6 +16,7 @@ import PackageVersionSelector from "$components/package-install-button/package-version-selector.svelte"; import { fixPackageName } from "$libs/packages/pkg-utils"; import { semverCompare } from "$libs/packages/pkg-utils"; + import InstallResultOverlay from "$components/install-result-overlay/install-result-overlay.svelte"; export let pkg: GUIPackage; let installing = false; @@ -88,6 +89,7 @@ {/if} +
diff --git a/modules/desktop/src/components/package-card/package-card.svelte b/modules/desktop/src/components/package-card/package-card.svelte index b42ff8f..ef96765 100644 --- a/modules/desktop/src/components/package-card/package-card.svelte +++ b/modules/desktop/src/components/package-card/package-card.svelte @@ -7,6 +7,7 @@ import PackageInstallButton from "$components/package-install-button/package-install-button.svelte"; import PackageInstalledBadge from "$components/package-install-button/package-installed-badge.svelte"; import { fixPackageName } from "$libs/packages/pkg-utils"; + import InstallResultOverlay from "$components/install-result-overlay/install-result-overlay.svelte"; export let pkg: GUIPackage; export let link: string; @@ -26,74 +27,77 @@ const preventPropagation = (evt: MouseEvent) => evt.stopPropagation(); -
- +
+
+ - -
-
-
-
view more details
-
+ +
+
+
+
view more details
+
+
-
-
-
- {#if layout === "bottom"} -

- {fixPackageName(pkg.name)} -

-

{pkg.desc ?? ""}

- {:else} -

- {fixPackageName(pkg.name)} -

-

- {pkg.desc ?? ""} -

- {/if} -
-
-
-
- {#if pkg.state === PackageStates.INSTALLED} - - {:else} - { - // prevent default to prevent the link that this button is inside of from being followed - evt?.preventDefault(); - onClickCTA(); - }} - /> - {/if} -
-
- {#if pkg.state === "NEEDS_UPDATE"} - - you have - v{findRecentInstalledVersion(pkg)} - - {/if} +
+
+ {#if layout === "bottom"} +

+ {fixPackageName(pkg.name)} +

+

{pkg.desc ?? ""}

+ {:else} +

+ {fixPackageName(pkg.name)} +

+

+ {pkg.desc ?? ""} +

+ {/if} +
+
+
+
+ {#if pkg.state === PackageStates.INSTALLED} + + {:else} + { + // prevent default to prevent the link that this button is inside of from being followed + evt?.preventDefault(); + onClickCTA(); + }} + /> + {/if} +
+
+ {#if pkg.state === "NEEDS_UPDATE"} + + you have + v{findRecentInstalledVersion(pkg)} + + {/if} +
-
- + - {#if progessLoading > 0 && progessLoading < 100} -
-
- + {#if progessLoading > 0 && progessLoading < 100} +
+
+ +
-
- {/if} -
+ {/if} +
+ +