diff --git a/packages/builder/src/builderStore/generate_css.js b/packages/builder/src/builderStore/generate_css.js
index eb37cc07be..abe6517a73 100644
--- a/packages/builder/src/builderStore/generate_css.js
+++ b/packages/builder/src/builderStore/generate_css.js
@@ -1,119 +1,21 @@
-import { pipe } from "components/common/core"
-import { filter, map, reduce, toPairs } from "lodash/fp"
-
-const self = n => n
-const join_with = delimiter => a => a.join(delimiter)
-const empty_string_to_unset = s => (s.length ? s : "0")
-const add_suffix_if_number = suffix => s => {
- try {
- if (isNaN(s) || isNaN(parseFloat(s))) return s
- } catch (_) {
- return s
+export const generate_screen_css = component_arr => {
+ let styles = ""
+ for (const { _styles, _id, _children, _component } of component_arr) {
+ let [componentName] = _component.match(/[a-z]*$/)
+ Object.keys(_styles).forEach(selector => {
+ const cssString = generate_css(_styles[selector])
+ if (cssString) {
+ styles += apply_class(_id, componentName, cssString, selector)
+ }
+ })
+ if (_children && _children.length) {
+ styles += generate_screen_css(_children) + "\n"
+ }
}
- return s + suffix
+ return styles.trim()
}
-export const make_margin = values =>
- pipe(values, [
- map(empty_string_to_unset),
- map(add_suffix_if_number("px")),
- join_with(" "),
- ])
-
-const css_map = {
- templaterows: {
- name: "grid-template-rows",
- generate: self,
- },
- templatecolumns: {
- name: "grid-template-columns",
- generate: self,
- },
- align: {
- name: "align-items",
- generate: self,
- },
- justify: {
- name: "justify-content",
- generate: self,
- },
- direction: {
- name: "flex-direction",
- generate: self,
- },
- gridarea: {
- name: "grid-area",
- generate: make_margin,
- },
- gap: {
- name: "grid-gap",
- generate: n => `${n}px`,
- },
- columnstart: {
- name: "grid-column-start",
- generate: self,
- },
- columnend: {
- name: "grid-column-end",
- generate: self,
- },
- rowstart: {
- name: "grid-row-start",
- generate: self,
- },
- rowend: {
- name: "grid-row-end",
- generate: self,
- },
- padding: {
- name: "padding",
- generate: make_margin,
- },
- margin: {
- name: "margin",
- generate: make_margin,
- },
- zindex: {
- name: "z-index",
- generate: self,
- },
- height: {
- name: "height",
- generate: self,
- },
- width: {
- name: "width",
- generate: self,
- },
-}
-
-//Only used here
-export const generate_rule = ([name, values]) =>
- `${css_map[name].name}: ${css_map[name].generate(values)};`
-
-const handle_grid = (acc, [name, value]) => {
- let tmp = []
-
- if (name === "row" || name === "column") {
- if (value[0]) tmp.push([`${name}start`, value[0]])
- if (value[1]) tmp.push([`${name}end`, value[1]])
- return acc.concat(tmp)
- }
-
- return acc.concat([[name, value]])
-}
-
-const object_to_css_string = [
- toPairs,
- reduce(handle_grid, []),
- filter(v => (Array.isArray(v[1]) ? v[1].some(s => s.length) : v[1].length)),
- map(generate_rule),
- join_with("\n"),
-]
-
-//USED BY generate_screen_css
export const generate_css = style => {
- // let cssString = pipe(style, object_to_css_string)
let cssString = Object.entries(style).reduce((str, [key, value]) => {
//TODO Handle arrays and objects here also
if (typeof value === "string") {
@@ -130,23 +32,12 @@ export const generate_css = style => {
return (cssString || "").trim()
}
-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 = { normal: {}, hover: {}, active: {}, selected: {} }
- for (let i = 0; i < component_array.length; i += 1) {
- 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)
- }
- if (_children && _children.length) {
- styles += generate_screen_css(_children) + "\n"
- }
+const apply_class = (id, name = "element", styles, selector) => {
+ if (selector === "normal") {
+ return `.${name}-${id} {\n${styles}\n}`
+ } else {
+ let sel = selector === "selected" ? "::selection" : `:${selector}`
+ return `.${name}-${id}${sel} {\n${styles}\n}`
}
- return styles.trim()
-}
\ No newline at end of file
+}
+
diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js
index 7e108bbe09..f4d47064be 100644
--- a/packages/builder/src/builderStore/store/index.js
+++ b/packages/builder/src/builderStore/store/index.js
@@ -141,7 +141,6 @@ const _saveScreen = async (store, s, screen) => {
}
const _saveScreenApi = (screen, s) => {
-
api
.post(`/_builder/api/${s.appId}/pages/${s.currentPageName}/screen`, screen)
.then(() => _savePage(s))
@@ -427,8 +426,7 @@ const setComponentStyle = store => (type, name, value) => {
if (!state.currentComponentInfo._styles) {
state.currentComponentInfo._styles = {}
}
- // state.currentComponentInfo._styles[type][name] = value
- state.currentComponentInfo._styles[name] = value
+ state.currentComponentInfo._styles[type][name] = value
state.currentPreviewItem._css = generate_screen_css([
state.currentPreviewItem.props,
diff --git a/packages/builder/src/components/common/Inputs/InputGroup.svelte b/packages/builder/src/components/common/Inputs/InputGroup.svelte
index 7f6d20337b..c4118aa289 100644
--- a/packages/builder/src/components/common/Inputs/InputGroup.svelte
+++ b/packages/builder/src/components/common/Inputs/InputGroup.svelte
@@ -21,7 +21,7 @@
handleChange(e.target.value || 0, i)} />
{/each}
diff --git a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
index 7303c3b20b..b2ca1936d2 100644
--- a/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
@@ -16,6 +16,11 @@
return props
}
+ const getComponentTypeName = component => {
+ let [componentName] = component._component.match(/[a-z]*$/)
+ return componentName || "element"
+ }
+
$: iframe &&
console.log(
iframe.contentDocument.head.insertAdjacentHTML(
@@ -93,6 +98,8 @@
appRootPath: "",
}
+ $: selectedComponentType = getComponentTypeName($store.currentComponentInfo)
+
$: selectedComponentId = $store.currentComponentInfo
? $store.currentComponentInfo._id
: ""
@@ -107,6 +114,7 @@
srcdoc={iframeTemplate({
styles,
stylesheetLinks,
+ selectedComponentType,
selectedComponentId,
frontendDefinition: JSON.stringify(frontendDefinition),
currentPageFunctions: $store.currentPageFunctions,
diff --git a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
index c1cf4aab1f..dd2ca69dbb 100644
--- a/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
+++ b/packages/builder/src/components/userInterface/AppPreview/iframeTemplate.js
@@ -1,6 +1,7 @@
export default ({
styles,
stylesheetLinks,
+ selectedComponentType,
selectedComponentId,
frontendDefinition,
currentPageFunctions,
@@ -11,7 +12,7 @@ export default ({