Change of structure for _styles

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)

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",

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: "normal", text: "Normal" },
-    { value: "mobile", text: "Mobile" },
     { value: "hover", text: "Hover" },
     { value: "active", text: "Active" },
     { value: "selected", text: "Selected" },
@@ -38,6 +37,7 @@
         <PropertyGroup
           name={groupName}
           properties={getProperties(groupName)}
+          styleCategory={selectedCategory}
           {onStyleChanged}
           {componentDefinition}
           {componentInstance} />

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 = () => {}

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

packages/cli/src/commands/new/appDirectoryTemplate/pages/main/page.json

@@ -9,8 +9,10 @@
 		"_id": 0,
 		"type": "div",
 		"_styles": {
-			"layout": {},
+			"normal": {},
-			"position": {}
+			"hover": {},
+			"active": {},
+			"selected": {}
 		},
 		"_code": ""
 	},

packages/cli/src/commands/new/appDirectoryTemplate/pages/unauthenticated/page.json

@@ -9,8 +9,10 @@
 		"_id": 1,
 		"type": "div",
 		"_styles": {
-			"layout": {},
+			"normal": {},
-			"position": {}
+			"hover": {},
+			"active": {},
+			"selected": {}
 		},
 		"_code": ""
 	},

packages/cli/src/commands/new/page.template.json

@@ -9,8 +9,10 @@
 		"_id": 0,
 		"type": "div",
 		"_styles": {
-			"layout": {},
+			"normal": {},
-			"position": {}
+			"hover": {},
+			"active": {},
+			"selected": {}
 		},
 		"_code": ""
 	},