From deab1adc3183dea9757f3888f4e9ad3c71147670 Mon Sep 17 00:00:00 2001 From: Conor_Mack Date: Mon, 25 May 2020 15:23:56 +0100 Subject: [PATCH] Completed CSS Selector Styling --- .../builder/src/builderStore/generate_css.js | 153 +++--------------- .../builder/src/builderStore/store/index.js | 4 +- .../common/Inputs/InputGroup.svelte | 2 +- .../AppPreview/CurrentItemPreview.svelte | 8 + .../AppPreview/iframeTemplate.js | 3 +- .../userInterface/PropertyControl.svelte | 8 +- .../userInterface/PropertyGroup.svelte | 5 +- .../userInterface/propertyCategories.js | 32 ++-- packages/builder/src/index.html | 1 - .../src/render/prepareRenderComponent.js | 3 +- 10 files changed, 65 insertions(+), 154 deletions(-) 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 ({