css updates to dropdown component
This commit is contained in:
parent
63d882efc6
commit
0ca1521a58
3 changed files with 42 additions and 32 deletions
|
@ -3,7 +3,6 @@
|
||||||
import { createEventDispatcher, onMount } from "svelte"
|
import { createEventDispatcher, onMount } from "svelte"
|
||||||
import clickOutside from "../../Actions/click_outside"
|
import clickOutside from "../../Actions/click_outside"
|
||||||
import Divider from "../../Divider/Divider.svelte"
|
import Divider from "../../Divider/Divider.svelte"
|
||||||
import Body from "../../Typography/Body.svelte"
|
|
||||||
export let value = null
|
export let value = null
|
||||||
export let placeholder = null
|
export let placeholder = null
|
||||||
export let type = "text"
|
export let type = "text"
|
||||||
|
@ -16,11 +15,12 @@
|
||||||
export let autofocus = false
|
export let autofocus = false
|
||||||
export let variables
|
export let variables
|
||||||
export let showModal
|
export let showModal
|
||||||
$: console.log(showModal)
|
|
||||||
const dispatch = createEventDispatcher()
|
const dispatch = createEventDispatcher()
|
||||||
|
|
||||||
let field
|
let field
|
||||||
let focus = false
|
let focus = false
|
||||||
|
let iconFocused = false
|
||||||
let open = false
|
let open = false
|
||||||
|
|
||||||
const updateValue = newValue => {
|
const updateValue = newValue => {
|
||||||
|
@ -69,14 +69,15 @@
|
||||||
if (open) {
|
if (open) {
|
||||||
event.stopPropagation()
|
event.stopPropagation()
|
||||||
open = false
|
open = false
|
||||||
|
focus = false
|
||||||
|
iconFocused = false
|
||||||
dispatch("closed")
|
dispatch("closed")
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleVarSelect = variable => {
|
const handleVarSelect = variable => {
|
||||||
console.log(variable)
|
|
||||||
open = false
|
open = false
|
||||||
updateValue(`{{ ${variable} }}`)
|
updateValue(`{{ env.${variable} }}`)
|
||||||
}
|
}
|
||||||
|
|
||||||
onMount(() => {
|
onMount(() => {
|
||||||
|
@ -86,15 +87,17 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="spectrum-InputGroup">
|
<div class="spectrum-InputGroup">
|
||||||
<div
|
<div class:is-focused={focus} class="spectrum-Textfield ">
|
||||||
class:is-focused={focus}
|
|
||||||
class="spectrum-Textfield spectrum-InputGroup-textfield "
|
|
||||||
>
|
|
||||||
<svg
|
<svg
|
||||||
|
class:focused={iconFocused}
|
||||||
class="hoverable icon-position spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon"
|
class="hoverable icon-position spectrum-Icon spectrum-Icon--sizeM spectrum-Textfield-validationIcon"
|
||||||
focusable="false"
|
focusable="false"
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
on:click={() => (open = true)}
|
on:click={() => {
|
||||||
|
open = true
|
||||||
|
focus = true
|
||||||
|
iconFocused = true
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<use xlink:href="#spectrum-icon-18-Key" />
|
<use xlink:href="#spectrum-icon-18-Key" />
|
||||||
</svg>
|
</svg>
|
||||||
|
@ -127,7 +130,11 @@
|
||||||
use:clickOutside={handleOutsideClick}
|
use:clickOutside={handleOutsideClick}
|
||||||
class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
|
class="spectrum-Popover spectrum-Popover--bottom spectrum-Picker-popover is-open"
|
||||||
>
|
>
|
||||||
<ul class="spectrum-Menu" role="listbox">
|
<ul
|
||||||
|
class:no-variables-height={variables.length}
|
||||||
|
class="spectrum-Menu"
|
||||||
|
role="listbox"
|
||||||
|
>
|
||||||
{#if variables.length}
|
{#if variables.length}
|
||||||
{#each variables as variable, idx}
|
{#each variables as variable, idx}
|
||||||
<li
|
<li
|
||||||
|
@ -153,17 +160,13 @@
|
||||||
</li>
|
</li>
|
||||||
{/each}
|
{/each}
|
||||||
{:else}
|
{:else}
|
||||||
<li class="spectrum-Menu-item" role="option" aria-selected="true">
|
<div class="no-variables-text primary-text">
|
||||||
<span class="spectrum-Menu-itemLabel">
|
You don't have any environment variables yet
|
||||||
<div class="primary-text">
|
</div>
|
||||||
You don't have any environment variables yet
|
|
||||||
</div>
|
|
||||||
</span>
|
|
||||||
</li>
|
|
||||||
{/if}
|
{/if}
|
||||||
</ul>
|
</ul>
|
||||||
<Divider noMargin />
|
<Divider noMargin />
|
||||||
<div class="add-variable">
|
<div on:click={() => showModal()} class="add-variable">
|
||||||
<svg
|
<svg
|
||||||
class="spectrum-Icon spectrum-Icon--sizeS "
|
class="spectrum-Icon spectrum-Icon--sizeS "
|
||||||
focusable="false"
|
focusable="false"
|
||||||
|
@ -171,9 +174,7 @@
|
||||||
>
|
>
|
||||||
<use xlink:href="#spectrum-icon-18-Add" />
|
<use xlink:href="#spectrum-icon-18-Add" />
|
||||||
</svg>
|
</svg>
|
||||||
<div on:click={() => showModal()} class="primary-text">
|
<div class="primary-text">Add Variable</div>
|
||||||
<Body size="S">Add Variable</Body>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
@ -209,12 +210,6 @@
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
width: 100%;
|
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 {
|
.spectrum-Popover {
|
||||||
max-height: 240px;
|
max-height: 240px;
|
||||||
|
@ -226,10 +221,13 @@
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Fix focus borders to show only when opened */
|
.no-variables-height {
|
||||||
.spectrum-Textfield-input {
|
height: 100px;
|
||||||
border-color: var(--spectrum-global-color-gray-400) !important;
|
}
|
||||||
border-right-width: 1px;
|
|
||||||
|
.no-variables-text {
|
||||||
|
padding: var(--spacing-m);
|
||||||
|
color: var(--spectrum-global-color-gray-600);
|
||||||
}
|
}
|
||||||
|
|
||||||
.add-variable {
|
.add-variable {
|
||||||
|
@ -237,5 +235,14 @@
|
||||||
padding: var(--spacing-m) 0 var(--spacing-m) var(--spacing-m);
|
padding: var(--spacing-m) 0 var(--spacing-m) var(--spacing-m);
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: var(--spacing-s);
|
gap: var(--spacing-s);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.focused {
|
||||||
|
color: var(--spectrum-global-color-blue-400);
|
||||||
|
}
|
||||||
|
|
||||||
|
.add-variable:hover {
|
||||||
|
background: var(--grey-1);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -124,7 +124,6 @@
|
||||||
<EnvDropdown
|
<EnvDropdown
|
||||||
{showModal}
|
{showModal}
|
||||||
variables={$environment.variables}
|
variables={$environment.variables}
|
||||||
type={schema[configKey].type}
|
|
||||||
on:change
|
on:change
|
||||||
bind:value={config[configKey]}
|
bind:value={config[configKey]}
|
||||||
error={$validation.errors[configKey]}
|
error={$validation.errors[configKey]}
|
||||||
|
|
|
@ -6,9 +6,12 @@
|
||||||
Checkbox,
|
Checkbox,
|
||||||
Heading,
|
Heading,
|
||||||
notifications,
|
notifications,
|
||||||
|
Context,
|
||||||
} from "@budibase/bbui"
|
} from "@budibase/bbui"
|
||||||
import { environment } from "stores/portal"
|
import { environment } from "stores/portal"
|
||||||
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
|
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
|
||||||
|
import { getContext } from "svelte"
|
||||||
|
const modalContext = getContext(Context.Modal)
|
||||||
|
|
||||||
export let save
|
export let save
|
||||||
export let row
|
export let row
|
||||||
|
@ -23,6 +26,7 @@
|
||||||
const deleteVariable = name => {
|
const deleteVariable = name => {
|
||||||
try {
|
try {
|
||||||
environment.deleteVariable(name)
|
environment.deleteVariable(name)
|
||||||
|
modalContext.hide()
|
||||||
notifications.success("Environment variable deleted")
|
notifications.success("Environment variable deleted")
|
||||||
} catch (err) {
|
} catch (err) {
|
||||||
notifications.error(err.message)
|
notifications.error(err.message)
|
||||||
|
|
Loading…
Reference in a new issue