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

Testing Complete - Resolve Post Issue

This commit is contained in:
Conor_Mack 2020-05-18 16:32:00 +01:00
parent baec9f50d9
commit 5b8d1cead7
15 changed files with 294 additions and 215 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
packages/builder/src/builderStore/generate_css.js
View File

@ -110,33 +110,36 @@ const object_to_css_string = [
join_with("\n"),
]
export const generate_css = ({ layout, position }) => {
let _layout = pipe(layout, object_to_css_string)
if (_layout.length) {
_layout += `\ndisplay: ${_layout.includes("flex") ? "flex" : "grid"};`
}
export const generate_css = style => {
// let cssString = pipe(style, object_to_css_string)
let cssString = Object.entries(style).reduce((str, [key, value]) => {
//TODO Handle arrays and objects here also
if (typeof value === "string") {
if (value) {
return (str += `${key}: ${value};\n`)
}
} else if (Array.isArray(value)) {
return (str += `${key}: ${value.map(v => `${v}px`).join(" ")};\n`)
}
}, "")
return {
layout: _layout,
position: pipe(position, object_to_css_string),
}
return (cssString || "").trim()
}
const apply_class = (id, name, styles) => `.${name}-${id} {\n${styles}\n}`
export const generate_screen_css = component_array => {
let styles = ""
let emptyStyles = { layout: {}, position: {} }
let emptyStyles = {}
for (let i = 0; i < component_array.length; i += 1) {
const { _styles, _id, _children } = component_array[i]
const { layout, position } = generate_css(_styles || emptyStyles)
styles += apply_class(_id, "pos", position) + "\n"
styles += apply_class(_id, "lay", layout) + "\n"
const cssString = generate_css(_styles || emptyStyles) || ""
if (cssString) {
styles += apply_class(_id, "element", cssString)
}
if (_children && _children.length) {
styles += generate_screen_css(_children) + "\n"
}
}
return styles.trim()
}
}

9
packages/builder/src/builderStore/store/index.js
View File

