From 156fc01b48a98ddfbba9d44c8e4f3a3d3b764182 Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Wed, 3 Jun 2020 16:19:04 +0100 Subject: [PATCH 1/5] 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 ++++-- 5 files changed, 68 insertions(+), 15 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 99e704d1d9..86a70d0a25 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 = [ { From 9556598cc65573d71b1a4f133df31c8b424311df Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Wed, 3 Jun 2020 22:05:02 +0100 Subject: [PATCH 2/5] Fixes for screen and page props --- .../ComponentPropertiesPanel.svelte | 26 +++++++------------ .../userInterface/SettingsView.svelte | 4 ++- .../userInterface/propertyCategories.js | 3 +-- 3 files changed, 14 insertions(+), 19 deletions(-) diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte index 62a3c91c3e..690426a034 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,40 +38,35 @@ 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 } } - $: console.log("COMP INSTA NEW", componentInstanceNew) - const onStyleChanged = store.setComponentStyle function onPropChanged(key, value) { @@ -120,10 +114,10 @@
{#if selectedCategory.value === 'design'} - + {:else if selectedCategory.value === 'settings'} diff --git a/packages/builder/src/components/userInterface/SettingsView.svelte b/packages/builder/src/components/userInterface/SettingsView.svelte index 86a70d0a25..133a495198 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 = () => {} - let pageScreenProps = ["name", "favicon", "description", "route"] + $: console.log("SET COMP INSTANCE",componentInstance) + + let pageScreenProps = ["title","favicon", "description", "route"] const propExistsOnComponentDef = prop => pageScreenProps.includes(prop) || prop in componentDefinition.props diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js index 18572ea6ba..7b88547fbb 100644 --- a/packages/builder/src/components/userInterface/propertyCategories.js +++ b/packages/builder/src/components/userInterface/propertyCategories.js @@ -5,13 +5,12 @@ import FlatButtonGroup from "./FlatButtonGroup.svelte" 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: "Title", key: "title", control: Input }, { label: "Favicon", key: "favicon", control: Input }, ] From b136eaea17a5c9b39a50e7c9754e2dcccad7f8ce Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Mon, 8 Jun 2020 10:49:13 +0100 Subject: [PATCH 3/5] Tidyup --- .../builder/src/components/userInterface/SettingsView.svelte | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/builder/src/components/userInterface/SettingsView.svelte b/packages/builder/src/components/userInterface/SettingsView.svelte index 133a495198..a3438a4e4f 100644 --- a/packages/builder/src/components/userInterface/SettingsView.svelte +++ b/packages/builder/src/components/userInterface/SettingsView.svelte @@ -9,7 +9,6 @@ export let componentInstance = {} export let onChange = () => {} - $: console.log("SET COMP INSTANCE",componentInstance) let pageScreenProps = ["title","favicon", "description", "route"] From dd0eec05929d96a315e302967586d0082b82d9bb Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Tue, 9 Jun 2020 10:59:15 +0100 Subject: [PATCH 4/5] Refactorings for page and settings props --- .../builder/src/builderStore/store/index.js | 2 ++ .../ComponentPropertiesPanel.svelte | 17 ++++------------- .../userInterface/FrontendNavigatePane.svelte | 1 - 3 files changed, 6 insertions(+), 14 deletions(-) diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js index 3572e4e344..ac66643612 100644 --- a/packages/builder/src/builderStore/store/index.js +++ b/packages/builder/src/builderStore/store/index.js @@ -295,6 +295,7 @@ const setCurrentPage = store => pageName => { state.currentFrontEndType = "page" state.currentPageName = pageName + state.currentView = "detail" state.screens = Array.isArray(current_screens) ? current_screens : Object.values(current_screens) @@ -455,6 +456,7 @@ const setScreenType = store => type => { state.currentComponentInfo = pageOrScreen ? pageOrScreen.props : null state.currentPreviewItem = pageOrScreen + state.currentView = "detail" return state }) } diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte index 690426a034..caef9eb2fd 100644 --- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte +++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte @@ -58,25 +58,16 @@ } } - let componentInstance = {} - $: { - if(($store.currentFrontEndType === "screen" || $store.currentFrontEndType === "page") && $store.currentView !== "component") { - componentInstance = {...$store.currentPreviewItem, ...$store.currentComponentInfo} - }else { - componentInstance = $store.currentComponentInfo - } - } + $: componentInstance = $store.currentView !== "component" ? {...$store.currentPreviewItem, ...$store.currentComponentInfo} : $store.currentComponentInfo const onStyleChanged = store.setComponentStyle function onPropChanged(key, value) { - if($store.currentFrontEndType === "page") { + if($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/FrontendNavigatePane.svelte b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte index c577380eae..59fc13bcd1 100644 --- a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte +++ b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte @@ -9,7 +9,6 @@ newScreenPicker.show() } - $: console.log("STORE SCREENS", $store.screens) let newScreenPicker From 119eae549a3024a9dbbad35a0d1750c7063b76aa Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Tue, 9 Jun 2020 11:02:47 +0100 Subject: [PATCH 5/5] Linting --- .../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 f2f3516a26..259324fb6d 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: "Description", key: "description", control: Input }, { label: "Route", key: "route", control: Input },