CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-10-03 10:36:59 +13:00
Code Issues Projects Releases Wiki Activity

Merge pull request #354 from Budibase/Props-update-Shadow-fix,-rotate-improved,-border-updated

Browse source 
Props update, including flex, border, shadow, rotate
This commit is contained in:
Joe 2020-06-11 13:26:41 +01:00 committed by GitHub
commit dd206338c2
4 changed files with 104 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
packages/builder/src/components/common/Inputs/InputGroup.svelte
View file

@ -19,9 +19,10 @@
onChange(_value)
}
$: displayValues = value && suffix
? value.map(v => v.replace(new RegExp(`${suffix}$`), ""))
: value || []
$: displayValues =
value && suffix
? value.map(v => v.replace(new RegExp(`${suffix}$`), ""))
: value || []
</script>
<div class="input-container">

38
packages/builder/src/components/userInterface/AppPreview/CurrentItemPreview.svelte
View file

@ -21,7 +21,7 @@
return componentName || "element"
}
const screenPlaceholder = {
const screenPlaceholder = {
name: "Screen Placeholder",
route: "*",
props: {
@ -60,9 +60,8 @@
},
}
$: hasComponent = !!$store.currentPreviewItem
$: {
styles = ""
// Apply the CSS from the currently selected page and its screens
@ -88,9 +87,9 @@
libraries: $store.libraries,
page: $store.pages[$store.currentPageName],
screens: [
$store.currentFrontEndType === "page"
? screenPlaceholder
: $store.currentPreviewItem,
$store.currentFrontEndType === "page"
? screenPlaceholder
: $store.currentPreviewItem,
],
appRootPath: "",
}
@ -102,20 +101,25 @@
: ""
const refreshContent = () => {
iframe.contentWindow.postMessage(JSON.stringify({
styles,
stylesheetLinks,
selectedComponentType,
selectedComponentId,
frontendDefinition,
}))
iframe.contentWindow.postMessage(
JSON.stringify({
styles,
stylesheetLinks,
selectedComponentType,
selectedComponentId,
frontendDefinition,
})
)
}
$: if(iframe) iframe.contentWindow.addEventListener("bb-ready", refreshContent, { once: true })
$: if (iframe)
iframe.contentWindow.addEventListener("bb-ready", refreshContent, {
once: true,
})
$: if(iframe && frontendDefinition) {
refreshContent()
}
$: if (iframe && frontendDefinition) {
refreshContent()
}
</script>
<div class="component-container">

23
packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte
View file

@ -37,27 +37,32 @@
//use for getting controls for each component property
c => c._component === componentInstance._component
) || {}
let panelDefinition = {}
$: {
if(componentPropDefinition.properties) {
if(selectedCategory.value === "design") {
if (componentPropDefinition.properties) {
if (selectedCategory.value === "design") {
panelDefinition = componentPropDefinition.properties["design"]
}else{
} else {
let panelDef = componentPropDefinition.properties["settings"]
if($store.currentFrontEndType === "page" && $store.currentView !== "component") {
panelDefinition = [...page,...panelDef]
}else if($store.currentFrontEndType === "screen" && $store.currentView !== "component") {
if (
$store.currentFrontEndType === "page" &&
$store.currentView !== "component"
) {
panelDefinition = [...page, ...panelDef]
} else if (
$store.currentFrontEndType === "screen" &&
$store.currentView !== "component"
) {
panelDefinition = [...screen, ...panelDef]
}else {
} else {
panelDefinition = panelDef
}
}
}
}
const onStyleChanged = store.setComponentStyle
const onPropChanged = store.setComponentProp

82
packages/builder/src/components/userInterface/propertyCategories.js
View file

@ -12,8 +12,9 @@ export const layout = [
label: "Display",
key: "display",
control: OptionSelect,
initialValue: "Flex",
initialValue: "",
options: [
{ label: "", value: "" },
{ label: "Flex", value: "flex" },
{ label: "Inline Flex", value: "inline-flex" },
],
@ -39,6 +40,7 @@ export const layout = [
control: OptionSelect,
initialValue: "Flex Start",
options: [
{ label: "", value: "" },
{ label: "Flex Start", value: "flex-start" },
{ label: "Flex End", value: "flex-end" },
{ label: "Center", value: "center" },
@ -317,19 +319,31 @@ export const border = [
{
label: "Radius",
key: "border-radius",
control: Input,
width: "48px",
placeholder: "px",
textAlign: "center",
control: OptionSelect,
defaultValue: "None",
options: [
{ label: "None", value: "0" },
{ label: "small", value: "0.125rem" },
{ label: "Medium", value: "0.25rem;" },
{ label: "Large", value: "0.375rem" },
{ label: "Extra large", value: "0.5rem" },
{ label: "Full", value: "5678px" },
],
},
{
label: "Width",
key: "border-width",
control: Input,
width: "48px",
placeholder: "px",
textAlign: "center",
}, //custom
control: OptionSelect,
defaultValue: "None",
options: [
{ label: "None", value: "0" },
{ label: "Extra small", value: "0.5px" },
{ label: "Small", value: "1px" },
{ label: "Medium", value: "2px" },
{ label: "Large", value: "4px" },
{ label: "Extra large", value: "8px" },
],
},
{
label: "Color",
key: "border-color",
@ -339,6 +353,7 @@ export const border = [
label: "Style",
key: "border-style",
control: OptionSelect,
defaultValue: "None",
options: [
"none",
"hidden",
@ -365,17 +380,50 @@ export const effects = [
},
{
label: "Rotate",
key: "transform",
control: Input,
width: "48px",
textAlign: "center",
placeholder: "deg",
key: "transform-rotate",
control: OptionSelect,
defaultValue: "0",
options: [
"0",
"45deg",
"90deg",
"90deg",
"135deg",
"180deg",
"225deg",
"270deg",
"315dev",
],
}, //needs special control
{
label: "Shadow",
key: "box-shadow",
control: InputGroup,
meta: [{ placeholder: "X" }, { placeholder: "Y" }, { placeholder: "B" }],
control: OptionSelect,
defaultValue: "None",
options: [
{ label: "None", value: "none" },
{ label: "Extra small", value: "0 1px 2px 0 rgba(0, 0, 0, 0.05)" },
{
label: "Small",
value:
"0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
},
{
label: "Medium",
value:
"0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
},
{
label: "Large",
value:
"0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
},
{
label: "Extra large",
value:
"0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
},
],
},
]