@ -140,10 +140,12 @@ const _saveScreen = async (store, s, screen) => {
return s
}
const _saveScreenApi = (screen, s) =>
const _saveScreenApi = (screen, s) => {
api
.post(`/_builder/api/${s.appId}/pages/${s.currentPageName}/screen`, screen)
.then(() => _savePage(s))
}
const createScreen = store => (screenName, route, layoutComponentName) => {
store.update(state => {
@ -278,7 +280,6 @@ const removeStylesheet = store => stylesheet => {
const _savePage = async s => {
const page = s.pages[s.currentPageName]
await api.post(`/_builder/api/${s.appId}/pages/${s.currentPageName}`, {
page: { componentLibraries: s.pages.componentLibraries, ...page },
uiFunctions: s.currentPageFunctions,
@ -426,7 +427,9 @@ const setComponentStyle = store => (type, name, value) => {
if (!state.currentComponentInfo._styles) {
state.currentComponentInfo._styles = {}
}
state.currentComponentInfo._styles[type][name] = value
// state.currentComponentInfo._styles[type][name] = value
state.currentComponentInfo._styles[name] = value
state.currentPreviewItem._css = generate_screen_css([
state.currentPreviewItem.props,
])

54
packages/builder/src/components/common/Inputs/InputGroup.svelte
View File

@ -2,36 +2,50 @@
import { onMount } from "svelte"
export let meta = []
export let size = ""
export let label = ""
export let values = []
export let type = "number"
export let onStyleChanged = () => {}
export let onChange = () => {}
let _values = values.map(v => v)
$: onStyleChanged(_values)
// $: onChange(_values)
</script>
<div class="inputs {size}">
{#each meta as { placeholder }, i}
<input
{type}
{placeholder}
value={values[i]}
on:input={e => (_values[i] = e.target.value)} />
{/each}
<div class="input-container">
<div class="label">{label}</div>
<div class="inputs">
{#each meta as { placeholder }, i}
<input
{type}
placeholder={placeholder || ''}
value={values[i]}
on:input={e => (_values[i] = e.target.value)} />
{/each}
</div>
</div>
<style>
.inputs {
.input-container {
display: flex;
justify-content: space-between;
}
.label {
flex: 0;
}
.inputs {
flex: 1;
/* display: flex;
justify-content: space-between; */
}
input {
width: 83px;
width: 40px;
height: 32px;
font-size: 13px;
font-weight: 700;
margin: 0px 5px;
color: #163057;
opacity: 0.7;
padding: 5px 10px;
@ -49,17 +63,11 @@
margin: 0;
}
.small > input {
width: 38px;
height: 38px;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 0;
input[type="number"] {
-moz-appearance: textfield;
}
.small > input::placeholder {
input::placeholder {
text-align: center;
}
</style>

4
packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
View File

@ -60,7 +60,7 @@
_children: [
{
_component: "@budibase/standard-components/container",
_styles: { position: {}, layout: {} },
_styles: {},
_id: "__screenslot__text",
_code: "",
className: "",
@ -69,7 +69,7 @@
_children: [
{
_component: "@budibase/standard-components/text",
_styles: { position: {}, layout: {} },
_styles: {},
_id: "__screenslot__text_2",
_code: "",
text: "content",

2
packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
View File

@ -11,7 +11,7 @@ export default ({
<style>
${styles || ""}
.pos-${selectedComponentId} {
.element-${selectedComponentId} {
border: 2px solid #0055ff;
}

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

@ -1,4 +1,5 @@
<script>
import { setContext, onMount } from "svelte"
import PropsView from "./PropsView.svelte"
import { store } from "builderStore"
import IconButton from "components/common/IconButton.svelte"
@ -16,27 +17,28 @@
import panelStructure from "./temporaryPanelStructure.js"
import CategoryTab from "./CategoryTab.svelte"
import DesignView from "./DesignView.svelte"
import SettingsView from "./SettingsView.svelte"
let current_view = "design"
let codeEditor
let flattenedPanel = flattenComponents(panelStructure.categories)
let categories = [
{ name: "Design" },
{ name: "Settings" },
{ name: "Actions" },
{ value: "design", name: "Design" },
{ value: "settings", name: "Settings" },
{ value: "actions", name: "Actions" },
]
let selectedCategory = categories[0]
$: components = $store.components
$: componentInstance = $store.currentComponentInfo
$: componentDefinition = $store.components.find(
c => c.name === componentInstance._component
)
$: panelDefinition = flattenedPanel.find(
$: componentDefinition = $store.components[componentInstance._component]
$: componentPropDefinition = flattenedPanel.find(
//use for getting controls for each component property
c => c._component === componentInstance._component
)
$: panelDefinition = componentPropDefinition
? componentPropDefinition.properties[selectedCategory.value]
: {}
// SCREEN PROPS =============================================
$: screen_props =
@ -44,8 +46,11 @@
? getProps($store.currentPreviewItem, ["name", "favicon"])
: getProps($store.currentPreviewItem, ["name", "description", "route"])
// const onStyleChanged = store.setComponentStyle
// const onStyleChanged = store.onStyleChanged
const onStyleChanged = store.setComponentStyle
const onPropChanged = store.onPropChanged
const onPropChanged = store.setComponentProp
function walkProps(component, action) {
action(component)
@ -81,12 +86,17 @@
{selectedCategory} />
<div class="component-props-container">
{#if current_view === 'design'}
{#if selectedCategory.value === 'design'}
<DesignView
{panelDefinition}
{componentInstance}
{componentDefinition}
{onPropChanged} />
{onStyleChanged} />
{:else if selectedCategory.value === 'settings'}
<SettingsView
{componentInstance}
{panelDefinition}
onChange={onPropChanged} />
{/if}
</div>

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

@ -5,11 +5,11 @@
export let panelDefinition = {}
export let componentInstance = {}
export let componentDefinition = {}
export let onPropChanged = () => {}
export let onStyleChanged = () => {}
let selectedCategory = "desktop"
const getProperties = name => panelDefinition.properties[name]
const getProperties = name => panelDefinition[name]
function onChange(category) {
selectedCategory = category
@ -23,8 +23,7 @@
{ value: "selected", text: "Selected" },
]
$: propertyGroupNames =
!!panelDefinition.properties && Object.keys(panelDefinition.properties)
$: propertyGroupNames = Object.keys(panelDefinition)
</script>
<div class="design-view-container">
@ -38,7 +37,7 @@
<PropertyGroup
name={groupName}
properties={getProperties(groupName)}
{onPropChanged}
{onStyleChanged}
{componentDefinition}
{componentInstance} />
{/each}

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

@ -1,4 +1,6 @@
<script>
import { onMount, getContext } from "svelte"
export let label = ""
export let control = null
export let value = ""

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

@ -3,10 +3,10 @@
import PropertyControl from "./PropertyControl.svelte"
export let name = ""
export let properties = {}
export let properties = []
export let componentInstance = {}
export let componentDefinition = {}
export let onPropChanged = () => {}
export let onStyleChanged = () => {}
export let show = false
let showComponentGroup = false
@ -15,7 +15,10 @@
const capitalize = name => name[0].toUpperCase() + name.slice(1)
function onChange(key, v) {
!!v.target ? onPropChanged(key, v.target.value) : onPropChanged(key, v)
console.log("PROPERTY GROUP ON CHANGE")
!!v.target
? onStyleChanged(name, key, v.target.value)
: onStyleChanged(name, key, v)
}
$: {
@ -29,7 +32,6 @@
}
}
$: propertyDefinition = Object.entries(properties)
$: icon = show ? "ri-arrow-down-s-fill" : "ri-arrow-right-s-fill"
</script>
@ -43,14 +45,14 @@
</div>
<div class="property-panel" class:show>
{#each propertyDefinition as [key, definition]}
{#each properties as props}
<!-- {#if propExistsOnComponentDef(key)} -->
<PropertyControl
label={definition.label || capitalize(key)}
control={definition.control}
value={componentInstance[key]}
onChange={value => onChange(key, value)}
props={{ ...excludeProps(definition, ['control']) }} />
label={props.label}
control={props.control}
value={componentInstance[props.cssKey]}
onChange={value => onChange(props.cssKey, value)}
props={{ ...excludeProps(props, ['control']) }} />
<!-- {/if} -->
{/each}
</div>

35
packages/builder/src/components/userInterface/SettingsView.svelte Normal file
View File

@ -0,0 +1,35 @@
<script>
import PropertyControl from "./PropertyControl.svelte"
import InputGroup from "../common/Inputs/InputGroup.svelte"
import { excludeProps } from "./propertyCategories.js"
export let panelDefinition = {}
export let componentInstance = {}
export let onChange = () => {}
function handleChange(key, data) {
data.target ? onChange(key, data.target.value) : onChange(key, data)
}
const meta = [
{ placeholder: "T" },
{ placeholder: "R" },
{ placeholder: "B" },
{ placeholder: "L" },
]
$: settingsControls = !!panelDefinition ? Object.entries(panelDefinition) : []
</script>
<h4>Settings Panel</h4>
<InputGroup label="Testing" {meta} />
{#each settingsControls as [key, definition]}
<PropertyControl
control={definition.control}
label={key}
value={componentInstance[key]}
onChange={value => handleChange(key, value)}
props={{ ...excludeProps(definition, ['control']) }} />
{/each}

4
packages/builder/src/components/userInterface/pagesParsing/createProps.js
View File

@ -24,7 +24,7 @@ export const createProps = (componentDefinition, derivedFromProps) => {
const props = {
_id: uuid(),
_component: componentDefinition._component,
_styles: { position: {}, layout: {} },
_styles: {},
_code: "",
}
@ -71,7 +71,7 @@ export const makePropsSafe = (componentDefinition, props) => {
}
if (!props._styles) {
props._styles = { layout: {}, position: {} }
props._styles = {}
}
return props

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

@ -1,16 +1,14 @@
import Input from "../common/Input.svelte"
import OptionSelect from "./OptionSelect.svelte"
import InputGroup from "../common/Inputs/InputGroup.svelte"
/*
TODO: Allow for default values for all properties
*/
export const general = {
text: { control: Input },
}
export const layout = {
flexDirection: {
export const layout = [
{
label: "Direction",
cssKey: "flex-direction",
control: OptionSelect,
initialValue: "columnReverse",
options: [
@ -20,41 +18,45 @@ export const layout = {
{ label: "column-reverse", value: "columnReverse" },
],
},
justifyContent: { label: "Justify", control: Input },
alignItems: { label: "Align", control: Input },
flexWrap: {
{ label: "Justify", cssKey: "justify-content", control: Input },
{ label: "Align", cssKey: "align-items", control: Input },
{
label: "Wrap",
cssKey: "flex-wrap",
control: OptionSelect,
options: [{ label: "wrap" }, { label: "no wrap", value: "noWrap" }],
},
}
]
export const spacing = {
padding: { control: Input },
margin: { control: Input },
}
const spacingMeta = [
{ placeholder: "T" },
{ placeholder: "R" },
{ placeholder: "B" },
{ placeholder: "L" },
]
export const spacing = [
{
label: "Padding",
cssKey: "padding",
control: InputGroup,
meta: spacingMeta,
},
{ label: "Margin", cssKey: "margin", control: InputGroup, meta: spacingMeta },
]
export const size = {
width: { control: Input },
height: { control: Input },
minWidth: { label: "Min W", control: Input },
minHeight: { label: "Min H", control: Input },
maxWidth: { label: "Max W", control: Input },
maxHeight: { label: "Max H", control: Input },
overflow: {
control: OptionSelect,
options: [
{ label: "visible" },
{ label: "auto" },
{ label: "hidden" },
{ label: "auto" },
{ label: "scroll" },
],
}, //custom
}
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 },
]
export const position = {
position: {
export const position = [
{
label: "Position",
cssKey: "position",
control: OptionSelect,
options: [
{ label: "static" },
@ -64,11 +66,12 @@ export const position = {
{ label: "sticky" },
],
},
}
]
export const typography = {
fontFamily: {
export const typography = [
{
label: "Font",
cssKey: "font-family",
control: OptionSelect,
options: [
{ label: "initial" },
@ -82,8 +85,9 @@ export const typography = {
],
styleBindingProperty: "font-family",
},
fontWeight: {
label: "weight",
{
label: "Weight",
cssKey: "font-weight",
control: OptionSelect,
options: [
{ label: "normal" },
@ -92,9 +96,11 @@ export const typography = {
{ label: "lighter" },
],
},
fontSize: { label: "size", control: Input },
lineHeight: { label: "Line H", control: Input },
color: {
{ label: "size", cssKey: "font-size", control: Input },
{ label: "Line H", cssKey: "line-height", control: Input },
{
label: "Color",
cssKey: "color",
control: OptionSelect,
options: [
{ label: "black" },
@ -104,8 +110,9 @@ export const typography = {
{ label: "green" },
],
},
textAlign: {
{
label: "align",
cssKey: "text-align",
control: OptionSelect,
options: [
{ label: "initial" },
@ -115,13 +122,14 @@ export const typography = {
{ label: "justify" },
],
}, //custom
textTransform: { label: "transform", control: Input }, //custom
fontStyle: { label: "style", control: Input }, //custom
}
{ label: "transform", cssKey: "text-transform", control: Input }, //custom
{ label: "style", cssKey: "font-style", control: Input }, //custom
]
export const background = {
backgroundColor: {
label: "Background Color",
export const background = [
{
label: "Background",
cssKey: "background",
control: OptionSelect,
options: [
{ label: "white" },
@ -131,30 +139,29 @@ export const background = {
{ label: "black" },
],
},
image: { control: Input }, //custom
}
{ label: "Image", cssKey: "image", control: Input }, //custom
]
export const border = {
borderRadius: { label: "radius", control: Input },
borderWidth: { label: "width", control: Input }, //custom
borderColor: { label: "color", control: Input },
borderStyle: { label: "style", control: Input },
}
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 },
]
export const effects = {
opacity: { control: Input },
rotate: { control: Input },
shadow: { 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 },
]
export const transitions = {
property: { control: Input },
duration: { control: Input },
ease: { 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 },
]
export const all = {
general,
layout,
spacing,
size,
@ -174,4 +181,4 @@ export function excludeProps(props, propsToExclude) {
}
}
return modifiedProps
}
}

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

@ -1,12 +1,6 @@
import {
general,
layout,
typography,
border,
size,
background,
all,
} from "./propertyCategories.js"
import Input from "../common/Input.svelte"
import { all } from "./propertyCategories.js"
export default {
categories: [
@ -30,7 +24,7 @@ export default {
icon: "ri-layout-row-fill",
commonProps: {},
children: [],
properties: { background, size },
properties: { design: { ...all } },
},
{
name: "Text",
@ -44,17 +38,29 @@ export default {
description: "A component for displaying heading text",
icon: "ri-heading",
properties: {
...all
design: { ...all },
settings: {
text: {
control: Input,
},
},
},
},
{
_component: "@budibase/standard-components/text",
name: "Paragraph",
description: "A component for displaying paragraph text.",
icon: 'ri-paragraph',
properties: { general, typography },
}
]
icon: "ri-paragraph",
properties: {
design: { ...all },
settings: {
text: {
control: Input,
},
},
},
},
],
},
{
name: "Input",
@ -65,58 +71,60 @@ export default {
{
_component: "@budibase/standard-components/input",
name: "Textfield",
description: "A textfield component that allows the user to input text.",
icon: 'ri-edit-box-line',
properties: {}
description:
"A textfield component that allows the user to input text.",
icon: "ri-edit-box-line",
properties: { design: { ...all } },
},
{
_component: "@budibase/standard-components/checkbox",
name: "Checkbox",
description: "A selectable checkbox component",
icon: 'ri-checkbox-line',
properties: {}
icon: "ri-checkbox-line",
properties: { design: { ...all } },
},
{
_component: "@budibase/standard-components/radiobutton",
name: "Radiobutton",
description: "A selectable radiobutton component",
icon: 'ri-radio-button-line',
properties: {}
icon: "ri-radio-button-line",
properties: { design: { ...all } },
},
{
_component: "@budibase/standard-components/select",
name: "Select",
description: "A select component for choosing from different options",
icon: 'ri-file-list-line',
properties: {}
}
]
description:
"A select component for choosing from different options",
icon: "ri-file-list-line",
properties: { design: { ...all } },
},
],
},
{
_component: "@budibase/standard-components/button",
name: 'Button',
description: 'A basic html button that is ready for styling',
icon: 'ri-radio-button-fill',
name: "Button",
description: "A basic html button that is ready for styling",
icon: "ri-radio-button-fill",
children: [],
properties: { background, typography, border, size },
properties: { design: { ...all } },
},
{
_component: "@budibase/standard-components/icon",
name: 'Icon',
description: 'A basic component for displaying icons',
icon: 'ri-sun-fill',
properties: {},
children: []
name: "Icon",
description: "A basic component for displaying icons",
icon: "ri-sun-fill",
children: [],
properties: { design: { ...all } },
},
{
_component: "@budibase/standard-components/link",
name: 'Link',
description: 'A basic link component for internal and external links',
icon: 'ri-link',
properties: {},
children: []
}
]
name: "Link",
description: "A basic link component for internal and external links",
icon: "ri-link",
children: [],
properties: { design: { ...all } },
},
],
},
{
name: "Blocks",
@ -124,18 +132,20 @@ export default {
children: [
{
_component: "@budibase/materialdesign-components/BasicCard",
name: 'Card',
description: 'A basic card component that can contain content and actions.',
icon: 'ri-layout-bottom-line',
name: "Card",
description:
"A basic card component that can contain content and actions.",
icon: "ri-layout-bottom-line",
children: [],
properties: { size, background, border },
properties: { design: { ...all } },
},
{
name: 'Login',
description: 'A component that automatically generates a login screen for your app.',
icon: 'ri-login-box-fill',
properties: {},
children: []
name: "Login",
description:
"A component that automatically generates a login screen for your app.",
icon: "ri-login-box-fill",
children: [],
properties: { design: { ...all } },
},
{
name: "Navigation Bar",
@ -143,27 +153,27 @@ export default {
description:
"A component for handling the navigation within your app.",
icon: "ri-navigation-fill",
properties: {},
children: []
}
]
children: [],
properties: { design: { ...all } },
},
],
},
{
name: "Data",
isCategory: true,
children: [
{
name: 'Table',
description: 'A component that generates a table from your data.',
icon: 'ri-archive-drawer-fill',
properties: {},
children: []
name: "Table",
description: "A component that generates a table from your data.",
icon: "ri-archive-drawer-fill",
properties: { design: { ...all } },
children: [],
},
{
name: 'Form',
description: 'A component that generates a form from your data.',
icon: 'ri-file-edit-fill',
properties: {},
name: "Form",
description: "A component that generates a form from your data.",
icon: "ri-file-edit-fill",
properties: { design: { ...all } },
_component: "@budibase/materialdesign-components/Form",
template: {
component: "@budibase/materialdesign-components/Form",
@ -177,7 +187,7 @@ export default {
name: "DataTable",
description: "A table for displaying data from the backend.",
icon: "ri-archive-drawer-fill",
commonProps: {},
properties: { design: { ...all } },
children: [],
},
{
@ -185,7 +195,7 @@ export default {
name: "DataForm",
description: "Form stuff",
icon: "ri-file-edit-fill",
commonProps: {},
properties: { design: { ...all } },
children: [],
},
{
@ -193,7 +203,7 @@ export default {
_component: "@budibase/standard-components/datachart",
description: "Shiny chart",
icon: "ri-bar-chart-line",
commonProps: {},
properties: { design: { ...all } },
children: [],
},
{
@ -201,7 +211,7 @@ export default {
_component: "@budibase/standard-components/datalist",
description: "Shiny list",
icon: "ri-file-list-line",
commonProps: {},
properties: { design: { ...all } },
children: [],
},
{
@ -209,10 +219,10 @@ export default {
_component: "@budibase/standard-components/datamap",
description: "Shiny map",
icon: "ri-map-pin-line",
commonProps: {},
properties: { design: { ...all } },
children: [],
},
],
},
],
}
}

2
packages/client/src/render/attachChildren.js
View File

@ -31,7 +31,7 @@ export const attachChildren = initialiseOpts => (htmlElement, options) => {
}
}
htmlElement.classList.add(`lay-${treeNode.props._id}`)
// htmlElement.classList.add(`lay-${treeNode.props._id}`)
const childNodes = []
for (let childProps of treeNode.props._children) {

2
packages/client/src/render/prepareRenderComponent.js
View File

@ -36,7 +36,7 @@ export const prepareRenderComponent = ({
htmlElement.children[htmlElement.children.length - 1]
if (props._id && thisNode.rootElement) {
thisNode.rootElement.classList.add(`pos-${props._id}`)
thisNode.rootElement.classList.add(`element-${props._id}`)
}
}
}