MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

css updates to dropdown component

This commit is contained in:
Peter Clement 2023-01-24 15:24:29 +00:00
parent 63d882efc6
commit 0ca1521a58
3 changed files with 42 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
packages/bbui/src/Form/Core/EnvDropdown.svelte
View File

@ -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>

1
packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte
View File

@ -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]}

4
packages/builder/src/components/portal/environment/CreateEditVariableModal.svelte
View File

@ -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)