diff --git a/packages/builder/package.json b/packages/builder/package.json index cb91f2ce42..5d06fee71d 100644 --- a/packages/builder/package.json +++ b/packages/builder/package.json @@ -79,7 +79,8 @@ "rollup-plugin-svelte": "^5.0.3", "rollup-plugin-terser": "^4.0.4", "rollup-plugin-url": "^2.2.2", - "svelte": "^3.0.0" + "svelte": "^3.0.0", + "svelte-color-picker": "^1.0.7" }, "gitHead": "115189f72a850bfb52b65ec61d932531bf327072" } \ No newline at end of file diff --git a/packages/builder/src/builderStore/generate_css.js b/packages/builder/src/builderStore/generate_css.js index 4326e7cb0f..5826d4f824 100644 --- a/packages/builder/src/builderStore/generate_css.js +++ b/packages/builder/src/builderStore/generate_css.js @@ -1,142 +1,54 @@ -import { pipe } from "components/common/core" -import { filter, map, reduce, toPairs } from "lodash/fp" - -const self = n => n -const join_with = delimiter => a => a.join(delimiter) -const empty_string_to_unset = s => (s.length ? s : "0") -const add_suffix_if_number = suffix => s => { - try { - if (isNaN(s) || isNaN(parseFloat(s))) return s - } catch (_) { - return s - } - return s + suffix -} - -export const make_margin = values => - pipe(values, [ - map(empty_string_to_unset), - map(add_suffix_if_number("px")), - join_with(" "), - ]) - -const css_map = { - templaterows: { - name: "grid-template-rows", - generate: self, - }, - templatecolumns: { - name: "grid-template-columns", - generate: self, - }, - align: { - name: "align-items", - generate: self, - }, - justify: { - name: "justify-content", - generate: self, - }, - direction: { - name: "flex-direction", - generate: self, - }, - gridarea: { - name: "grid-area", - generate: make_margin, - }, - gap: { - name: "grid-gap", - generate: n => `${n}px`, - }, - columnstart: { - name: "grid-column-start", - generate: self, - }, - columnend: { - name: "grid-column-end", - generate: self, - }, - rowstart: { - name: "grid-row-start", - generate: self, - }, - rowend: { - name: "grid-row-end", - generate: self, - }, - padding: { - name: "padding", - generate: make_margin, - }, - margin: { - name: "margin", - generate: make_margin, - }, - zindex: { - name: "z-index", - generate: self, - }, - height: { - name: "height", - generate: self, - }, - width: { - name: "width", - generate: self, - }, -} - -export const generate_rule = ([name, values]) => - `${css_map[name].name}: ${css_map[name].generate(values)};` - -const handle_grid = (acc, [name, value]) => { - let tmp = [] - - if (name === "row" || name === "column") { - if (value[0]) tmp.push([`${name}start`, value[0]]) - if (value[1]) tmp.push([`${name}end`, value[1]]) - return acc.concat(tmp) - } - - return acc.concat([[name, value]]) -} - -const object_to_css_string = [ - toPairs, - reduce(handle_grid, []), - filter(v => (Array.isArray(v[1]) ? v[1].some(s => s.length) : v[1].length)), - map(generate_rule), - 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"};` - } - - return { - layout: _layout, - position: pipe(position, object_to_css_string), - } -} - -const apply_class = (id, name, styles) => `.${name}-${id} {\n${styles}\n}` - -export const generate_screen_css = component_array => { +export const generate_screen_css = component_arr => { let styles = "" - let emptyStyles = { layout: {}, position: {} } - - 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" + for (const { _styles, _id, _children, _component } of component_arr) { + let [componentName] = _component.match(/[a-z]*$/) + Object.keys(_styles).forEach(selector => { + const cssString = generate_css(_styles[selector]) + if (cssString) { + styles += apply_class(_id, componentName, cssString, selector) + } + }) if (_children && _children.length) { styles += generate_screen_css(_children) + "\n" } } return styles.trim() } + +export const generate_css = style => { + 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)) { + if (value.length > 0 && !value.every(v => v === "")) { + return (str += `${key}: ${value + .map(generate_array_styles) + .join(" ")};\n`) + } + } + }, "") + + return (cssString || "").trim() +} + +export const generate_array_styles = item => { + let safeItem = item === "" ? 0 : item + let hasPx = new RegExp("px$") + if (!hasPx.test(safeItem)) { + return `${safeItem}px` + } else { + return safeItem + } +} + +export const apply_class = (id, name = "element", styles, selector) => { + if (selector === "normal") { + return `.${name}-${id} {\n${styles}\n}` + } else { + let sel = selector === "selected" ? "::selection" : `:${selector}` + return `.${name}-${id}${sel} {\n${styles}\n}` + } +} diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js index a8315918ba..f4d47064be 100644 --- a/packages/builder/src/builderStore/store/index.js +++ b/packages/builder/src/builderStore/store/index.js @@ -140,10 +140,11 @@ 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 +279,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, @@ -427,6 +427,7 @@ const setComponentStyle = store => (type, name, value) => { state.currentComponentInfo._styles = {} } state.currentComponentInfo._styles[type][name] = value + state.currentPreviewItem._css = generate_screen_css([ state.currentPreviewItem.props, ]) diff --git a/packages/builder/src/components/common/Colorpicker.svelte b/packages/builder/src/components/common/Colorpicker.svelte index 9cc3b3926a..0b52cebe5f 100644 --- a/packages/builder/src/components/common/Colorpicker.svelte +++ b/packages/builder/src/components/common/Colorpicker.svelte @@ -1,13 +1,78 @@ + +
toggleColorpicker(true)} + class="color-preview" + style={`background: ${value}`} /> + +
+
toggleColorpicker(false)} /> +
+ +
+
+ + + diff --git a/packages/builder/src/components/common/Input.svelte b/packages/builder/src/components/common/Input.svelte index 50b07f41f0..bc6741e0d8 100644 --- a/packages/builder/src/components/common/Input.svelte +++ b/packages/builder/src/components/common/Input.svelte @@ -1,8 +1,11 @@ - + diff --git a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte index a1ceac9eeb..27a4851c8d 100644 --- a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte +++ b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte @@ -16,6 +16,11 @@ return props } + const getComponentTypeName = component => { + let [componentName] = component._component.match(/[a-z]*$/) + return componentName || "element" + } + $: iframe && console.log( iframe.contentDocument.head.insertAdjacentHTML( @@ -60,7 +65,7 @@ _children: [ { _component: "@budibase/standard-components/container", - _styles: { position: {}, layout: {} }, + _styles: { normal: {}, hover: {}, active: {}, selected: {} }, _id: "__screenslot__text", _code: "", className: "", @@ -69,7 +74,12 @@ _children: [ { _component: "@budibase/standard-components/text", - _styles: { position: {}, layout: {} }, + _styles: { + normal: {}, + hover: {}, + active: {}, + selected: {}, + }, _id: "__screenslot__text_2", _code: "", text: "content", @@ -88,6 +98,8 @@ appRootPath: "", } + $: selectedComponentType = getComponentTypeName($store.currentComponentInfo) + $: selectedComponentId = $store.currentComponentInfo ? $store.currentComponentInfo._id : "" @@ -102,6 +114,7 @@ srcdoc={iframeTemplate({ styles, stylesheetLinks, + selectedComponentType, selectedComponentId, frontendDefinition: JSON.stringify(frontendDefinition), currentPageFunctions: $store.currentPageFunctions, diff --git a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js index 3c774cc4b8..dd2ca69dbb 100644 --- a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js +++ b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js @@ -1,6 +1,7 @@ export default ({ styles, stylesheetLinks, + selectedComponentType, selectedComponentId, frontendDefinition, currentPageFunctions, @@ -11,7 +12,7 @@ export default ({ diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte index 76d0c5605c..507d04c356 100644 --- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte +++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte @@ -1,4 +1,5 @@
-
    -
  • - -
    • -
  • - -
    • - {#if !component._component.startsWith('##')} -
  • - -
    • -
  • - -
    • - {/if} -
+ + (selectedCategory = category)} + {categories} + {selectedCategory} /> +
- - {#if current_view === 'props'} - {#if $store.currentView === 'detail'} - {#each screen_props as [k, v, id] (id)} -
- - store.setMetadataProp(k, target.value)} /> -
- {/each} - - {:else} - - {/if} - {:else if current_view === 'layout'} - - {:else if current_view === 'events'} - + {#if selectedCategory.value === 'design'} + + {:else if selectedCategory.value === 'settings'} + {/if} - -
diff --git a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte index 169c3ab284..3ffab198e9 100644 --- a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte +++ b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte @@ -2,6 +2,7 @@ import { splitName } from "./pagesParsing/splitRootComponentName.js" import components from "./temporaryPanelStructure.js" import ConfirmDialog from "components/common/ConfirmDialog.svelte" + import CategoryTab from "./CategoryTab.svelte" import { find, sortBy, @@ -36,15 +37,12 @@
-
    - {#each categories as category} -
  • (selectedCategory = category)} - class:active={selectedCategory === category}> - {category.name} -
    • - {/each} -
+ + (selectedCategory = category)} + {selectedCategory} + {categories} /> +
selectTab(PROPERTIES_TAB)}> - Properties + Edit
@@ -50,6 +50,14 @@
diff --git a/packages/builder/src/components/userInterface/FlatButton.svelte b/packages/builder/src/components/userInterface/FlatButton.svelte new file mode 100644 index 0000000000..abc4a3dc28 --- /dev/null +++ b/packages/builder/src/components/userInterface/FlatButton.svelte @@ -0,0 +1,38 @@ + + +
onClick(value || text)}> + {#if useIcon} + + {:else} + {text} + {/if} +
+ + diff --git a/packages/builder/src/components/userInterface/FlatButtonGroup.svelte b/packages/builder/src/components/userInterface/FlatButtonGroup.svelte new file mode 100644 index 0000000000..f16d832c67 --- /dev/null +++ b/packages/builder/src/components/userInterface/FlatButtonGroup.svelte @@ -0,0 +1,54 @@ + + +
+ {#each buttonProps as props} +
+ +
+ {/each} +
+ + diff --git a/packages/builder/src/components/userInterface/OptionSelect.svelte b/packages/builder/src/components/userInterface/OptionSelect.svelte new file mode 100644 index 0000000000..4fbedde4ac --- /dev/null +++ b/packages/builder/src/components/userInterface/OptionSelect.svelte @@ -0,0 +1,36 @@ + + + diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte new file mode 100644 index 0000000000..cd1bad35f7 --- /dev/null +++ b/packages/builder/src/components/userInterface/PropertyControl.svelte @@ -0,0 +1,63 @@ + + +
+
{label}
+
+ handleChange(key, val)} + onChange={val => handleChange(key, val)} + {...props} /> +
+
+ + diff --git a/packages/builder/src/components/userInterface/PropertyGroup.svelte b/packages/builder/src/components/userInterface/PropertyGroup.svelte new file mode 100644 index 0000000000..240618a4c7 --- /dev/null +++ b/packages/builder/src/components/userInterface/PropertyGroup.svelte @@ -0,0 +1,81 @@ + + +
+
(show = !show)}> +
+ +
+
{capitalize(name)}
+
+
+ + {#each properties as props} + onStyleChanged(styleCategory, 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 new file mode 100644 index 0000000000..36b2ab9c75 --- /dev/null +++ b/packages/builder/src/components/userInterface/SettingsView.svelte @@ -0,0 +1,41 @@ + + +{#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/UserInterfaceRoot.svelte b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte new file mode 100644 index 0000000000..13d7a7e2a1 --- /dev/null +++ b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte @@ -0,0 +1,240 @@ + + +
+ +
+ +
+
+ Navigator +
+ + Pages +
+ +
+ +
+
+ +
+ + + +
+ +
+
+ + Screens + +
+ +
+
+
+ +
+
+ +
+ +
+ +
+ + {#if $store.currentFrontEndType === 'screen' || $store.currentFrontEndType === 'page'} +
+ +
+ {/if} + +
+ + + + + store.deleteComponent(componentToDelete)} /> + + diff --git a/packages/builder/src/components/userInterface/pagesParsing/createProps.js b/packages/builder/src/components/userInterface/pagesParsing/createProps.js index c37e05e023..de4de1c2a6 100644 --- a/packages/builder/src/components/userInterface/pagesParsing/createProps.js +++ b/packages/builder/src/components/userInterface/pagesParsing/createProps.js @@ -24,7 +24,7 @@ export const createProps = (componentDefinition, derivedFromProps) => { const props = { _id: uuid(), _component: componentDefinition._component, - _styles: { position: {}, layout: {} }, + _styles: { normal: {}, hover: {}, active: {}, selected: {} }, _code: "", } @@ -71,7 +71,7 @@ export const makePropsSafe = (componentDefinition, props) => { } if (!props._styles) { - props._styles = { layout: {}, position: {} } + props._styles = { normal: {}, hover: {}, active: {}, selected: {} } } return props diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js new file mode 100644 index 0000000000..07101779a5 --- /dev/null +++ b/packages/builder/src/components/userInterface/propertyCategories.js @@ -0,0 +1,173 @@ +import Input from "../common/Input.svelte" +import OptionSelect from "./OptionSelect.svelte" +import InputGroup from "../common/Inputs/InputGroup.svelte" +// import Colorpicker from "../common/Colorpicker.svelte" +/* + TODO: Allow for default values for all properties +*/ + +export const layout = [ + { + label: "Direction", + key: "flex-direction", + control: OptionSelect, + initialValue: "columnReverse", + options: [ + { label: "row" }, + { label: "row-reverse", value: "rowReverse" }, + { label: "column" }, + { label: "column-reverse", value: "columnReverse" }, + ], + }, + { label: "Justify", key: "justify-content", control: Input }, + { label: "Align", key: "align-items", control: Input }, + { + label: "Wrap", + key: "flex-wrap", + control: OptionSelect, + options: [{ label: "wrap" }, { label: "no wrap", value: "noWrap" }], + }, +] + +const spacingMeta = [ + { placeholder: "T" }, + { placeholder: "R" }, + { placeholder: "B" }, + { placeholder: "L" }, +] +export const spacing = [ + { + label: "Padding", + key: "padding", + control: InputGroup, + meta: spacingMeta, + }, + { label: "Margin", key: "margin", control: InputGroup, meta: spacingMeta }, +] + +export const size = [ + { 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", + key: "position", + control: OptionSelect, + options: [ + { label: "static" }, + { label: "relative" }, + { label: "fixed" }, + { label: "absolute" }, + { label: "sticky" }, + ], + }, +] + +export const typography = [ + { + label: "Font", + key: "font-family", + control: OptionSelect, + defaultValue: "initial", + options: [ + "initial", + "Times New Roman", + "Georgia", + "Arial", + "Arial Black", + "Comic Sans MS", + "Impact", + "Lucida Sans Unicode", + ], + styleBindingProperty: "font-family", + }, + { + label: "Weight", + key: "font-weight", + control: OptionSelect, + options: [ + { label: "normal" }, + { label: "bold" }, + { label: "bolder" }, + { label: "lighter" }, + ], + }, + { label: "size", key: "font-size", defaultValue: "", control: Input }, + { label: "Line H", key: "line-height", control: Input }, + { + label: "Color", + key: "color", + control: OptionSelect, + options: ["black", "white", "red", "blue", "green"], + }, + { + label: "align", + key: "text-align", + control: OptionSelect, + options: ["initial", "left", "right", "center", "justify"], + }, //custom + { label: "transform", key: "text-transform", control: Input }, //custom + { label: "style", key: "font-style", control: Input }, //custom +] + +export const background = [ + { + label: "Background", + key: "background", + control: OptionSelect, + options: ["black", "white", "red", "blue", "green"], + }, + { label: "Image", key: "image", control: Input }, //custom +] + +export const border = [ + { label: "Radius", key: "border-radius", control: Input }, + { label: "Width", key: "border-width", control: Input }, //custom + { + label: "Color", + key: "border-color", + control: OptionSelect, + options: ["black", "white", "red", "blue", "green"], + }, + { label: "Style", key: "border-style", control: Input }, +] + +export const effects = [ + { 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", key: "transition-property", control: Input }, + { label: "Duration", key: "transition-timing-function", control: Input }, + { label: "Ease", key: "transition-ease", control: Input }, +] + +export const all = { + layout, + spacing, + size, + position, + typography, + background, + border, + effects, + transitions, +} + +export function excludeProps(props, propsToExclude) { + const modifiedProps = {} + for (const prop in props) { + if (!propsToExclude.includes(prop)) { + modifiedProps[prop] = props[prop] + } + } + return modifiedProps +} diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js index ce64b37945..ae6a658e7a 100644 --- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js +++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js @@ -1,3 +1,9 @@ +import Input from "../common/Input.svelte" +import OptionSelect from "./OptionSelect.svelte" +import Checkbox from "../common/Checkbox.svelte" + +import { all } from "./propertyCategories.js" + export default { categories: [ { @@ -20,6 +26,31 @@ export default { icon: "ri-layout-row-fill", commonProps: {}, children: [], + properties: { + design: { ...all }, + settings: [ + { + key: "type", + label: "Type", + control: OptionSelect, + options: [ + { label: "article" }, + { label: "aside" }, + { label: "details" }, + { label: "div" }, + { label: "figure" }, + { label: "figcaption" }, + { label: "footer" }, + { label: "header" }, + { label: "main" }, + { label: "mark" }, + { label: "nav" }, + { label: "paragraph" }, + { label: "summary" }, + ], + }, + ], + }, }, { name: "Text", @@ -32,13 +63,21 @@ export default { name: "Headline", description: "A component for displaying heading text", icon: "ri-heading", - props: { - type: { - type: "options", - options: ["h1", "h2", "h3", "h4", "h5", "h6"], - default: "h1", - }, - text: "string", + properties: { + design: { ...all }, + settings: [ + { + key: "text", + label: "Text", + control: Input, + }, + { + key: "type", + label: "Type", + control: OptionSelect, + options: ["h1", "h2", "h3", "h4", "h5", "h6"], + }, + ], }, }, { @@ -46,7 +85,34 @@ export default { name: "Paragraph", description: "A component for displaying paragraph text.", icon: "ri-paragraph", - props: {}, + properties: { + design: { ...all }, + settings: [ + { + label: "Text", + key: "text", + control: Input, + }, + { + label: "Type", + key: "type", + control: OptionSelect, + options: [ + "none", + "bold", + "strong", + "italic", + "emphasis", + "mark", + "small", + "del", + "ins", + "sub", + "sup", + ], + }, + ], + }, }, ], }, @@ -62,21 +128,38 @@ export default { description: "A textfield component that allows the user to input text.", icon: "ri-edit-box-line", - props: {}, + properties: { + design: { ...all }, + settings: [ + { label: "Label", key: "label", control: Input }, + { + label: "Type", + key: "type", + control: OptionSelect, + options: ["text", "password"], + }, + ], + }, }, { _component: "@budibase/standard-components/checkbox", name: "Checkbox", description: "A selectable checkbox component", icon: "ri-checkbox-line", - props: {}, + properties: { + design: { ...all }, + settings: [{ label: "Label", key: "label", control: Input }], + }, }, { _component: "@budibase/standard-components/radiobutton", name: "Radiobutton", description: "A selectable radiobutton component", icon: "ri-radio-button-line", - props: {}, + properties: { + design: { ...all }, + settings: [{ label: "Label", key: "label", control: Input }], + }, }, { _component: "@budibase/standard-components/select", @@ -84,7 +167,10 @@ export default { description: "A select component for choosing from different options", icon: "ri-file-list-line", - props: {}, + properties: { + design: { ...all }, + settings: [], + }, }, ], }, @@ -93,24 +179,51 @@ export default { name: "Button", description: "A basic html button that is ready for styling", icon: "ri-radio-button-fill", - commonProps: {}, children: [], + properties: { + design: { + ...all, + }, + settings: [ + { label: "Text", key: "text", control: Input }, + { + label: "Disabled", + key: "disabled", + valueKey: "checked", + control: Checkbox, + }, + ], + }, }, { _component: "@budibase/standard-components/icon", name: "Icon", description: "A basic component for displaying icons", icon: "ri-sun-fill", - commonProps: {}, children: [], + properties: { + design: { ...all }, + }, }, { _component: "@budibase/standard-components/link", name: "Link", description: "A basic link component for internal and external links", icon: "ri-link", - commonProps: {}, children: [], + properties: { + design: { ...all }, + settings: [ + { label: "Text", key: "text", control: Input }, + { label: "Url", key: "url", control: Input }, + { + label: "Open New Tab", + key: "openInNewTab", + valueKey: "checked", + control: Checkbox, + }, + ], + }, }, ], }, @@ -124,17 +237,16 @@ export default { description: "A basic card component that can contain content and actions.", icon: "ri-layout-bottom-line", - commonProps: {}, children: [], + properties: { design: { ...all } }, }, { - _component: "@budibase/standard-components/login", name: "Login", description: "A component that automatically generates a login screen for your app.", icon: "ri-login-box-fill", - commonProps: {}, children: [], + properties: { design: { ...all } }, }, { name: "Navigation Bar", @@ -142,8 +254,8 @@ export default { description: "A component for handling the navigation within your app.", icon: "ri-navigation-fill", - commonProps: {}, children: [], + properties: { design: { ...all } }, }, ], }, @@ -153,19 +265,17 @@ export default { children: [ { name: "Table", - _component: "@budibase/materialdesign-components/Datatable", description: "A component that generates a table from your data.", icon: "ri-archive-drawer-fill", - commonProps: {}, + properties: { design: { ...all } }, children: [], }, { - _component: "@budibase/materialdesign-components/Form", name: "Form", description: "A component that generates a form from your data.", icon: "ri-file-edit-fill", - commonProps: {}, - component: "@budibase/materialdesign-components/Form", + properties: { design: { ...all } }, + _component: "@budibase/materialdesign-components/Form", template: { component: "@budibase/materialdesign-components/Form", description: "Form for saving a record", @@ -178,7 +288,7 @@ export default { name: "DataTable", description: "A table for displaying data from the backend.", icon: "ri-archive-drawer-fill", - commonProps: {}, + properties: { design: { ...all } }, children: [], }, { @@ -186,7 +296,7 @@ export default { name: "DataForm", description: "Form stuff", icon: "ri-file-edit-fill", - commonProps: {}, + properties: { design: { ...all } }, children: [], }, { @@ -194,7 +304,7 @@ export default { _component: "@budibase/standard-components/datachart", description: "Shiny chart", icon: "ri-bar-chart-line", - commonProps: {}, + properties: { design: { ...all } }, children: [], }, { @@ -202,7 +312,7 @@ export default { _component: "@budibase/standard-components/datalist", description: "Shiny list", icon: "ri-file-list-line", - commonProps: {}, + properties: { design: { ...all } }, children: [], }, { @@ -210,7 +320,7 @@ export default { _component: "@budibase/standard-components/datamap", description: "Shiny map", icon: "ri-map-pin-line", - commonProps: {}, + properties: { design: { ...all } }, children: [], }, ], diff --git a/packages/builder/src/pages/[application]/backend/_layout.svelte b/packages/builder/src/pages/[application]/backend/_layout.svelte index 4a4a715534..069e720b17 100644 --- a/packages/builder/src/pages/[application]/backend/_layout.svelte +++ b/packages/builder/src/pages/[application]/backend/_layout.svelte @@ -38,12 +38,12 @@ height: 100%; } -@media only screen and (min-width: 1800px) { - .nav { - overflow: auto; - flex: 0 1 auto; - width: 300px; - height: 100%; + @media only screen and (min-width: 1800px) { + .nav { + overflow: auto; + flex: 0 1 auto; + width: 300px; + height: 100%; + } } -} diff --git a/packages/builder/tests/generate_css.spec.js b/packages/builder/tests/generate_css.spec.js index 5fa4a94db9..b2a7fca64d 100644 --- a/packages/builder/tests/generate_css.spec.js +++ b/packages/builder/tests/generate_css.spec.js @@ -1,320 +1,55 @@ import { generate_css, - make_margin, generate_screen_css, + generate_array_styles } from "../src/builderStore/generate_css.js" -describe("make_margin", () => { - test("it should generate a valid rule", () => { - expect(make_margin(["1", "1", "1", "1"])).toEqual("1px 1px 1px 1px") - }) - - test("empty values should output 0", () => { - expect(make_margin(["1", "1", "", ""])).toEqual("1px 1px 0px 0px") - expect(make_margin(["1", "", "", "1"])).toEqual("1px 0px 0px 1px") - expect(make_margin(["", "", "", ""])).toEqual("0px 0px 0px 0px") - }) -}) - describe("generate_css", () => { - test("it should generate a valid css rule: grid-area", () => { - expect(generate_css({ layout: { gridarea: ["", "", "", ""] } })).toEqual({ - layout: "", - position: "", - }) + + test("Check how partially empty arrays are handled", () => { + expect(["", "5", "", ""].map(generate_array_styles)).toEqual(["0px", "5px", "0px", "0px"]) }) - test("it should generate a valid css rule: grid-gap", () => { - expect(generate_css({ layout: { gap: "10" } })).toEqual({ - layout: "grid-gap: 10px;\ndisplay: grid;", - position: "", - }) + test("Check how array styles are output", () => { + expect(generate_css({ margin: ["0", "10", "0", "15"] })).toBe("margin: 0px 10px 0px 15px;") }) - test("it should generate a valid css rule: column 1", () => { - expect(generate_css({ position: { column: ["", ""] } })).toEqual({ - layout: "", - position: "", - }) + test("Check handling of an array with empty string values", () => { + expect(generate_css({ padding: ["", "", "", ""] })).toBe("") }) - test("it should generate a valid css rule: column 2", () => { - expect(generate_css({ position: { column: ["1", ""] } })).toEqual({ - position: "grid-column-start: 1;", - layout: "", - }) + test("Check handling of an empty array", () => { + expect(generate_css({ margin: [] })).toBe("") }) - test("it should generate a valid css rule: column 3", () => { - expect(generate_css({ position: { column: ["", "1"] } })).toEqual({ - position: "grid-column-end: 1;", - layout: "", - }) - }) - - test("it should generate a valid css rule: column 4", () => { - expect(generate_css({ position: { column: ["1", "1"] } })).toEqual({ - position: "grid-column-start: 1;\ngrid-column-end: 1;", - layout: "", - }) - }) - - test("it should generate a valid css rule: row 1", () => { - expect(generate_css({ position: { row: ["", ""] } })).toEqual({ - layout: "", - position: "", - }) - }) - - test("it should generate a valid css rule: row 2", () => { - expect(generate_css({ position: { row: ["1", ""] } })).toEqual({ - position: "grid-row-start: 1;", - layout: "", - }) - }) - - test("it should generate a valid css rule: row 3", () => { - expect(generate_css({ position: { row: ["", "1"] } })).toEqual({ - position: "grid-row-end: 1;", - layout: "", - }) - }) - - test("it should generate a valid css rule: row 4", () => { - expect(generate_css({ position: { row: ["1", "1"] } })).toEqual({ - position: "grid-row-start: 1;\ngrid-row-end: 1;", - layout: "", - }) - }) - - test("it should generate a valid css rule: padding 1", () => { - expect( - generate_css({ position: { padding: ["1", "1", "1", "1"] } }) - ).toEqual({ - position: "padding: 1px 1px 1px 1px;", - layout: "", - }) - }) - - test("it should generate a valid css rule: padding 2", () => { - expect(generate_css({ position: { padding: ["1", "", "", "1"] } })).toEqual( - { - position: "padding: 1px 0px 0px 1px;", - layout: "", - } - ) - }) - - test("it should generate a valid css rule: margin 1", () => { - expect( - generate_css({ position: { margin: ["1", "1", "1", "1"] } }) - ).toEqual({ - position: "margin: 1px 1px 1px 1px;", - layout: "", - }) - }) - - test("it should generate a valid css rule: margin 2", () => { - expect(generate_css({ position: { margin: ["1", "", "", "1"] } })).toEqual({ - position: "margin: 1px 0px 0px 1px;", - layout: "", - }) - }) - - test("it should generate a valid css rule: z-index 1", () => { - expect(generate_css({ position: { zindex: "" } })).toEqual({ - position: "", - layout: "", - }) - }) - - test("it should generate a valid css rule: z-index 2", () => { - expect(generate_css({ position: { zindex: "1" } })).toEqual({ - position: "z-index: 1;", - layout: "", - }) + test("Check handling of valid font property", () => { + expect(generate_css({ "font-size": "10px" })).toBe("font-size: 10px;") }) }) + describe("generate_screen_css", () => { - test("it should compile the css for a list of components", () => { - const components = [ - { - _styles: { - layout: { gridarea: ["", "", "", ""] }, - position: { margin: ["1", "1", "1", "1"] }, - }, - _id: 1, - }, - { - _styles: { - layout: { gridarea: ["", "", "", ""] }, - position: { margin: ["1", "1", "1", "1"] }, - }, - _id: 2, - }, - { - _styles: { - layout: { gridarea: ["", "", "", ""] }, - position: { margin: ["1", "1", "1", "1"] }, - }, - _id: 3, - }, - { - _styles: { - layout: { gridarea: ["", "", "", ""] }, - position: { margin: ["1", "1", "1", "1"] }, - }, - _id: 4, - }, - ] - - const compiled = `.pos-1 { -margin: 1px 1px 1px 1px; -} -.lay-1 { - -} -.pos-2 { -margin: 1px 1px 1px 1px; -} -.lay-2 { - -} -.pos-3 { -margin: 1px 1px 1px 1px; -} -.lay-3 { - -} -.pos-4 { -margin: 1px 1px 1px 1px; -} -.lay-4 { - -}` - - expect(generate_screen_css(components)).toEqual(compiled) + const normalComponent = { _id: "123-456", _component: "@standard-components/header", _children: [], _styles: { normal: { "font-size": "16px" }, hover: {}, active: {}, selected: {} } } + + test("Test generation of normal css styles", () => { + expect(generate_screen_css([normalComponent])).toBe(".header-123-456 {\nfont-size: 16px;\n}") }) - test("it should compile the css for a list of components", () => { - const components = [ - { - _styles: { - layout: { gridarea: ["", "", "", ""] }, - position: { margin: ["1", "1", "1", "1"] }, - }, - _id: 1, - _children: [ - { - _styles: { - layout: { gridarea: ["", "", "", ""] }, - position: { margin: ["1", "1", "1", "1"] }, - }, - _id: 2, - _children: [ - { - _styles: { - layout: { gridarea: ["", "", "", ""] }, - position: { margin: ["1", "1", "1", "1"] }, - }, - _id: 3, - _children: [ - { - _styles: { - layout: { gridarea: ["", "", "", ""] }, - position: { margin: ["1", "1", "1", "1"] }, - }, - _id: 4, - _children: [ - { - _styles: { - layout: { gridarea: ["", "", "", ""] }, - position: { margin: ["1", "1", "1", "1"] }, - }, - _id: 5, - _children: [], - }, - ], - }, - ], - }, - ], - }, - ], - }, - { - _styles: { - layout: { gridarea: ["", "", "", ""] }, - position: { margin: ["1", "1", "1", "1"] }, - }, - _id: 6, - }, - { - _styles: { - layout: { gridarea: ["", "", "", ""] }, - position: { margin: ["1", "1", "1", "1"] }, - }, - _id: 7, - }, - { - _styles: { - layout: { gridarea: ["", "", "", ""] }, - position: { margin: ["1", "1", "1", "1"] }, - }, - _id: 8, - }, - ] + const hoverComponent = { _id: "123-456", _component: "@standard-components/header", _children: [], _styles: { normal: {}, hover: {"font-size": "16px"}, active: {}, selected: {} } } - const compiled = `.pos-1 { -margin: 1px 1px 1px 1px; -} -.lay-1 { - -} -.pos-2 { -margin: 1px 1px 1px 1px; -} -.lay-2 { - -} -.pos-3 { -margin: 1px 1px 1px 1px; -} -.lay-3 { - -} -.pos-4 { -margin: 1px 1px 1px 1px; -} -.lay-4 { - -} -.pos-5 { -margin: 1px 1px 1px 1px; -} -.lay-5 { - -} -.pos-6 { -margin: 1px 1px 1px 1px; -} -.lay-6 { - -} -.pos-7 { -margin: 1px 1px 1px 1px; -} -.lay-7 { - -} -.pos-8 { -margin: 1px 1px 1px 1px; -} -.lay-8 { - -}` - - expect(generate_screen_css(components)).toEqual(compiled) + test("Test generation of hover css styles", () => { + expect(generate_screen_css([hoverComponent])).toBe(".header-123-456:hover {\nfont-size: 16px;\n}") }) -}) + + const selectedComponent = { _id: "123-456", _component: "@standard-components/header", _children: [], _styles: { normal: {}, hover: {}, active: {}, selected: { "font-size": "16px" } } } + + test("Test generation of selection css styles", () => { + expect(generate_screen_css([selectedComponent])).toBe(".header-123-456::selection {\nfont-size: 16px;\n}") + }) + + const emptyComponent = { _id: "123-456", _component: "@standard-components/header", _children: [], _styles: { normal: {}, hover: {}, active: {}, selected: {} } } + + test.only("Testing handling of empty component styles", () => { + expect(generate_screen_css([emptyComponent])).toBe("") + }) +}) \ No newline at end of file diff --git a/packages/cli/src/commands/new/appDirectoryTemplate/pages/main/page.json b/packages/cli/src/commands/new/appDirectoryTemplate/pages/main/page.json index 4f25934bba..af75ddec68 100644 --- a/packages/cli/src/commands/new/appDirectoryTemplate/pages/main/page.json +++ b/packages/cli/src/commands/new/appDirectoryTemplate/pages/main/page.json @@ -9,8 +9,10 @@ "_id": 0, "type": "div", "_styles": { - "layout": {}, - "position": {} + "normal": {}, + "hover": {}, + "active": {}, + "selected": {} }, "_code": "" }, diff --git a/packages/cli/src/commands/new/appDirectoryTemplate/pages/unauthenticated/page.json b/packages/cli/src/commands/new/appDirectoryTemplate/pages/unauthenticated/page.json index 298d73e8b6..3452a6df55 100644 --- a/packages/cli/src/commands/new/appDirectoryTemplate/pages/unauthenticated/page.json +++ b/packages/cli/src/commands/new/appDirectoryTemplate/pages/unauthenticated/page.json @@ -9,8 +9,10 @@ "_id": 1, "type": "div", "_styles": { - "layout": {}, - "position": {} + "normal": {}, + "hover": {}, + "active": {}, + "selected": {} }, "_code": "" }, diff --git a/packages/cli/src/commands/new/page.template.json b/packages/cli/src/commands/new/page.template.json index 89a23a78e5..6f02b78c62 100644 --- a/packages/cli/src/commands/new/page.template.json +++ b/packages/cli/src/commands/new/page.template.json @@ -9,8 +9,10 @@ "_id": 0, "type": "div", "_styles": { - "layout": {}, - "position": {} + "normal": {}, + "hover": {}, + "active": {}, + "selected": {} }, "_code": "" }, diff --git a/packages/client/src/render/attachChildren.js b/packages/client/src/render/attachChildren.js index ebb5dd34da..22dff2b2a8 100644 --- a/packages/client/src/render/attachChildren.js +++ b/packages/client/src/render/attachChildren.js @@ -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) { diff --git a/packages/client/src/render/prepareRenderComponent.js b/packages/client/src/render/prepareRenderComponent.js index 916ac82960..a7c3e6ddcf 100644 --- a/packages/client/src/render/prepareRenderComponent.js +++ b/packages/client/src/render/prepareRenderComponent.js @@ -35,8 +35,9 @@ export const prepareRenderComponent = ({ thisNode.rootElement = htmlElement.children[htmlElement.children.length - 1] + let [componentName] = props._component.match(/[a-z]*$/) if (props._id && thisNode.rootElement) { - thisNode.rootElement.classList.add(`pos-${props._id}`) + thisNode.rootElement.classList.add(`${componentName}-${props._id}`) } } } diff --git a/packages/standard-components/components.json b/packages/standard-components/components.json index 4705f2b45b..f9c800489e 100644 --- a/packages/standard-components/components.json +++ b/packages/standard-components/components.json @@ -12,10 +12,10 @@ "props": { "logoUrl": "string", "title": "string", - "backgroundColor": "colour", - "color": "colour", + "backgroundColor": "string", + "color": "string", "borderWidth": "string", - "borderColor": "colour", + "borderColor": "string", "borderStyle": "string" } }, @@ -23,35 +23,10 @@ "name": "Button", "description": "an html