adds basic tab view to the components pane

7 years ago · 80dc692ca0
5 changed files with 201 additions and 231 deletions
--- a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
+++ b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte
@ -1,4 +1,8 @@
 <script>
  // This should be fetched from somewhere in the future, rather than be hardcoded.
  import components from "./temporaryPanelStructure.js"
  import Tab from "./ComponentTab/Tab.svelte"
  import { splitName } from "./pagesParsing/splitRootComponentName.js"
  import { store } from "builderStore"
  import {
@ -24,6 +28,9 @@
  export let toggleTab
  const categories = components.categories
  let selectedCategory = categories[0]
  let componentLibraries = []
  let current_view = "text"
  let selectedComponent = null
@ -35,16 +42,13 @@
  $: templatesByComponent = groupBy(t => t.component)($store.templates)
  $: hierarchy = $store.hierarchy
  $: libraryModules = $store.libraries
-  $: standaloneTemplates = pipe(
+  $: standaloneTemplates = pipe(templatesByComponent, [
-    templatesByComponent,
+    values,
-    [
+    flatten,
-      values,
+    filter(t => !$store.components.some(c => c.name === t.component)),
-      flatten,
+    map(t => ({ name: splitName(t.component).componentName, template: t })),
-      filter(t => !$store.components.some(c => c.name === t.component)),
+    uniqBy(t => t.name),
-      map(t => ({ name: splitName(t.component).componentName, template: t })),
+  ])
      uniqBy(t => t.name),
    ]
  )
  const addRootComponent = (component, allComponents) => {
    const { libName } = splitName(component.name)
@ -118,84 +122,18 @@
 </script>
 <div class="root">
-  <Select on:change={e => (selectedLib = e.target.value)}>
+  <ul class="tabs">
-    {#each componentLibraries as lib}
+    {#each categories as category}
-      <option value={lib.libName}>{lib.libName}</option>
+      <li
-    {/each}
+        on:click={() => (selectedCategory = category)}
-  </Select>
+        class:active={selectedCategory === category}>
-
+        {category.name}
  <div class="library-container">
    <!-- <ul>
      <li>
        <button
          class:selected={current_view === 'text'}
          on:click={() => (current_view = 'text')}>
          <InputIcon />
        </button>
      </li>
      <li>
        <button
          class:selected={current_view === 'layout'}
          on:click={() => (current_view = 'layout')}>
          <LayoutIcon />
        </button>
      </li>
      <li>
        <button
          class:selected={current_view === 'media'}
          on:click={() => (current_view = 'media')}>
          <ImageIcon />
        </button>
      </li>
-    </ul> -->
+    {/each}
-
+  </ul>
-    {#if componentLibrary}
+  <div class="panel">
-      {#each generate_components_list(componentLibrary.components) as component}
+    <Tab components={selectedCategory.components} />
        <div class="component-container">
          <div class="component" on:click={() => onComponentChosen(component)}>
            <div class="name">{splitName(component.name).componentName}</div>
            {#if (component.presets || templatesByComponent[component.name]) && component.name === selectedComponent}
              <ul class="preset-menu">
                {#if component.presets}
                  <span>{splitName(component.name).componentName} Presets</span>
                  {#each Object.keys(component.presets) as preset}
                    <li
                      on:click|stopPropagation={() => onComponentChosen(component, preset)}>
                      {preset}
                    </li>
                  {/each}
                {/if}
                {#if templatesByComponent[component.name]}
                  <span>
                    {splitName(component.name).componentName} Templates
                  </span>
                  {#each templatesByComponent[component.name] as template}
                    <li
                      on:click|stopPropagation={() => onTemplateChosen(template)}>
                      {template.description}
                    </li>
                  {/each}
                {/if}
              </ul>
            {/if}
          </div>
          {#if component.presets || templatesByComponent[component.name]}
            <Button
              on:click={() => {
                selectedComponent = selectedComponent ? null : component.name
              }}>
              <span
                class="open-presets"
                class:open={selectedComponent === component.name}>
                ...
              </span>
            </Button>
          {/if}
        </div>
      {/each}
    {/if}
  </div>
 </div>
 <ConfirmDialog
@ -218,108 +156,33 @@
 </ConfirmDialog>
 <style>
-  .root {
+  .tabs {
    display: flex;
    flex-direction: column;
  }
  .library-container {
    padding: 0 0 10px 0;
    flex: 1 1 auto;
    min-height: 0px;
    margin-top: 20px;
  }
  .component-container {
    display: flex;
    align-items: center;
  }
  .component {
    position: relative;
    padding: 0 15px;
    cursor: pointer;
    border: 1px solid #d8d8d8;
    border-radius: 2px;
    margin: 5px 0;
    height: 40px;
    box-sizing: border-box;
    color: #000333;
    display: flex;
-    align-items: center;
+    justify-content: center;
    flex: 1;
    margin-right: 5px;
  }
  .component:hover {
    background-color: var(--lightslate);
  }
  .component > .name {
    color: #000333;
    display: inline-block;
    font-size: 13px;
    opacity: 0.8;
  }
  ul {
    list-style: none;
-    display: flex;
+    margin: 0 auto;
-    padding: 0;
+    padding: 0 30px;
-  }
+    border-bottom: 1px solid #d8d8d8;
  .preset-menu {
    flex-direction: column;
    position: absolute;
    top: 25px;
    left: 0;
    right: 0;
    z-index: 1;
    background: #fafafa;
    padding: 10px;
    border-radius: 2px;
    color: var(--secondary80);
  }
  .preset-menu > span {
    font-size: 13px;
    text-transform: uppercase;
    margin-top: 5px;
  }
  .preset-menu li {
    font-size: 14px;
-    margin-top: 13px;
+    font-weight: 500;
-  }
+    letter-spacing: 0.14px;
  .preset-menu li:hover {
    font-weight: bold;
  }
  li {
-    margin-right: 20px;
+    color: #808192;
-    background: none;
+    margin: 0 5px;
-    border-radius: 5px;
+    padding: 0 8px;
  }
  /* li button {
    width: 100%;
    height: 100%;
    background: none;
    border: none;
    border-radius: 5px;
    padding: 13px;
    outline: none;
    cursor: pointer;
-  } */
+  }
-  /* .selected {
+  .panel {
-    color: var(--button-text);
+    padding: 20px;
-    background: var(--background-button) !important;
+  }
  } */
-  .open {
+  .active {
-    color: rgba(0, 85, 255, 1);
+    border-bottom: solid 3px #0055ff;
    color: #393c44;
  }
  .template-instance-label {
--- a/packages/builder/src/components/userInterface/ComponentTab/Tab.svelte
+++ b/packages/builder/src/components/userInterface/ComponentTab/Tab.svelte
@ -0,0 +1,5 @@
 <script>
  export let components
 </script>
 {#each components as component}{component.component}{/each}
--- a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte
+++ b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte
@ -60,9 +60,7 @@
  .switcher {
    display: flex;
    justify-content: space-between;
-    margin-bottom: 20px;
+    margin: 20px;
    padding: 0 20px 20px;
    border-bottom: 1px solid #d8d8d8;
  }
  .switcher > button {
@ -85,11 +83,4 @@
    color: var(--secondary100);
    font-weight: 600;
  }
  .panel {
    flex: 1 1 auto;
    height: 0px;
    overflow-y: auto;
    padding: 0 20px 40px 20px;
  }
 </style>
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js
@ -0,0 +1,154 @@
 export default {
  categories: [
    {
      name: 'Basic',
      components: [
        {
          component: 'Text',
          icon: 'Text',
          type: [
            {
              _component: '@budibase/standard-components/header',
              name: 'Headline',
              icon: 'headline',
              props: {
                type: {
                  type: 'options',
                  options: [
                    'h1',
                    'h2'
                  ],
                  'default': 'h1'
                }
              }
            },
            {
              _component: '@budibase/standard-components/text',
              name: 'Paragraph',
              icon: 'paragraph'
            }
          ]
        },
        {
          component: 'Button',
          icon: 'Text',
          type: [
            {
              _component: '@budibase/standard-components/header',
              name: 'Headline',
              icon: 'headline',
              props: {
                type: {
                  type: 'options',
                  options: [
                    'h1',
                    'h2'
                  ],
                  'default': 'h1'
                }
              }
            },
            {
              _component: '@budibase/standard-components/text',
              name: 'Paragraph',
              icon: 'paragraph'
            }
          ]
        },
      ]
    },
    {
      name: 'Form',
      components: [
        {
          component: 'Text',
          icon: 'Text',
          type: [
            {
              _component: '@budibase/standard-components/header',
              name: 'Headline',
              icon: 'headline',
              props: {
                type: {
                  type: 'options',
                  options: [
                    'h1',
                    'h2'
                  ],
                  'default': 'h1'
                }
              }
            },
            {
              _component: '@budibase/standard-components/text',
              name: 'Paragraph',
              icon: 'paragraph'
            }
          ]
        }
      ]
    },
    {
      name: 'Blocks',
      components: [
        {
          component: 'Text',
          icon: 'Text',
          type: [
            {
              _component: '@budibase/standard-components/header',
              name: 'Headline',
              icon: 'headline',
              props: {
                type: {
                  type: 'options',
                  options: [
                    'h1',
                    'h2'
                  ],
                  'default': 'h1'
                }
              }
            },
            {
              _component: '@budibase/standard-components/text',
              name: 'Paragraph',
              icon: 'paragraph'
            }
          ]
        }
      ]
    },
    {
      name: 'Data',
      components: [
        {
          component: 'Text',
          icon: 'Text',
          type: [
            {
              _component: '@budibase/standard-components/header',
              name: 'Headline',
              icon: 'headline',
              props: {
                type: {
                  type: 'options',
                  options: [
                    'h1',
                    'h2'
                  ],
                  'default': 'h1'
                }
              }
            },
            {
              _component: '@budibase/standard-components/text',
              name: 'Paragraph',
              icon: 'paragraph'
            }
          ]
        }
      ]
    },
  ]
 }
--- a/packages/builder/src/components/userInterface/temporaryPanelStructure.json
+++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.json
@ -1,43 +0,0 @@
 {
  "categories": [
    {
      "name": "Basic",
      "components": [
        {
          "component": "Text",
          "icon": "Text",
          "commonProps": {
            //common for all components
            //Will include layout props
          },
          "type": [
            {
              "_component": "@budibase/standard-components/header",
              "name": "Headline",
              "icon": "headline",
              "props": {
                //props for headline
                "type": {
                  "type": "options",
                  "options": [
                    "h1",
                    "h2"
                  ],
                  "default": "h1"
                }
              }
            },
            {
              "_component": "@budibase/standard-components/text",
              "name": "Paragraph",
              "icon": "paragraph",
              "props": {
                //props for paragraph
              }
            }
          ]
        }
      ]
    }
  ]
 }