From e34a79e904a194d14bd9a4d386b35c17e8f30466 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 14 Jun 2022 14:05:28 +0100 Subject: [PATCH] Save highlighted setting key in store and show as highlighted until unmounted or changed --- .../src/builderStore/store/frontend.js | 10 +++++++++ .../AppPreview/CurrentItemPreview.svelte | 2 +- .../ComponentSettingsSection.svelte | 5 ++++- .../PropertyControls/PropertyControl.svelte | 21 ++++++++++++++----- 4 files changed, 31 insertions(+), 7 deletions(-) diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js index 3ffc890c7d..b8fa3a84f6 100644 --- a/packages/builder/src/builderStore/store/frontend.js +++ b/packages/builder/src/builderStore/store/frontend.js @@ -60,6 +60,8 @@ const INITIAL_FRONTEND_STATE = { theme: "", customTheme: {}, previewDevice: "desktop", + highlightedSettingComponentId: null, + highlightedSettingKey: null, } export const getFrontendStore = () => { @@ -662,6 +664,14 @@ export const getFrontendStore = () => { }, }, }, + settings: { + highlight: key => { + store.update(state => ({ + ...state, + highlightedSettingKey: key, + })) + }, + }, } return store diff --git a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte index f6aa78701a..7187d9f157 100644 --- a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte +++ b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte @@ -191,7 +191,7 @@ await store.actions.components.paste(destination, data.mode) } } else if (type === "highlight-setting") { - console.log(data.setting) + store.actions.settings.highlight(data.setting) } else { console.warn(`Client sent unknown event type: ${type}`) } diff --git a/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte b/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte index 29b249fe03..0c542fddd4 100644 --- a/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte @@ -94,7 +94,7 @@ label={setting.label} key={setting.key} value={componentInstance[setting.key] ?? - componentInstance[setting.key]?.defaultValue} + componentDefinition[setting.key]?.defaultValue} nested={setting.nested} onChange={val => updateProp(setting.key, val)} props={{ @@ -107,6 +107,9 @@ {componentBindings} {componentInstance} {componentDefinition} + highlighted={$store.highlightedSettingKey === setting.key && + (componentInstance[setting.key] == null || + componentInstance[setting.key] === "")} /> {/if} {/each} diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte index 5ca584d11b..ef68af3fd9 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte @@ -4,6 +4,8 @@ readableToRuntimeBinding, runtimeToReadableBinding, } from "builderStore/dataBinding" + import { store } from "builderStore" + import { onDestroy } from "svelte" export let label = "" export let componentInstance = {} @@ -16,6 +18,7 @@ export let bindings = [] export let componentBindings = [] export let nested = false + export let highlighted = false $: allBindings = getAllBindings(bindings, componentBindings, nested) $: safeValue = getSafeValue(value, props.defaultValue, allBindings) @@ -60,9 +63,15 @@ ? defaultValue : enriched } + + onDestroy(() => { + if (highlighted) { + store.actions.settings.highlight(null) + } + }) -
+
{#if type !== "boolean" && label}
@@ -93,12 +102,14 @@ flex-direction: column; justify-content: flex-start; align-items: stretch; - padding: 4px 8px; - margin: -6px -10px; - border: 2px solid transparent; - border-radius: 4px; + transition: background 130ms ease-out, border-color 130ms ease-out; + border-left: 4px solid transparent; + margin-left: -4px; } .property-control.highlighted { + 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); } .label {