From 0ca1521a5813ebad8434546c98f2d799c2f96925 Mon Sep 17 00:00:00 2001 From: Peter Clement Date: Tue, 24 Jan 2023 15:24:29 +0000 Subject: [PATCH] css updates to dropdown component --- .../bbui/src/Form/Core/EnvDropdown.svelte | 69 ++++++++++--------- .../IntegrationConfigForm.svelte | 1 - .../CreateEditVariableModal.svelte | 4 ++ 3 files changed, 42 insertions(+), 32 deletions(-) diff --git a/packages/bbui/src/Form/Core/EnvDropdown.svelte b/packages/bbui/src/Form/Core/EnvDropdown.svelte index 9b6346a8e1..e3cb33f555 100644 --- a/packages/bbui/src/Form/Core/EnvDropdown.svelte +++ b/packages/bbui/src/Form/Core/EnvDropdown.svelte @@ -3,7 +3,6 @@ import { createEventDispatcher, onMount } from "svelte" import clickOutside from "../../Actions/click_outside" import Divider from "../../Divider/Divider.svelte" - import Body from "../../Typography/Body.svelte" export let value = null export let placeholder = null export let type = "text" @@ -16,11 +15,12 @@ export let autofocus = false export let variables export let showModal - $: console.log(showModal) + const dispatch = createEventDispatcher() let field let focus = false + let iconFocused = false let open = false const updateValue = newValue => { @@ -69,14 +69,15 @@ if (open) { event.stopPropagation() open = false + focus = false + iconFocused = false dispatch("closed") } } const handleVarSelect = variable => { - console.log(variable) open = false - updateValue(`{{ ${variable} }}`) + updateValue(`{{ env.${variable} }}`) } onMount(() => { @@ -86,15 +87,17 @@
-
+
@@ -127,7 +130,11 @@ use:clickOutside={handleOutsideClick} class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open" > -
    +
      {#if variables.length} {#each variables as variable, idx}
    • {/each} {:else} -
    • - -
      - You don't have any environment variables yet -
      -       -
      • +
      + You don't have any environment variables yet +
      {/if}
    -
    +
    showModal()} class="add-variable"> -
    showModal()} class="primary-text"> - Add Variable -
    +
    Add Variable
    {/if} @@ -209,12 +210,6 @@ min-width: 0; width: 100%; } - .spectrum-InputGroup :global(.spectrum-Search-input) { - border: none; - border-bottom: 1px solid var(--spectrum-global-color-gray-300); - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - } .spectrum-Popover { max-height: 240px; @@ -226,10 +221,13 @@ width: 100%; } - /* Fix focus borders to show only when opened */ - .spectrum-Textfield-input { - border-color: var(--spectrum-global-color-gray-400) !important; - border-right-width: 1px; + .no-variables-height { + height: 100px; + } + + .no-variables-text { + padding: var(--spacing-m); + color: var(--spectrum-global-color-gray-600); } .add-variable { @@ -237,5 +235,14 @@ padding: var(--spacing-m) 0 var(--spacing-m) var(--spacing-m); align-items: center; gap: var(--spacing-s); + cursor: pointer; + } + + .focused { + color: var(--spectrum-global-color-blue-400); + } + + .add-variable:hover { + background: var(--grey-1); } diff --git a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte index fab633ffa2..f960c63c08 100644 --- a/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte +++ b/packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte @@ -124,7 +124,6 @@ { try { environment.deleteVariable(name) + modalContext.hide() notifications.success("Environment variable deleted") } catch (err) { notifications.error(err.message)