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

Updates to naming conventions

This commit is contained in:
Conor_Mack 2020-05-05 10:02:10 +01:00
parent 06bbc88b3e
commit 8ad10976d3
4 changed files with 62 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,17 +1,19 @@
<script> <script>
import PropertyGroup from "./PropertyGroup.svelte" import PropertyGroup from "./PropertyGroup.svelte"
export let panelDefinition = {} export let panelDefinition = {}
export let componentInstance = {} export let componentInstance = {}
export let componentDefinition = {} export let componentDefinition = {}
const getProperties = prop => panelDefinition.props[prop] const getProperties = name => panelDefinition.properties[name]
$: props = !!panelDefinition.props && Object.keys(panelDefinition.props) $: propertyGroupNames =
!!panelDefinition.properties && Object.keys(panelDefinition.properties)
</script> </script>
{#each props as prop} {#each propertyGroupNames as groupName}
<PropertyGroup <PropertyGroup
title={prop} name={groupName}
content={getProperties(prop)} properties={getProperties(groupName)}
{componentDefinition} {componentDefinition}
{componentInstance} /> {componentInstance} />
{/each} {/each}

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

@ -1,6 +1,6 @@
<script> <script>
export let title = "" export let name = ""
export let content = {} export let properties = {}
export let componentInstance = {} export let componentInstance = {}
export let componentDefinition = {} export let componentDefinition = {}
@ -8,24 +8,24 @@
const propExistsOnComponentDef = prop => prop in componentDefinition.props const propExistsOnComponentDef = prop => prop in componentDefinition.props
const capitalize = title => title[0].toUpperCase() + title.slice(1) const capitalize = name => name[0].toUpperCase() + name.slice(1)
$: propertyKeys = Object.keys(content) $: propertyKeys = Object.keys(properties)
$: 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>
<div class="property-group-container" on:click={() => (show = !show)}> <div class="property-group-container" on:click={() => (show = !show)}>
<div class="property-group-title"> <div class="property-group-name">
<div class="icon"> <div class="icon">
<i class={icon} /> <i class={icon} />
</div> </div>
<div class="title">{capitalize(title)}</div> <div class="name">{capitalize(name)}</div>
</div> </div>
<div class="property-panel" class:show> <div class="property-panel" class:show>
<ul> <ul>
{#each propertyKeys as key} {#each propertyKeys as key}
<!-- {#if propExistsOnComponentDef(key)} --> <!-- {#if propExistsOnComponentDef(key)} -->
<li>{content[key].displayName || capitalize(key)}</li> <li>{properties[key].label || capitalize(key)}</li>
<!-- {/if} --> <!-- {/if} -->
{/each} {/each}
</ul> </ul>
@ -42,7 +42,7 @@
padding: 5px; padding: 5px;
} }
.property-group-title { .property-group-name {
cursor: pointer; cursor: pointer;
flex: 0 0 20px; flex: 0 0 20px;
display: flex; display: flex;
@ -54,7 +54,7 @@
text-align: center; text-align: center;
} }
.title { .name {
flex: 1; flex: 1;
text-align: left; text-align: left;
} }

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

@ -1,4 +1,3 @@
/* /*
TODO: all strings types are really inputs and could be typed as such TODO: all strings types are really inputs and could be typed as such
TODO: Options types need option items TODO: Options types need option items
@ -6,52 +5,52 @@
*/ */
export const layout = { export const layout = {
flexDirection: { displayName: "Direction", type: "string" }, flexDirection: { label: "Direction", control: "string" },
justifyContent: { displayName: "Justify", type: "string" }, justifyContent: { label: "Justify", control: "string" },
alignItems: { displayName: "Align", type: "string" }, alignItems: { label: "Align", control: "string" },
flexWrap: { displayName: "Wrap", type: "options" }, flexWrap: { label: "Wrap", control: "options" },
} }
export const spacing = { export const spacing = {
padding: { type: "string" }, padding: { control: "string" },
margin: { type: "string" }, margin: { control: "string" },
} }
export const size = { export const size = {
width: { type: "string" }, width: { control: "string" },
height: { type: "string" }, height: { control: "string" },
minWidth: { displayName: "Min W", type: "string" }, minWidth: { label: "Min W", control: "string" },
minHeight: { displayName: "Min H", type: "string" }, minHeight: { label: "Min H", control: "string" },
maxWidth: { displayName: "Max W", type: "string" }, maxWidth: { label: "Max W", control: "string" },
maxHeight: { displayName: "Max H", type: "string" }, maxHeight: { label: "Max H", control: "string" },
overflow: { type: "string" }, //custom overflow: { control: "string" }, //custom
} }
export const position = { export const position = {
position: { type: "options" }, position: { control: "options" },
} }
export const typography = { export const typography = {
font: { type: "options" }, font: { control: "options" },
weight: { type: "options" }, weight: { control: "options" },
size: { type: "string" }, size: { control: "string" },
lineHeight: { displayName: "Line H", type: "string" }, lineHeight: { label: "Line H", control: "string" },
color: { type: "colour" }, color: { control: "colour" },
align: { type: "string" }, //custom align: { control: "string" }, //custom
transform: { type: "string" }, //custom transform: { control: "string" }, //custom
style: { type: "string" }, //custom style: { control: "string" }, //custom
} }
export const background = { export const background = {
backgroundColor: { displayName: "Background Color", type: "colour" }, backgroundColor: { label: "Background Color", control: "colour" },
image: { type: "string" }, //custom image: { control: "string" }, //custom
} }
export const border = { export const border = {
radius: { type: "string" }, radius: { control: "string" },
width: { type: "string" }, //custom width: { control: "string" }, //custom
color: { type: "colour" }, color: { control: "colour" },
style: { type: "options" }, style: { control: "options" },
} }
export const effects = { export const effects = {
@ -61,9 +60,9 @@ export const effects = {
} }
export const transitions = { export const transitions = {
property: { type: "options" }, property: { control: "options" },
duration: { type: "string" }, duration: { control: "string" },
ease: { type: "options" }, ease: { control: "options" },
} }
export function excludeProps(props, propsToExclude) { export function excludeProps(props, propsToExclude) {

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

@ -13,7 +13,7 @@ export default {
icon: 'ri-layout-row-fill', icon: 'ri-layout-row-fill',
commonProps: {}, commonProps: {},
children: [], children: [],
props: { layout, background }, properties: { layout, background },
}, },
{ {
name: 'Text', name: 'Text',
@ -26,7 +26,7 @@ export default {
name: 'Headline', name: 'Headline',
description: "A component for displaying heading text", description: "A component for displaying heading text",
icon: "ri-heading", icon: "ri-heading",
props: { properties: {
layout, layout,
background, background,
}, },
@ -36,7 +36,7 @@ export default {
name: 'Paragraph', name: 'Paragraph',
description: "A component for displaying paragraph text.", description: "A component for displaying paragraph text.",
icon: 'ri-paragraph', icon: 'ri-paragraph',
props: {} properties: {}
} }
] ]
}, },
@ -51,28 +51,28 @@ export default {
name: "Textfield", name: "Textfield",
description: "A textfield component that allows the user to input text.", description: "A textfield component that allows the user to input text.",
icon: 'ri-edit-box-line', icon: 'ri-edit-box-line',
props: {} properties: {}
}, },
{ {
_component: "@budibase/standard-components/checkbox", _component: "@budibase/standard-components/checkbox",
name: "Checkbox", name: "Checkbox",
description: "A selectable checkbox component", description: "A selectable checkbox component",
icon: 'ri-checkbox-line', icon: 'ri-checkbox-line',
props: {} properties: {}
}, },
{ {
_component: "@budibase/standard-components/radiobutton", _component: "@budibase/standard-components/radiobutton",
name: "Radiobutton", name: "Radiobutton",
description: "A selectable radiobutton component", description: "A selectable radiobutton component",
icon: 'ri-radio-button-line', icon: 'ri-radio-button-line',
props: {} properties: {}
}, },
{ {
_component: "@budibase/standard-components/select", _component: "@budibase/standard-components/select",
name: "Select", name: "Select",
description: "A select component for choosing from different options", description: "A select component for choosing from different options",
icon: 'ri-file-list-line', icon: 'ri-file-list-line',
props: {} properties: {}
} }
] ]
}, },
@ -82,14 +82,14 @@ export default {
description: 'A basic html button that is ready for styling', description: 'A basic html button that is ready for styling',
icon: 'ri-radio-button-fill', icon: 'ri-radio-button-fill',
children: [], children: [],
props: {}, properties: {},
}, },
{ {
_component: "@budibase/standard-components/icon", _component: "@budibase/standard-components/icon",
name: 'Icon', name: 'Icon',
description: 'A basic component for displaying icons', description: 'A basic component for displaying icons',
icon: 'ri-sun-fill', icon: 'ri-sun-fill',
props: {}, properties: {},
children: [] children: []
}, },
{ {
@ -97,7 +97,7 @@ export default {
name: 'Link', name: 'Link',
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',
props: {}, properties: {},
children: [] children: []
} }
] ]
@ -111,14 +111,14 @@ export default {
name: 'Card', name: 'Card',
description: 'A basic card component that can contain content and actions.', description: 'A basic card component that can contain content and actions.',
icon: 'ri-layout-bottom-line', icon: 'ri-layout-bottom-line',
props: {}, properties: {},
children: [] children: []
}, },
{ {
name: 'Login', name: 'Login',
description: 'A component that automatically generates a login screen for your app.', description: 'A component that automatically generates a login screen for your app.',
icon: 'ri-login-box-fill', icon: 'ri-login-box-fill',
props: {}, properties: {},
children: [] children: []
}, },
{ {
@ -126,7 +126,7 @@ export default {
_component: "@budibase/standard-components/Navigation", _component: "@budibase/standard-components/Navigation",
description: "A component for handling the navigation within your app.", description: "A component for handling the navigation within your app.",
icon: "ri-navigation-fill", icon: "ri-navigation-fill",
props: {}, properties: {},
children: [] children: []
} }
] ]
@ -139,14 +139,14 @@ export default {
name: 'Table', name: 'Table',
description: 'A component that generates a table from your data.', description: 'A component that generates a table from your data.',
icon: 'ri-archive-drawer-fill', icon: 'ri-archive-drawer-fill',
props: {}, properties: {},
children: [] children: []
}, },
{ {
name: 'Form', name: 'Form',
description: 'A component that generates a form from your data.', description: 'A component that generates a form from your data.',
icon: 'ri-file-edit-fill', icon: 'ri-file-edit-fill',
props: {}, properties: {},
_component: "@budibase/materialdesign-components/Form", _component: "@budibase/materialdesign-components/Form",
template: { template: {
component: "@budibase/materialdesign-components/Form", component: "@budibase/materialdesign-components/Form",