Change of structure for _styles
This commit is contained in:
parent
54e7dba667
commit
0a745edfe4
|
@ -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)
|
||||||
|
|
|
@ -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",
|
||||||
|
|
|
@ -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} />
|
||||||
|
|
|
@ -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 = () => {}
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -9,8 +9,10 @@
|
||||||
"_id": 0,
|
"_id": 0,
|
||||||
"type": "div",
|
"type": "div",
|
||||||
"_styles": {
|
"_styles": {
|
||||||
"layout": {},
|
"normal": {},
|
||||||
"position": {}
|
"hover": {},
|
||||||
|
"active": {},
|
||||||
|
"selected": {}
|
||||||
},
|
},
|
||||||
"_code": ""
|
"_code": ""
|
||||||
},
|
},
|
||||||
|
|
|
@ -9,8 +9,10 @@
|
||||||
"_id": 1,
|
"_id": 1,
|
||||||
"type": "div",
|
"type": "div",
|
||||||
"_styles": {
|
"_styles": {
|
||||||
"layout": {},
|
"normal": {},
|
||||||
"position": {}
|
"hover": {},
|
||||||
|
"active": {},
|
||||||
|
"selected": {}
|
||||||
},
|
},
|
||||||
"_code": ""
|
"_code": ""
|
||||||
},
|
},
|
||||||
|
|
|
@ -9,8 +9,10 @@
|
||||||
"_id": 0,
|
"_id": 0,
|
||||||
"type": "div",
|
"type": "div",
|
||||||
"_styles": {
|
"_styles": {
|
||||||
"layout": {},
|
"normal": {},
|
||||||
"position": {}
|
"hover": {},
|
||||||
|
"active": {},
|
||||||
|
"selected": {}
|
||||||
},
|
},
|
||||||
"_code": ""
|
"_code": ""
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue