Change of structure for _styles

This commit is contained in:
Conor_Mack 2020-05-22 15:30:29 +01:00
parent 54e7dba667
commit 0a745edfe4
8 changed files with 29 additions and 15 deletions

View File

@ -135,9 +135,11 @@ const apply_class = (id, name, styles) => `.${name}-${id} {\n${styles}\n}`
//USED IN MULTIPLE PLACES IN THE BUILDER STORE //USED IN MULTIPLE PLACES IN THE BUILDER STORE
export const generate_screen_css = component_array => { export const generate_screen_css = component_array => {
let styles = "" let styles = ""
let emptyStyles = {} let emptyStyles = { normal: {}, hover: {}, active: {}, selected: {} }
for (let i = 0; i < component_array.length; i += 1) { 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) || "" const cssString = generate_css(_styles || emptyStyles) || ""
if (cssString) { if (cssString) {
styles += apply_class(_id, "element", cssString) styles += apply_class(_id, "element", cssString)

View File

@ -60,7 +60,7 @@
_children: [ _children: [
{ {
_component: "@budibase/standard-components/container", _component: "@budibase/standard-components/container",
_styles: {}, _styles: { normal: {}, hover: {}, active: {}, selected: {} },
_id: "__screenslot__text", _id: "__screenslot__text",
_code: "", _code: "",
className: "", className: "",
@ -69,7 +69,12 @@
_children: [ _children: [
{ {
_component: "@budibase/standard-components/text", _component: "@budibase/standard-components/text",
_styles: {}, _styles: {
normal: {},
hover: {},
active: {},
selected: {},
},
_id: "__screenslot__text_2", _id: "__screenslot__text_2",
_code: "", _code: "",
text: "content", text: "content",

View File

@ -7,7 +7,7 @@
export let componentDefinition = {} export let componentDefinition = {}
export let onStyleChanged = () => {} export let onStyleChanged = () => {}
let selectedCategory = "desktop" let selectedCategory = "normal"
const getProperties = name => panelDefinition[name] const getProperties = name => panelDefinition[name]
@ -16,8 +16,7 @@
} }
const buttonProps = [ const buttonProps = [
{ value: "desktop", text: "Desktop" }, { value: "normal", text: "Normal" },
{ value: "mobile", text: "Mobile" },
{ value: "hover", text: "Hover" }, { value: "hover", text: "Hover" },
{ value: "active", text: "Active" }, { value: "active", text: "Active" },
{ value: "selected", text: "Selected" }, { value: "selected", text: "Selected" },
@ -38,6 +37,7 @@
<PropertyGroup <PropertyGroup
name={groupName} name={groupName}
properties={getProperties(groupName)} properties={getProperties(groupName)}
styleCategory={selectedCategory}
{onStyleChanged} {onStyleChanged}
{componentDefinition} {componentDefinition}
{componentInstance} /> {componentInstance} />

View File

@ -3,6 +3,7 @@
import PropertyControl from "./PropertyControl.svelte" import PropertyControl from "./PropertyControl.svelte"
export let name = "" export let name = ""
export let styleCategory = "normal"
export let properties = [] export let properties = []
export let componentInstance = {} export let componentInstance = {}
export let onStyleChanged = () => {} export let onStyleChanged = () => {}

View File

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

View File

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

View File

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

View File

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