From 12067af0db5651fa097f1b597a993a805498991f Mon Sep 17 00:00:00 2001 From: kevmodrome Date: Fri, 17 Apr 2020 09:16:03 +0200 Subject: [PATCH] adds basic tab view to the components pane --- .../ComponentSelectionList.svelte | 219 ++++-------------- .../userInterface/ComponentTab/Tab.svelte | 5 + .../ComponentsPaneSwitcher.svelte | 11 +- .../userInterface/temporaryPanelStructure.js | 154 ++++++++++++ .../temporaryPanelStructure.json | 43 ---- 5 files changed, 201 insertions(+), 231 deletions(-) create mode 100644 packages/builder/src/components/userInterface/ComponentTab/Tab.svelte create mode 100644 packages/builder/src/components/userInterface/temporaryPanelStructure.js delete mode 100644 packages/builder/src/components/userInterface/temporaryPanelStructure.json diff --git a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte index dab98f9173..714aa66532 100644 --- a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte +++ b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte @@ -1,4 +1,8 @@
- - -
- - - {#if componentLibrary} - {#each generate_components_list(componentLibrary.components) as component} -
-
onComponentChosen(component)}> -
{splitName(component.name).componentName}
- {#if (component.presets || templatesByComponent[component.name]) && component.name === selectedComponent} -
    - {#if component.presets} - {splitName(component.name).componentName} Presets - {#each Object.keys(component.presets) as preset} -
  • onComponentChosen(component, preset)}> - {preset} -
  • - {/each} - {/if} - {#if templatesByComponent[component.name]} - - {splitName(component.name).componentName} Templates - - {#each templatesByComponent[component.name] as template} -
  • onTemplateChosen(template)}> - {template.description} -
  • - {/each} - {/if} -
- {/if} -
- {#if component.presets || templatesByComponent[component.name]} - - {/if} -
- {/each} - {/if} + +
+
-
diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js new file mode 100644 index 0000000000..e8c3f4ff10 --- /dev/null +++ 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' + } + ] + } + ] + }, + ] +} \ No newline at end of file diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.json b/packages/builder/src/components/userInterface/temporaryPanelStructure.json deleted file mode 100644 index 3301ecae22..0000000000 --- a/packages/builder/src/components/userInterface/temporaryPanelStructure.json +++ /dev/null @@ -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 - } - } - ] - } - ] - } - ] -} \ No newline at end of file