MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Settings, Tidyup and Refactor

This commit is contained in:
Conor_Mack 2020-05-20 11:55:25 +01:00
parent 3cd48773d1
commit 017ac7aced
10 changed files with 109 additions and 113 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
View File

@ -32,11 +32,13 @@
$: components = $store.components $: components = $store.components
$: componentInstance = $store.currentComponentInfo $: componentInstance = $store.currentComponentInfo
$: componentDefinition = $store.components[componentInstance._component] $: componentDefinition = $store.components[componentInstance._component]
$: componentPropDefinition = flattenedPanel.find( $: componentPropDefinition =
//use for getting controls for each component property flattenedPanel.find(
c => c._component === componentInstance._component //use for getting controls for each component property
) c => c._component === componentInstance._component
$: panelDefinition = componentPropDefinition ) || {}
$: panelDefinition = componentPropDefinition.properties
? componentPropDefinition.properties[selectedCategory.value] ? componentPropDefinition.properties[selectedCategory.value]
: {} : {}

1
packages/builder/src/components/userInterface/ComponentsHierarchy.svelte
View File

@ -45,7 +45,6 @@
} }
const changeScreen = screen => { const changeScreen = screen => {
debugger
store.setCurrentScreen(screen.title) store.setCurrentScreen(screen.title)
$goto(`./:page/${screen.title}`) $goto(`./:page/${screen.title}`)
} }

1
packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte
View File

