From 004d839966c072f4c917acf4d8254a53699397fd Mon Sep 17 00:00:00 2001 From: Michael Shanks Date: Thu, 20 Feb 2020 17:06:50 +0000 Subject: [PATCH 1/8] new components --- .../materialdesign-components/components.json | 26 +++++++ .../materialdesign-components/package.json | 1 + .../src/Datatable/Datatable.svelte | 58 +++++----------- .../src/Datatable/DatatableBody.svelte | 15 ++++ .../src/Datatable/DatatableCell.svelte | 9 ++- .../src/Datatable/DatatableHead.svelte | 11 +++ .../src/Datatable/DatatableRow.svelte | 6 +- .../src/Datatable/index.js | 8 ++- .../src/Templates/indexDatatable.js | 69 +++++++++++++++++++ .../src/Test/TestApp.svelte | 2 + .../src/Test/createApp.js | 11 +-- .../src/Test/props.js | 23 +++++++ .../src/Test/testComponents.js | 26 +------ .../materialdesign-components/src/index.js | 12 +++- packages/standard-components/components.json | 32 +++++++++ packages/standard-components/src/Image.svelte | 19 +++++ packages/standard-components/src/Link.svelte | 18 +++++ .../standard-components/src/TableBody.svelte | 12 ++++ .../standard-components/src/TableHead.svelte | 12 ++++ packages/standard-components/src/Text.svelte | 2 +- packages/standard-components/src/index.js | 2 + 21 files changed, 294 insertions(+), 80 deletions(-) create mode 100644 packages/materialdesign-components/src/Datatable/DatatableBody.svelte create mode 100644 packages/materialdesign-components/src/Datatable/DatatableHead.svelte create mode 100644 packages/materialdesign-components/src/Templates/indexDatatable.js create mode 100644 packages/standard-components/src/Image.svelte create mode 100644 packages/standard-components/src/Link.svelte create mode 100644 packages/standard-components/src/TableBody.svelte create mode 100644 packages/standard-components/src/TableHead.svelte diff --git a/packages/materialdesign-components/components.json b/packages/materialdesign-components/components.json index 4abcb7aee4..c0e79c511c 100644 --- a/packages/materialdesign-components/components.json +++ b/packages/materialdesign-components/components.json @@ -1,5 +1,11 @@ { "_lib": "./dist/index.js", + "_templates": { + "indexDatatable": { + "description": "Datatable based on an Index", + "component": "Datatable" + } + }, "Body1": { "name": "Body1", "description": "Sets the font properties as Roboto Body 1", @@ -61,6 +67,26 @@ "props": {}, "tags": [] }, + "DatatableHead": { + "name": "DatatableHead", + "description": "Material Design .", + "props": {} + }, + "DatatableCell": { + "name": "DatatableCell", + "description": "Material Design .", + "props": {} + }, + "DatatableBody": { + "name": "DatatableBody", + "description": "Material Design .", + "props": {} + }, + "DatatableRow": { + "name": "DatatableRow", + "description": "Material Design .", + "props": {} + }, "H1": { "name": "H1", "description": "Sets the font properties as Roboto Headline1", diff --git a/packages/materialdesign-components/package.json b/packages/materialdesign-components/package.json index a93b5602a7..22a172766f 100644 --- a/packages/materialdesign-components/package.json +++ b/packages/materialdesign-components/package.json @@ -13,6 +13,7 @@ }, "devDependencies": { "@budibase/client": "^0.0.16", + "@budibase/standard-components": "^0.0.16", "@material/button": "^4.0.0", "@nx-js/compiler-util": "^2.0.0", "bcryptjs": "^2.4.3", diff --git a/packages/materialdesign-components/src/Datatable/Datatable.svelte b/packages/materialdesign-components/src/Datatable/Datatable.svelte index 7021feafe0..9c179e2eb9 100644 --- a/packages/materialdesign-components/src/Datatable/Datatable.svelte +++ b/packages/materialdesign-components/src/Datatable/Datatable.svelte @@ -6,14 +6,27 @@ import { Button } from "../Button" import ClassBuilder from "../ClassBuilder.js" + export let _bb + const cb = new ClassBuilder("data-table") setContext("BBMD:data-table:cb", cb) let datatable = null let instance = null + let tableElement + let initialied = false + + $: { + if(tableElement && datatable && !initialied) { + const children = _bb.attachChildren(tableElement) + if(children.length > 0) { + instance = new MDCDataTable(datatable) + initialied = true + } + } + } onMount(() => { - if (!!datatable) instance = new MDCDataTable(datatable) return () => { !!instance && instance.destroy() instance = null @@ -22,46 +35,7 @@
- - - - Id - First Name - Second Name - Gender - Address - Actions - - - - - 123456 - Conor - McKeown - Male - 1 Cool Street - - +
+
diff --git a/packages/materialdesign-components/src/Datatable/DatatableBody.svelte b/packages/materialdesign-components/src/Datatable/DatatableBody.svelte new file mode 100644 index 0000000000..409d4828eb --- /dev/null +++ b/packages/materialdesign-components/src/Datatable/DatatableBody.svelte @@ -0,0 +1,15 @@ + + + \ No newline at end of file diff --git a/packages/materialdesign-components/src/Datatable/DatatableCell.svelte b/packages/materialdesign-components/src/Datatable/DatatableCell.svelte index beb078d7cb..3cea365f99 100644 --- a/packages/materialdesign-components/src/Datatable/DatatableCell.svelte +++ b/packages/materialdesign-components/src/Datatable/DatatableCell.svelte @@ -3,6 +3,7 @@ export let isHeader = false export let numeric = false + export let _bb const cb = getContext("BBMD:data-table:cb") @@ -10,14 +11,18 @@ let modifiers = { numeric } let props = { modifiers } let cellClass = cb.build({ elementName, props }) + let element + + $: element && _bb.attachChildren(element) + {#if isHeader} - + {:else} - + {/if} diff --git a/packages/materialdesign-components/src/Datatable/DatatableHead.svelte b/packages/materialdesign-components/src/Datatable/DatatableHead.svelte new file mode 100644 index 0000000000..f50a5cca0e --- /dev/null +++ b/packages/materialdesign-components/src/Datatable/DatatableHead.svelte @@ -0,0 +1,11 @@ + + + \ No newline at end of file diff --git a/packages/materialdesign-components/src/Datatable/DatatableRow.svelte b/packages/materialdesign-components/src/Datatable/DatatableRow.svelte index 6ad16f94d6..08b0fd1040 100644 --- a/packages/materialdesign-components/src/Datatable/DatatableRow.svelte +++ b/packages/materialdesign-components/src/Datatable/DatatableRow.svelte @@ -3,6 +3,9 @@ export let onSelect = () => {}; export let isHeader = false; + + export let _bb + let row = null; let selected = false; @@ -14,7 +17,8 @@ $: modifiers = { selected }; $: props = { modifiers }; $: rowClass = cb.build({ elementName, props }); - + $: row && _bb.attachChildren(row) + function rowSelected() { selected = !selected; onSelect(); diff --git a/packages/materialdesign-components/src/Datatable/index.js b/packages/materialdesign-components/src/Datatable/index.js index 2be32d546f..69dd1e759e 100644 --- a/packages/materialdesign-components/src/Datatable/index.js +++ b/packages/materialdesign-components/src/Datatable/index.js @@ -1,2 +1,6 @@ -import "./_style.scss"; -export { default as Datatable } from "./Datatable.svelte"; +import "./_style.scss" +export { default as Datatable } from "./Datatable.svelte" +export { default as DatatableCell } from "./DatatableCell.svelte" +export { default as DatatableHead } from "./DatatableHead.svelte" +export { default as DatatableBody } from "./DatatableBody.svelte" +export { default as DatatableRow } from "./DatatableRow.svelte" diff --git a/packages/materialdesign-components/src/Templates/indexDatatable.js b/packages/materialdesign-components/src/Templates/indexDatatable.js new file mode 100644 index 0000000000..145e3f5eea --- /dev/null +++ b/packages/materialdesign-components/src/Templates/indexDatatable.js @@ -0,0 +1,69 @@ +export default ({ indexes, helpers }) => + indexes.map(i => ({ + name: `Table based on index: ${i.name} `, + props: tableProps(i, helpers.indexSchema(i)), + })) + +const tableProps = (index, indexSchema) => ({ + _component: "@budibase/materialdesign-components/Datatable", + _children: [ + { + _component: "@budibase/materialdesign-components/DatatableHead", + _children: [ + { + _component: "@budibase/materialdesign-components/DatatableRow", + isHeader: true, + _children: columnHeaders(indexSchema), + }, + ], + }, + { + _component: "@budibase/materialdesign-components/DatatableBody", + _children: [ + { + _code: rowCode(index), + _component: "@budibase/materialdesign-components/DatatableRow", + _children: dataCells(index, indexSchema), + }, + ], + }, + ], +}) + +const columnHeaders = indexSchema => + indexSchema.map(col => ({ + _component: "@budibase/materialdesign-components/DatatableCell", + isHeader: true, + _children: [ + { + _component: "@budibase/standard-components/text", + type: "none", + text: col.name, + }, + ], + })) + +const dataCells = (index, indexSchema) => + indexSchema.map(col => ({ + _component: "@budibase/materialdesign-components/DatatableCell", + _children: [ + { + _component: "@budibase/standard-components/text", + type: "none", + text: { + "##bbstate": `${dataItem(index)}.${col.name}`, + "##bbstatefallback": "", + "##bbsource": "context", + }, + }, + ], + })) + +const dataItem = index => `${index.name}_item` +const dataCollection = index => `store.${index.name}` +const rowCode = index => + ` +if (!${dataCollection(index)}) return + +for (let ${dataItem(index)} of ${dataCollection(index)}) + render( { ${dataItem(index)}) }` diff --git a/packages/materialdesign-components/src/Test/TestApp.svelte b/packages/materialdesign-components/src/Test/TestApp.svelte index bdca2e72b0..229f5293e9 100644 --- a/packages/materialdesign-components/src/Test/TestApp.svelte +++ b/packages/materialdesign-components/src/Test/TestApp.svelte @@ -12,6 +12,7 @@ Radiobutton, Radiobuttongroup, Datatable, + CustomersIndexTable, } = props let currentComponent @@ -32,6 +33,7 @@ Radiobutton, Radiobuttongroup, Datatable, + CustomersIndexTable ], }, } diff --git a/packages/materialdesign-components/src/Test/createApp.js b/packages/materialdesign-components/src/Test/createApp.js index d9a491a8af..8cea5c1268 100644 --- a/packages/materialdesign-components/src/Test/createApp.js +++ b/packages/materialdesign-components/src/Test/createApp.js @@ -2,23 +2,24 @@ import { createApp } from "@budibase/client/src/createApp" import components from "./testComponents" import packageJson from "../../package.json" import { rootComponent } from "./rootComponent" +import * as standardcomponents from "@budibase/standard-components/src/index" + export default async props => { delete components._lib const componentLibraries = {} componentLibraries[packageJson.name] = components componentLibraries["testcomponents"] = { - rootComponent: rootComponent(window) + rootComponent: rootComponent(window), } + componentLibraries["@budibase/standard-components"] = standardcomponents const appDef = { hierarchy: {}, actions: {} } const user = { name: "yeo", permissions: [] } const { initialisePage } = createApp( - window.document, componentLibraries, { appRootPath: "" }, appDef, user, - {}, - [] + {} ) return initialisePage -} \ No newline at end of file +} diff --git a/packages/materialdesign-components/src/Test/props.js b/packages/materialdesign-components/src/Test/props.js index a94c171537..43da839f65 100644 --- a/packages/materialdesign-components/src/Test/props.js +++ b/packages/materialdesign-components/src/Test/props.js @@ -1,3 +1,24 @@ +import indexDatatable from "../Templates/indexDatatable" + +const templateOptions = { + indexes: [ + { + name: "customers", + }, + ], + helpers: { + indexSchema: index => { + const field = name => ({ name }) + if (index.name === "customers") + return [ + field("id"), + field("surname"), + field("forname"), + field("address"), + ] + }, + }, +} export const props = { H1: { @@ -80,4 +101,6 @@ export const props = { _component: "@budibase/materialdesign-components/Datatable", _children: [], }, + + CustomersIndexTable: indexDatatable(templateOptions)[0].props, } diff --git a/packages/materialdesign-components/src/Test/testComponents.js b/packages/materialdesign-components/src/Test/testComponents.js index 7ac56d181d..3b0a914e71 100644 --- a/packages/materialdesign-components/src/Test/testComponents.js +++ b/packages/materialdesign-components/src/Test/testComponents.js @@ -1,25 +1,3 @@ -import { - H1, - Overline, - Button, - Icon, - Textfield, - Checkbox, - Checkboxgroup, - Radiobutton, - Radiobuttongroup, - Datatable, -} from "@BBMD" +import * as components from "@BBMD" -export default { - H1, - Overline, - Button, - Icon, - Textfield, - Checkbox, - Checkboxgroup, - Radiobutton, - Radiobuttongroup, - Datatable, -} +export default components diff --git a/packages/materialdesign-components/src/index.js b/packages/materialdesign-components/src/index.js index c5c98ba0cb..92bdf2ca8e 100644 --- a/packages/materialdesign-components/src/index.js +++ b/packages/materialdesign-components/src/index.js @@ -1,4 +1,4 @@ -import "@material/theme/mdc-theme.scss"; +import "@material/theme/mdc-theme.scss" export { Button } from "./Button" export { default as Icon } from "./Common/Icon.svelte" @@ -7,5 +7,11 @@ export * from "./Typography" export { Checkbox, Checkboxgroup } from "./Checkbox" export { Radiobutton, Radiobuttongroup } from "./Radiobutton" export { default as Label } from "./Common/Label.svelte" -export { Datatable } from "./Datatable" - +export { + Datatable, + DatatableHead, + DatatableBody, + DatatableCell, + DatatableRow, +} from "./Datatable" +export { default as indexDatatable } from "./Templates/indexDatatable" diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json index 537a11103d..d5e8320b93 100644 --- a/packages/standard-components/components.json +++ b/packages/standard-components/components.json @@ -137,6 +137,24 @@ }, "tags": ["div", "container"] }, + "link": { + "description": "an HTML anchor tag", + "props": { + "url": "string", + "openInNewTab": "bool", + "text": "string" + } + }, + "image": { + "description": "an HTML tag", + "props": { + "url": "string", + "className": "string", + "description": "string", + "height": "string", + "width": "string" + } + }, "container": { "name": "Container", "description": "An element that contains and lays out other elements. e.g.
,
etc", @@ -178,5 +196,19 @@ } }, "tags": [] + }, + "thead": { + "name": "TableHead", + "description": "an HTML tab", + "props" : { + "className":"string" + } + }, + "tbody": { + "name": "TableBody", + "description": "an HTML tab", + "props" : { + "className":"string" + } } } \ No newline at end of file diff --git a/packages/standard-components/src/Image.svelte b/packages/standard-components/src/Image.svelte new file mode 100644 index 0000000000..d7ea125a92 --- /dev/null +++ b/packages/standard-components/src/Image.svelte @@ -0,0 +1,19 @@ + + + +{description} \ No newline at end of file diff --git a/packages/standard-components/src/Link.svelte b/packages/standard-components/src/Link.svelte new file mode 100644 index 0000000000..9c48d1c302 --- /dev/null +++ b/packages/standard-components/src/Link.svelte @@ -0,0 +1,18 @@ + + +{text} + + diff --git a/packages/standard-components/src/TableBody.svelte b/packages/standard-components/src/TableBody.svelte new file mode 100644 index 0000000000..2302cc8fff --- /dev/null +++ b/packages/standard-components/src/TableBody.svelte @@ -0,0 +1,12 @@ + + + \ No newline at end of file diff --git a/packages/standard-components/src/TableHead.svelte b/packages/standard-components/src/TableHead.svelte new file mode 100644 index 0000000000..b958bd2c85 --- /dev/null +++ b/packages/standard-components/src/TableHead.svelte @@ -0,0 +1,12 @@ + + + \ No newline at end of file diff --git a/packages/standard-components/src/Text.svelte b/packages/standard-components/src/Text.svelte index 43cd8f1708..c8d8a245bf 100644 --- a/packages/standard-components/src/Text.svelte +++ b/packages/standard-components/src/Text.svelte @@ -29,7 +29,7 @@ {#if isTag("none")} -{text} +{text} {:else if isTag("")} {text} {:else if isTag("")} diff --git a/packages/standard-components/src/index.js b/packages/standard-components/src/index.js index 3d512cb252..7d9a3d04a7 100644 --- a/packages/standard-components/src/index.js +++ b/packages/standard-components/src/index.js @@ -7,3 +7,5 @@ export { default as option } from "./Option.svelte" export { default as button } from "./Button.svelte" export { default as login } from "./Login.svelte" export { default as saveRecordButton } from "./Templates/saveRecordButton" +export { default as link } from "./Link.svelte" +export { default as image } from "./Image.svelte" From 1d2f079914fe224e1dba267dd33dbcb5aeca549f Mon Sep 17 00:00:00 2001 From: Michael Shanks Date: Thu, 20 Feb 2020 17:07:25 +0000 Subject: [PATCH 2/8] added height and width as positioning options --- .../builder/src/builderStore/generate_css.js | 26 +++++++++++++++---- .../src/userInterface/LayoutEditor.svelte | 21 +++++++++++++++ 2 files changed, 42 insertions(+), 5 deletions(-) diff --git a/packages/builder/src/builderStore/generate_css.js b/packages/builder/src/builderStore/generate_css.js index 212a032a6f..2c0fa48406 100644 --- a/packages/builder/src/builderStore/generate_css.js +++ b/packages/builder/src/builderStore/generate_css.js @@ -4,22 +4,29 @@ import { pipe } from "../common/core" const self = n => n const join_with = delimiter => a => a.join(delimiter) const empty_string_to_unset = s => (s.length ? s : "0") -const add_suffix = suffix => s => s + suffix +const add_suffix_if_number = suffix => s => { + try { + if (isNaN(s) || isNaN(parseFloat(s))) return s + } catch (_) { + return s + } + return s + suffix +} export const make_margin = values => pipe(values, [ map(empty_string_to_unset), - map(add_suffix("px")), + map(add_suffix_if_number("px")), join_with(" "), ]) const css_map = { templaterows: { - name: "grid-template-columns", + name: "grid-template-rows", generate: self, }, templatecolumns: { - name: "grid-template-rows", + name: "grid-template-columns", generate: self, }, gridarea: { @@ -58,6 +65,14 @@ const css_map = { name: "z-index", generate: self, }, + height: { + name: "height", + generate: self, + }, + width: { + name: "width", + generate: self, + }, } export const generate_rule = ([name, values]) => @@ -97,10 +112,11 @@ const apply_class = (id, name, styles) => `.${name}-${id} {\n${styles}\n}` export const generate_screen_css = component_array => { let styles = "" + let emptyStyles = { layout: {}, position: {} } for (let i = 0; i < component_array.length; i += 1) { const { _styles, _id, _children } = component_array[i] - const { layout, position } = generate_css(_styles) + const { layout, position } = generate_css(_styles || emptyStyles) styles += apply_class(_id, "pos", position) + "\n" styles += apply_class(_id, "lay", layout) + "\n" diff --git a/packages/builder/src/userInterface/LayoutEditor.svelte b/packages/builder/src/userInterface/LayoutEditor.svelte index b77b47523d..98f43fd59e 100644 --- a/packages/builder/src/userInterface/LayoutEditor.svelte +++ b/packages/builder/src/userInterface/LayoutEditor.svelte @@ -35,6 +35,11 @@ padding: ["Padding", tbrl, "small"], } + $: size = { + height: ["Height", single], + width: ["Width", single], + } + $: zindex = { zindex: ["Z-Index", single], } @@ -82,6 +87,22 @@ onStyleChanged={_value => onStyleChanged('position', key, _value)} values={layout[key] || newValue(meta.length)} {meta} + {size} + type="text" /> +
+ {/each} + + +

Size

+
+ {#each Object.entries(size) as [key, [name, meta, size]] (component._id + key)} +
+
{name}:
+ onStyleChanged('position', key, _value)} + values={layout[key] || newValue(meta.length)} + type="text" + {meta} {size} />
{/each} From 21461645ccc33bff318d2d0b4bb707b0f90e9daf Mon Sep 17 00:00:00 2001 From: Michael Shanks Date: Thu, 20 Feb 2020 17:08:17 +0000 Subject: [PATCH 3/8] store method for save page or screen (context dependant) --- packages/builder/src/builderStore/store.js | 29 +++++++++------------- 1 file changed, 12 insertions(+), 17 deletions(-) diff --git a/packages/builder/src/builderStore/store.js b/packages/builder/src/builderStore/store.js index 3cb400c4de..766dac3f06 100644 --- a/packages/builder/src/builderStore/store.js +++ b/packages/builder/src/builderStore/store.js @@ -749,7 +749,7 @@ const addTemplatedComponent = store => props => { props ) - _savePage(state) + _saveCurrentPreviewItem(state) return state }) @@ -792,9 +792,7 @@ const setComponentStyle = store => (type, name, value) => { ]) // save without messing with the store - s.currentFrontEndType === "page" - ? _savePage(s) - : _saveScreenApi(s.currentPreviewItem, s) + _saveCurrentPreviewItem(s) return s }) } @@ -843,9 +841,7 @@ const deleteComponent = store => component => { parent._children = parent._children.filter(c => c !== component) } - s.currentFrontEndType === "page" - ? _savePage(s) - : _saveScreenApi(s.currentPreviewItem, s) + _saveCurrentPreviewItem(s) return s }) @@ -864,9 +860,7 @@ const moveUpComponent = store => component => { parent._children = newChildren } s.currentComponentInfo = component - s.currentFrontEndType === "page" - ? _savePage(s) - : _saveScreenApi(s.currentPreviewItem, s) + _saveCurrentPreviewItem(s) return s }) @@ -885,9 +879,7 @@ const moveDownComponent = store => component => { parent._children = newChildren } s.currentComponentInfo = component - s.currentFrontEndType === "page" - ? _savePage(s) - : _saveScreenApi(s.currentPreviewItem, s) + _saveCurrentPreviewItem(s) return s }) @@ -902,9 +894,7 @@ const copyComponent = store => component => { }) parent._children = [...parent._children, copiedComponent] s.curren - s.currentFrontEndType === "page" - ? _savePage(s) - : _saveScreenApi(s.currentPreviewItem, s) + _saveCurrentPreviewItem(s) s.currentComponentInfo = copiedComponent return s }) @@ -913,7 +903,7 @@ const copyComponent = store => component => { const getParent = (rootProps, child) => { let parent walkProps(rootProps, (p, breakWalk) => { - if (p._children.includes(child)) { + if (p._children && p._children.includes(child)) { parent = p breakWalk() } @@ -934,3 +924,8 @@ const walkProps = (props, action, cancelToken = null) => { } } } + +const _saveCurrentPreviewItem = s => + s.currentFrontEndType === "page" + ? _savePage(s) + : _saveScreenApi(s.currentPreviewItem, s) From 5f7511e3fd8f5f5ac854465258316b444820144f Mon Sep 17 00:00:00 2001 From: Michael Shanks Date: Thu, 20 Feb 2020 17:08:51 +0000 Subject: [PATCH 4/8] create props - ensure _styles always exist --- .../builder/src/userInterface/pagesParsing/createProps.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/builder/src/userInterface/pagesParsing/createProps.js b/packages/builder/src/userInterface/pagesParsing/createProps.js index 407deb57ff..42e1fd37e4 100644 --- a/packages/builder/src/userInterface/pagesParsing/createProps.js +++ b/packages/builder/src/userInterface/pagesParsing/createProps.js @@ -77,6 +77,10 @@ export const makePropsSafe = (componentDefinition, props) => { } } + if (!props._styles) { + props._styles = { layout: {}, position: {} } + } + return props } From 6b4e6076c3a5a21902b296c1800b3e274dbf0824 Mon Sep 17 00:00:00 2001 From: Michael Shanks Date: Thu, 20 Feb 2020 17:09:14 +0000 Subject: [PATCH 5/8] ensure component templates exist when presets do not --- .../builder/src/userInterface/ComponentSelectionList.svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/builder/src/userInterface/ComponentSelectionList.svelte b/packages/builder/src/userInterface/ComponentSelectionList.svelte index d8902ebe4e..7ceb9d7f11 100644 --- a/packages/builder/src/userInterface/ComponentSelectionList.svelte +++ b/packages/builder/src/userInterface/ComponentSelectionList.svelte @@ -139,7 +139,7 @@ {/if}
- {#if component.presets} + {#if component.presets || templatesByComponent[component.name]} + + {/each} + diff --git a/packages/builder/src/userInterface/UserInterfaceRoot.svelte b/packages/builder/src/userInterface/UserInterfaceRoot.svelte index 84b1e2728a..29064ca412 100644 --- a/packages/builder/src/userInterface/UserInterfaceRoot.svelte +++ b/packages/builder/src/userInterface/UserInterfaceRoot.svelte @@ -1,6 +1,7 @@
@@ -40,63 +41,32 @@
-
- +
Navigator + Pages
+
-
- -
- - store.setScreenType('page')} - class="components-nav-header" - class:active={$store.currentFrontEndType === 'page'}> - Page - -
-
- {#if $store.currentFrontEndType === 'page'} - - {/if} - -
-
+
-
- - store.setScreenType('screen')} - class="components-nav-header" - class:active={$store.currentFrontEndType === 'screen'}> + Screens - - {#if $store.currentFrontEndType === 'screen'} -
- -
- {/if} +
+ +
- {#if $store.currentFrontEndType === 'screen'} - - {/if} + +
@@ -117,12 +87,12 @@ - store.deleteComponent(componentToDelete)}/> + onOk={() => store.deleteComponent(componentToDelete)} /> From 1bb0a9a14bc14f2d8f9044f4a1a7b3970fae2eb0 Mon Sep 17 00:00:00 2001 From: Michael Shanks Date: Thu, 20 Feb 2020 17:27:48 +0000 Subject: [PATCH 8/8] dodgy merge --- .../src/userInterface/ComponentSelectionList.svelte | 1 - .../builder/src/userInterface/ComponentsHierarchy.svelte | 8 ++++++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/builder/src/userInterface/ComponentSelectionList.svelte b/packages/builder/src/userInterface/ComponentSelectionList.svelte index 19ce097775..91f5c73a74 100644 --- a/packages/builder/src/userInterface/ComponentSelectionList.svelte +++ b/packages/builder/src/userInterface/ComponentSelectionList.svelte @@ -116,7 +116,6 @@ {#if componentLibrary} - {#each $store.builtins.concat(componentLibrary.components) as component} {#each generate_components_list(componentLibrary.components) as component}
- c && last(c.name ? c.name.split("/") : c._component.split("/")) + const lastPartOfName = c => { + if (!c) return "" + const name = c.name ? c.name : c._component ? c._component : c + return last(name.split("/")) + } + const isComponentSelected = (current, comp) => current === comp