Update front end column structure layout and width to increase preview space

6 years ago · 9ab3d9ff2a
5 changed files with 105 additions and 96 deletions
--- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
+++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
@ -20,7 +20,7 @@
  $: componentPropDefinition =
    flattenedPanel.find(
      //use for getting controls for each component property
-      c => c._component === componentInstance._component
+      (c) => c._component === componentInstance._component
    ) || {}

  $: panelDefinition =
@ -48,8 +48,8 @@

  function flattenComponents(props) {
    const components = []
-    props.forEach(comp =>
-      walkProps(comp, c => {
+    props.forEach((comp) =>
+      walkProps(comp, (c) => {
        if ("_component" in c) {
          components.push(c)
        }
@ -63,41 +63,31 @@
  }
 </script>

-<div class="root">
-  <CategoryTab
-    onClick={category => (selectedCategory = category)}
-    {categories}
-    {selectedCategory} />
-
-  {#if displayName}
-    <div class="instance-name">{componentInstance._instanceName}</div>
+<CategoryTab
+  onClick={(category) => (selectedCategory = category)}
+  {categories}
+  {selectedCategory} />
+
+{#if displayName}
+  <div class="instance-name">{componentInstance._instanceName}</div>
+{/if}
+
+<div class="component-props-container">
+  {#if selectedCategory.value === 'design'}
+    <DesignView {panelDefinition} {componentInstance} {onStyleChanged} />
+  {:else if selectedCategory.value === 'settings'}
+    <SettingsView
+      {componentInstance}
+      {componentDefinition}
+      {panelDefinition}
+      displayNameField={displayName}
+      onChange={store.setComponentProp}
+      onScreenPropChange={store.setPageOrScreenProp}
+      screenOrPageInstance={$store.currentView !== 'component' && $store.currentPreviewItem} />
  {/if}
-
-  <div class="component-props-container">
-    {#if selectedCategory.value === 'design'}
-      <DesignView {panelDefinition} {componentInstance} {onStyleChanged} />
-    {:else if selectedCategory.value === 'settings'}
-      <SettingsView
-        {componentInstance}
-        {componentDefinition}
-        {panelDefinition}
-        displayNameField={displayName}
-        onChange={store.setComponentProp}
-        onScreenPropChange={store.setPageOrScreenProp}
-        screenOrPageInstance={$store.currentView !== 'component' && $store.currentPreviewItem} />
-    {/if}
-  </div>
 </div>

 <style>
-  .root {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    padding: 20px;
-    box-sizing: border-box;
-  }
-
  .title > div:nth-child(1) {
    grid-column-start: name;
    color: var(--ink);
@ -108,7 +98,6 @@
  }

  .component-props-container {
-    margin-top: 16px;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
@ -118,7 +107,6 @@
  }

  .instance-name {
-    margin-top: 20px;
    font-size: 14px;
    font-weight: 500;
    color: var(--grey-7);
--- a/packages/builder/src/components/userInterface/DesignView.svelte
+++ b/packages/builder/src/components/userInterface/DesignView.svelte
@ -12,7 +12,7 @@
  let propGroup = null
  let currentGroup

-  const getProperties = name => panelDefinition[name]
+  const getProperties = (name) => panelDefinition[name]

  function onChange(category) {
    selectedCategory = category
@ -61,10 +61,10 @@
    flex-direction: column;
    width: 100%;
    height: 100%;
+    gap: var(--spacing-m);
  }

  .design-view-state-categories {
-    flex: 0 0 50px;
  }

  .positioned-wrapper {
--- a/packages/builder/src/components/userInterface/PropertyControl.svelte
+++ b/packages/builder/src/components/userInterface/PropertyControl.svelte
@ -78,7 +78,7 @@
  }

  //Incase the component has a different value key name
-  const handlevalueKey = value =>
+  const handlevalueKey = (value) =>
    props.valueKey ? { [props.valueKey]: safeValue() } : { value: safeValue() }
 </script>

@ -89,8 +89,8 @@
      this={control}
      {componentInstance}
      {...handlevalueKey(value)}
-      on:change={val => handleChange(key, val)}
-      onChange={val => handleChange(key, val)}
+      on:change={(val) => handleChange(key, val)}
+      onChange={(val) => handleChange(key, val)}
      {...props}
      name={key} />
  </div>
@ -109,7 +109,7 @@
    <BindingDropdown
      {...handlevalueKey(value)}
      close={dropdown.hide}
-      on:update={e => (temporaryBindableValue = e.detail)}
+      on:update={(e) => (temporaryBindableValue = e.detail)}
      {bindableProperties} />
  </DropdownMenu>
 {/if}
@ -119,16 +119,14 @@
    position: relative;
    display: flex;
    flex-flow: row;
-    margin: 8px 0;
    align-items: center;
  }
-
  .label {
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 400;
-    flex: 0 0 100px;
+    flex: 0 0 80px;
    text-align: left;
    color: var(--ink);
    margin-right: auto;
--- a/packages/builder/src/components/userInterface/PropertyGroup.svelte
+++ b/packages/builder/src/components/userInterface/PropertyGroup.svelte
@ -14,13 +14,26 @@
 </script>

 <DetailSummary {name} on:open show={open}>
-  {#each properties as props}
-    <PropertyControl
-      label={props.label}
-      control={props.control}
-      key={props.key}
-      value={style[props.key]}
-      onChange={(key, value) => onStyleChanged(styleCategory, key, value)}
-      props={{ ...excludeProps(props, ['control', 'label']) }} />
-  {/each}
+  <div>
+    {#each properties as props}
+      <PropertyControl
+        label={props.label}
+        control={props.control}
+        key={props.key}
+        value={style[props.key]}
+        onChange={(key, value) => onStyleChanged(styleCategory, key, value)}
+        props={{ ...excludeProps(props, ['control', 'label']) }} />
+    {/each}
+  </div>
 </DetailSummary>
+
+<style>
+  div {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-s);
+    margin-top: var(--spacing-m);
+  }
+</style>
--- a/packages/builder/src/components/userInterface/SettingsView.svelte
+++ b/packages/builder/src/components/userInterface/SettingsView.svelte
@ -18,7 +18,7 @@
  let pageScreenProps = ["title", "favicon", "description", "route"]
  let duplicateName = false

-  const propExistsOnComponentDef = prop =>
+  const propExistsOnComponentDef = (prop) =>
    pageScreenProps.includes(prop) || prop in componentDefinition.props

  function handleChange(key, data) {
@ -47,10 +47,10 @@
  $: isPage = screenOrPageInstance && screenOrPageInstance.favicon
  $: screenOrPageDefinition = isPage ? pageDefinition : screenDefinition

-  const isDuplicateName = name => {
+  const isDuplicateName = (name) => {
    let duplicate = false

-    const lookForDuplicate = rootPops => {
+    const lookForDuplicate = (rootPops) => {
      walkProps(rootPops, (inst, cancel) => {
        if (inst._instanceName === name && inst._id !== componentInstance._id) {
          duplicate = true
@ -85,50 +85,60 @@
  }
 </script>

-{#if screenOrPageInstance}
-  {#each screenOrPageDefinition as def}
-    <PropertyControl
-      bindable={false}
-      control={def.control}
-      label={def.label}
-      key={def.key}
-      value={screenOrPageInstance[def.key]}
-      onChange={onScreenPropChange}
-      props={{ ...excludeProps(def, ['control', 'label']) }} />
-  {/each}
-{/if}
-
-{#if displayNameField}
-  <PropertyControl
-    control={Input}
-    label="Name"
-    key="_instanceName"
-    value={componentInstance._instanceName}
-    onChange={onInstanceNameChange} />
-  {#if duplicateName}
-    <span class="duplicate-name">Name must be unique</span>
+<div class="settings-view-container">
+  {#if screenOrPageInstance}
+    {#each screenOrPageDefinition as def}
+      <PropertyControl
+        bindable={false}
+        control={def.control}
+        label={def.label}
+        key={def.key}
+        value={screenOrPageInstance[def.key]}
+        onChange={onScreenPropChange}
+        props={{ ...excludeProps(def, ['control', 'label']) }} />
+    {/each}
  {/if}
-{/if}

-{#if panelDefinition && panelDefinition.length > 0}
-  {#each panelDefinition as definition}
-    {#if canRenderControl(definition.key, definition.dependsOn)}
-      <PropertyControl
-        control={definition.control}
-        label={definition.label}
-        key={definition.key}
-        value={componentInstance[definition.key] || componentInstance[definition.key]?.defaultValue}
-        {componentInstance}
-        {onChange}
-        props={{ ...excludeProps(definition, ['control', 'label']) }} />
+  {#if displayNameField}
+    <PropertyControl
+      control={Input}
+      label="Name"
+      key="_instanceName"
+      value={componentInstance._instanceName}
+      onChange={onInstanceNameChange} />
+    {#if duplicateName}
+      <span class="duplicate-name">Name must be unique</span>
    {/if}
-  {/each}
-{:else}
-  <div>This component does not have any settings.</div>
-{/if}
+  {/if}
+
+  {#if panelDefinition && panelDefinition.length > 0}
+    {#each panelDefinition as definition}
+      {#if canRenderControl(definition.key, definition.dependsOn)}
+        <PropertyControl
+          control={definition.control}
+          label={definition.label}
+          key={definition.key}
+          value={componentInstance[definition.key] || componentInstance[definition.key]?.defaultValue}
+          {componentInstance}
+          {onChange}
+          props={{ ...excludeProps(definition, ['control', 'label']) }} />
+      {/if}
+    {/each}
+  {:else}
+    <div class="empty">This component does not have any settings.</div>
+  {/if}
+</div>

 <style>
-  div {
+  .settings-view-container {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    gap: var(--spacing-s);
+  }
+
+  .empty {
    font-size: var(--font-size-s);
    margin-top: var(--spacing-m);
    color: var(--grey-6);