From 64f828ce109f39739cf90f2d12950a6bb5cea81b Mon Sep 17 00:00:00 2001 From: Joe <49767913+joebudi@users.noreply.github.com> Date: Fri, 31 Jul 2020 12:02:29 +0100 Subject: [PATCH] Stacked list component added --- .../userInterface/temporaryPanelStructure.js | 71 ++++++++++++--- packages/standard-components/components.json | 12 +++ .../src/StackedList.svelte | 89 +++++++++++++++++++ packages/standard-components/src/index.js | 1 + 4 files changed, 162 insertions(+), 11 deletions(-) create mode 100644 packages/standard-components/src/StackedList.svelte diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js index fedc432150..220343b332 100644 --- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js +++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js @@ -246,6 +246,66 @@ export default { name: "Blocks", isCategory: true, children: [ + { + name: "List", + _component: "@budibase/standard-components/list", + description: "Renders all children once per record, of a given table", + icon: "ri-file-list-line", + properties: { + design: { ...all }, + settings: [{ label: "Table", key: "model", control: ModelSelect }], + }, + children: [], + }, + { + _component: "@budibase/standard-components/stackedlist", + name: "Stacked List", + description: + "A basic card component that can contain content and actions.", + icon: "ri-archive-drawer-line", + children: [], + properties: { + design: { ...all }, + settings: [ + { + label: "Image", + key: "imageUrl", + control: Input, + placeholder: "{{{context.Image}}}", + }, + { + label: "Heading", + key: "heading", + control: Input, + placeholder: "{{context.Heading}}", + }, + { + label: "Text 1", + key: "text1", + control: Input, + placeholder: "{{context.Text 1}}", + }, + { + label: "Text 2", + key: "text2", + control: Input, + placeholder: "{{context.Text 2}}", + }, + { + label: "Text 3", + key: "text3", + control: Input, + placeholder: "{{context.Text 3}}", + }, + { + label: "destinationUrl", + key: "destinationUrl", + control: Input, + placeholder: "/table/_id", + }, + ], + }, + }, { _component: "@budibase/materialdesign-components/BasicCard", name: "Card", @@ -407,17 +467,6 @@ export default { // }, // children: [], // }, - { - name: "List", - _component: "@budibase/standard-components/list", - description: "Renders all children once per record, of a given table", - icon: "ri-file-list-line", - properties: { - design: { ...all }, - settings: [{ label: "Table", key: "model", control: ModelSelect }], - }, - children: [], - }, { name: "Record Detail", _component: "@budibase/standard-components/recorddetail", diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json index 1b266f4021..4b913e83dc 100644 --- a/packages/standard-components/components.json +++ b/packages/standard-components/components.json @@ -249,6 +249,18 @@ "model": "models" } }, + "stackedlist": { + "name": "Stacked List", + "description": "A stacked list component for displaying information", + "props": { + "imageUrl": "string", + "heading": "string", + "text1": "string", + "text2": "string", + "text3": "string", + "destinationUrl": "string" + } + }, "recorddetail": { "description": "Loads a record, using an ID in the url", "data": true, diff --git a/packages/standard-components/src/StackedList.svelte b/packages/standard-components/src/StackedList.svelte new file mode 100644 index 0000000000..ceb061ce93 --- /dev/null +++ b/packages/standard-components/src/StackedList.svelte @@ -0,0 +1,89 @@ + + +
+ +
+ {#if showImage} +
+ +
+ {/if} +

{heading}

+

{text1}

+

{text2}

+

{text3}

+
+
+
+ + diff --git a/packages/standard-components/src/index.js b/packages/standard-components/src/index.js index a0c6ee025d..b7cf0f2a03 100644 --- a/packages/standard-components/src/index.js +++ b/packages/standard-components/src/index.js @@ -23,4 +23,5 @@ export { default as list } from "./List.svelte" export { default as datasearch } from "./DataSearch.svelte" export { default as datamap } from "./DataMap.svelte" export { default as embed } from "./Embed.svelte" +export { default as stackedlist } from "./StackedList.svelte" export { default as recorddetail } from "./RecordDetail.svelte"