From 017ac7aced1de768a943e0897eeadf118508aa1a Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Wed, 20 May 2020 11:55:25 +0100 Subject: [PATCH] Settings, Tidyup and Refactor --- .../ComponentPropertiesPanel.svelte | 12 ++-- .../userInterface/ComponentsHierarchy.svelte | 1 - .../ComponentsHierarchyChildren.svelte | 1 - .../userInterface/DesignView.svelte | 26 +++++--- .../userInterface/PropertyControl.svelte | 12 ++-- .../userInterface/PropertyGroup.svelte | 14 ++-- .../userInterface/SettingsView.svelte | 34 ++++++---- .../userInterface/propertyCategories.js | 66 +++++++++---------- .../userInterface/temporaryPanelStructure.js | 18 ++++- packages/standard-components/src/Link.svelte | 38 +---------- 10 files changed, 109 insertions(+), 113 deletions(-) diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte index b1b07c514e..507d04c356 100644 --- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte +++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte @@ -32,11 +32,13 @@ $: components = $store.components $: componentInstance = $store.currentComponentInfo $: componentDefinition = $store.components[componentInstance._component] - $: componentPropDefinition = flattenedPanel.find( - //use for getting controls for each component property - c => c._component === componentInstance._component - ) - $: panelDefinition = componentPropDefinition + $: componentPropDefinition = + flattenedPanel.find( + //use for getting controls for each component property + c => c._component === componentInstance._component + ) || {} + + $: panelDefinition = componentPropDefinition.properties ? componentPropDefinition.properties[selectedCategory.value] : {} diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte index 31ada23230..56b0af8814 100644 --- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte +++ b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte @@ -45,7 +45,6 @@ } const changeScreen = screen => { - debugger store.setCurrentScreen(screen.title) $goto(`./:page/${screen.title}`) } diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte index 36d401f500..c7b426b02b 100644 --- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte +++ b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte @@ -37,7 +37,6 @@ const selectComponent = component => { // Set current component - debugger store.selectComponent(component) // Get ID path diff --git a/packages/builder/src/components/userInterface/DesignView.svelte b/packages/builder/src/components/userInterface/DesignView.svelte index 612def10b0..4b505420c6 100644 --- a/packages/builder/src/components/userInterface/DesignView.svelte +++ b/packages/builder/src/components/userInterface/DesignView.svelte @@ -33,14 +33,20 @@
- {#each propertyGroupNames as groupName} - - {/each} + {#if propertyGroupNames.length > 0} + {#each propertyGroupNames as groupName} + + {/each} + {:else} +
+ This component does not have any design properties +
+ {/if}
@@ -58,4 +64,8 @@ .design-view-property-groups { flex: 1; } + + .no-design { + text-align: center; + } diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte index 99d91fcbd8..600005b5b6 100644 --- a/packages/builder/src/components/userInterface/PropertyControl.svelte +++ b/packages/builder/src/components/userInterface/PropertyControl.svelte @@ -5,18 +5,20 @@ export let control = null export let key = "" export let value = "" - export let valueType = "" export let props = {} export let onChange = () => {} function handleChange(key, v) { - !!v.target - ? onChange(name, key, valueType ? v.target[valueType] : v.target.value) - : onChange(name, key, v) + if (v.target) { + let val = props.valueType ? v.target[props.valueType] : v.target.value + onChange(key, val) + } else { + onChange(key, v) + } } const handleValueType = value => - valueType ? { [valueType]: value } : { value } + props.valueType ? { [props.valueType]: value } : { value }
diff --git a/packages/builder/src/components/userInterface/PropertyGroup.svelte b/packages/builder/src/components/userInterface/PropertyGroup.svelte index e1e3a98980..d15df62545 100644 --- a/packages/builder/src/components/userInterface/PropertyGroup.svelte +++ b/packages/builder/src/components/userInterface/PropertyGroup.svelte @@ -11,12 +11,6 @@ const capitalize = name => name[0].toUpperCase() + name.slice(1) - function onChange(key, v) { - !!v.target - ? onStyleChanged(name, key, v.target.value) - : onStyleChanged(name, key, v) - } - $: icon = show ? "ri-arrow-down-s-fill" : "ri-arrow-right-s-fill" @@ -33,10 +27,10 @@ + key={props.key} + value={componentInstance['_styles'][props.key]} + onChange={(key, value) => onStyleChanged(name, key, value)} + props={{ ...excludeProps(props, ['control', 'label']) }} /> {/each}
diff --git a/packages/builder/src/components/userInterface/SettingsView.svelte b/packages/builder/src/components/userInterface/SettingsView.svelte index fb017f47db..c945f90bdd 100644 --- a/packages/builder/src/components/userInterface/SettingsView.svelte +++ b/packages/builder/src/components/userInterface/SettingsView.svelte @@ -15,14 +15,26 @@ } -{#each panelDefinition as definition} - {#if propExistsOnComponentDef(definition.key)} - - {/if} -{/each} +{#if panelDefinition.length > 0} + {#each panelDefinition as definition} + {#if propExistsOnComponentDef(definition.key)} + + {/if} + {/each} +{:else} +
+ This component does not have any settings. +
+{/if} + + diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js index 6f7feaae45..99cd42638b 100644 --- a/packages/builder/src/components/userInterface/propertyCategories.js +++ b/packages/builder/src/components/userInterface/propertyCategories.js @@ -8,7 +8,7 @@ import InputGroup from "../common/Inputs/InputGroup.svelte" export const layout = [ { label: "Direction", - cssKey: "flex-direction", + key: "flex-direction", control: OptionSelect, initialValue: "columnReverse", options: [ @@ -18,11 +18,11 @@ export const layout = [ { label: "column-reverse", value: "columnReverse" }, ], }, - { label: "Justify", cssKey: "justify-content", control: Input }, - { label: "Align", cssKey: "align-items", control: Input }, + { label: "Justify", key: "justify-content", control: Input }, + { label: "Align", key: "align-items", control: Input }, { label: "Wrap", - cssKey: "flex-wrap", + key: "flex-wrap", control: OptionSelect, options: [{ label: "wrap" }, { label: "no wrap", value: "noWrap" }], }, @@ -37,26 +37,26 @@ const spacingMeta = [ export const spacing = [ { label: "Padding", - cssKey: "padding", + key: "padding", control: InputGroup, meta: spacingMeta, }, - { label: "Margin", cssKey: "margin", control: InputGroup, meta: spacingMeta }, + { label: "Margin", key: "margin", control: InputGroup, meta: spacingMeta }, ] export const size = [ - { label: "Width", cssKey: "width", control: Input }, - { label: "Height", cssKey: "height", control: Input }, - { label: "Min W", cssKey: "min-width", control: Input }, - { label: "Min H", cssKey: "min-height", control: Input }, - { label: "Max W", cssKey: "max-width", control: Input }, - { label: "Max H", cssKey: "max-height", control: Input }, + { label: "Width", key: "width", control: Input }, + { label: "Height", key: "height", control: Input }, + { label: "Min W", key: "min-width", control: Input }, + { label: "Min H", key: "min-height", control: Input }, + { label: "Max W", key: "max-width", control: Input }, + { label: "Max H", key: "max-height", control: Input }, ] export const position = [ { label: "Position", - cssKey: "position", + key: "position", control: OptionSelect, options: [ { label: "static" }, @@ -71,7 +71,7 @@ export const position = [ export const typography = [ { label: "Font", - cssKey: "font-family", + key: "font-family", control: OptionSelect, options: [ { label: "initial" }, @@ -87,7 +87,7 @@ export const typography = [ }, { label: "Weight", - cssKey: "font-weight", + key: "font-weight", control: OptionSelect, options: [ { label: "normal" }, @@ -96,28 +96,28 @@ export const typography = [ { label: "lighter" }, ], }, - { label: "size", cssKey: "font-size", control: Input }, - { label: "Line H", cssKey: "line-height", control: Input }, + { label: "size", key: "font-size", control: Input }, + { label: "Line H", key: "line-height", control: Input }, { label: "Color", - cssKey: "color", + key: "color", control: OptionSelect, options: ["black", "red", "white", "blue", "green"], }, { label: "align", - cssKey: "text-align", + key: "text-align", control: OptionSelect, options: ["initial", "left", "right", "center", "justify"], }, //custom - { label: "transform", cssKey: "text-transform", control: Input }, //custom - { label: "style", cssKey: "font-style", control: Input }, //custom + { label: "transform", key: "text-transform", control: Input }, //custom + { label: "style", key: "font-style", control: Input }, //custom ] export const background = [ { label: "Background", - cssKey: "background", + key: "background", control: OptionSelect, options: [ { label: "white" }, @@ -127,26 +127,26 @@ export const background = [ { label: "black" }, ], }, - { label: "Image", cssKey: "image", control: Input }, //custom + { label: "Image", key: "image", control: Input }, //custom ] export const border = [ - { label: "Radius", cssKey: "border-radius", control: Input }, - { label: "Width", cssKey: "border-width", control: Input }, //custom - { label: "Color", cssKey: "border-color", control: Input }, - { label: "Style", cssKey: "border-style", control: Input }, + { label: "Radius", key: "border-radius", control: Input }, + { label: "Width", key: "border-width", control: Input }, //custom + { label: "Color", key: "border-color", control: Input }, + { label: "Style", key: "border-style", control: Input }, ] export const effects = [ - { label: "Opacity", cssKey: "opacity", control: Input }, - { label: "Rotate", cssKey: "transform", control: Input }, //needs special control - { label: "Shadow", cssKey: "box-shadow", control: Input }, + { label: "Opacity", key: "opacity", control: Input }, + { label: "Rotate", key: "transform", control: Input }, //needs special control + { label: "Shadow", key: "box-shadow", control: Input }, ] export const transitions = [ - { label: "Property", cssKey: "transition-property", control: Input }, - { label: "Duration", cssKey: "transition-timing-function", control: Input }, - { label: "Ease", cssKey: "transition-ease", control: Input }, + { label: "Property", key: "transition-property", control: Input }, + { label: "Duration", key: "transition-timing-function", control: Input }, + { label: "Ease", key: "transition-ease", control: Input }, ] export const all = { diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js index 449393b67e..58a8a2c674 100644 --- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js +++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js @@ -201,7 +201,9 @@ export default { description: "A basic component for displaying icons", icon: "ri-sun-fill", children: [], - properties: { design: { ...all } }, + properties: { + design: { ...all }, + }, }, { _component: "@budibase/standard-components/link", @@ -209,7 +211,19 @@ export default { description: "A basic link component for internal and external links", icon: "ri-link", children: [], - properties: { design: { ...all } }, + properties: { + design: { ...all }, + settings: [ + { label: "Text", key: "text", control: Input }, + { label: "Url", key: "url", control: Input }, + { + label: "Open New Tab", + key: "openInNewTab", + valueType: "checked", + control: Checkbox, + }, + ], + }, }, ], }, diff --git a/packages/standard-components/src/Link.svelte b/packages/standard-components/src/Link.svelte index 0ac3d9f628..ef0b71d62e 100644 --- a/packages/standard-components/src/Link.svelte +++ b/packages/standard-components/src/Link.svelte @@ -4,11 +4,6 @@ export let url = "" export let text = "" export let openInNewTab = false - export let color - export let hoverColor - export let underline = false - export let fontFamily - export let fontSize export let _bb @@ -16,43 +11,12 @@ $: anchorElement && !text && _bb.attachChildren(anchorElement) $: target = openInNewTab ? "_blank" : "_self" - $: cssVariables = { - hoverColor, - color, - textDecoration: underline ? "underline" : "none", - fontSize, - fontFamily, - } - $: classes = createClasses(cssVariables) - - {text} - +{text}