From 06bbc88b3e37ccef13ea70fb332b8efd9d380cd4 Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Mon, 4 May 2020 16:07:04 +0100 Subject: [PATCH 01/23] WIP: Changes for property panel --- .../userInterface/CategoryTab.svelte | 43 ++++++ .../ComponentPropertiesPanel.svelte | 129 ++++++++---------- .../ComponentSelectionList.svelte | 16 +-- .../userInterface/DesignView.svelte | 17 +++ .../userInterface/PropertyGroup.svelte | 72 ++++++++++ .../userInterface/propertyCategories.js | 77 +++++++++++ .../userInterface/temporaryPanelStructure.js | 33 +++-- 7 files changed, 289 insertions(+), 98 deletions(-) create mode 100644 packages/builder/src/components/userInterface/CategoryTab.svelte create mode 100644 packages/builder/src/components/userInterface/DesignView.svelte create mode 100644 packages/builder/src/components/userInterface/PropertyGroup.svelte create mode 100644 packages/builder/src/components/userInterface/propertyCategories.js diff --git a/packages/builder/src/components/userInterface/CategoryTab.svelte b/packages/builder/src/components/userInterface/CategoryTab.svelte new file mode 100644 index 0000000000..246c1141e8 --- /dev/null +++ b/packages/builder/src/components/userInterface/CategoryTab.svelte @@ -0,0 +1,43 @@ + + + + + diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte index c4c57c8e04..84480b2d69 100644 --- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte +++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte @@ -14,17 +14,33 @@ import LayoutEditor from "./LayoutEditor.svelte" import EventsEditor from "./EventsEditor" - let current_view = "props" - let codeEditor + import panelStructure from "./temporaryPanelStructure.js" + import CategoryTab from "./CategoryTab.svelte" + import DesignView from "./DesignView.svelte" + + let current_view = "design" + let codeEditor + let flattenedPanel = flattenComponents(panelStructure.categories) + let categories = [ + { name: "Design" }, + { name: "Settings" }, + { name: "Actions" }, + ] + let selectedCategory = categories[0] - $: component = $store.currentComponentInfo - $: originalName = component.name - $: name = - $store.currentView === "detail" - ? $store.currentPreviewItem.name - : component._component - $: description = component.description $: components = $store.components + $: componentInstance = $store.currentComponentInfo //contains prop values of currently selected component + $: componentDefinition = $store.components.find( + c => c.name === componentInstance._component + ) + + $: panelDefinition = flattenedPanel.find( + //use for getting controls for each component property + c => c._component === componentInstance._component + ) + + // OLD PROPS ============================================= + $: screen_props = $store.currentFrontEndType === "page" ? getProps($store.currentPreviewItem, ["name", "favicon"]) @@ -33,77 +49,47 @@ const onPropChanged = store.setComponentProp const onStyleChanged = store.setComponentStyle + //May be able to remove some of the nested components in PropsView, PropsControl and StateBindingControl tree + + function walkProps(component, action) { + action(component) + if (component.children) { + for (let child of component.children) { + walkProps(child, action) + } + } + } + + function flattenComponents(props) { + const components = [] + props.forEach(comp => + walkProps(comp, c => { + if ("_component" in c) { + components.push(c) + } + }) + ) + return components + } + function getProps(obj, keys) { return keys.map((k, i) => [k, obj[k], obj.props._id + i]) }
- + + (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 current_view === 'design'} + + {/if} - -
@@ -146,7 +132,6 @@ .root { height: 100%; - padding: 20px; display: flex; flex-direction: column; } diff --git a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte index eb27559933..139dd65c59 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, @@ -85,15 +86,12 @@
- + + (selectedCategory = category)} + {selectedCategory} + {categories} /> +
+ import PropertyGroup from "./PropertyGroup.svelte" + export let panelDefinition = {} + export let componentInstance = {} + export let componentDefinition = {} + const getProperties = prop => panelDefinition.props[prop] + + $: props = !!panelDefinition.props && Object.keys(panelDefinition.props) + + +{#each props as prop} + +{/each} diff --git a/packages/builder/src/components/userInterface/PropertyGroup.svelte b/packages/builder/src/components/userInterface/PropertyGroup.svelte new file mode 100644 index 0000000000..1b424dcd28 --- /dev/null +++ b/packages/builder/src/components/userInterface/PropertyGroup.svelte @@ -0,0 +1,72 @@ + + +
(show = !show)}> +
+
+ +
+
{capitalize(title)}
+
+
+
    + {#each propertyKeys as key} + +
  • {content[key].displayName || capitalize(key)}
  • + + {/each} +
+
+
+ + diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js new file mode 100644 index 0000000000..8b662d443c --- /dev/null +++ b/packages/builder/src/components/userInterface/propertyCategories.js @@ -0,0 +1,77 @@ + +/* + TODO: all strings types are really inputs and could be typed as such + TODO: Options types need option items + TODO: Allow for default values for all properties +*/ + +export const layout = { + flexDirection: { displayName: "Direction", type: "string" }, + justifyContent: { displayName: "Justify", type: "string" }, + alignItems: { displayName: "Align", type: "string" }, + flexWrap: { displayName: "Wrap", type: "options" }, +} + +export const spacing = { + padding: { type: "string" }, + margin: { type: "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 +} + +export const position = { + position: { type: "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 +} + +export const background = { + backgroundColor: { displayName: "Background Color", type: "colour" }, + image: { type: "string" }, //custom +} + +export const border = { + radius: { type: "string" }, + width: { type: "string" }, //custom + color: { type: "colour" }, + style: { type: "options" }, +} + +export const effects = { + opacity: "string", + rotate: "string", + shadow: "string", +} + +export const transitions = { + property: { type: "options" }, + duration: { type: "string" }, + ease: { type: "options" }, +} + +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 5c4188d311..07facd4e28 100644 --- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js +++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js @@ -1,3 +1,5 @@ +import { layout, background } from "./propertyCategories.js" + export default { categories: [ { @@ -10,7 +12,8 @@ export default { description: 'This component contains things within itself', icon: 'ri-layout-row-fill', commonProps: {}, - children: [] + children: [], + props: { layout, background }, }, { name: 'Text', @@ -24,12 +27,8 @@ export default { 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", + layout, + background, }, }, { @@ -82,15 +81,15 @@ export default { name: 'Button', description: 'A basic html button that is ready for styling', icon: 'ri-radio-button-fill', - commonProps: {}, - children: [] + children: [], + props: {}, }, { _component: "@budibase/standard-components/icon", name: 'Icon', description: 'A basic component for displaying icons', icon: 'ri-sun-fill', - commonProps: {}, + props: {}, children: [] }, { @@ -98,7 +97,7 @@ export default { name: 'Link', description: 'A basic link component for internal and external links', icon: 'ri-link', - commonProps: {}, + props: {}, children: [] } ] @@ -112,14 +111,14 @@ export default { name: 'Card', description: 'A basic card component that can contain content and actions.', icon: 'ri-layout-bottom-line', - commonProps: {}, + props: {}, children: [] }, { name: 'Login', description: 'A component that automatically generates a login screen for your app.', icon: 'ri-login-box-fill', - commonProps: {}, + props: {}, children: [] }, { @@ -127,7 +126,7 @@ export default { _component: "@budibase/standard-components/Navigation", description: "A component for handling the navigation within your app.", icon: "ri-navigation-fill", - commonProps: {}, + props: {}, children: [] } ] @@ -140,15 +139,15 @@ export default { name: 'Table', description: 'A component that generates a table from your data.', icon: 'ri-archive-drawer-fill', - commonProps: {}, + props: {}, children: [] }, { name: 'Form', description: 'A component that generates a form from your data.', icon: 'ri-file-edit-fill', - commonProps: {}, - component: "@budibase/materialdesign-components/Form", + props: {}, + _component: "@budibase/materialdesign-components/Form", template: { component: "@budibase/materialdesign-components/Form", description: "Form for saving a record", From 8ad10976d3f03c2225a04873409014534e9703b3 Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Tue, 5 May 2020 10:02:10 +0100 Subject: [PATCH 02/23] Updates to naming conventions --- .../userInterface/DesignView.svelte | 12 ++-- .../userInterface/PropertyGroup.svelte | 18 +++--- .../userInterface/propertyCategories.js | 63 +++++++++---------- .../userInterface/temporaryPanelStructure.js | 30 ++++----- 4 files changed, 62 insertions(+), 61 deletions(-) diff --git a/packages/builder/src/components/userInterface/DesignView.svelte b/packages/builder/src/components/userInterface/DesignView.svelte index 60a6dc8bc3..f8dad08905 100644 --- a/packages/builder/src/components/userInterface/DesignView.svelte +++ b/packages/builder/src/components/userInterface/DesignView.svelte @@ -1,17 +1,19 @@ -{#each props as prop} +{#each propertyGroupNames as groupName} {/each} diff --git a/packages/builder/src/components/userInterface/PropertyGroup.svelte b/packages/builder/src/components/userInterface/PropertyGroup.svelte index 1b424dcd28..b2b1e9c9eb 100644 --- a/packages/builder/src/components/userInterface/PropertyGroup.svelte +++ b/packages/builder/src/components/userInterface/PropertyGroup.svelte @@ -1,6 +1,6 @@
(show = !show)}> -
+
-
{capitalize(title)}
+
{capitalize(name)}
    {#each propertyKeys as key} -
  • {content[key].displayName || capitalize(key)}
  • +
  • {properties[key].label || capitalize(key)}
  • {/each}
@@ -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; } diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js index 8b662d443c..352baea93e 100644 --- a/packages/builder/src/components/userInterface/propertyCategories.js +++ b/packages/builder/src/components/userInterface/propertyCategories.js @@ -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) { diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js index 07facd4e28..7ec5988def 100644 --- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js +++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js @@ -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", From b52b9fdd2f65584111646f13b57a9868729cf30a Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Tue, 5 May 2020 14:45:52 +0100 Subject: [PATCH 03/23] solution for rendering --- .../src/components/common/Colorpicker.svelte | 13 +++--- .../ComponentPropertiesPanel.svelte | 7 +++- .../userInterface/DesignView.svelte | 4 ++ .../userInterface/PropertyGroup.svelte | 42 +++++++++++++------ .../userInterface/TempSelect.svelte | 14 +++++++ .../userInterface/propertyCategories.js | 13 ++++-- .../userInterface/temporaryPanelStructure.js | 5 ++- .../standard-components/src/Heading.svelte | 1 - 8 files changed, 71 insertions(+), 28 deletions(-) create mode 100644 packages/builder/src/components/userInterface/TempSelect.svelte diff --git a/packages/builder/src/components/common/Colorpicker.svelte b/packages/builder/src/components/common/Colorpicker.svelte index 9cc3b3926a..28ca92554d 100644 --- a/packages/builder/src/components/common/Colorpicker.svelte +++ b/packages/builder/src/components/common/Colorpicker.svelte @@ -2,7 +2,7 @@ import { onMount, beforeUpdate, afterUpdate } from "svelte" export let value = null - export let onChanged = () => {} + export let onChange = () => {} export let swatches = [] let picker @@ -58,13 +58,10 @@ onMount(() => { getRecentColors() createPicker() - - picker.on("save", (colour, instance) => { - let color = colour.toHEXA().toString() - onChanged(color) - setRecentColor(color) - picker.hide() - }) + return () => { + picker.destroyAndRemove() + picker = null + } }) diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte index 84480b2d69..944862ebee 100644 --- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte +++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte @@ -86,8 +86,11 @@
{#if current_view === 'design'} - - + {/if}
diff --git a/packages/builder/src/components/userInterface/DesignView.svelte b/packages/builder/src/components/userInterface/DesignView.svelte index f8dad08905..0aebd7b186 100644 --- a/packages/builder/src/components/userInterface/DesignView.svelte +++ b/packages/builder/src/components/userInterface/DesignView.svelte @@ -4,8 +4,11 @@ export let panelDefinition = {} export let componentInstance = {} export let componentDefinition = {} + export let onPropChanged = () => {} + const getProperties = name => panelDefinition.properties[name] + $: console.log("PDEF", panelDefinition) $: propertyGroupNames = !!panelDefinition.properties && Object.keys(panelDefinition.properties) @@ -14,6 +17,7 @@ {/each} diff --git a/packages/builder/src/components/userInterface/PropertyGroup.svelte b/packages/builder/src/components/userInterface/PropertyGroup.svelte index b2b1e9c9eb..fa6dba0156 100644 --- a/packages/builder/src/components/userInterface/PropertyGroup.svelte +++ b/packages/builder/src/components/userInterface/PropertyGroup.svelte @@ -1,20 +1,27 @@ -
(show = !show)}> + +
{}}>
@@ -22,13 +29,20 @@
{capitalize(name)}
-
    - {#each propertyKeys as key} - -
  • {properties[key].label || capitalize(key)}
  • - - {/each} -
+ + {#each propertyDefinition as [key, definition]} +
+ {#if propExistsOnComponentDef(key)} + {definition.label || capitalize(key)} + + {/if} +
+ {/each}
@@ -62,7 +76,11 @@ .property-panel { height: 0px; overflow: hidden; - /* transition: height 2s ease-in-out; */ + } + + .property-control { + display: flex; + flex-flow: row nowrap; } .show { diff --git a/packages/builder/src/components/userInterface/TempSelect.svelte b/packages/builder/src/components/userInterface/TempSelect.svelte new file mode 100644 index 0000000000..514c9b5a20 --- /dev/null +++ b/packages/builder/src/components/userInterface/TempSelect.svelte @@ -0,0 +1,14 @@ + + + diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js index 352baea93e..6246462ecb 100644 --- a/packages/builder/src/components/userInterface/propertyCategories.js +++ b/packages/builder/src/components/userInterface/propertyCategories.js @@ -1,9 +1,16 @@ -/* +import ColorPicker from "../common/Colorpicker.svelte" +import Input from "../common/Input.svelte" +import TempSelect from "./TempSelect.svelte" +/* TODO: all strings types are really inputs and could be typed as such TODO: Options types need option items TODO: Allow for default values for all properties */ +export const general = { + text: { control: Input } +} + export const layout = { flexDirection: { label: "Direction", control: "string" }, justifyContent: { label: "Justify", control: "string" }, @@ -42,8 +49,8 @@ export const typography = { } export const background = { - backgroundColor: { label: "Background Color", control: "colour" }, - image: { control: "string" }, //custom + backgroundColor: { label: "Background Color", control: ColorPicker }, + image: { control: Input }, //custom } export const border = { diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js index 7ec5988def..bc60ac2bd6 100644 --- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js +++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js @@ -1,4 +1,4 @@ -import { layout, background } from "./propertyCategories.js" +import { general, layout, background } from "./propertyCategories.js" export default { categories: [ @@ -13,7 +13,7 @@ export default { icon: 'ri-layout-row-fill', commonProps: {}, children: [], - properties: { layout, background }, + properties: { background }, }, { name: 'Text', @@ -27,6 +27,7 @@ export default { description: "A component for displaying heading text", icon: "ri-heading", properties: { + general, layout, background, }, diff --git a/packages/standard-components/src/Heading.svelte b/packages/standard-components/src/Heading.svelte index 6a3a210dc3..4bbb9d0b36 100644 --- a/packages/standard-components/src/Heading.svelte +++ b/packages/standard-components/src/Heading.svelte @@ -11,7 +11,6 @@ $: containerElement && !text && _bb.attachChildren(containerElement) $: style = buildStyle({ "font-family": fontFamily, color }) - // $: console.log("HEADING", color) {#if type === 'h1'} From 8d8caa9ff5be59147d2b27726074af57fba30121 Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Thu, 7 May 2020 14:30:04 +0100 Subject: [PATCH 04/23] Properties panel structure complete --- .../src/components/common/Input.svelte | 5 +- .../ComponentPropertiesPanel.svelte | 86 +-------------- .../ComponentsPaneSwitcher.svelte | 5 +- .../userInterface/DesignView.svelte | 57 ++++++++-- .../userInterface/FlatButton.svelte | 38 +++++++ .../userInterface/FlatButtonGroup.svelte | 54 +++++++++ .../userInterface/OptionSelect.svelte | 22 ++++ .../userInterface/PropertyControl.svelte | 41 +++++++ .../userInterface/PropertyGroup.svelte | 52 ++++----- .../userInterface/TempSelect.svelte | 14 --- .../userInterface/UserInterfaceRoot.svelte | 4 +- .../userInterface/propertyCategories.js | 103 +++++++++++------- .../userInterface/temporaryPanelStructure.js | 6 +- 13 files changed, 305 insertions(+), 182 deletions(-) create mode 100644 packages/builder/src/components/userInterface/FlatButton.svelte create mode 100644 packages/builder/src/components/userInterface/FlatButtonGroup.svelte create mode 100644 packages/builder/src/components/userInterface/OptionSelect.svelte create mode 100644 packages/builder/src/components/userInterface/PropertyControl.svelte delete mode 100644 packages/builder/src/components/userInterface/TempSelect.svelte 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/ComponentsPaneSwitcher.svelte b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte index 9ca5b1e122..8e72a17c54 100644 --- a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte +++ b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte @@ -24,13 +24,13 @@
@@ -55,6 +55,7 @@ display: flex; flex-direction: column; padding: 20px 0; + border-left: solid 1px #e8e8ef; } .switcher { diff --git a/packages/builder/src/components/userInterface/DesignView.svelte b/packages/builder/src/components/userInterface/DesignView.svelte index 0aebd7b186..7fc6af5312 100644 --- a/packages/builder/src/components/userInterface/DesignView.svelte +++ b/packages/builder/src/components/userInterface/DesignView.svelte @@ -1,23 +1,62 @@ -{#each propertyGroupNames as groupName} - -{/each} +
+ +
+ +
+ +
+ {#each propertyGroupNames as groupName} + + {/each} +
+
+ + 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..cbbdb8f91f --- /dev/null +++ b/packages/builder/src/components/userInterface/OptionSelect.svelte @@ -0,0 +1,22 @@ + + + diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte new file mode 100644 index 0000000000..23dd223de6 --- /dev/null +++ b/packages/builder/src/components/userInterface/PropertyControl.svelte @@ -0,0 +1,41 @@ + + +
+
{label}
+
+ +
+
+ + diff --git a/packages/builder/src/components/userInterface/PropertyGroup.svelte b/packages/builder/src/components/userInterface/PropertyGroup.svelte index fa6dba0156..96d5ba7a7b 100644 --- a/packages/builder/src/components/userInterface/PropertyGroup.svelte +++ b/packages/builder/src/components/userInterface/PropertyGroup.svelte @@ -1,28 +1,27 @@ - -
{}}> -
+
+
(show = !show)}>
@@ -31,17 +30,14 @@
{#each propertyDefinition as [key, definition]} -
- {#if propExistsOnComponentDef(key)} - {definition.label || capitalize(key)} - - {/if} -
+ + onChange(key, value)} + props={{ ...excludeProps(definition, ['control']) }} /> + {/each}
@@ -63,14 +59,19 @@ flex-flow: row nowrap; } - .icon { - flex: 0 0 20px; - text-align: center; - } - .name { flex: 1; text-align: left; + padding-top: 2px; + font-size: 14px; + font-weight: 500; + letter-spacing: 0.14px; + color: #393c44; + } + + .icon { + flex: 0 0 20px; + text-align: center; } .property-panel { @@ -78,11 +79,6 @@ overflow: hidden; } - .property-control { - display: flex; - flex-flow: row nowrap; - } - .show { overflow: auto; height: auto; diff --git a/packages/builder/src/components/userInterface/TempSelect.svelte b/packages/builder/src/components/userInterface/TempSelect.svelte deleted file mode 100644 index 514c9b5a20..0000000000 --- a/packages/builder/src/components/userInterface/TempSelect.svelte +++ /dev/null @@ -1,14 +0,0 @@ - - - diff --git a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte index 4f32c55d24..13d7a7e2a1 100644 --- a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte +++ b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte @@ -114,7 +114,7 @@ .root { display: grid; - grid-template-columns: 275px 1fr 275px; + grid-template-columns: 275px 1fr 300px; height: 100%; width: 100%; background: #fafafa; @@ -151,7 +151,7 @@ .components-pane { grid-column: 3; background-color: var(--white); - min-height: 0px; + height: 100vh; overflow-y: scroll; } diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js index 6246462ecb..525738f02f 100644 --- a/packages/builder/src/components/userInterface/propertyCategories.js +++ b/packages/builder/src/components/userInterface/propertyCategories.js @@ -1,75 +1,102 @@ -import ColorPicker from "../common/Colorpicker.svelte" import Input from "../common/Input.svelte" -import TempSelect from "./TempSelect.svelte" +import OptionSelect from "./OptionSelect.svelte" /* - TODO: all strings types are really inputs and could be typed as such - TODO: Options types need option items TODO: Allow for default values for all properties */ export const general = { - text: { control: Input } + text: { control: Input }, } export const layout = { - flexDirection: { label: "Direction", control: "string" }, - justifyContent: { label: "Justify", control: "string" }, - alignItems: { label: "Align", control: "string" }, - flexWrap: { label: "Wrap", control: "options" }, + flexDirection: { + label: "Direction", + control: OptionSelect, + initialValue: "columnReverse", + options: [ + { label: "row" }, + { label: "row-reverse", value: "rowReverse" }, + { label: "column" }, + { label: "column-reverse", value: "columnReverse" }, + ], + }, + justifyContent: { label: "Justify", control: Input }, + alignItems: { label: "Align", control: Input }, + flexWrap: { + label: "Wrap", + control: OptionSelect, + options: [{ label: "wrap" }, { label: "no wrap", value: "noWrap" }], + }, } export const spacing = { - padding: { control: "string" }, - margin: { control: "string" }, + padding: { control: Input }, + margin: { control: Input }, } export const size = { - 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 + 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: Input }, //custom } export const position = { - position: { control: "options" }, + position: { control: Input }, } export const typography = { - 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 + font: { control: Input }, + weight: { control: Input }, + size: { control: Input }, + lineHeight: { label: "Line H", control: Input }, + color: { + control: OptionSelect, + options: [{ label: "red" }, { label: "blue" }, { label: "green" }], + }, + align: { control: Input }, //custom + transform: { control: Input }, //custom + style: { control: Input }, //custom } export const background = { - backgroundColor: { label: "Background Color", control: ColorPicker }, + backgroundColor: { label: "Background Color", control: Input }, image: { control: Input }, //custom } export const border = { - radius: { control: "string" }, - width: { control: "string" }, //custom - color: { control: "colour" }, - style: { control: "options" }, + radius: { control: Input }, + width: { control: Input }, //custom + color: { control: Input }, + style: { control: Input }, } export const effects = { - opacity: "string", - rotate: "string", - shadow: "string", + opacity: { control: Input }, + rotate: { control: Input }, + shadow: { control: Input }, } export const transitions = { - property: { control: "options" }, - duration: { control: "string" }, - ease: { control: "options" }, + property: { control: Input }, + duration: { control: Input }, + ease: { control: Input }, +} + +export const all = { + general, + layout, + spacing, + size, + position, + typography, + background, + border, + effects, + transitions, } export function excludeProps(props, propsToExclude) { diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js index bc60ac2bd6..c4426d1035 100644 --- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js +++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js @@ -1,4 +1,4 @@ -import { general, layout, background } from "./propertyCategories.js" +import { general, layout, typography, background, all } from "./propertyCategories.js" export default { categories: [ @@ -13,7 +13,7 @@ export default { icon: 'ri-layout-row-fill', commonProps: {}, children: [], - properties: { background }, + properties: { ...all }, }, { name: 'Text', @@ -29,7 +29,7 @@ export default { properties: { general, layout, - background, + typography, }, }, { From 6b7a3d1d7e4a650a2e071fa1113dec1451dae626 Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Fri, 8 May 2020 09:57:41 +0100 Subject: [PATCH 05/23] Style binding options and property categories --- .../userInterface/OptionSelect.svelte | 13 +++- .../userInterface/propertyCategories.js | 75 ++++++++++++++++--- 2 files changed, 75 insertions(+), 13 deletions(-) diff --git a/packages/builder/src/components/userInterface/OptionSelect.svelte b/packages/builder/src/components/userInterface/OptionSelect.svelte index cbbdb8f91f..b3cfa5e54b 100644 --- a/packages/builder/src/components/userInterface/OptionSelect.svelte +++ b/packages/builder/src/components/userInterface/OptionSelect.svelte @@ -4,6 +4,9 @@ export let onChange = value => {} export let options = [] export let initialValue = "" + export let styleBindingProperty = "" + + $: bindOptionToStyle = !!styleBindingProperty onMount(() => { if (!value && !!initialValue) { @@ -17,6 +20,14 @@ {value} on:change={ev => onChange(ev.target.value)}> {#each options as { value, label }} - + {#if bindOptionToStyle} + + {:else} + + {/if} {/each} diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js index 525738f02f..7505645b65 100644 --- a/packages/builder/src/components/userInterface/propertyCategories.js +++ b/packages/builder/src/components/userInterface/propertyCategories.js @@ -41,25 +41,76 @@ export const size = { minHeight: { label: "Min H", control: Input }, maxWidth: { label: "Max W", control: Input }, maxHeight: { label: "Max H", control: Input }, - overflow: { control: Input }, //custom + overflow: { + control: OptionSelect, + options: [ + { label: "visible" }, + { label: "auto" }, + { label: "hidden" }, + { label: "auto" }, + { label: "scroll" }, + ], + }, //custom } export const position = { - position: { control: Input }, + position: { + control: OptionSelect, + options: [ + { label: "static" }, + { label: "relative" }, + { label: "fixed" }, + { label: "absolute" }, + { label: "sticky" }, + ], + }, } export const typography = { - font: { control: Input }, - weight: { control: Input }, - size: { control: Input }, + fontFamily: { + label: "Font", + control: OptionSelect, + options: [ + { label: "initial" }, + { label: "Times New Roman" }, + { label: "Georgia" }, + { label: "Arial" }, + { label: "Arial Black" }, + { label: "Comic Sans MS" }, + { label: "Impact" }, + { label: "Lucida Sans Unicode" }, + ], + styleBindingProperty: "font-family", + }, + fontWeight: { + label: "weight", + control: OptionSelect, + options: [ + { label: "normal" }, + { label: "bold" }, + { label: "bolder" }, + { label: "lighter" }, + ], + }, + fontSize: { label: "size", control: Input }, lineHeight: { label: "Line H", control: Input }, color: { control: OptionSelect, options: [{ label: "red" }, { label: "blue" }, { label: "green" }], }, - align: { control: Input }, //custom - transform: { control: Input }, //custom - style: { control: Input }, //custom + textAlign: { + label: "align", + control: OptionSelect, + options: [ + { label: "initial" }, + { label: "left" }, + { label: "right" }, + { label: "center" }, + { label: "justify" }, + ], + }, //custom + textTransform: { label: "transform", control: Input }, //custom + fontStyle: { label: "style", control: Input }, //custom } export const background = { @@ -68,10 +119,10 @@ export const background = { } export const border = { - radius: { control: Input }, - width: { control: Input }, //custom - color: { control: Input }, - style: { control: Input }, + borderRadius: { label: "radius", control: Input }, + borderWidth: { label: "width", control: Input }, //custom + borderColor: { label: "color", control: Input }, + borderStyle: { label: "style", control: Input }, } export const effects = { From 2e636dec9347e8fdf6e84408754de51b205def0e Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Fri, 8 May 2020 20:29:15 +0100 Subject: [PATCH 06/23] Pre demo changes --- .../ComponentPropertiesPanel.svelte | 5 ++-- .../userInterface/PropertyGroup.svelte | 15 ++++++++++++ .../userInterface/propertyCategories.js | 20 ++++++++++++++-- .../userInterface/temporaryPanelStructure.js | 24 ++++++++++++------- packages/standard-components/components.json | 4 +++- .../standard-components/src/Button.svelte | 6 ++--- .../standard-components/src/Container.svelte | 12 ++++++++++ 7 files changed, 67 insertions(+), 19 deletions(-) diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte index 94c450823a..12a7b3eb90 100644 --- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte +++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte @@ -29,7 +29,7 @@ let selectedCategory = categories[0] $: components = $store.components - $: componentInstance = $store.currentComponentInfo //contains prop values of currently selected component + $: componentInstance = $store.currentComponentInfo $: componentDefinition = $store.components.find( c => c.name === componentInstance._component ) @@ -39,8 +39,7 @@ c => c._component === componentInstance._component ) - // OLD PROPS ============================================= - + // SCREEN PROPS ============================================= $: screen_props = $store.currentFrontEndType === "page" ? getProps($store.currentPreviewItem, ["name", "favicon"]) diff --git a/packages/builder/src/components/userInterface/PropertyGroup.svelte b/packages/builder/src/components/userInterface/PropertyGroup.svelte index 96d5ba7a7b..2d88557777 100644 --- a/packages/builder/src/components/userInterface/PropertyGroup.svelte +++ b/packages/builder/src/components/userInterface/PropertyGroup.svelte @@ -1,6 +1,7 @@ +
(show = !show)}>
@@ -41,6 +55,7 @@ {/each}
+ diff --git a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte index 02aa072910..18afb123ef 100644 --- a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte +++ b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte @@ -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", diff --git a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js index 3c774cc4b8..c1cf4aab1f 100644 --- a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js +++ b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js @@ -11,7 +11,7 @@ export default ({ diff --git a/packages/standard-components/src/Heading.svelte b/packages/standard-components/src/Heading.svelte index 4bbb9d0b36..4760ae05db 100644 --- a/packages/standard-components/src/Heading.svelte +++ b/packages/standard-components/src/Heading.svelte @@ -2,27 +2,25 @@ import { buildStyle } from "./buildStyle.js" export let className = "" export let type - export let _bb export let text = "" - export let fontFamily = "" - export let color = "" + + export let _bb let containerElement $: containerElement && !text && _bb.attachChildren(containerElement) - $: style = buildStyle({ "font-family": fontFamily, color }) {#if type === 'h1'} -

{text}

+

{text}

{:else if type === 'h2'} -

{text}

+

{text}

{:else if type === 'h3'} -

{text}

+

{text}

{:else if type === 'h4'} -

{text}

+

{text}

{:else if type === 'h5'} -
{text}
+
{text}
{:else if type === 'h6'} -
{text}
+
{text}
{/if} diff --git a/packages/standard-components/src/Text.svelte b/packages/standard-components/src/Text.svelte index b6d3c159e9..96fc09e025 100644 --- a/packages/standard-components/src/Text.svelte +++ b/packages/standard-components/src/Text.svelte @@ -4,45 +4,35 @@ export let text = "" export let className = "" - export let formattingTag = "" - - export let fontFamily = "" - export let fontSize = "1em" - export let textAlign = "" - export let verticalAlign = "" - export let color = "" + export let type = "" export let _bb - const isTag = tag => (formattingTag || "").indexOf(tag) > -1 - - $: style = buildStyle({ - "font-size": fontSize, - "font-family": fontFamily, - color, - }) + const isTag = tag => type === tag {#if isTag('none')} - {text} -{:else if isTag('')} - {text} -{:else if isTag('')} - {text} -{:else if isTag('')} - {text} -{:else if isTag('')} - {text} -{:else if isTag('')} - {text} -{:else if isTag('')} - {text} -{:else if isTag('')} - {text} -{:else if isTag('')} - {text} -{:else if isTag('')} - {text} -{:else if isTag('')} - {text} -{:else}{text}{/if} + {text} +{:else if isTag('bold')} + {text} +{:else if isTag('strong')} + {text} +{:else if isTag('italic')} + {text} +{:else if isTag('emphasis')} + {text} +{:else if isTag('mark')} + {text} +{:else if isTag('small')} + {text} +{:else if isTag('del')} + {text} +{:else if isTag('ins')} + {text} +{:else if isTag('sub')} + {text} +{:else if isTag('sup')} + {text} +{:else} + {text} +{/if} From 017ac7aced1de768a943e0897eeadf118508aa1a Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Wed, 20 May 2020 11:55:25 +0100 Subject: [PATCH 10/23] Settings, Tidyup and Refactor --- .../ComponentPropertiesPanel.svelte | 12 ++-- .../userInterface/ComponentsHierarchy.svelte | 1 - .../ComponentsHierarchyChildren.svelte | 1 - .../userInterface/DesignView.svelte | 26 +++++--- .../userInterface/PropertyControl.svelte | 12 ++-- .../userInterface/PropertyGroup.svelte | 14 ++-- .../userInterface/SettingsView.svelte | 34 ++++++---- .../userInterface/propertyCategories.js | 66 +++++++++---------- .../userInterface/temporaryPanelStructure.js | 18 ++++- packages/standard-components/src/Link.svelte | 38 +---------- 10 files changed, 109 insertions(+), 113 deletions(-) diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte index b1b07c514e..507d04c356 100644 --- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte +++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte @@ -32,11 +32,13 @@ $: components = $store.components $: componentInstance = $store.currentComponentInfo $: componentDefinition = $store.components[componentInstance._component] - $: componentPropDefinition = flattenedPanel.find( - //use for getting controls for each component property - c => c._component === componentInstance._component - ) - $: panelDefinition = componentPropDefinition + $: componentPropDefinition = + flattenedPanel.find( + //use for getting controls for each component property + c => c._component === componentInstance._component + ) || {} + + $: panelDefinition = componentPropDefinition.properties ? componentPropDefinition.properties[selectedCategory.value] : {} diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte index 31ada23230..56b0af8814 100644 --- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte +++ b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte @@ -45,7 +45,6 @@ } const changeScreen = screen => { - debugger store.setCurrentScreen(screen.title) $goto(`./:page/${screen.title}`) } diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte index 36d401f500..c7b426b02b 100644 --- a/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte +++ b/packages/builder/src/components/userInterface/ComponentsHierarchyChildren.svelte @@ -37,7 +37,6 @@ const selectComponent = component => { // Set current component - debugger store.selectComponent(component) // Get ID path diff --git a/packages/builder/src/components/userInterface/DesignView.svelte b/packages/builder/src/components/userInterface/DesignView.svelte index 612def10b0..4b505420c6 100644 --- a/packages/builder/src/components/userInterface/DesignView.svelte +++ b/packages/builder/src/components/userInterface/DesignView.svelte @@ -33,14 +33,20 @@
- {#each propertyGroupNames as groupName} - - {/each} + {#if propertyGroupNames.length > 0} + {#each propertyGroupNames as groupName} + + {/each} + {:else} +
+ This component does not have any design properties +
+ {/if}
@@ -58,4 +64,8 @@ .design-view-property-groups { flex: 1; } + + .no-design { + text-align: center; + } diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte index 99d91fcbd8..600005b5b6 100644 --- a/packages/builder/src/components/userInterface/PropertyControl.svelte +++ b/packages/builder/src/components/userInterface/PropertyControl.svelte @@ -5,18 +5,20 @@ export let control = null export let key = "" export let value = "" - export let valueType = "" export let props = {} export let onChange = () => {} function handleChange(key, v) { - !!v.target - ? onChange(name, key, valueType ? v.target[valueType] : v.target.value) - : onChange(name, key, v) + if (v.target) { + let val = props.valueType ? v.target[props.valueType] : v.target.value + onChange(key, val) + } else { + onChange(key, v) + } } const handleValueType = value => - valueType ? { [valueType]: value } : { value } + props.valueType ? { [props.valueType]: value } : { value }
diff --git a/packages/builder/src/components/userInterface/PropertyGroup.svelte b/packages/builder/src/components/userInterface/PropertyGroup.svelte index e1e3a98980..d15df62545 100644 --- a/packages/builder/src/components/userInterface/PropertyGroup.svelte +++ b/packages/builder/src/components/userInterface/PropertyGroup.svelte @@ -11,12 +11,6 @@ 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" @@ -33,10 +27,10 @@ + key={props.key} + value={componentInstance['_styles'][props.key]} + onChange={(key, value) => onStyleChanged(name, 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 index fb017f47db..c945f90bdd 100644 --- a/packages/builder/src/components/userInterface/SettingsView.svelte +++ b/packages/builder/src/components/userInterface/SettingsView.svelte @@ -15,14 +15,26 @@ } -{#each panelDefinition as definition} - {#if propExistsOnComponentDef(definition.key)} - - {/if} -{/each} +{#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/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js index 6f7feaae45..99cd42638b 100644 --- a/packages/builder/src/components/userInterface/propertyCategories.js +++ b/packages/builder/src/components/userInterface/propertyCategories.js @@ -8,7 +8,7 @@ import InputGroup from "../common/Inputs/InputGroup.svelte" export const layout = [ { label: "Direction", - cssKey: "flex-direction", + key: "flex-direction", control: OptionSelect, initialValue: "columnReverse", options: [ @@ -18,11 +18,11 @@ export const layout = [ { label: "column-reverse", value: "columnReverse" }, ], }, - { label: "Justify", cssKey: "justify-content", control: Input }, - { label: "Align", cssKey: "align-items", control: Input }, + { label: "Justify", key: "justify-content", control: Input }, + { label: "Align", key: "align-items", control: Input }, { label: "Wrap", - cssKey: "flex-wrap", + key: "flex-wrap", control: OptionSelect, options: [{ label: "wrap" }, { label: "no wrap", value: "noWrap" }], }, @@ -37,26 +37,26 @@ const spacingMeta = [ export const spacing = [ { label: "Padding", - cssKey: "padding", + key: "padding", control: InputGroup, meta: spacingMeta, }, - { label: "Margin", cssKey: "margin", control: InputGroup, meta: spacingMeta }, + { label: "Margin", key: "margin", control: InputGroup, meta: spacingMeta }, ] 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 }, + { 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", - cssKey: "position", + key: "position", control: OptionSelect, options: [ { label: "static" }, @@ -71,7 +71,7 @@ export const position = [ export const typography = [ { label: "Font", - cssKey: "font-family", + key: "font-family", control: OptionSelect, options: [ { label: "initial" }, @@ -87,7 +87,7 @@ export const typography = [ }, { label: "Weight", - cssKey: "font-weight", + key: "font-weight", control: OptionSelect, options: [ { label: "normal" }, @@ -96,28 +96,28 @@ export const typography = [ { label: "lighter" }, ], }, - { label: "size", cssKey: "font-size", control: Input }, - { label: "Line H", cssKey: "line-height", control: Input }, + { label: "size", key: "font-size", control: Input }, + { label: "Line H", key: "line-height", control: Input }, { label: "Color", - cssKey: "color", + key: "color", control: OptionSelect, options: ["black", "red", "white", "blue", "green"], }, { label: "align", - cssKey: "text-align", + key: "text-align", control: OptionSelect, options: ["initial", "left", "right", "center", "justify"], }, //custom - { label: "transform", cssKey: "text-transform", control: Input }, //custom - { label: "style", cssKey: "font-style", control: Input }, //custom + { label: "transform", key: "text-transform", control: Input }, //custom + { label: "style", key: "font-style", control: Input }, //custom ] export const background = [ { label: "Background", - cssKey: "background", + key: "background", control: OptionSelect, options: [ { label: "white" }, @@ -127,26 +127,26 @@ export const background = [ { label: "black" }, ], }, - { label: "Image", cssKey: "image", control: Input }, //custom + { label: "Image", key: "image", control: Input }, //custom ] 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 }, + { label: "Radius", key: "border-radius", control: Input }, + { label: "Width", key: "border-width", control: Input }, //custom + { label: "Color", key: "border-color", control: Input }, + { label: "Style", key: "border-style", 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 }, + { 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", cssKey: "transition-property", control: Input }, - { label: "Duration", cssKey: "transition-timing-function", control: Input }, - { label: "Ease", cssKey: "transition-ease", control: Input }, + { 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 = { diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js index 449393b67e..58a8a2c674 100644 --- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js +++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js @@ -201,7 +201,9 @@ export default { description: "A basic component for displaying icons", icon: "ri-sun-fill", children: [], - properties: { design: { ...all } }, + properties: { + design: { ...all }, + }, }, { _component: "@budibase/standard-components/link", @@ -209,7 +211,19 @@ export default { description: "A basic link component for internal and external links", icon: "ri-link", 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, + }, + ], + }, }, ], }, diff --git a/packages/standard-components/src/Link.svelte b/packages/standard-components/src/Link.svelte index 0ac3d9f628..ef0b71d62e 100644 --- a/packages/standard-components/src/Link.svelte +++ b/packages/standard-components/src/Link.svelte @@ -4,11 +4,6 @@ export let url = "" export let text = "" export let openInNewTab = false - export let color - export let hoverColor - export let underline = false - export let fontFamily - export let fontSize export let _bb @@ -16,43 +11,12 @@ $: anchorElement && !text && _bb.attachChildren(anchorElement) $: target = openInNewTab ? "_blank" : "_self" - $: cssVariables = { - hoverColor, - color, - textDecoration: underline ? "underline" : "none", - fontSize, - fontFamily, - } - $: classes = createClasses(cssVariables) - - {text} - +{text} From facd99f58a5c54c24b3f9b5ca671112c30fc2bda Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Thu, 21 May 2020 14:28:32 +0100 Subject: [PATCH 11/23] Stable property panel --- packages/builder/package.json | 3 +- .../builder/src/builderStore/generate_css.js | 4 +- .../src/components/common/Colorpicker.svelte | 136 ++++++++++++------ .../common/Inputs/InputGroup.svelte | 16 +-- .../userInterface/PropertyControl.svelte | 11 +- .../userInterface/SettingsView.svelte | 3 + .../userInterface/propertyCategories.js | 15 +- .../userInterface/temporaryPanelStructure.js | 4 +- packages/server/builder/nano.min.css | 1 - .../standard-components/src/Button.svelte | 6 +- 10 files changed, 122 insertions(+), 77 deletions(-) delete mode 100644 packages/server/builder/nano.min.css diff --git a/packages/builder/package.json b/packages/builder/package.json index d92f64ce17..4e639f2eeb 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" } diff --git a/packages/builder/src/builderStore/generate_css.js b/packages/builder/src/builderStore/generate_css.js index 279c800396..f592e250bd 100644 --- a/packages/builder/src/builderStore/generate_css.js +++ b/packages/builder/src/builderStore/generate_css.js @@ -121,7 +121,9 @@ export const generate_css = style => { return (str += `${key}: ${value};\n`) } } else if (Array.isArray(value)) { - return (str += `${key}: ${value.map(v => `${v}px`).join(" ")};\n`) + return (str += `${key}: ${value + .map(v => (!/px$/.test(v) ? `${v}px` : v)) + .join(" ")};\n`) } }, "") diff --git a/packages/builder/src/components/common/Colorpicker.svelte b/packages/builder/src/components/common/Colorpicker.svelte index 28ca92554d..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/Inputs/InputGroup.svelte b/packages/builder/src/components/common/Inputs/InputGroup.svelte index 7976cabd55..7f6d20337b 100644 --- a/packages/builder/src/components/common/Inputs/InputGroup.svelte +++ b/packages/builder/src/components/common/Inputs/InputGroup.svelte @@ -3,13 +3,15 @@ export let meta = [] export let label = "" - export let values = [] + export let value = [0, 0, 0, 0] export let type = "number" export let onChange = () => {} - let _values = values.map(v => v) - - // $: onChange(_values) + function handleChange(val, idx) { + value.splice(idx, 1, val) + value = value + onChange(value) + }
@@ -19,8 +21,8 @@ (_values[i] = e.target.value)} /> + value={value[i] === 0 ? '' : value[i]} + on:change={e => handleChange(e.target.value || 0, i)} /> {/each}
@@ -36,8 +38,6 @@ .inputs { flex: 1; - /* display: flex; - justify-content: space-between; */ } input { diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte index 600005b5b6..ff0d332a76 100644 --- a/packages/builder/src/components/userInterface/PropertyControl.svelte +++ b/packages/builder/src/components/userInterface/PropertyControl.svelte @@ -4,21 +4,22 @@ export let label = "" export let control = null export let key = "" - export let value = "" + export let value export let props = {} export let onChange = () => {} function handleChange(key, v) { if (v.target) { - let val = props.valueType ? v.target[props.valueType] : v.target.value + let val = props.valueKey ? v.target[props.valueKey] : v.target.value onChange(key, val) } else { onChange(key, v) } } - const handleValueType = value => - props.valueType ? { [props.valueType]: value } : { value } + //Incase the component has a different value key name + const handlevalueKey = value => + props.valueKey ? { [props.valueKey]: value } : { value }
@@ -26,7 +27,7 @@
handleChange(key, val)} onChange={val => handleChange(key, val)} {...props} /> diff --git a/packages/builder/src/components/userInterface/SettingsView.svelte b/packages/builder/src/components/userInterface/SettingsView.svelte index c945f90bdd..56ede7bc91 100644 --- a/packages/builder/src/components/userInterface/SettingsView.svelte +++ b/packages/builder/src/components/userInterface/SettingsView.svelte @@ -1,6 +1,7 @@ + + {#if panelDefinition.length > 0} {#each panelDefinition as definition} {#if propExistsOnComponentDef(definition.key)} diff --git a/packages/builder/src/components/userInterface/propertyCategories.js b/packages/builder/src/components/userInterface/propertyCategories.js index 99cd42638b..0ee26d958e 100644 --- a/packages/builder/src/components/userInterface/propertyCategories.js +++ b/packages/builder/src/components/userInterface/propertyCategories.js @@ -1,6 +1,7 @@ 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 */ @@ -101,8 +102,7 @@ export const typography = [ { label: "Color", key: "color", - control: OptionSelect, - options: ["black", "red", "white", "blue", "green"], + control: Colorpicker, }, { label: "align", @@ -118,14 +118,7 @@ export const background = [ { label: "Background", key: "background", - control: OptionSelect, - options: [ - { label: "white" }, - { label: "red" }, - { label: "blue" }, - { label: "green" }, - { label: "black" }, - ], + control: Colorpicker, }, { label: "Image", key: "image", control: Input }, //custom ] @@ -133,7 +126,7 @@ export const background = [ export const border = [ { label: "Radius", key: "border-radius", control: Input }, { label: "Width", key: "border-width", control: Input }, //custom - { label: "Color", key: "border-color", control: Input }, + { label: "Color", key: "border-color", control: Colorpicker }, { label: "Style", key: "border-style", control: Input }, ] diff --git a/packages/builder/src/components/userInterface/temporaryPanelStructure.js b/packages/builder/src/components/userInterface/temporaryPanelStructure.js index 58a8a2c674..9beca685db 100644 --- a/packages/builder/src/components/userInterface/temporaryPanelStructure.js +++ b/packages/builder/src/components/userInterface/temporaryPanelStructure.js @@ -189,7 +189,7 @@ export default { { label: "Disabled", key: "disabled", - valueType: "checked", + valueKey: "checked", control: Checkbox, }, ] @@ -219,7 +219,7 @@ export default { { label: "Open New Tab", key: "openInNewTab", - valueType: "checked", + valueKey: "checked", control: Checkbox, }, ], diff --git a/packages/server/builder/nano.min.css b/packages/server/builder/nano.min.css deleted file mode 100644 index fb7e96080f..0000000000 --- a/packages/server/builder/nano.min.css +++ /dev/null @@ -1 +0,0 @@ -/*! Pickr 1.5.1 MIT | https://github.com/Simonwep/pickr */.pickr{position:relative;overflow:visible;transform:translateY(0)}.pickr *{box-sizing:border-box;outline:none;border:none;-webkit-appearance:none}.pickr .pcr-button{position:relative;height:2em;width:2em;padding:.5em;cursor:pointer;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;border-radius:.15em;background:url('data:image/svg+xml;utf8, ') no-repeat 50%;background-size:0;transition:all .3s}.pickr .pcr-button:before{background:url('data:image/svg+xml;utf8, ');background-size:.5em;z-index:-1;z-index:auto}.pickr .pcr-button:after,.pickr .pcr-button:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;border-radius:.15em}.pickr .pcr-button:after{transition:background .3s;background:currentColor}.pickr .pcr-button.clear{background-size:70%}.pickr .pcr-button.clear:before{opacity:0}.pickr .pcr-button.clear:focus{box-shadow:0 0 0 1px hsla(0,0%,100%,.85),0 0 0 3px currentColor}.pickr .pcr-button.disabled{cursor:not-allowed}.pcr-app *,.pickr *{box-sizing:border-box;outline:none;border:none;-webkit-appearance:none}.pcr-app button.pcr-active,.pcr-app button:focus,.pcr-app input.pcr-active,.pcr-app input:focus,.pickr button.pcr-active,.pickr button:focus,.pickr input.pcr-active,.pickr input:focus{box-shadow:0 0 0 1px hsla(0,0%,100%,.85),0 0 0 3px currentColor}.pcr-app .pcr-palette,.pcr-app .pcr-slider,.pickr .pcr-palette,.pickr .pcr-slider{transition:box-shadow .3s}.pcr-app .pcr-palette:focus,.pcr-app .pcr-slider:focus,.pickr .pcr-palette:focus,.pickr .pcr-slider:focus{box-shadow:0 0 0 1px hsla(0,0%,100%,.85),0 0 0 3px rgba(0,0,0,.25)}.pcr-app{position:fixed;display:flex;flex-direction:column;z-index:10000;border-radius:.1em;background:#fff;opacity:0;visibility:hidden;transition:opacity .3s,visibility 0s .3s;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;box-shadow:0 .15em 1.5em 0 rgba(0,0,0,.1),0 0 1em 0 rgba(0,0,0,.03);left:0;top:0}.pcr-app.visible{transition:opacity .3s;visibility:visible;opacity:1}.pcr-app .pcr-swatches{display:flex;flex-wrap:wrap;margin-top:.75em}.pcr-app .pcr-swatches.pcr-last{margin:0}@supports (display:grid){.pcr-app .pcr-swatches{display:grid;align-items:center;grid-template-columns:repeat(auto-fit,1.75em)}}.pcr-app .pcr-swatches>button{font-size:1em;position:relative;width:calc(1.75em - 5px);height:calc(1.75em - 5px);border-radius:.15em;cursor:pointer;margin:2.5px;flex-shrink:0;justify-self:center;transition:all .15s;overflow:hidden;background:transparent;z-index:1}.pcr-app .pcr-swatches>button:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, ');background-size:6px;border-radius:.15em;z-index:-1}.pcr-app .pcr-swatches>button:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:currentColor;border:1px solid rgba(0,0,0,.05);border-radius:.15em;box-sizing:border-box}.pcr-app .pcr-swatches>button:hover{-webkit-filter:brightness(1.05);filter:brightness(1.05)}.pcr-app .pcr-interaction{display:flex;flex-wrap:wrap;align-items:center;margin:0 -.2em}.pcr-app .pcr-interaction>*{margin:0 .2em}.pcr-app .pcr-interaction input{letter-spacing:.07em;font-size:.75em;text-align:center;cursor:pointer;color:#75797e;background:#f1f3f4;border-radius:.15em;transition:all .15s;padding:.45em .5em;margin-top:.75em}.pcr-app .pcr-interaction input:hover{-webkit-filter:brightness(.975);filter:brightness(.975)}.pcr-app .pcr-interaction input:focus{box-shadow:0 0 0 1px hsla(0,0%,100%,.85),0 0 0 3px rgba(66,133,244,.75)}.pcr-app .pcr-interaction .pcr-result{color:#75797e;text-align:left;flex:1 1 8em;min-width:8em;transition:all .2s;border-radius:.15em;background:#f1f3f4;cursor:text}.pcr-app .pcr-interaction .pcr-result::-moz-selection{background:#4285f4;color:#fff}.pcr-app .pcr-interaction .pcr-result::selection{background:#4285f4;color:#fff}.pcr-app .pcr-interaction .pcr-type.active{color:#fff;background:#4285f4}.pcr-app .pcr-interaction .pcr-cancel,.pcr-app .pcr-interaction .pcr-clear,.pcr-app .pcr-interaction .pcr-save{width:auto;color:#fff}.pcr-app .pcr-interaction .pcr-cancel:hover,.pcr-app .pcr-interaction .pcr-clear:hover,.pcr-app .pcr-interaction .pcr-save:hover{-webkit-filter:brightness(.925);filter:brightness(.925)}.pcr-app .pcr-interaction .pcr-save{background:#4285f4}.pcr-app .pcr-interaction .pcr-cancel,.pcr-app .pcr-interaction .pcr-clear{background:#f44250}.pcr-app .pcr-interaction .pcr-cancel:focus,.pcr-app .pcr-interaction .pcr-clear:focus{box-shadow:0 0 0 1px hsla(0,0%,100%,.85),0 0 0 3px rgba(244,66,80,.75)}.pcr-app .pcr-selection .pcr-picker{position:absolute;height:18px;width:18px;border:2px solid #fff;border-radius:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.pcr-app .pcr-selection .pcr-color-chooser,.pcr-app .pcr-selection .pcr-color-opacity,.pcr-app .pcr-selection .pcr-color-palette{position:relative;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;display:flex;flex-direction:column;cursor:grab;cursor:-webkit-grab}.pcr-app .pcr-selection .pcr-color-chooser:active,.pcr-app .pcr-selection .pcr-color-opacity:active,.pcr-app .pcr-selection .pcr-color-palette:active{cursor:grabbing;cursor:-webkit-grabbing}.pcr-app[data-theme=nano]{width:14.25em;max-width:95vw}.pcr-app[data-theme=nano] .pcr-swatches{margin-top:.6em;padding:0 .6em}.pcr-app[data-theme=nano] .pcr-interaction{padding:0 .6em .6em}.pcr-app[data-theme=nano] .pcr-selection{display:grid;grid-gap:.6em;grid-template-columns:1fr 4fr;grid-template-rows:5fr auto auto;align-items:center;height:10.5em;width:100%;align-self:flex-start}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview{grid-area:2/1/4/1;height:100%;width:100%;display:flex;flex-direction:row;justify-content:center;margin-left:.6em}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview .pcr-last-color{display:none}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview .pcr-current-color{position:relative;background:currentColor;width:2em;height:2em;border-radius:50em;overflow:hidden}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-preview .pcr-current-color:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, ');background-size:.5em;border-radius:.15em;z-index:-1}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-palette{grid-area:1/1/2/3;width:100%;height:100%;z-index:1}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-palette .pcr-palette{border-radius:.15em;width:100%;height:100%}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-palette .pcr-palette:before{position:absolute;content:"";top:0;left:0;width:100%;height:100%;background:url('data:image/svg+xml;utf8, ');background-size:.5em;border-radius:.15em;z-index:-1}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser{grid-area:2/2/2/2}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity{grid-area:3/2/3/2}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser,.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity{height:.5em;margin:0 .6em}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser .pcr-picker,.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity .pcr-picker{top:50%;transform:translateY(-50%)}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser .pcr-slider,.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity .pcr-slider{flex-grow:1;border-radius:50em}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-chooser .pcr-slider{background:linear-gradient(90deg,red,#ff0,#0f0,#0ff,#00f,#f0f,red)}.pcr-app[data-theme=nano] .pcr-selection .pcr-color-opacity .pcr-slider{background:linear-gradient(90deg,transparent,#000),url('data:image/svg+xml;utf8, ');background-size:100%,.25em} \ No newline at end of file diff --git a/packages/standard-components/src/Button.svelte b/packages/standard-components/src/Button.svelte index 159c6776b0..eac2150274 100644 --- a/packages/standard-components/src/Button.svelte +++ b/packages/standard-components/src/Button.svelte @@ -17,12 +17,10 @@ @@ -85,13 +85,14 @@ .top-nav { flex: 0 0 auto; - height: 48px; - background: #0d203b; + height: 60px; + background: #fff; padding: 0px 20px 0 20px; display: flex; box-sizing: border-box; justify-content: space-between; align-items: center; + border-bottom: 1px solid var(--grey); } .content > div { @@ -110,8 +111,8 @@ .topnavitem { cursor: pointer; - color: rgb(255, 255, 255, 0.6); - margin: 0px 10px; + color: var(--ink-lighter); + margin: 0px 00px 0px 20px; padding-top: 4px; font-weight: 500; font-size: 1rem; @@ -121,19 +122,19 @@ } .topnavitem:hover { - color: rgb(255, 255, 255, 0.8); + color: var(--ink-light); font-weight: 500; } .active { - color: white; - font-weight: 600; + color: var(--ink); + font-weight: 500; } .topnavitemright { cursor: pointer; - color: rgb(255, 255, 255, 0.6); - margin: 0px 5px; + color: var(--ink-light); + margin: 0px 20px 0px 0px; padding-top: 4px; font-weight: 500; font-size: 1rem; @@ -155,7 +156,8 @@ cursor: pointer; outline: none; height: 40px; - padding: 8px 10px 8px 0; + padding: 0px 10px 8px 0; + align-items: center; } .home-logo:hover { @@ -167,7 +169,7 @@ } .home-logo img { - height: 100%; + height: 40px; } span:first-letter { text-transform: capitalize; diff --git a/packages/server/builder/assets/bb-logo.svg b/packages/server/builder/assets/bb-logo.svg new file mode 100644 index 0000000000..7d115faefc --- /dev/null +++ b/packages/server/builder/assets/bb-logo.svg @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + From e20b65c13b3c9d108ecef5c36fada9bfe36e2859 Mon Sep 17 00:00:00 2001 From: Joe <49767913+joebudi@users.noreply.github.com> Date: Sat, 23 May 2020 13:00:38 +0100 Subject: [PATCH 15/23] Panel titles updated Panel titles updated to represent designs Further work is required to use global styles to control this --- .../src/components/nav/BackendNav.svelte | 8 +++---- .../nav/SchemaManagementDrawer.svelte | 8 +++---- .../ComponentsPaneSwitcher.svelte | 18 +++++--------- packages/builder/src/global.css | 2 +- .../[application]/backend/_layout.svelte | 9 +++++++ .../[application]/frontend/_layout.svelte | 24 +++++++------------ 6 files changed, 30 insertions(+), 39 deletions(-) diff --git a/packages/builder/src/components/nav/BackendNav.svelte b/packages/builder/src/components/nav/BackendNav.svelte index 64812353fd..8a7fd6bb90 100644 --- a/packages/builder/src/components/nav/BackendNav.svelte +++ b/packages/builder/src/components/nav/BackendNav.svelte @@ -81,12 +81,10 @@ .hierarchy-title { align-items: center; - text-transform: uppercase; - font-size: 13px; - font-weight: bold; - opacity: 0.6; - letter-spacing: 1px; + font-size: 18px; + font-weight: 700; text-rendering: optimizeLegibility; + color: var(--ink); } .hierarchy { diff --git a/packages/builder/src/components/nav/SchemaManagementDrawer.svelte b/packages/builder/src/components/nav/SchemaManagementDrawer.svelte index 7d678c9104..cc9e5d86a7 100644 --- a/packages/builder/src/components/nav/SchemaManagementDrawer.svelte +++ b/packages/builder/src/components/nav/SchemaManagementDrawer.svelte @@ -125,12 +125,10 @@ .hierarchy-title { align-items: center; - text-transform: uppercase; - font-size: 13px; - font-weight: bold; - opacity: 0.6; - letter-spacing: 1px; + font-size: 18px; + font-weight: 700; text-rendering: optimizeLegibility; + color: var(--ink); } .hierarchy { diff --git a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte index 9ca5b1e122..1c7e2e8693 100644 --- a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte +++ b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte @@ -24,7 +24,7 @@
+
- {#await promise} -
- -
- {:then result} - - {:catch err} -

{err}

- {/await} -
+ {#await promise} +
+ +
+ {:then result} + + {:catch err} +

{err}

+ {/await} +
diff --git a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte index f31a0b2d0d..48ea302c33 100644 --- a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte +++ b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte @@ -50,9 +50,6 @@
From 9dc65eef9882841f745dda28032ee3099dfdc529 Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Tue, 26 May 2020 14:27:33 +0100 Subject: [PATCH 21/23] New jest tests for generate-css --- .../builder/src/builderStore/generate_css.js | 20 +- packages/builder/tests/generate_css.spec.js | 331 ++---------------- 2 files changed, 49 insertions(+), 302 deletions(-) diff --git a/packages/builder/src/builderStore/generate_css.js b/packages/builder/src/builderStore/generate_css.js index 093b43337c..5826d4f824 100644 --- a/packages/builder/src/builderStore/generate_css.js +++ b/packages/builder/src/builderStore/generate_css.js @@ -23,16 +23,28 @@ export const generate_css = style => { return (str += `${key}: ${value};\n`) } } else if (Array.isArray(value)) { - return (str += `${key}: ${value - .map(v => (!/px$/.test(v) ? `${v}px` : v)) - .join(" ")};\n`) + if (value.length > 0 && !value.every(v => v === "")) { + return (str += `${key}: ${value + .map(generate_array_styles) + .join(" ")};\n`) + } } }, "") return (cssString || "").trim() } -const apply_class = (id, name = "element", styles, selector) => { +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 { 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 From 9f42b80977d0c1d39674d7820629b1a9ba733df8 Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Tue, 26 May 2020 15:08:59 +0100 Subject: [PATCH 22/23] Removing Svelte Color Picker --- packages/builder/package.json | 5 ++--- packages/builder/src/components/common/Colorpicker.svelte | 4 ++-- 2 files changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/builder/package.json b/packages/builder/package.json index 5d06fee71d..086d22382a 100644 --- a/packages/builder/package.json +++ b/packages/builder/package.json @@ -79,8 +79,7 @@ "rollup-plugin-svelte": "^5.0.3", "rollup-plugin-terser": "^4.0.4", "rollup-plugin-url": "^2.2.2", - "svelte": "^3.0.0", - "svelte-color-picker": "^1.0.7" + "svelte": "^3.0.0" }, "gitHead": "115189f72a850bfb52b65ec61d932531bf327072" -} \ No newline at end of file +} diff --git a/packages/builder/src/components/common/Colorpicker.svelte b/packages/builder/src/components/common/Colorpicker.svelte index 0b52cebe5f..8cff0e24bd 100644 --- a/packages/builder/src/components/common/Colorpicker.svelte +++ b/packages/builder/src/components/common/Colorpicker.svelte @@ -1,6 +1,6 @@ -
    +
    {#each categories as category}
  • onClick(category)} @@ -13,31 +13,23 @@
  • {/each} -
+
diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte index 507d04c356..3ab8c522f0 100644 --- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte +++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte @@ -117,7 +117,7 @@ } .component-props-container { - margin-top: 10px; + margin-top: 20px; flex: 1 1 auto; } diff --git a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte index c85e23403c..185b1d640d 100644 --- a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte +++ b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte @@ -54,13 +54,13 @@ height: 100%; display: flex; flex-direction: column; - padding: 20px 0; + padding: 20px 20px; border-left: solid 1px #e8e8ef; } .switcher { display: flex; - margin: 0px 20px 20px 20px; + margin: 0px 20px 20px 0px; } .switcher > button { diff --git a/packages/builder/src/components/userInterface/FlatButton.svelte b/packages/builder/src/components/userInterface/FlatButton.svelte index abc4a3dc28..9e11a546e3 100644 --- a/packages/builder/src/components/userInterface/FlatButton.svelte +++ b/packages/builder/src/components/userInterface/FlatButton.svelte @@ -19,16 +19,16 @@ diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte index cd1bad35f7..82acb8b3f9 100644 --- a/packages/builder/src/components/userInterface/PropertyControl.svelte +++ b/packages/builder/src/components/userInterface/PropertyControl.svelte @@ -43,21 +43,24 @@ diff --git a/packages/builder/src/components/userInterface/PropertyGroup.svelte b/packages/builder/src/components/userInterface/PropertyGroup.svelte index 240618a4c7..6d0cf63ab0 100644 --- a/packages/builder/src/components/userInterface/PropertyGroup.svelte +++ b/packages/builder/src/components/userInterface/PropertyGroup.svelte @@ -42,14 +42,15 @@ display: flex; flex-direction: column; height: auto; - background: #fbfbfb; - margin: 5px; - padding: 5px; + background: var(--grey-light); + margin: 0px 0px 4px 0px; + padding: 8px 12px; + justify-content: center; + border-radius: 4px; } .property-group-name { cursor: pointer; - flex: 0 0 20px; display: flex; flex-flow: row nowrap; } @@ -61,7 +62,7 @@ font-size: 14px; font-weight: 500; letter-spacing: 0.14px; - color: #393c44; + color: var(--ink); } .icon { diff --git a/packages/builder/src/pages/[application]/frontend/_layout.svelte b/packages/builder/src/pages/[application]/frontend/_layout.svelte index df9762fb07..c480a75bfa 100644 --- a/packages/builder/src/pages/[application]/frontend/_layout.svelte +++ b/packages/builder/src/pages/[application]/frontend/_layout.svelte @@ -127,7 +127,6 @@ .root { display: grid; grid-template-columns: 275px 1fr 275px; - height: 100%; width: 100%; background: var(--grey-light); } @@ -136,7 +135,6 @@ .root { display: grid; grid-template-columns: 300px 1fr 300px; - height: 100%; width: 100%; background: var(--grey-light); } @@ -162,8 +160,6 @@ .components-pane { grid-column: 3; background-color: var(--white); - min-height: 0px; - overflow-y: scroll; } .components-nav-page {