From 702b62f8e647b347d6d95011b911cf2ad8f529a0 Mon Sep 17 00:00:00 2001 From: Dean Date: Tue, 24 May 2022 09:58:05 +0100 Subject: [PATCH] Expanding the focus behaviour to more component types in the builder. Minor fix for cypress test --- .../bbui/src/ActionButton/ActionButton.svelte | 17 +++++++++++++ packages/bbui/src/Form/Core/Combobox.svelte | 8 ++++-- .../integration/createComponents.spec.js | 13 +--------- .../src/builderStore/store/frontend.js | 8 +++--- .../AppPreview/CurrentItemPreview.svelte | 2 +- .../IconSelect/IconSelect.svelte | 5 +++- .../PropertyControls/URLSelect.svelte | 2 ++ .../design/[assetType]/_layout.svelte | 1 - packages/client/manifest.json | 3 ++- .../src/components/app/BackgroundImage.svelte | 12 +++++---- .../client/src/components/app/Icon.svelte | 23 ++++++++++++++--- .../client/src/components/app/Image.svelte | 12 +++++---- .../src/components/app/MarkdownViewer.svelte | 12 +++++---- .../components/app/charts/ApexChart.svelte | 25 +++++++++++++------ .../src/components/app/forms/Field.svelte | 12 +++++---- packages/client/src/stores/builder.js | 2 +- 16 files changed, 104 insertions(+), 53 deletions(-) diff --git a/packages/bbui/src/ActionButton/ActionButton.svelte b/packages/bbui/src/ActionButton/ActionButton.svelte index b518ac3d92..304ffa6b48 100644 --- a/packages/bbui/src/ActionButton/ActionButton.svelte +++ b/packages/bbui/src/ActionButton/ActionButton.svelte @@ -13,6 +13,10 @@ export let size = "M" export let active = false export let fullWidth = false + export let autofocus = false + + let focus = false + $: focus = autofocus function longPress(element) { if (!longPressable) return @@ -44,9 +48,16 @@ class:fullWidth class="spectrum-ActionButton spectrum-ActionButton--size{size}" class:active + class:is-focused={focus} {disabled} on:longPress on:click|preventDefault + on:focus={() => { + focus = true + }} + on:blur={() => { + focus = false + }} > {#if longPressable} diff --git a/packages/bbui/src/Form/Core/Combobox.svelte b/packages/bbui/src/Form/Core/Combobox.svelte index 183e7486ff..c3f907e64a 100644 --- a/packages/bbui/src/Form/Core/Combobox.svelte +++ b/packages/bbui/src/Form/Core/Combobox.svelte @@ -56,8 +56,12 @@ bind:this={comboInput} {id} type="text" - on:focus={() => (focus = true)} - on:blur={() => (focus = false)} + on:focus={() => { + focus = true + }} + on:blur={() => { + focus = false + }} on:change={onType} value={value || ""} placeholder={placeholder || ""} diff --git a/packages/builder/cypress/integration/createComponents.spec.js b/packages/builder/cypress/integration/createComponents.spec.js index 3525e66fb4..c78d728e7f 100644 --- a/packages/builder/cypress/integration/createComponents.spec.js +++ b/packages/builder/cypress/integration/createComponents.spec.js @@ -118,20 +118,14 @@ filterTests(['all'], () => { cy.get("[data-cy=setting-field] .spectrum-InputGroup") .should("have.class", "is-focused").within(() => { cy.get("input").should(($input) => { - expect($input).to.have.length(1) inputClasses = Cypress.$($input).attr('class') }) }) - - cy.focused().then(($focused) => { - const focusedClasses = Cypress.$($focused).attr('class') - expect(inputClasses).to.equal(focusedClasses) - }) } const testFieldFocusOnCreate = (componentLabel) => { let inputClasses - + cy.log("Adding: " + componentLabel) cy.addComponent("Form", componentLabel).then((componentId) => { refocusTest(componentId) @@ -139,15 +133,10 @@ filterTests(['all'], () => { cy.get("[data-cy=setting-field] .spectrum-InputGroup") .should("have.class", "is-focused").within(() => { cy.get("input").should(($input) => { - expect($input).to.have.length(1) inputClasses = Cypress.$($input).attr('class') }) }) }) - cy.focused().then(($focused) => { - const focusedClasses = Cypress.$($focused).attr('class') - expect(inputClasses).to.equal(focusedClasses) - }) } componentTypeLabels.forEach( testFieldFocusOnCreate ) diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js index 3b94a2713e..3e7ceb2efc 100644 --- a/packages/builder/src/builderStore/store/frontend.js +++ b/packages/builder/src/builderStore/store/frontend.js @@ -425,8 +425,10 @@ export const getFrontendStore = () => { state.currentView = "component" state.selectedComponentId = componentInstance._id - const focusSetting = definition.settings.filter((setting) => { return setting.required }) - const mappedSettings = focusSetting.map((setting) => { + const focusSetting = definition.settings.filter(setting => { + return setting.required + }) + const mappedSettings = focusSetting.map(setting => { return { key: setting.key, target: state.selectedComponentId, @@ -434,7 +436,7 @@ export const getFrontendStore = () => { } }) - if(focusSetting.length){ + if (focusSetting.length) { state.builderFocus = mappedSettings } return state diff --git a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte index 47ca57bc38..f58b3444ac 100644 --- a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte +++ b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte @@ -210,7 +210,7 @@ store.update(state => ({ ...state, builderFocus : - [{...data}] + [...data] })) } else { console.warn(`Client sent unknown event type: ${type}`) diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/IconSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/IconSelect.svelte index 5f70a81c2b..7c4818beff 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/IconSelect.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/IconSelect/IconSelect.svelte @@ -15,6 +15,7 @@ export let value = "" export let maxIconsPerPage = 30 + export let autofocus = false let searchTerm = "" let selectedLetter = "A" @@ -117,7 +118,9 @@
- {displayValue} + + {displayValue} +
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/URLSelect.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/URLSelect.svelte index dc2fa7ad89..581f0e7fd2 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/URLSelect.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/URLSelect.svelte @@ -4,6 +4,7 @@ export let value export let bindings + export let autofocus $: urlOptions = $store.screens .map(screen => screen.routing?.route) @@ -16,4 +17,5 @@ on:change options={urlOptions} appendBindingsAsOptions={false} + {autofocus} /> diff --git a/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte index 8195c20ab7..5aa66305f4 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte @@ -201,7 +201,6 @@ class="components-pane" use:clickOutside={() => { if ($store?.builderFocus) { - console.log($store?.builderFocus) const otherSettings = $store?.builderFocus?.filter(field => { return field.location !== "component_settings" }) diff --git a/packages/client/manifest.json b/packages/client/manifest.json index a41b497630..e33116eba8 100644 --- a/packages/client/manifest.json +++ b/packages/client/manifest.json @@ -1034,7 +1034,8 @@ { "type": "icon", "label": "Icon", - "key": "icon" + "key": "icon", + "required": true }, { "type": "select", diff --git a/packages/client/src/components/app/BackgroundImage.svelte b/packages/client/src/components/app/BackgroundImage.svelte index fe6a9834ad..43eede632e 100644 --- a/packages/client/src/components/app/BackgroundImage.svelte +++ b/packages/client/src/components/app/BackgroundImage.svelte @@ -34,11 +34,13 @@ { - builderStore.actions.setFocus({ - location: "component_settings", - key: "url", - target: $component.id, - }) + builderStore.actions.setFocus([ + { + location: "component_settings", + key: "url", + target: $component.id, + }, + ]) }} > Show me diff --git a/packages/client/src/components/app/Icon.svelte b/packages/client/src/components/app/Icon.svelte index 829cc60227..da59fe71f2 100644 --- a/packages/client/src/components/app/Icon.svelte +++ b/packages/client/src/components/app/Icon.svelte @@ -28,14 +28,29 @@ /> {:else if $builderStore.inBuilder}
- + +
+ Add the Icon in the settings menu  + { + builderStore.actions.setFocus([ + { + location: "component_settings", + key: "icon", + target: $component.id, + }, + ]) + }} + > + Show me + +
+
{/if}