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>
import PropertyGroup from "./PropertyGroup.svelte"
export let panelDefinition = {}
export let componentInstance = {}
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>
{#each props as prop}
{#each propertyGroupNames as groupName}
<PropertyGroup
title={prop}
content={getProperties(prop)}
name={groupName}
properties={getProperties(groupName)}
{componentDefinition}
{componentInstance} />
{/each}

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

@ -1,6 +1,6 @@
<script>
export let title = ""
export let content = {}
export let name = ""
export let properties = {}
export let componentInstance = {}
export let componentDefinition = {}
@ -8,24 +8,24 @@
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"
</script>
<div class="property-group-container" on:click={() => (show = !show)}>
<div class="property-group-title">
<div class="property-group-name">
<div class="icon">
<i class={icon} />
</div>
<div class="title">{capitalize(title)}</div>
<div class="name">{capitalize(name)}</div>
</div>
<div class="property-panel" class:show>
<ul>
{#each propertyKeys as key}
<!-- {#if propExistsOnComponentDef(key)} -->
<li>{content[key].displayName || capitalize(key)}</li>
<li>{properties[key].label || capitalize(key)}</li>
<!-- {/if} -->
{/each}
</ul>
@ -42,7 +42,7 @@
padding: 5px;
}
.property-group-title {
.property-group-name {
cursor: pointer;
flex: 0 0 20px;
display: flex;
@ -54,7 +54,7 @@
text-align: center;
}
.title {
.name {
flex: 1;
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: Options types need option items
@ -6,52 +5,52 @@
*/
export const layout = {
flexDirection: { displayName: "Direction", type: "string" },
justifyContent: { displayName: "Justify", type: "string" },
alignItems: { displayName: "Align", type: "string" },
flexWrap: { displayName: "Wrap", type: "options" },
flexDirection: { label: "Direction", control: "string" },
justifyContent: { label: "Justify", control: "string" },
alignItems: { label: "Align", control: "string" },
flexWrap: { label: "Wrap", control: "options" },
}
export const spacing = {
padding: { type: "string" },
margin: { type: "string" },
padding: { control: "string" },
margin: { control: "string" },
}
export const size = {
width: { type: "string" },
height: { type: "string" },
minWidth: { displayName: "Min W", type: "string" },
minHeight: { displayName: "Min H", type: "string" },
maxWidth: { displayName: "Max W", type: "string" },
maxHeight: { displayName: "Max H", type: "string" },
overflow: { type: "string" }, //custom
width: { control: "string" },
height: { control: "string" },
minWidth: { label: "Min W", control: "string" },
minHeight: { label: "Min H", control: "string" },
maxWidth: { label: "Max W", control: "string" },
maxHeight: { label: "Max H", control: "string" },
overflow: { control: "string" }, //custom
}
export const position = {
position: { type: "options" },
position: { control: "options" },
}
export const typography = {
font: { type: "options" },
weight: { type: "options" },
size: { type: "string" },
lineHeight: { displayName: "Line H", type: "string" },
color: { type: "colour" },
align: { type: "string" }, //custom
transform: { type: "string" }, //custom
style: { type: "string" }, //custom
font: { control: "options" },
weight: { control: "options" },
size: { control: "string" },
lineHeight: { label: "Line H", control: "string" },
color: { control: "colour" },
align: { control: "string" }, //custom
transform: { control: "string" }, //custom
style: { control: "string" }, //custom
}
export const background = {
backgroundColor: { displayName: "Background Color", type: "colour" },
image: { type: "string" }, //custom
backgroundColor: { label: "Background Color", control: "colour" },
image: { control: "string" }, //custom
}
export const border = {
radius: { type: "string" },
width: { type: "string" }, //custom
color: { type: "colour" },
style: { type: "options" },
radius: { control: "string" },
width: { control: "string" }, //custom
color: { control: "colour" },
style: { control: "options" },
}
export const effects = {
@ -61,9 +60,9 @@ export const effects = {
}
export const transitions = {
property: { type: "options" },
duration: { type: "string" },
ease: { type: "options" },
property: { control: "options" },
duration: { control: "string" },
ease: { control: "options" },
}
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',
commonProps: {},
children: [],
props: { layout, background },
properties: { layout, background },
},
{
name: 'Text',
@ -26,7 +26,7 @@ export default {
name: 'Headline',
description: "A component for displaying heading text",
icon: "ri-heading",
props: {
properties: {
layout,
background,
},
@ -36,7 +36,7 @@ export default {
name: 'Paragraph',
description: "A component for displaying paragraph text.",
icon: 'ri-paragraph',
props: {}
properties: {}
}
]
},
@ -51,28 +51,28 @@ export default {
name: "Textfield",
description: "A textfield component that allows the user to input text.",
icon: 'ri-edit-box-line',
props: {}
properties: {}
},
{
_component: "@budibase/standard-components/checkbox",
name: "Checkbox",
description: "A selectable checkbox component",
icon: 'ri-checkbox-line',
props: {}
properties: {}
},
{
_component: "@budibase/standard-components/radiobutton",
name: "Radiobutton",
description: "A selectable radiobutton component",
icon: 'ri-radio-button-line',
props: {}
properties: {}
},
{
_component: "@budibase/standard-components/select",
name: "Select",
description: "A select component for choosing from different options",
icon: 'ri-file-list-line',
props: {}
properties: {}
}
]
},
@ -82,14 +82,14 @@ export default {
description: 'A basic html button that is ready for styling',
icon: 'ri-radio-button-fill',
children: [],
props: {},
properties: {},
},
{
_component: "@budibase/standard-components/icon",
name: 'Icon',
description: 'A basic component for displaying icons',
icon: 'ri-sun-fill',
props: {},
properties: {},
children: []
},
{
@ -97,7 +97,7 @@ export default {
name: 'Link',
description: 'A basic link component for internal and external links',
icon: 'ri-link',
props: {},
properties: {},
children: []
}
]
@ -111,14 +111,14 @@ export default {
name: 'Card',
description: 'A basic card component that can contain content and actions.',
icon: 'ri-layout-bottom-line',
props: {},
properties: {},
children: []
},
{
name: 'Login',
description: 'A component that automatically generates a login screen for your app.',
icon: 'ri-login-box-fill',
props: {},
properties: {},
children: []
},
{
@ -126,7 +126,7 @@ export default {
_component: "@budibase/standard-components/Navigation",
description: "A component for handling the navigation within your app.",
icon: "ri-navigation-fill",
props: {},
properties: {},
children: []
}
]
@ -139,14 +139,14 @@ export default {
name: 'Table',
description: 'A component that generates a table from your data.',
icon: 'ri-archive-drawer-fill',
props: {},
properties: {},
children: []
},
{
name: 'Form',
description: 'A component that generates a form from your data.',
icon: 'ri-file-edit-fill',
props: {},
properties: {},
_component: "@budibase/materialdesign-components/Form",
template: {
component: "@budibase/materialdesign-components/Form",