@ -37,7 +37,6 @@
const selectComponent = component => { const selectComponent = component => {
// Set current component // Set current component
debugger
store.selectComponent(component) store.selectComponent(component)
// Get ID path // Get ID path

26
packages/builder/src/components/userInterface/DesignView.svelte
View File

@ -33,14 +33,20 @@
</div> </div>
<div class="design-view-property-groups"> <div class="design-view-property-groups">
{#each propertyGroupNames as groupName} {#if propertyGroupNames.length > 0}
<PropertyGroup {#each propertyGroupNames as groupName}
name={groupName} <PropertyGroup
properties={getProperties(groupName)} name={groupName}
{onStyleChanged} properties={getProperties(groupName)}
{componentDefinition} {onStyleChanged}
{componentInstance} /> {componentDefinition}
{/each} {componentInstance} />
{/each}
{:else}
<div class="no-design">
<span>This component does not have any design properties</span>
</div>
{/if}
</div> </div>
</div> </div>
@ -58,4 +64,8 @@
.design-view-property-groups { .design-view-property-groups {
flex: 1; flex: 1;
} }
.no-design {
text-align: center;
}
</style> </style>

12
packages/builder/src/components/userInterface/PropertyControl.svelte
View File

@ -5,18 +5,20 @@
export let control = null export let control = null
export let key = "" export let key = ""
export let value = "" export let value = ""
export let valueType = ""
export let props = {} export let props = {}
export let onChange = () => {} export let onChange = () => {}
function handleChange(key, v) { function handleChange(key, v) {
!!v.target if (v.target) {
? onChange(name, key, valueType ? v.target[valueType] : v.target.value) let val = props.valueType ? v.target[props.valueType] : v.target.value
: onChange(name, key, v) onChange(key, val)
} else {
onChange(key, v)
}
} }
const handleValueType = value => const handleValueType = value =>
valueType ? { [valueType]: value } : { value } props.valueType ? { [props.valueType]: value } : { value }
</script> </script>
<div class="property-control"> <div class="property-control">

14
packages/builder/src/components/userInterface/PropertyGroup.svelte
View File

@ -11,12 +11,6 @@
const capitalize = name => name[0].toUpperCase() + name.slice(1) 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" $: icon = show ? "ri-arrow-down-s-fill" : "ri-arrow-right-s-fill"
</script> </script>
@ -33,10 +27,10 @@
<PropertyControl <PropertyControl
label={props.label} label={props.label}
control={props.control} control={props.control}
key={props.cssKey} key={props.key}
value={componentInstance['_styles'][props.cssKey]} value={componentInstance['_styles'][props.key]}
onChange={onStyleChanged} onChange={(key, value) => onStyleChanged(name, key, value)}
props={{ ...excludeProps(props, ['control']) }} /> props={{ ...excludeProps(props, ['control', 'label']) }} />
{/each} {/each}
</div> </div>
</div> </div>

34
packages/builder/src/components/userInterface/SettingsView.svelte
View File

@ -15,14 +15,26 @@
} }
</script> </script>
{#each panelDefinition as definition} {#if panelDefinition.length > 0}
{#if propExistsOnComponentDef(definition.key)} {#each panelDefinition as definition}
<PropertyControl {#if propExistsOnComponentDef(definition.key)}
control={definition.control} <PropertyControl
label={definition.label} control={definition.control}
key={definition.key} label={definition.label}
value={componentInstance[definition.key]} key={definition.key}
{onChange} value={componentInstance[definition.key]}
props={{ ...excludeProps(definition, ['control']) }} /> {onChange}
{/if} props={{ ...excludeProps(definition, ['control', 'label']) }} />
{/each} {/if}
{/each}
{:else}
<div>
<span>This component does not have any settings.</span>
</div>
{/if}
<style>
div {
text-align: center;
}
</style>

66
packages/builder/src/components/userInterface/propertyCategories.js
View File

@ -8,7 +8,7 @@ import InputGroup from "../common/Inputs/InputGroup.svelte"
export const layout = [ export const layout = [
{ {
label: "Direction", label: "Direction",
cssKey: "flex-direction", key: "flex-direction",
control: OptionSelect, control: OptionSelect,
initialValue: "columnReverse", initialValue: "columnReverse",
options: [ options: [
@ -18,11 +18,11 @@ export const layout = [
{ label: "column-reverse", value: "columnReverse" }, { label: "column-reverse", value: "columnReverse" },
], ],
}, },
{ label: "Justify", cssKey: "justify-content", control: Input }, { label: "Justify", key: "justify-content", control: Input },
{ label: "Align", cssKey: "align-items", control: Input }, { label: "Align", key: "align-items", control: Input },
{ {
label: "Wrap", label: "Wrap",
cssKey: "flex-wrap", key: "flex-wrap",
control: OptionSelect, control: OptionSelect,
options: [{ label: "wrap" }, { label: "no wrap", value: "noWrap" }], options: [{ label: "wrap" }, { label: "no wrap", value: "noWrap" }],
}, },
@ -37,26 +37,26 @@ const spacingMeta = [
export const spacing = [ export const spacing = [
{ {
label: "Padding", label: "Padding",
cssKey: "padding", key: "padding",
control: InputGroup, control: InputGroup,
meta: spacingMeta, meta: spacingMeta,
}, },
{ label: "Margin", cssKey: "margin", control: InputGroup, meta: spacingMeta }, { label: "Margin", key: "margin", control: InputGroup, meta: spacingMeta },
] ]
export const size = [ export const size = [
{ label: "Width", cssKey: "width", control: Input }, { label: "Width", key: "width", control: Input },
{ label: "Height", cssKey: "height", control: Input }, { label: "Height", key: "height", control: Input },
{ label: "Min W", cssKey: "min-width", control: Input }, { label: "Min W", key: "min-width", control: Input },
{ label: "Min H", cssKey: "min-height", control: Input }, { label: "Min H", key: "min-height", control: Input },
{ label: "Max W", cssKey: "max-width", control: Input }, { label: "Max W", key: "max-width", control: Input },
{ label: "Max H", cssKey: "max-height", control: Input }, { label: "Max H", key: "max-height", control: Input },
] ]
export const position = [ export const position = [
{ {
label: "Position", label: "Position",
cssKey: "position", key: "position",
control: OptionSelect, control: OptionSelect,
options: [ options: [
{ label: "static" }, { label: "static" },
@ -71,7 +71,7 @@ export const position = [
export const typography = [ export const typography = [
{ {
label: "Font", label: "Font",
cssKey: "font-family", key: "font-family",
control: OptionSelect, control: OptionSelect,
options: [ options: [
{ label: "initial" }, { label: "initial" },
@ -87,7 +87,7 @@ export const typography = [
}, },
{ {
label: "Weight", label: "Weight",
cssKey: "font-weight", key: "font-weight",
control: OptionSelect, control: OptionSelect,
options: [ options: [
{ label: "normal" }, { label: "normal" },
@ -96,28 +96,28 @@ export const typography = [
{ label: "lighter" }, { label: "lighter" },
], ],
}, },
{ label: "size", cssKey: "font-size", control: Input }, { label: "size", key: "font-size", control: Input },
{ label: "Line H", cssKey: "line-height", control: Input }, { label: "Line H", key: "line-height", control: Input },
{ {
label: "Color", label: "Color",
cssKey: "color", key: "color",
control: OptionSelect, control: OptionSelect,
options: ["black", "red", "white", "blue", "green"], options: ["black", "red", "white", "blue", "green"],
}, },
{ {
label: "align", label: "align",
cssKey: "text-align", key: "text-align",
control: OptionSelect, control: OptionSelect,
options: ["initial", "left", "right", "center", "justify"], options: ["initial", "left", "right", "center", "justify"],
}, //custom }, //custom
{ label: "transform", cssKey: "text-transform", control: Input }, //custom { label: "transform", key: "text-transform", control: Input }, //custom
{ label: "style", cssKey: "font-style", control: Input }, //custom { label: "style", key: "font-style", control: Input }, //custom
] ]
export const background = [ export const background = [
{ {
label: "Background", label: "Background",
cssKey: "background", key: "background",
control: OptionSelect, control: OptionSelect,
options: [ options: [
{ label: "white" }, { label: "white" },
@ -127,26 +127,26 @@ export const background = [
{ label: "black" }, { label: "black" },
], ],
}, },
{ label: "Image", cssKey: "image", control: Input }, //custom { label: "Image", key: "image", control: Input }, //custom
] ]
export const border = [ export const border = [
{ label: "Radius", cssKey: "border-radius", control: Input }, { label: "Radius", key: "border-radius", control: Input },
{ label: "Width", cssKey: "border-width", control: Input }, //custom { label: "Width", key: "border-width", control: Input }, //custom
{ label: "Color", cssKey: "border-color", control: Input }, { label: "Color", key: "border-color", control: Input },
{ label: "Style", cssKey: "border-style", control: Input }, { label: "Style", key: "border-style", control: Input },
] ]
export const effects = [ export const effects = [
{ label: "Opacity", cssKey: "opacity", control: Input }, { label: "Opacity", key: "opacity", control: Input },
{ label: "Rotate", cssKey: "transform", control: Input }, //needs special control { label: "Rotate", key: "transform", control: Input }, //needs special control
{ label: "Shadow", cssKey: "box-shadow", control: Input }, { label: "Shadow", key: "box-shadow", control: Input },
] ]
export const transitions = [ export const transitions = [
{ label: "Property", cssKey: "transition-property", control: Input }, { label: "Property", key: "transition-property", control: Input },
{ label: "Duration", cssKey: "transition-timing-function", control: Input }, { label: "Duration", key: "transition-timing-function", control: Input },
{ label: "Ease", cssKey: "transition-ease", control: Input }, { label: "Ease", key: "transition-ease", control: Input },
] ]
export const all = { export const all = {

18
packages/builder/src/components/userInterface/temporaryPanelStructure.js
View File

@ -201,7 +201,9 @@ export default {
description: "A basic component for displaying icons", description: "A basic component for displaying icons",
icon: "ri-sun-fill", icon: "ri-sun-fill",
children: [], children: [],
properties: { design: { ...all } }, properties: {
design: { ...all },
},
}, },
{ {
_component: "@budibase/standard-components/link", _component: "@budibase/standard-components/link",
@ -209,7 +211,19 @@ export default {
description: "A basic link component for internal and external links", description: "A basic link component for internal and external links",
icon: "ri-link", icon: "ri-link",
children: [], 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,
},
],
},
}, },
], ],
}, },

38
packages/standard-components/src/Link.svelte
View File

@ -4,11 +4,6 @@
export let url = "" export let url = ""
export let text = "" export let text = ""
export let openInNewTab = false export let openInNewTab = false
export let color
export let hoverColor
export let underline = false
export let fontFamily
export let fontSize
export let _bb export let _bb
@ -16,43 +11,12 @@
$: anchorElement && !text && _bb.attachChildren(anchorElement) $: anchorElement && !text && _bb.attachChildren(anchorElement)
$: target = openInNewTab ? "_blank" : "_self" $: target = openInNewTab ? "_blank" : "_self"
$: cssVariables = {
hoverColor,
color,
textDecoration: underline ? "underline" : "none",
fontSize,
fontFamily,
}
$: classes = createClasses(cssVariables)
</script> </script>
<a <a href={url} bind:this={anchorElement} {target}>{text}</a>
href={url}
bind:this={anchorElement}
class={classes}
{target}
use:cssVars={cssVariables}>
{text}
</a>
<style> <style>
.color {
color: var(--color);
}
.hoverColor:hover {
color: var(--color);
}
.textDecoration { .textDecoration {
text-decoration: var(--textDecoration); text-decoration: var(--textDecoration);
} }
.fontSize {
font-size: var(--fontSize);
}
.fontFamily {
font-family: var(--fontFamily);
}
</style> </style>