Merge pull request #131 from pngwn/details

Make page and screen props editable.

packages/builder/src/builderStore/store.js

@@ -112,6 +112,7 @@ export const getStore = () => {
   store.moveDownComponent = moveDownComponent(store)
   store.copyComponent = copyComponent(store)
   store.addTemplatedComponent = addTemplatedComponent(store)
+  store.setMetadataProp = setMetadataProp(store)
   return store
 }
 
@@ -517,6 +518,7 @@ const setCurrentScreen = store => screenName => {
     screen._css = generate_screen_css([screen.props])
     s.currentPreviewItem = screen
     s.currentFrontEndType = "screen"
+    s.currentView = "detail"
 
     s.currentComponentInfo = makePropsSafe(
       getContainerComponent(s.components),
@@ -764,6 +766,7 @@ const addChildComponent = store => (componentToAdd, presetName) => {
       ? _savePage(state)
       : _saveScreenApi(state.currentPreviewItem, state)
 
+    state.currentView = "component"
     state.currentComponentInfo = newComponent.props
 
     return state
@@ -794,6 +797,7 @@ const selectComponent = store => component => {
       ? component
       : state.components.find(c => c.name === component._component)
     state.currentComponentInfo = makePropsSafe(componentDef, component)
+    state.currentView = "component"
     return state
   })
 }
@@ -952,6 +956,13 @@ const walkProps = (props, action, cancelToken = null) => {
   }
 }
 
+const setMetadataProp = store => (name, prop) => {
+  store.update(s => {
+    s.currentPreviewItem[name] = prop
+    return s
+  })
+}
+
 const _saveCurrentPreviewItem = s =>
   s.currentFrontEndType === "page"
     ? _savePage(s)

packages/builder/src/userInterface/ComponentPropertiesPanel.svelte

@@ -1,5 +1,6 @@
 <script>
   import PropsView from "./PropsView.svelte"
+  import StateBindingControl from "./StateBindingControl.svelte"
   import { store } from "../builderStore"
   import IconButton from "../common/IconButton.svelte"
   import {
@@ -18,12 +19,23 @@
 
   $: component = $store.currentComponentInfo
   $: originalName = component.name
-  $: name = component.name
+  $: name =
+    $store.currentView === "detail"
+      ? $store.currentPreviewItem.name
+      : component._component
   $: description = component.description
   $: components = $store.components
-
+  $: screen_props =
+    $store.currentFrontEndType === "page"
+      ? getProps($store.currentPreviewItem, ["name", "favicon"])
+      : getProps($store.currentPreviewItem, ["name", "description", "url"])
+  $: console.log(screen_props)
   const onPropChanged = store.setComponentProp
   const onStyleChanged = store.setComponentStyle
+
+  function getProps(obj, keys) {
+    return keys.map((k, i) => [k, obj[k], obj.props._id + i])
+  }
 </script>
 
 <div class="root">
@@ -64,11 +76,23 @@
       </li>
     {/if}
   </ul>
-  {$store.currentFrontEndType}
   <div class="component-props-container">
 
     {#if current_view === 'props'}
-      <PropsView {component} {components} {onPropChanged} />
+      {#if $store.currentView === 'detail'}
+        {#each screen_props as [k, v, id] (id)}
+          <div class="detail-prop" for={k}>
+            <label>{k}:</label>
+            <input
+              id={k}
+              value={v}
+              on:input={({ target }) => store.setMetadataProp(k, target.value)} />
+          </div>
+        {/each}
+        <PropsView {component} {components} {onPropChanged} />
+      {:else}
+        <PropsView {component} {components} {onPropChanged} />
+      {/if}
     {:else if current_view === 'layout'}
       <LayoutEditor {onStyleChanged} {component} />
     {:else if current_view === 'events'}
@@ -85,6 +109,41 @@
 </div>
 
 <style>
+  .detail-prop {
+    height: 40px;
+    margin-bottom: 15px;
+    display: grid;
+    grid-template-rows: 1fr;
+    grid-template-columns: 70px 1fr;
+    grid-gap: 10px;
+  }
+
+  .detail-prop label {
+    word-wrap: break-word;
+    font-size: 12px;
+    font-weight: 700;
+    color: #163057;
+    opacity: 0.6;
+    padding-top: 12px;
+    margin-bottom: 0;
+  }
+
+  input {
+    height: 30px;
+    padding-left: 8px;
+    padding-right: 8px;
+    border: 1px solid #dbdbdb;
+    border-radius: 2px;
+    opacity: 0.5;
+  }
+
+  input:focus {
+    outline: 0;
+    background-color: #fff;
+    color: #666;
+    border-color: #1e87f0;
+  }
+
   .root {
     height: 100%;
     display: flex;

packages/builder/src/userInterface/ComponentsPaneSwitcher.svelte

@@ -45,8 +45,6 @@
       {/if}
 
     </div>
-  {:else}
-    <p>Please create a new screen</p>
   {/if}
 
 </div>