From b0e31a09b421f78151957681db6a98b94545fd03 Mon Sep 17 00:00:00 2001 From: Joe <49767913+joebudi@users.noreply.github.com> Date: Thu, 13 Aug 2020 08:58:48 +0100 Subject: [PATCH 1/8] New card component --- .../ModelDataTable/ModelDataTable.svelte | 4 + .../userInterface/ComponentsHierarchy.svelte | 19 +-- .../userInterface/PageLayout.svelte | 4 - .../userInterface/propertyCategories.js | 14 ++ .../userInterface/temporaryPanelStructure.js | 160 ++++++++++++++++++ packages/standard-components/components.json | 77 ++++++++- packages/standard-components/src/Card.Svelte | 80 +++++++++ .../src/CardHorizontal.Svelte | 104 ++++++++++++ packages/standard-components/src/index.js | 2 + 9 files changed, 449 insertions(+), 15 deletions(-) create mode 100644 packages/standard-components/src/Card.Svelte create mode 100644 packages/standard-components/src/CardHorizontal.Svelte diff --git a/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte b/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte index fa36018ae..180ce154a 100644 --- a/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte +++ b/packages/builder/src/components/database/ModelDataTable/ModelDataTable.svelte @@ -168,6 +168,9 @@ max-width: 200px; text-overflow: ellipsis; border: 1px solid var(--grey-4); + overflow: hidden; + white-space: pre; + box-sizing: border-box; } tbody tr { @@ -187,6 +190,7 @@ .popovers { display: flex; + gap: var(--spacing-m); } .no-data { diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte index b25d7a4e7..7de9670b0 100644 --- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte +++ b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte @@ -16,12 +16,15 @@ const joinPath = join("/") const normalizedName = name => - pipe(name, [ - trimCharsStart("./"), - trimCharsStart("~/"), - trimCharsStart("../"), - trimChars(" "), - ]) + pipe( + name, + [ + trimCharsStart("./"), + trimCharsStart("~/"), + trimCharsStart("../"), + trimChars(" "), + ] + ) const changeScreen = screen => { store.setCurrentScreen(screen.props._instanceName) @@ -94,10 +97,6 @@ margin: 0 0 0 5px; } - :global(svg) { - transition: 0.2s; - } - .rotate :global(svg) { transform: rotate(-90deg); } diff --git a/packages/builder/src/components/userInterface/PageLayout.svelte b/packages/builder/src/components/userInterface/PageLayout.svelte index d64ab670b..5889903f2 100644 --- a/packages/builder/src/components/userInterface/PageLayout.svelte +++ b/packages/builder/src/components/userInterface/PageLayout.svelte @@ -81,10 +81,6 @@ color: var(--grey-7); } - :global(svg) { - transition: 0.2s; - } - .rotate :global(svg) { transform: rotate(-90deg); } diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js index 0a18cb544..b85a9abac 100644 --- a/packages/builder/src/components/userInterface/propertyCategories.js +++ b/packages/builder/src/components/userInterface/propertyCategories.js @@ -70,6 +70,20 @@ export const layout = [ { label: "no wrap", value: "noWrap" }, ], }, + { + label: "Gap", + key: "gap", + control: OptionSelect, + options: [ + { label: "None", value: "0px" }, + { label: "4px", value: "4px" }, + { label: "8px", value: "8px" }, + { label: "16px", value: "16px" }, + { label: "20px", value: "20px" }, + { label: "32px", value: "32px" }, + { label: "64px", value: "64px" }, + ], + }, ] export const margin = [ diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js index 9a0d74b34..f9cd2740d 100644 --- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js +++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js @@ -311,6 +311,166 @@ export default { ], }, }, + { + name: "Card", + description: "Card components", + icon: "ri-layout-bottom-line", + commonProps: {}, + children: [ + { + _component: "@budibase/standard-components/card", + name: "Vertical", + description: + "A basic card component that can contain content and actions.", + icon: "ri-layout-bottom-line", + children: [], + properties: { + design: { ...all }, + settings: [ + { + label: "Image", + key: "imageUrl", + control: Input, + placeholder: "Image", + }, + { + label: "Heading", + key: "heading", + control: Input, + placeholder: "Heading", + }, + { + label: "Description", + key: "description", + control: Input, + placeholder: "Description", + }, + { + label: "Link Text", + key: "linkText", + control: Input, + placeholder: "Link Text", + }, + { + label: "Link Url", + key: "linkUrl", + control: Input, + placeholder: "Link URL", + }, + { + label: "Link Color", + key: "color", + control: Input, + placeholder: "Link Color", + }, + { + label: "Hover Color", + key: "linkHoverColor", + control: Input, + placeholder: "Hover Color", + }, + { + label: "Image Height", + key: "imageHeight", + control: OptionSelect, + options: ["12rem", "16rem", "20rem", "24rem"], + placeholder: "Image Height", + }, + { + label: "Card Width", + key: "cardWidth", + control: OptionSelect, + options: [ "16rem", "20rem", "24rem"], + placeholder: "Card Width", + }, + ], + }, + }, + { + _component: "@budibase/standard-components/cardhorizontal", + name: "Horizontal", + description: + "A basic card component that can contain content and actions.", + icon: "ri-layout-bottom-line", + children: [], + properties: { + design: { ...all }, + settings: [ + { + label: "Image", + key: "imageUrl", + control: Input, + placeholder: "Image", + }, + { + label: "Heading", + key: "heading", + control: Input, + placeholder: "Heading", + }, + { + label: "Description", + key: "description", + control: Input, + placeholder: "Description", + }, + { + label: "Subtext", + key: "subtext", + control: Input, + placeholder: "Subtext", + }, + { + label: "Link Text", + key: "linkText", + control: Input, + placeholder: "Link Text", + }, + { + label: "Link Url", + key: "linkUrl", + control: Input, + placeholder: "Link URL", + }, + { + label: "Link Color", + key: "color", + control: Input, + placeholder: "Link Color", + }, + { + label: "Hover Color", + key: "linkHoverColor", + control: Input, + placeholder: "Hover Color", + }, + { + label: "Card Width", + key: "cardWidth", + control: OptionSelect, + options: [ "24rem", "28rem", "32rem", "40rem", "48rem", "60rem", "100%"], + placeholder: "Card Height", + }, + { + label: "Image Width", + key: "imageWidth", + control: OptionSelect, + options: [ "8rem", "12rem", "16rem"], + placeholder: "Image Width", + }, + { + label: "Image Height", + key: "imageHeight", + control: OptionSelect, + options: [ "8rem", "12rem", "16rem", "auto"], + placeholder: "Image Height", + }, + ], + }, + }, + ] + }, + { _component: "@budibase/materialdesign-components/BasicCard", name: "Card", diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json index 6836f4981..cc2150282 100644 --- a/packages/standard-components/components.json +++ b/packages/standard-components/components.json @@ -268,6 +268,81 @@ "model": "models" } }, + "card": { + "name": "Card", + "props": { + "imageUrl": "string", + "heading": "string", + "description": "string", + "linkText": "string", + "linkUrl": "string", + "color": "string", + "linkHoverColor": "string", + "imageHeight": { + "type": "options", + "default": "20rem", + "options": [ + "12rem", + "16rem", + "20rem", + "24rem" + ] + }, + "cardWidth": { + "type": "options", + "default": "20rem", + "options": [ + "16rem", + "20rem", + "24rem" + ] + } + } + }, + "cardhorizontal": { + "name": "Horizontal Card", + "props": { + "imageUrl": "string", + "heading": "string", + "description": "string", + "subtext": "string", + "linkText": "string", + "linkUrl": "string", + "color": "string", + "linkHoverColor": "string", + "imageWidth": { + "type": "options", + "default": "8rem", + "options": [ + "8rem", + "12rem", + "16rem" + ] + }, + "cardWidth": { + "type": "options", + "default": "32rem", + "options": [ + "24rem", + "28rem", + "32rem", + "40rem", + "48rem", + "60rem", + "100%" + ] + }, + "imageHeight": { + "type": "options", + "default": "8rem", + "options": [ + "8rem", + "12rem", + "16rem" + ] + } + } + }, "datamap": { "description": "shiny chart", "data": true, @@ -525,7 +600,7 @@ "bullet": { "description": "Bullet chart", "data": true, - "props": { + "props": { "model": "string", "color": "string", "customSubtitle": "string", diff --git a/packages/standard-components/src/Card.Svelte b/packages/standard-components/src/Card.Svelte new file mode 100644 index 000000000..1d811dcbb --- /dev/null +++ b/packages/standard-components/src/Card.Svelte @@ -0,0 +1,80 @@ + + +
+ {#if showImage} + + {/if} +
+

{heading}

+

{description}

+ {linkText} +
+
+ + diff --git a/packages/standard-components/src/CardHorizontal.Svelte b/packages/standard-components/src/CardHorizontal.Svelte new file mode 100644 index 000000000..492c794c2 --- /dev/null +++ b/packages/standard-components/src/CardHorizontal.Svelte @@ -0,0 +1,104 @@ + + +
+ {#if showImage} + + {/if} +
+
+

{heading}

+

{description}

+
+ +
+
+ + diff --git a/packages/standard-components/src/index.js b/packages/standard-components/src/index.js index 071ffa1bc..598f37298 100644 --- a/packages/standard-components/src/index.js +++ b/packages/standard-components/src/index.js @@ -23,5 +23,7 @@ export { default as list } from "./List.svelte" export { default as datasearch } from "./DataSearch.svelte" export { default as embed } from "./Embed.svelte" export { default as stackedlist } from "./StackedList.svelte" +export { default as card } from "./Card.svelte" +export { default as cardhorizontal } from "./CardHorizontal.svelte" export { default as recorddetail } from "./RecordDetail.svelte" export * from "./Chart" From 25b71c4e862539e99daef8c91ac59171eacacfdb Mon Sep 17 00:00:00 2001 From: Joe <49767913+joebudi@users.noreply.github.com> Date: Thu, 13 Aug 2020 09:05:22 +0100 Subject: [PATCH 2/8] Formatting and Linting --- .../userInterface/ComponentsHierarchy.svelte | 15 ++++++-------- .../userInterface/temporaryPanelStructure.js | 20 +++++++++++++------ 2 files changed, 20 insertions(+), 15 deletions(-) diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte index 7de9670b0..6997b146e 100644 --- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte +++ b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte @@ -16,15 +16,12 @@ const joinPath = join("/") const normalizedName = name => - pipe( - name, - [ - trimCharsStart("./"), - trimCharsStart("~/"), - trimCharsStart("../"), - trimChars(" "), - ] - ) + pipe(name, [ + trimCharsStart("./"), + trimCharsStart("~/"), + trimCharsStart("../"), + trimChars(" "), + ]) const changeScreen = screen => { store.setCurrentScreen(screen.props._instanceName) diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js index f9cd2740d..51e228a64 100644 --- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js +++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js @@ -380,7 +380,7 @@ export default { label: "Card Width", key: "cardWidth", control: OptionSelect, - options: [ "16rem", "20rem", "24rem"], + options: ["16rem", "20rem", "24rem"], placeholder: "Card Width", }, ], @@ -448,29 +448,37 @@ export default { label: "Card Width", key: "cardWidth", control: OptionSelect, - options: [ "24rem", "28rem", "32rem", "40rem", "48rem", "60rem", "100%"], + options: [ + "24rem", + "28rem", + "32rem", + "40rem", + "48rem", + "60rem", + "100%", + ], placeholder: "Card Height", }, { label: "Image Width", key: "imageWidth", control: OptionSelect, - options: [ "8rem", "12rem", "16rem"], + options: ["8rem", "12rem", "16rem"], placeholder: "Image Width", }, { label: "Image Height", key: "imageHeight", control: OptionSelect, - options: [ "8rem", "12rem", "16rem", "auto"], + options: ["8rem", "12rem", "16rem", "auto"], placeholder: "Image Height", }, ], }, }, - ] + ], }, - + { _component: "@budibase/materialdesign-components/BasicCard", name: "Card", From fcc0449794daaf64b68540b68f3e574909b080a7 Mon Sep 17 00:00:00 2001 From: Joe <49767913+joebudi@users.noreply.github.com> Date: Thu, 13 Aug 2020 10:35:20 +0100 Subject: [PATCH 3/8] Text color update --- packages/standard-components/src/CardHorizontal.Svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/standard-components/src/CardHorizontal.Svelte b/packages/standard-components/src/CardHorizontal.Svelte index 492c794c2..bdb9b55df 100644 --- a/packages/standard-components/src/CardHorizontal.Svelte +++ b/packages/standard-components/src/CardHorizontal.Svelte @@ -86,7 +86,7 @@ font-size: 0.85rem; margin: 0; font-weight: 400; - color: #757575; + color: #707070; } a { From cd067dac41662029e424cc33d0b15d4cac07113e Mon Sep 17 00:00:00 2001 From: Joe <49767913+joebudi@users.noreply.github.com> Date: Thu, 13 Aug 2020 10:45:25 +0100 Subject: [PATCH 4/8] Update color for subtext --- packages/standard-components/src/CardHorizontal.Svelte | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/standard-components/src/CardHorizontal.Svelte b/packages/standard-components/src/CardHorizontal.Svelte index bdb9b55df..492c794c2 100644 --- a/packages/standard-components/src/CardHorizontal.Svelte +++ b/packages/standard-components/src/CardHorizontal.Svelte @@ -86,7 +86,7 @@ font-size: 0.85rem; margin: 0; font-weight: 400; - color: #707070; + color: #757575; } a { From e05dcceb7f1b41a27e59a3804ba64ae989bfc1c9 Mon Sep 17 00:00:00 2001 From: Joe <49767913+joebudi@users.noreply.github.com> Date: Thu, 13 Aug 2020 10:54:43 +0100 Subject: [PATCH 5/8] Let changed to const --- packages/standard-components/src/Card.Svelte | 2 +- packages/standard-components/src/CardHorizontal.Svelte | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/standard-components/src/Card.Svelte b/packages/standard-components/src/Card.Svelte index 1d811dcbb..b62ace732 100644 --- a/packages/standard-components/src/Card.Svelte +++ b/packages/standard-components/src/Card.Svelte @@ -1,7 +1,7 @@