From 53dc3780fa1fb54dcddb44cc29db4f5562778eae Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Wed, 3 Jun 2020 16:19:04 +0100 Subject: [PATCH 1/4] Screen and page latest --- .../builder/src/builderStore/store/index.js | 10 ++++ .../ComponentPropertiesPanel.svelte | 52 +++++++++++++++---- .../userInterface/FrontendNavigatePane.svelte | 1 + .../userInterface/SettingsView.svelte | 4 +- .../userInterface/propertyCategories.js | 16 ++++-- .../userInterface/temporaryPanelStructure.js | 5 +- 6 files changed, 72 insertions(+), 16 deletions(-) diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js index 9f91550bca..3572e4e344 100644 --- a/packages/builder/src/builderStore/store/index.js +++ b/packages/builder/src/builderStore/store/index.js @@ -69,6 +69,7 @@ export const getStore = () => { store.getPathToComponent = getPathToComponent(store) store.addTemplatedComponent = addTemplatedComponent(store) store.setMetadataProp = setMetadataProp(store) + store.editPageOrScreen = editPageOrScreen(store) return store } @@ -171,6 +172,15 @@ const createScreen = store => (screenName, route, layoutComponentName) => { }) } +const editPageOrScreen = store => (key, value) => { + store.update(state => { + state.currentPreviewItem[key] = value + _saveCurrentPreviewItem(state) + + return state + }) +} + const setCurrentScreen = store => screenName => { store.update(s => { const screen = getExactComponent(s.screens, screenName) diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte index 60279aa9a1..62a3c91c3e 100644 --- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte +++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte @@ -1,5 +1,6 @@ diff --git a/packages/builder/src/components/userInterface/SettingsView.svelte b/packages/builder/src/components/userInterface/SettingsView.svelte index 36b2ab9c75..76619867e3 100644 --- a/packages/builder/src/components/userInterface/SettingsView.svelte +++ b/packages/builder/src/components/userInterface/SettingsView.svelte @@ -9,7 +9,9 @@ export let componentInstance = {} export let onChange = () => {} - const propExistsOnComponentDef = prop => prop in componentDefinition.props + let pageScreenProps = ["name", "favicon", "description", "route"] + + const propExistsOnComponentDef = prop => pageScreenProps.includes(prop) || prop in componentDefinition.props function handleChange(key, data) { data.target ? onChange(key, data.target.value) : onChange(key, data) diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js index 59458edd49..18572ea6ba 100644 --- a/packages/builder/src/components/userInterface/propertyCategories.js +++ b/packages/builder/src/components/userInterface/propertyCategories.js @@ -2,10 +2,18 @@ import Input from "../common/Input.svelte" import OptionSelect from "./OptionSelect.svelte" import InputGroup from "../common/Inputs/InputGroup.svelte" import FlatButtonGroup from "./FlatButtonGroup.svelte" -// import Colorpicker from "../common/Colorpicker.svelte" -/* - TODO: Allow for default values for all properties -*/ + + +export const screen = [ + { label: "Name", key: "name", control: Input }, + { label: "Description", key: "description", control: Input }, + { label: "Route", key: "route", control: Input }, +] + +export const page = [ + { label: "Name", key: "name", control: Input }, + { label: "Favicon", key: "favicon", control: Input }, +] export const layout = [ { diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js index be9d874dea..9c0dfc1bd8 100644 --- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js +++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js @@ -334,7 +334,10 @@ export default { "A component for handling the navigation within your app.", icon: "ri-navigation-fill", children: [], - properties: { design: { ...all } }, + properties: { + design: { ...all }, + settings: [{ label: "Logo URL", key: "logoUrl", control: Input }, ], + }, }, ], }, From 02fac0774e7ea3506ea84cb8f1de6ab64befb23a Mon Sep 17 00:00:00 2001 From: Martin McKeaveney Date: Wed, 3 Jun 2020 16:44:01 +0100 Subject: [PATCH 2/4] updating page title prop --- .../userInterface/ComponentPropertiesPanel.svelte | 13 +++++-------- .../components/userInterface/SettingsView.svelte | 5 +++-- .../components/userInterface/propertyCategories.js | 2 +- 3 files changed, 9 insertions(+), 11 deletions(-) diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte index 62a3c91c3e..8ce0a57939 100644 --- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte +++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte @@ -71,18 +71,15 @@ } } - $: console.log("COMP INSTA NEW", componentInstanceNew) - const onStyleChanged = store.setComponentStyle function onPropChanged(key, value) { - if($store.currentFrontEndType === "page") { + if($store.currentFrontEndType === "page" || ($store.currentFrontEndType === "screen" && $store.currentView !== "component")) { store.editPageOrScreen(key, value) - }else if($store.currentFrontEndType === "screen" && $store.currentView !== "component") { - store.editPageOrScreen(key, value) - }else { - store.setComponentProp(key, value) - } + return; + } + + store.setComponentProp(key, value) } function walkProps(component, action) { diff --git a/packages/builder/src/components/userInterface/SettingsView.svelte b/packages/builder/src/components/userInterface/SettingsView.svelte index 76619867e3..cb6f73aae0 100644 --- a/packages/builder/src/components/userInterface/SettingsView.svelte +++ b/packages/builder/src/components/userInterface/SettingsView.svelte @@ -9,12 +9,13 @@ export let componentInstance = {} export let onChange = () => {} - let pageScreenProps = ["name", "favicon", "description", "route"] + let pageScreenProps = ["title", "favicon", "description", "route"] const propExistsOnComponentDef = prop => pageScreenProps.includes(prop) || prop in componentDefinition.props function handleChange(key, data) { - data.target ? onChange(key, data.target.value) : onChange(key, data) + const value = data.target ? data.target.value : data + onChange(key, value) } diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js index 18572ea6ba..b1e329c863 100644 --- a/packages/builder/src/components/userInterface/propertyCategories.js +++ b/packages/builder/src/components/userInterface/propertyCategories.js @@ -11,7 +11,7 @@ export const screen = [ ] export const page = [ - { label: "Name", key: "name", control: Input }, + { label: "Title", key: "title", control: Input }, { label: "Favicon", key: "favicon", control: Input }, ] From 7309d18904c1edba3e7dc1945eece2639502a621 Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Wed, 3 Jun 2020 19:46:41 +0100 Subject: [PATCH 3/4] Settings Props for Pages and Screens --- .../ComponentPropertiesPanel.svelte | 24 ++++++++----------- 1 file changed, 10 insertions(+), 14 deletions(-) diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte index 8ce0a57939..48d7bb0835 100644 --- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte +++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte @@ -31,7 +31,6 @@ let selectedCategory = categories[0] $: components = $store.components - $: componentInstance = $store.currentComponentInfo $: componentDefinition = $store.components[componentInstance._component] $: componentPropDefinition = flattenedPanel.find( @@ -39,35 +38,32 @@ c => c._component === componentInstance._component ) || {} - $: panelDefinition = componentPropDefinition.properties - ? componentPropDefinition.properties[selectedCategory.value] - : {} - let panelDefNew = {} + let panelDefinition = {} $: { if(componentPropDefinition.properties) { if(selectedCategory.value === "design") { - panelDefNew = componentPropDefinition.properties["design"] + panelDefinition = componentPropDefinition.properties["design"] }else{ let panelDef = componentPropDefinition.properties["settings"] if($store.currentFrontEndType === "page") { - panelDefNew = [...page,...panelDef] + panelDefinition = [...page,...panelDef] }else if($store.currentFrontEndType === "screen" && $store.currentView !== "component") { - panelDefNew = [...screen, ...panelDef] + panelDefinition = [...screen, ...panelDef] }else { - panelDefNew = panelDef + panelDefinition = panelDef } } } } - let componentInstanceNew = {} + let componentInstance = {} $: { if(($store.currentFrontEndType === "screen" || $store.currentFrontEndType === "page") && $store.currentView !== "component") { - componentInstanceNew = {...$store.currentPreviewItem, ...$store.currentComponentInfo} + componentInstance = {...$store.currentPreviewItem, ...$store.currentComponentInfo} }else { - componentInstanceNew = $store.currentComponentInfo + componentInstance = $store.currentComponentInfo } } @@ -117,10 +113,10 @@
{#if selectedCategory.value === 'design'} - + {:else if selectedCategory.value === 'settings'} From e647ebd4a06bb8ce18c1997f1fe2bb722a4362bd Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Wed, 3 Jun 2020 19:50:28 +0100 Subject: [PATCH 4/4] lint fix --- .../builder/src/components/userInterface/propertyCategories.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js index b1e329c863..f9d9e6b892 100644 --- a/packages/builder/src/components/userInterface/propertyCategories.js +++ b/packages/builder/src/components/userInterface/propertyCategories.js @@ -3,7 +3,6 @@ import OptionSelect from "./OptionSelect.svelte" import InputGroup from "../common/Inputs/InputGroup.svelte" import FlatButtonGroup from "./FlatButtonGroup.svelte" - export const screen = [ { label: "Name", key: "name", control: Input }, { label: "Description", key: "description", control: Input },