Merge pull request #318 from Budibase/revert-317-property-panel/screen-and-page-props

Revert "Settings for Pages and Screens"

packages/builder/src/builderStore/store/index.js

@@ -69,7 +69,6 @@ export const getStore = () => {
   store.getPathToComponent = getPathToComponent(store)
   store.addTemplatedComponent = addTemplatedComponent(store)
   store.setMetadataProp = setMetadataProp(store)
-  store.editPageOrScreen = editPageOrScreen(store)
   return store
 }
 
@@ -172,15 +171,6 @@ 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)

packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte

@@ -1,6 +1,5 @@
 <script>
   import { setContext, onMount } from "svelte"
-  import {screen, page} from "./propertyCategories.js"
   import PropsView from "./PropsView.svelte"
   import { store } from "builderStore"
   import IconButton from "components/common/IconButton.svelte"
@@ -31,6 +30,7 @@
   let selectedCategory = categories[0]
 
   $: components = $store.components
+  $: componentInstance = $store.currentComponentInfo
   $: componentDefinition = $store.components[componentInstance._component]
   $: componentPropDefinition =
     flattenedPanel.find(
@@ -38,45 +38,18 @@
       c => c._component === componentInstance._component
     ) || {}
 
+  $: panelDefinition = componentPropDefinition.properties
+    ? componentPropDefinition.properties[selectedCategory.value]
+    : {}
 
-  let panelDefinition = {}
+  // SCREEN PROPS =============================================
-
+  $: screen_props =
-  $: {
+    $store.currentFrontEndType === "page"
-    if(componentPropDefinition.properties) {
+      ? getProps($store.currentPreviewItem, ["name", "favicon"])
-      if(selectedCategory.value === "design") {
+      : getProps($store.currentPreviewItem, ["name", "description", "route"])
-        panelDefinition = componentPropDefinition.properties["design"]
-      }else{
-        let panelDef = componentPropDefinition.properties["settings"]
-        if($store.currentFrontEndType === "page") {
-          panelDefinition = [...page,...panelDef]
-        }else if($store.currentFrontEndType === "screen" && $store.currentView !== "component") {
-          panelDefinition = [...screen, ...panelDef]
-        }else {
-          panelDefinition = panelDef
-        }
-      }
-    }
-  }
-
-  let componentInstance = {}
-  $: {
-     if(($store.currentFrontEndType === "screen" || $store.currentFrontEndType === "page") && $store.currentView !== "component") {
-       componentInstance = {...$store.currentPreviewItem, ...$store.currentComponentInfo}
-     }else {
-       componentInstance = $store.currentComponentInfo
-     }
-  }
 
   const onStyleChanged = store.setComponentStyle
-
+  const onPropChanged = store.setComponentProp
-  function onPropChanged(key, value) {
-   if($store.currentFrontEndType === "page" || ($store.currentFrontEndType === "screen" && $store.currentView !== "component")) {
-      store.editPageOrScreen(key, value)
-      return;
-   }
-      
-    store.setComponentProp(key, value)
-  }
 
   function walkProps(component, action) {
     action(component)
@@ -116,9 +89,9 @@
       <DesignView {panelDefinition} {componentInstance} {onStyleChanged} />
     {:else if selectedCategory.value === 'settings'}
       <SettingsView
-        {panelDefinition}
         {componentInstance}
         {componentDefinition}
+        {panelDefinition}
         onChange={onPropChanged} />
     {:else if selectedCategory.value === 'events'}
       <EventsEditor component={componentInstance} />
@@ -133,10 +106,12 @@
     height: 100%;
     display: flex;
     flex-direction: column;
+    /* Merge Check */
     overflow-x: hidden;
     overflow-y: hidden;
     padding: 20px;
     box-sizing: border-box;
+    /* Merge Check */
   }
 
   .title > div:nth-child(1) {

packages/builder/src/components/userInterface/FrontendNavigatePane.svelte

@@ -9,7 +9,6 @@
     newScreenPicker.show()
   }
 
-  $: console.log("STORE SCREENS", $store.screens)
   let newScreenPicker
 </script>
 

packages/builder/src/components/userInterface/SettingsView.svelte

@@ -9,13 +9,10 @@
   export let componentInstance = {}
   export let onChange = () => {}
 
-  let pageScreenProps = ["title", "favicon", "description", "route"]
+  const propExistsOnComponentDef = prop => prop in componentDefinition.props
-  
-  const propExistsOnComponentDef = prop => pageScreenProps.includes(prop) || prop in componentDefinition.props
 
   function handleChange(key, data) {
-    const value = data.target ? data.target.value : data
+    data.target ? onChange(key, data.target.value) : onChange(key, data)
-    onChange(key, value)
   }
 </script>
 

packages/builder/src/components/userInterface/propertyCategories.js

@@ -2,17 +2,10 @@ 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"
-export const screen = [
+/*
-  { label: "Name", key: "name", control: Input },
+  TODO: Allow for default values for all properties
-  { label: "Description", key: "description", control: Input },
+*/
-  { label: "Route", key: "route", control: Input },
-]
-
-export const page = [
-  { label: "Title", key: "title", control: Input },
-  { label: "Favicon", key: "favicon", control: Input },
-]
 
 export const layout = [
   {