From dd14dd6de256c08298a98db25d753321788b2593 Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Fri, 22 May 2020 15:30:29 +0100 Subject: [PATCH] Change of structure for _styles --- packages/builder/src/builderStore/generate_css.js | 6 ++++-- .../userInterface/AppPreview/CurrentItemPreview.svelte | 9 +++++++-- .../src/components/userInterface/DesignView.svelte | 6 +++--- .../src/components/userInterface/PropertyGroup.svelte | 1 + .../components/userInterface/pagesParsing/createProps.js | 4 ++-- .../new/appDirectoryTemplate/pages/main/page.json | 6 ++++-- .../appDirectoryTemplate/pages/unauthenticated/page.json | 6 ++++-- packages/cli/src/commands/new/page.template.json | 6 ++++-- 8 files changed, 29 insertions(+), 15 deletions(-) diff --git a/packages/builder/src/builderStore/generate_css.js b/packages/builder/src/builderStore/generate_css.js index f592e250bd..eb37cc07be 100644 --- a/packages/builder/src/builderStore/generate_css.js +++ b/packages/builder/src/builderStore/generate_css.js @@ -135,9 +135,11 @@ const apply_class = (id, name, styles) => `.${name}-${id} {\n${styles}\n}` //USED IN MULTIPLE PLACES IN THE BUILDER STORE export const generate_screen_css = component_array => { let styles = "" - let emptyStyles = {} + let emptyStyles = { normal: {}, hover: {}, active: {}, selected: {} } for (let i = 0; i < component_array.length; i += 1) { - const { _styles, _id, _children } = component_array[i] + const { _styles, _id, _children, _component } = component_array[i] + // let [componentName] = _component.match(/[a-z]*$/) + debugger const cssString = generate_css(_styles || emptyStyles) || "" if (cssString) { styles += apply_class(_id, "element", cssString) diff --git a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte index 18afb123ef..7303c3b20b 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: {}, + _styles: { normal: {}, hover: {}, active: {}, selected: {} }, _id: "__screenslot__text", _code: "", className: "", @@ -69,7 +69,12 @@ _children: [ { _component: "@budibase/standard-components/text", - _styles: {}, + _styles: { + normal: {}, + hover: {}, + active: {}, + selected: {}, + }, _id: "__screenslot__text_2", _code: "", text: "content", diff --git a/packages/builder/src/components/userInterface/DesignView.svelte b/packages/builder/src/components/userInterface/DesignView.svelte index 4b505420c6..40aac9027a 100644 --- a/packages/builder/src/components/userInterface/DesignView.svelte +++ b/packages/builder/src/components/userInterface/DesignView.svelte @@ -7,7 +7,7 @@ export let componentDefinition = {} export let onStyleChanged = () => {} - let selectedCategory = "desktop" + let selectedCategory = "normal" const getProperties = name => panelDefinition[name] @@ -16,8 +16,7 @@ } const buttonProps = [ - { value: "desktop", text: "Desktop" }, - { value: "mobile", text: "Mobile" }, + { value: "normal", text: "Normal" }, { value: "hover", text: "Hover" }, { value: "active", text: "Active" }, { value: "selected", text: "Selected" }, @@ -38,6 +37,7 @@ diff --git a/packages/builder/src/components/userInterface/PropertyGroup.svelte b/packages/builder/src/components/userInterface/PropertyGroup.svelte index d15df62545..2d4ab6f29c 100644 --- a/packages/builder/src/components/userInterface/PropertyGroup.svelte +++ b/packages/builder/src/components/userInterface/PropertyGroup.svelte @@ -3,6 +3,7 @@ import PropertyControl from "./PropertyControl.svelte" export let name = "" + export let styleCategory = "normal" export let properties = [] export let componentInstance = {} export let onStyleChanged = () => {} diff --git a/packages/builder/src/components/userInterface/pagesParsing/createProps.js b/packages/builder/src/components/userInterface/pagesParsing/createProps.js index 99f67ccc80..de4de1c2a6 100644 --- a/packages/builder/src/components/userInterface/pagesParsing/createProps.js +++ b/packages/builder/src/components/userInterface/pagesParsing/createProps.js @@ -24,7 +24,7 @@ export const createProps = (componentDefinition, derivedFromProps) => { const props = { _id: uuid(), _component: componentDefinition._component, - _styles: {}, + _styles: { normal: {}, hover: {}, active: {}, selected: {} }, _code: "", } @@ -71,7 +71,7 @@ export const makePropsSafe = (componentDefinition, props) => { } if (!props._styles) { - props._styles = {} + props._styles = { normal: {}, hover: {}, active: {}, selected: {} } } return props diff --git a/packages/cli/src/commands/new/appDirectoryTemplate/pages/main/page.json b/packages/cli/src/commands/new/appDirectoryTemplate/pages/main/page.json index 4f25934bba..af75ddec68 100644 --- a/packages/cli/src/commands/new/appDirectoryTemplate/pages/main/page.json +++ b/packages/cli/src/commands/new/appDirectoryTemplate/pages/main/page.json @@ -9,8 +9,10 @@ "_id": 0, "type": "div", "_styles": { - "layout": {}, - "position": {} + "normal": {}, + "hover": {}, + "active": {}, + "selected": {} }, "_code": "" }, diff --git a/packages/cli/src/commands/new/appDirectoryTemplate/pages/unauthenticated/page.json b/packages/cli/src/commands/new/appDirectoryTemplate/pages/unauthenticated/page.json index 298d73e8b6..3452a6df55 100644 --- a/packages/cli/src/commands/new/appDirectoryTemplate/pages/unauthenticated/page.json +++ b/packages/cli/src/commands/new/appDirectoryTemplate/pages/unauthenticated/page.json @@ -9,8 +9,10 @@ "_id": 1, "type": "div", "_styles": { - "layout": {}, - "position": {} + "normal": {}, + "hover": {}, + "active": {}, + "selected": {} }, "_code": "" }, diff --git a/packages/cli/src/commands/new/page.template.json b/packages/cli/src/commands/new/page.template.json index 89a23a78e5..6f02b78c62 100644 --- a/packages/cli/src/commands/new/page.template.json +++ b/packages/cli/src/commands/new/page.template.json @@ -9,8 +9,10 @@ "_id": 0, "type": "div", "_styles": { - "layout": {}, - "position": {} + "normal": {}, + "hover": {}, + "active": {}, + "selected": {} }, "_code": "" },