From aeeca0293aac4ab4284fe0bdbfcffafc80260e2d Mon Sep 17 00:00:00 2001 From: Joe <49767913+joebudi@users.noreply.github.com> Date: Wed, 1 Jul 2020 14:37:57 +0100 Subject: [PATCH] Table component revised plus minor UI changes Table redesigned to be more flexible and include setting props for better control --- .../ComponentPropertiesPanel.svelte | 10 +- .../userInterface/PropertyControl.svelte | 1 - .../userInterface/propertyCategories.js | 8 ++ .../userInterface/temporaryPanelStructure.js | 14 ++- packages/standard-components/components.json | 28 ++++- .../standard-components/src/DataTable.svelte | 110 ++++++++++++------ 6 files changed, 122 insertions(+), 49 deletions(-) diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte index 38e4dd67a9..60e758b0b6 100644 --- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte +++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte @@ -100,7 +100,7 @@ {#if displayName}
- {componentInstance._instanceName} + {componentInstance._instanceName}
{/if} @@ -142,13 +142,15 @@ } .component-props-container { - margin-top: 10px; + margin-top: 16px; flex: 1 1 auto; min-height: 0; } .instance-name { - margin-top: 10px; - font-size: 12px; + margin-top: 20px; + font-size: 14px; + font-weight: 500; + color: var(--grey-7); } diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte index b79d01fb32..f9a8533b33 100644 --- a/packages/builder/src/components/userInterface/PropertyControl.svelte +++ b/packages/builder/src/components/userInterface/PropertyControl.svelte @@ -52,7 +52,6 @@ } .label { - flex: 0 0 50px; display: flex; align-items: center; font-size: 12px; diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js index d3605210e9..1c33efc6c9 100644 --- a/packages/builder/src/components/userInterface/propertyCategories.js +++ b/packages/builder/src/components/userInterface/propertyCategories.js @@ -85,6 +85,8 @@ export const margin = [ { label: "20px", value: "20px" }, { label: "32px", value: "32px" }, { label: "64px", value: "64px" }, + { label: "128px", value: "128px" }, + { label: "256px", value: "256px" }, { label: "Auto", value: "auto" }, { label: "100%", value: "100%" }, ], @@ -101,6 +103,8 @@ export const margin = [ { label: "20px", value: "20px" }, { label: "32px", value: "32px" }, { label: "64px", value: "64px" }, + { label: "128px", value: "128px" }, + { label: "256px", value: "256px" }, { label: "Auto", value: "auto" }, { label: "100%", value: "100%" }, ], @@ -133,6 +137,8 @@ export const margin = [ { label: "20px", value: "20px" }, { label: "32px", value: "32px" }, { label: "64px", value: "64px" }, + { label: "128px", value: "128px" }, + { label: "256px", value: "256px" }, { label: "Auto", value: "auto" }, { label: "100%", value: "100%" }, ], @@ -149,6 +155,8 @@ export const margin = [ { label: "20px", value: "20px" }, { label: "32px", value: "32px" }, { label: "64px", value: "64px" }, + { label: "128px", value: "128px" }, + { label: "256px", value: "256px" }, { label: "Auto", value: "auto" }, { label: "100%", value: "100%" }, ], diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js index ae39ce3ee2..ba5b5da84e 100644 --- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js +++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js @@ -313,7 +313,13 @@ export default { icon: "ri-archive-drawer-fill", properties: { design: { ...all }, - settings: [{ label: "Model", key: "model", control: ModelSelect }], + settings: [ + { label: "Model", key: "model", control: ModelSelect }, + { label: "Stripe Color", key: "stripeColor", control: Input }, + { label: "Border Color", key: "borderColor", control: Input }, + { label: "TH Color", key: "backgroundColor", control: Input }, + { label: "TH Font Color", key: "color", control: Input } + ], }, children: [], }, @@ -330,11 +336,7 @@ export default { properties: { design: { ...all }, settings: [ - { - label: "Model", - key: "model", - control: ModelSelect, - }, + { label: "Model", key: "model", control: ModelSelect,}, ], }, template: { diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json index 8df7756499..d3987ce164 100644 --- a/packages/standard-components/components.json +++ b/packages/standard-components/components.json @@ -26,6 +26,20 @@ "borderStyle": "string" } }, + "Navigation1": { + "name": "Navigation1", + "description": "A basic left navigation component", + "props": { + "logoUrl": "string", + "title": "string", + "backgroundColor": "string", + "color": "string", + "borderWidth": "string", + "borderColor": "string", + "borderStyle": "string" + } + }, + "button": { "name": "Button", "description": "an html