From 80dc692ca0130aa3dd1d515dc125ce3f04ef1f5f Mon Sep 17 00:00:00 2001 From: kevmodrome Date: Fri, 17 Apr 2020 09:16:03 +0200 Subject: [PATCH 1/3] 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 From c2db1b4d1179645259f210464feec455dda7f2dc Mon Sep 17 00:00:00 2001 From: kevmodrome Date: Fri, 17 Apr 2020 11:33:27 +0200 Subject: [PATCH 2/3] removes stuff from SelectionList component. --- .../ComponentSelectionList.svelte | 137 ------------------ 1 file changed, 137 deletions(-) diff --git a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte index 714aa66532..d1958d3d3f 100644 --- a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte +++ b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte @@ -3,122 +3,8 @@ import components from "./temporaryPanelStructure.js" import Tab from "./ComponentTab/Tab.svelte" - import { splitName } from "./pagesParsing/splitRootComponentName.js" - import { store } from "builderStore" - import { - find, - sortBy, - groupBy, - values, - filter, - map, - uniqBy, - flatten, - } from "lodash/fp" - import { ImageIcon, InputIcon, LayoutIcon } from "components/common/Icons/" - import Select from "components/common/Select.svelte" - import Button from "components/common/PlusButton.svelte" - import ConfirmDialog from "components/common/ConfirmDialog.svelte" - import { - getRecordNodes, - getIndexNodes, - getIndexSchema, - pipe, - } from "components/common/core" - - export let toggleTab - const categories = components.categories let selectedCategory = categories[0] - - let componentLibraries = [] - let current_view = "text" - let selectedComponent = null - let selectedLib - let selectTemplateDialog - let templateInstances = [] - let selectedTemplateInstance - - $: templatesByComponent = groupBy(t => t.component)($store.templates) - $: hierarchy = $store.hierarchy - $: libraryModules = $store.libraries - $: standaloneTemplates = pipe(templatesByComponent, [ - values, - flatten, - filter(t => !$store.components.some(c => c.name === t.component)), - map(t => ({ name: splitName(t.component).componentName, template: t })), - uniqBy(t => t.name), - ]) - - const addRootComponent = (component, allComponents) => { - const { libName } = splitName(component.name) - let group = find(r => r.libName === libName)(allComponents) - - if (!group) { - group = { - libName, - components: [], - } - - allComponents.push(group) - } - - group.components.push(component) - } - - const onComponentChosen = component => { - if (component.template) { - onTemplateChosen(component.template) - } else { - store.addChildComponent(component.name) - toggleTab() - } - } - - const onTemplateChosen = template => { - selectedComponent = null - const { componentName, libName } = splitName(template.name) - const templateOptions = { - records: getRecordNodes(hierarchy), - indexes: getIndexNodes(hierarchy), - helpers: { - indexSchema: getIndexSchema(hierarchy), - }, - } - templateInstances = libraryModules[libName][componentName](templateOptions) - if (!templateInstances || templateInstances.length === 0) return - selectedTemplateInstance = templateInstances[0].name - selectTemplateDialog.show() - } - - const onTemplateInstanceChosen = () => { - selectedComponent = null - const instance = templateInstances.find( - i => i.name === selectedTemplateInstance - ) - store.addTemplatedComponent(instance.props) - toggleTab() - } - - function generate_components_list(components) { - return ($store.currentFrontEndType === "page" - ? $store.builtins.concat(components) - : components - ).concat(standaloneTemplates) - } - - $: { - const newComponentLibraries = [] - - for (let comp of sortBy(["name"])($store.components)) { - addRootComponent(comp, newComponentLibraries) - } - - componentLibraries = newComponentLibraries - if (!selectedLib) selectedLib = newComponentLibraries[0].libName - } - - $: componentLibrary = componentLibraries.find(l => l.libName === selectedLib)
@@ -136,25 +22,6 @@
- (selectedComponent = null)} - onOk={onTemplateInstanceChosen}> - {#each templateInstances.map(i => i.name) as instance} -
- -
- {/each} -
- From 4586d5f89b11e82701a6f7f72c72df6497da6391 Mon Sep 17 00:00:00 2001 From: kevmodrome Date: Fri, 17 Apr 2020 11:45:53 +0200 Subject: [PATCH 3/3] add padding to properties tab --- .../src/components/userInterface/ComponentPropertiesPanel.svelte | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte index b953217f4d..c4c57c8e04 100644 --- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte +++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte @@ -146,6 +146,7 @@ .root { height: 100%; + padding: 20px; display: flex; flex-direction: column; }