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

Improve determination of default values and logic around showing highlighted settings

This commit is contained in:
Andrew Kingston 2022-06-14 15:29:27 +01:00
parent b7d7ed0c67
commit 97e42bf318
4 changed files with 14 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
View File

@ -93,10 +93,11 @@
control={getComponentForSettingType(setting.type)} control={getComponentForSettingType(setting.type)}
label={setting.label} label={setting.label}
key={setting.key} key={setting.key}
value={componentInstance[setting.key] ?? value={componentInstance[setting.key]}
componentDefinition[setting.key]?.defaultValue} defaultValue={setting.defaultValue}
nested={setting.nested} nested={setting.nested}
onChange={val => updateProp(setting.key, val)} onChange={val => updateProp(setting.key, val)}
highlighted={$store.highlightedSettingKey === setting.key}
props={{ props={{
options: setting.options || [], options: setting.options || [],
placeholder: setting.placeholder || null, placeholder: setting.placeholder || null,
@ -107,9 +108,6 @@
{componentBindings} {componentBindings}
{componentInstance} {componentInstance}
{componentDefinition} {componentDefinition}
highlighted={$store.highlightedSettingKey === setting.key &&
(componentInstance[setting.key] == null ||
componentInstance[setting.key] === "")}
/> />
{/if} {/if}
{/each} {/each}

15
packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
View File

@ -13,6 +13,7 @@
export let key = "" export let key = ""
export let type = "" export let type = ""
export let value = null export let value = null
export let defaultValue = null
export let props = {} export let props = {}
export let onChange = () => {} export let onChange = () => {}
export let bindings = [] export let bindings = []
@ -20,8 +21,9 @@
export let nested = false export let nested = false
export let highlighted = false export let highlighted = false
$: nullishValue = value == null || value === ""
$: allBindings = getAllBindings(bindings, componentBindings, nested) $: allBindings = getAllBindings(bindings, componentBindings, nested)
$: safeValue = getSafeValue(value, props.defaultValue, allBindings) $: safeValue = getSafeValue(value, defaultValue, allBindings)
$: tempValue = safeValue $: tempValue = safeValue
$: replaceBindings = val => readableToRuntimeBinding(allBindings, val) $: replaceBindings = val => readableToRuntimeBinding(allBindings, val)
@ -71,7 +73,11 @@
}) })
</script> </script>
<div class="property-control" data-cy={`setting-${key}`} class:highlighted> <div
class="property-control"
class:highlighted={highlighted && nullishValue}
data-cy={`setting-${key}`}
>
{#if type !== "boolean" && label} {#if type !== "boolean" && label}
<div class="label"> <div class="label">
<Label>{label}</Label> <Label>{label}</Label>
@ -104,12 +110,11 @@
align-items: stretch; align-items: stretch;
transition: background 130ms ease-out, border-color 130ms ease-out; transition: background 130ms ease-out, border-color 130ms ease-out;
border-left: 4px solid transparent; border-left: 4px solid transparent;
margin-left: -4px; margin: -6px calc(-1 * var(--spacing-xl));
padding: 6px var(--spacing-xl) 6px calc(var(--spacing-xl) - 4px);
} }
.property-control.highlighted { .property-control.highlighted {
background: var(--spectrum-global-color-gray-300); background: var(--spectrum-global-color-gray-300);
margin: -6px calc(-1 * var(--spacing-xl));
padding: 6px var(--spacing-xl) 6px calc(var(--spacing-xl) - 4px);
border-color: var(--spectrum-global-color-blue-400); border-color: var(--spectrum-global-color-blue-400);
} }
.label { .label {

1
packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte
View File

@ -115,7 +115,6 @@
control={def.control} control={def.control}
label={def.label} label={def.label}
key={def.key} key={def.key}
error="asdasds"
value={deepGet($currentAsset, def.key)} value={deepGet($currentAsset, def.key)}
onChange={val => setAssetProps(def.key, val, def.parser, def.validate)} onChange={val => setAssetProps(def.key, val, def.parser, def.validate)}
{bindings} {bindings}

2
packages/client/src/components/app/ComponentPlaceholder.svelte
View File

@ -13,7 +13,7 @@
<div class="component-placeholder"> <div class="component-placeholder">
<span> <span>
Add the <mark>{requiredSetting.label}</mark> setting to start using your Add the <mark>{requiredSetting.label}</mark> setting to start using your
component &nbsp; component -
</span> </span>
<span <span
class="spectrum-Link" class="spectrum-Link"