From ac5f58a3bb57fc331fd69a416606cfc915cb4d5c Mon Sep 17 00:00:00 2001 From: Luca Stocchi <49404737+lstocchi@users.noreply.github.com> Date: Mon, 13 May 2024 09:12:25 +0200 Subject: [PATCH] fix: provider card UI on dashboard (#7082) * fix: provider card UI on dashboard Signed-off-by: lstocchi * fix: move update button to left and reduce padding/margin Signed-off-by: lstocchi --------- Signed-off-by: lstocchi --- .../src/lib/dashboard/ProviderCard.svelte | 10 +- .../lib/dashboard/ProviderConfigured.svelte | 27 +++-- .../lib/dashboard/ProviderConfiguring.svelte | 14 +-- .../lib/dashboard/ProviderInstalled.svelte | 102 +++++++++--------- .../lib/dashboard/ProviderNotInstalled.svelte | 4 +- .../src/lib/dashboard/ProviderReady.svelte | 12 +-- .../lib/dashboard/ProviderUpdateButton.svelte | 1 + 7 files changed, 88 insertions(+), 82 deletions(-) diff --git a/packages/renderer/src/lib/dashboard/ProviderCard.svelte b/packages/renderer/src/lib/dashboard/ProviderCard.svelte index 22e2ccfba0b8..2ba1273636f2 100644 --- a/packages/renderer/src/lib/dashboard/ProviderCard.svelte +++ b/packages/renderer/src/lib/dashboard/ProviderCard.svelte @@ -11,8 +11,8 @@ export let provider: ProviderInfo; class="flex bg-charcoal-800 rounded-md p-5 gap-3 flex-col flex-nowrap" role="region" aria-label="{provider.name} Provider"> -
-
+
+
@@ -26,11 +26,15 @@ export let provider: ProviderInfo;
+
+ +
-
+
+
diff --git a/packages/renderer/src/lib/dashboard/ProviderConfigured.svelte b/packages/renderer/src/lib/dashboard/ProviderConfigured.svelte index fc25cf808a9c..146ae843b238 100644 --- a/packages/renderer/src/lib/dashboard/ProviderConfigured.svelte +++ b/packages/renderer/src/lib/dashboard/ProviderConfigured.svelte @@ -54,26 +54,25 @@ onMount(() => { -

- To start working with containers, {provider.name} - {#if provider.version} - v{provider.version} - {/if} needs to be started. -

- {#if !runAtStart && !runInProgress} -
+

+ To start working with containers, {provider.name} + {#if provider.version} + v{provider.version} + {/if} needs to be started. +

+
{/if} {#if runAtStart || runInProgress} -
+
{#if initializationContext.mode === InitializeAndStartMode} {/if} -
+
Starting
@@ -86,11 +85,11 @@ onMount(() => { {/if} + + + {#if provider.updateInfo?.version && provider.version !== provider.updateInfo?.version} -
- -
+ {/if} - diff --git a/packages/renderer/src/lib/dashboard/ProviderConfiguring.svelte b/packages/renderer/src/lib/dashboard/ProviderConfiguring.svelte index f2fed5620690..af343fe4eee1 100644 --- a/packages/renderer/src/lib/dashboard/ProviderConfiguring.svelte +++ b/packages/renderer/src/lib/dashboard/ProviderConfiguring.svelte @@ -87,11 +87,11 @@ onDestroy(() => { -
+
{#if initializationContext.mode === InitializeAndStartMode} {/if} -
+
Initializing
@@ -107,11 +107,11 @@ onDestroy(() => { bind:this="{logsXtermDiv}">
- {#if provider.updateInfo} -
- -
- {/if} + + {#if provider.updateInfo?.version && provider.version !== provider.updateInfo?.version} + + {/if} + diff --git a/packages/renderer/src/lib/dashboard/ProviderInstalled.svelte b/packages/renderer/src/lib/dashboard/ProviderInstalled.svelte index 110bc3441245..305c43a8876f 100644 --- a/packages/renderer/src/lib/dashboard/ProviderInstalled.svelte +++ b/packages/renderer/src/lib/dashboard/ProviderInstalled.svelte @@ -135,58 +135,60 @@ function onInstallationClick() { -

+

To start working with containers, {provider.name} needs to be initialized.

-
-
- - -
-
-
    -
  • - -
    • -
  • - -
    • -
+
+
+
+ + +
+
+
    +
  • + +
    • +
  • + +
    • +
+
-
+
{#if installationOptionSelected === InitializeAndStartMode} {/if} @@ -206,11 +208,11 @@ function onInstallationClick() { bind:this="{logsXtermDiv}">
+ + + {#if provider.updateInfo?.version && provider.version !== provider.updateInfo?.version} -
- -
+ {/if} - diff --git a/packages/renderer/src/lib/dashboard/ProviderNotInstalled.svelte b/packages/renderer/src/lib/dashboard/ProviderNotInstalled.svelte index 109479b3216f..a487a833adb4 100644 --- a/packages/renderer/src/lib/dashboard/ProviderNotInstalled.svelte +++ b/packages/renderer/src/lib/dashboard/ProviderNotInstalled.svelte @@ -17,10 +17,10 @@ let preflightChecks: CheckStatus[] = [];
-

+

Could not find an installation. To start working with containers, {provider.name} needs to be detected/installed.

-
+
diff --git a/packages/renderer/src/lib/dashboard/ProviderReady.svelte b/packages/renderer/src/lib/dashboard/ProviderReady.svelte index 2de3a6c62309..a210017007bd 100644 --- a/packages/renderer/src/lib/dashboard/ProviderReady.svelte +++ b/packages/renderer/src/lib/dashboard/ProviderReady.svelte @@ -13,20 +13,20 @@ let preflightChecks: CheckStatus[] = []; {#if provider.containerConnections.length > 0} -
+

{provider.containerConnections.map(c => c.name).join(', ')}

{/if} - {#if provider.updateInfo?.version && provider.version !== provider.updateInfo?.version} -
- -
- {/if} + + {#if provider.updateInfo?.version && provider.version !== provider.updateInfo?.version} + + {/if} + diff --git a/packages/renderer/src/lib/dashboard/ProviderUpdateButton.svelte b/packages/renderer/src/lib/dashboard/ProviderUpdateButton.svelte index 46ee8edda15d..02a57ac0aa92 100644 --- a/packages/renderer/src/lib/dashboard/ProviderUpdateButton.svelte +++ b/packages/renderer/src/lib/dashboard/ProviderUpdateButton.svelte @@ -55,6 +55,7 @@ async function performUpdate(provider: ProviderInfo) { inProgress="{updateInProgress}" disabled="{preflightChecksFailed}" icon="{faBoxOpen}" + padding="px-3 py-0.5" on:click="{() => performUpdate(provider)}"> Update to {provider.updateInfo.version}