diff --git a/extensions/vscode/webviews/homeView/src/components/EvenEasierDeploy.vue b/extensions/vscode/webviews/homeView/src/components/EvenEasierDeploy.vue index b7fd1c854..d198f3332 100644 --- a/extensions/vscode/webviews/homeView/src/components/EvenEasierDeploy.vue +++ b/extensions/vscode/webviews/homeView/src/components/EvenEasierDeploy.vue @@ -18,7 +18,7 @@
@@ -241,7 +241,7 @@ import { filterConfigurationsToValidAndType } from "../../../../src/utils/filter import { useHostConduitService } from "src/HostConduitService"; import { useHomeStore } from "src/stores/home"; -import QuickPickItem from "src/components/QuickPickItem.vue"; +import QuickPickItem, { IconDetail } from "src/components/QuickPickItem.vue"; import ActionToolbar from "src/components/ActionToolbar.vue"; import DeployButton from "src/components/DeployButton.vue"; import TextStringWithAnchor from "./TextStringWithAnchor.vue"; @@ -343,13 +343,13 @@ const deploymentTitle = computed(() => { return result.title; }); -const deploymentSubTitles = computed(() => { - const subTitles: string[] = []; - subTitles.push(credentialSubTitle.value); +const deploymentDetails = computed(() => { + const details: IconDetail[] = []; + details.push({ icon: "codicon-server", text: credentialSubTitle.value }); if (entrypointSubTitle.value) { - subTitles.push(entrypointSubTitle.value); + details.push({ icon: "codicon-file", text: entrypointSubTitle.value }); } - return subTitles; + return details; }); const credentialSubTitle = computed(() => { diff --git a/extensions/vscode/webviews/homeView/src/components/QuickPickItem.vue b/extensions/vscode/webviews/homeView/src/components/QuickPickItem.vue index f191d929e..a98c960e1 100644 --- a/extensions/vscode/webviews/homeView/src/components/QuickPickItem.vue +++ b/extensions/vscode/webviews/homeView/src/components/QuickPickItem.vue @@ -12,16 +12,25 @@
- {{ detail }} +
+
+ {{ detail.text }} +
+ {{ detail }}
@@ -42,7 +51,7 @@ defineProps<{ .quick-pick-label-container { .quick-pick-label { font-weight: 600; - padding-bottom: 4px; + margin-bottom: 4px; } } } @@ -85,6 +94,14 @@ defineProps<{ overflow: hidden; text-overflow: ellipsis; white-space: pre; + + &:not(:last-child) { + margin-bottom: 2px; + } + + .quick-pick-icon { + font-size: var(--vscode-font-size); + } } } }