MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add new style definitions for containers

This commit is contained in:
Andrew Kingston 2021-06-23 07:55:33 +01:00
parent 2367a97f39
commit dd4c7a186e
11 changed files with 495 additions and 1892 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
packages/bbui/src/DetailSummary/DetailSummary.svelte
View File

@ -4,9 +4,13 @@
export let name export let name
export let show = false export let show = false
export let collapsible = true
const dispatch = createEventDispatcher() const dispatch = createEventDispatcher()
const onHeaderClick = () => { const onHeaderClick = () => {
if (!collapsible) {
return
}
show = !show show = !show
if (show) { if (show) {
dispatch("open") dispatch("open")
@ -17,9 +21,11 @@
<div class="property-group-container"> <div class="property-group-container">
<div class="property-group-name" on:click={onHeaderClick}> <div class="property-group-name" on:click={onHeaderClick}>
<div class="name">{name}</div> <div class="name">{name}</div>
{#if collapsible}
<Icon size="S" name={show ? "Remove" : "Add"} /> <Icon size="S" name={show ? "Remove" : "Add"} />
{/if}
</div> </div>
<div class="property-panel" class:show> <div class="property-panel" class:show={show || !collapsible}>
<slot /> <slot />
</div> </div>
</div> </div>

12
packages/builder/src/components/design/PropertiesPanel/ActionsSection.svelte
View File

@ -1,11 +1,10 @@
<script> <script>
import { DetailSummary, ActionButton } from "@budibase/bbui" import { ActionButton } from "@budibase/bbui"
import { currentAsset, store } from "builderStore" import { currentAsset, store } from "builderStore"
import { findClosestMatchingComponent } from "builderStore/storeUtils" import { findClosestMatchingComponent } from "builderStore/storeUtils"
import { makeDatasourceFormComponents } from "builderStore/store/screenTemplates/utils/commonComponents" import { makeDatasourceFormComponents } from "builderStore/store/screenTemplates/utils/commonComponents"
import ConfirmDialog from "components/common/ConfirmDialog.svelte" import ConfirmDialog from "components/common/ConfirmDialog.svelte"
export let openSection
export let componentDefinition export let componentDefinition
export let componentInstance export let componentInstance
@ -26,11 +25,7 @@
} }
</script> </script>
<DetailSummary name="Actions" on:open show={openSection === "actions"}> {#if componentDefinition?.component?.endsWith("/fieldgroup")}
<ActionButton secondary wide on:click={store.actions.components.resetStyles}>
Reset styles
</ActionButton>
{#if componentDefinition?.component?.endsWith("/fieldgroup")}
<ActionButton <ActionButton
secondary secondary
wide wide
@ -38,8 +33,7 @@
> >
Update form fields Update form fields
</ActionButton> </ActionButton>
{/if} {/if}
</DetailSummary>
<ConfirmDialog <ConfirmDialog
bind:this={confirmResetFieldsDialog} bind:this={confirmResetFieldsDialog}

6
packages/builder/src/components/design/PropertiesPanel/ComponentSettingsSection.svelte
View File

@ -1,7 +1,7 @@
<script> <script>
import { isEmpty } from "lodash/fp" import { isEmpty } from "lodash/fp"
import { Checkbox, Input, Select, DetailSummary } from "@budibase/bbui" import { Checkbox, Input, Select, DetailSummary } from "@budibase/bbui"
import { selectedComponent, store } from "builderStore" import { store } from "builderStore"
import PropertyControl from "./PropertyControls/PropertyControl.svelte" import PropertyControl from "./PropertyControls/PropertyControl.svelte"
import LayoutSelect from "./PropertyControls/LayoutSelect.svelte" import LayoutSelect from "./PropertyControls/LayoutSelect.svelte"
import RoleSelect from "./PropertyControls/RoleSelect.svelte" import RoleSelect from "./PropertyControls/RoleSelect.svelte"
@ -25,12 +25,10 @@
import DateTimeFieldSelect from "./PropertyControls/DateTimeFieldSelect.svelte" import DateTimeFieldSelect from "./PropertyControls/DateTimeFieldSelect.svelte"
import AttachmentFieldSelect from "./PropertyControls/AttachmentFieldSelect.svelte" import AttachmentFieldSelect from "./PropertyControls/AttachmentFieldSelect.svelte"
import RelationshipFieldSelect from "./PropertyControls/RelationshipFieldSelect.svelte" import RelationshipFieldSelect from "./PropertyControls/RelationshipFieldSelect.svelte"
import { FrontendTypes } from "constants"
export let componentDefinition export let componentDefinition
export let componentInstance export let componentInstance
export let assetInstance export let assetInstance
export let openSection
const layoutDefinition = [] const layoutDefinition = []
const screenDefinition = [ const screenDefinition = [
@ -88,7 +86,7 @@
} }
</script> </script>
<DetailSummary name="Component" on:open show={openSection === "settings"}> <DetailSummary name="General" collapsible={false}>
<PropertyControl <PropertyControl
bindable={false} bindable={false}
control={Input} control={Input}

59
packages/builder/src/components/design/PropertiesPanel/CustomStylesSection.svelte
View File

@ -1,33 +1,60 @@
<script> <script>
import { TextArea, DetailSummary } from "@budibase/bbui" import {
TextArea,
DetailSummary,
ActionButton,
Drawer,
DrawerContent,
Layout,
Body,
Button,
} from "@budibase/bbui"
import { store } from "builderStore" import { store } from "builderStore"
export let componentInstance export let componentInstance
export let openSection
function onChange(css) { let tempValue
store.actions.components.updateCustomStyle(css) let drawer
const openDrawer = () => {
tempValue = componentInstance?._styles?.custom
drawer.show()
}
const save = () => {
store.actions.components.updateCustomStyle(tempValue)
drawer.hide()
} }
</script> </script>
<DetailSummary <DetailSummary
name={`Custom Styles${componentInstance?._styles?.custom ? " *" : ""}`} name={`Custom CSS${componentInstance?._styles?.custom ? " *" : ""}`}
on:open collapsible={false}
show={openSection === "custom"}
> >
<div class="custom-styles"> <div>
<TextArea <ActionButton on:click={openDrawer}>Edit custom CSS</ActionButton>
value={componentInstance?._styles?.custom}
on:change={event => onChange(event.detail)}
placeholder="Enter some CSS..."
/>
</div> </div>
</DetailSummary> </DetailSummary>
<Drawer bind:this={drawer} title="Custom CSS">
<Button cta slot="buttons" on:click={save}>Save</Button>
<DrawerContent slot="body">
<div class="content">
<Layout gap="S">
<Body size="S">Custom CSS overrides all other component styles.</Body>
<TextArea bind:value={tempValue} placeholder="Enter some CSS..." />
</Layout>
</div>
</DrawerContent>
</Drawer>
<style> <style>
.custom-styles :global(textarea) { .content {
max-width: 800px;
margin: 0 auto;
}
.content :global(textarea) {
font-family: monospace; font-family: monospace;
min-height: 120px; min-height: 240px !important;
font-size: var(--font-size-xs); font-size: var(--font-size-s);
} }
</style> </style>

50
packages/builder/src/components/design/PropertiesPanel/DesignSection.svelte
View File

@ -1,42 +1,34 @@
<script> <script>
import { DetailSummary } from "@budibase/bbui"
import PropertyGroup from "./PropertyControls/PropertyGroup.svelte" import PropertyGroup from "./PropertyControls/PropertyGroup.svelte"
import { allStyles } from "./componentStyles" import * as ComponentStyles from "./componentStyles"
import { store } from "builderStore"
export let componentDefinition export let componentDefinition
export let componentInstance export let componentInstance
export let openSection
let selectedCategory = "normal" const getStyles = def => {
let currentGroup if (!def?.styles?.length) {
return [...ComponentStyles.all]
}
let styles = [...ComponentStyles.all]
def.styles.forEach(style => {
if (ComponentStyles[style]) {
styles.push(ComponentStyles[style])
}
})
return styles
}
$: groups = componentDefinition?.styleable ? Object.keys(allStyles) : [] $: styles = getStyles(componentDefinition)
</script> </script>
<DetailSummary name="Design" show={openSection === "design"} on:open> {#if styles?.length > 0}
{#if groups.length > 0} {#each styles as style}
{#each groups as groupName}
<PropertyGroup <PropertyGroup
name={groupName} {style}
properties={allStyles[groupName]} name={style.label}
styleCategory={selectedCategory} inline={style.inline}
onStyleChanged={store.actions.components.updateStyle} properties={style.settings}
{componentInstance} {componentInstance}
open={currentGroup === groupName}
on:open={() => (currentGroup = groupName)}
/> />
{/each} {/each}
{:else} {/if}
<div class="no-design">
This component doesn't have any design properties.
</div>
{/if}
</DetailSummary>
<style>
.no-design {
font-size: var(--spectrum-global-dimension-font-size-75);
color: var(--grey-6);
}
</style>

48
packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
View File

@ -7,8 +7,6 @@
import CustomStylesSection from "./CustomStylesSection.svelte" import CustomStylesSection from "./CustomStylesSection.svelte"
import ActionsSection from "./ActionsSection.svelte" import ActionsSection from "./ActionsSection.svelte"
let openSection = "settings"
$: componentInstance = $selectedComponent $: componentInstance = $selectedComponent
$: componentDefinition = store.actions.components.getDefinition( $: componentDefinition = store.actions.components.getDefinition(
$selectedComponent?._component $selectedComponent?._component
@ -17,35 +15,21 @@
<Tabs selected="Settings" noPadding> <Tabs selected="Settings" noPadding>
<Tab title="Settings"> <Tab title="Settings">
<ScreenSettingsSection <div class="container">
{componentInstance} <ScreenSettingsSection {componentInstance} {componentDefinition} />
{componentDefinition} <ComponentSettingsSection {componentInstance} {componentDefinition} />
{openSection} <DesignSection {componentInstance} {componentDefinition} />
on:open={() => (openSection = "settings")} <CustomStylesSection {componentInstance} {componentDefinition} />
/> <ActionsSection {componentInstance} {componentDefinition} />
<ComponentSettingsSection </div>
{componentInstance}
{componentDefinition}
{openSection}
on:open={() => (openSection = "settings")}
/>
<DesignSection
{componentInstance}
{componentDefinition}
{openSection}
on:open={() => (openSection = "design")}
/>
<CustomStylesSection
{componentInstance}
{componentDefinition}
{openSection}
on:open={() => (openSection = "custom")}
/>
<ActionsSection
{componentInstance}
{componentDefinition}
{openSection}
on:open={() => (openSection = "actions")}
/>
</Tab> </Tab>
</Tabs> </Tabs>
<style>
.container {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
}
</style>

31
packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyGroup.svelte
View File

@ -1,16 +1,15 @@
<script> <script>
import PropertyControl from "./PropertyControl.svelte" import PropertyControl from "./PropertyControl.svelte"
import { DetailSummary } from "@budibase/bbui" import { DetailSummary } from "@budibase/bbui"
import { store } from "builderStore"
export let name = "" export let name
export let styleCategory = "normal" export let inline = false
export let properties = [] export let properties
export let componentInstance = {} export let componentInstance
export let onStyleChanged = () => {}
export let open = false
$: style = componentInstance["_styles"][styleCategory] || {} $: style = componentInstance._styles.normal || {}
$: changed = properties.some(prop => hasPropChanged(style, prop)) $: changed = properties?.some(prop => hasPropChanged(style, prop)) ?? false
const hasPropChanged = (style, prop) => { const hasPropChanged = (style, prop) => {
return style[prop.key] != null && style[prop.key] !== "" return style[prop.key] != null && style[prop.key] !== ""
@ -25,9 +24,8 @@
} }
</script> </script>
<DetailSummary name={`${name}${changed ? " *" : ""}`} on:open show={open} thin> <DetailSummary collapsible={false} name={`${name}${changed ? " *" : ""}`}>
{#if open} <div class="group-content" class:inline>
<div>
{#each properties as prop (`${componentInstance._id}-${prop.key}-${prop.label}`)} {#each properties as prop (`${componentInstance._id}-${prop.key}-${prop.label}`)}
<PropertyControl <PropertyControl
bindable={false} bindable={false}
@ -35,20 +33,23 @@
control={prop.control} control={prop.control}
key={prop.key} key={prop.key}
value={style[prop.key]} value={style[prop.key]}
onChange={value => onStyleChanged(styleCategory, prop.key, value)} onChange={val => store.actions.components.updateStyle(prop.key, val)}
props={getControlProps(prop)} props={getControlProps(prop)}
/> />
{/each} {/each}
</div> </div>
{/if}
</DetailSummary> </DetailSummary>
<style> <style>
div { .group-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
align-items: stretch; align-items: stretch;
gap: var(--spacing-s); gap: var(--spacing-l);
}
.inline {
display: grid;
grid-template-columns: 1fr 1fr;
} }
</style> </style>

7
packages/builder/src/components/design/PropertiesPanel/ScreenSettingsSection.svelte
View File

@ -9,7 +9,6 @@
import { FrontendTypes } from "constants" import { FrontendTypes } from "constants"
export let componentInstance export let componentInstance
export let openSection
function setAssetProps(name, value) { function setAssetProps(name, value) {
const selectedAsset = get(currentAsset) const selectedAsset = get(currentAsset)
@ -28,15 +27,15 @@
} }
const screenSettings = [ const screenSettings = [
{ key: "description", label: "Description", control: Input }, // { key: "description", label: "Description", control: Input },
{ key: "routing.route", label: "Route", control: Input }, { key: "routing.route", label: "Route", control: Input },
{ key: "routing.roleId", label: "Access", control: RoleSelect }, { key: "routing.roleId", label: "Access", control: RoleSelect },
{ key: "layoutId", label: "Layout", control: LayoutSelect }, { key: "layoutId", label: "Layout", control: LayoutSelect },
] ]
</script> </script>
{#if $currentAsset && $store.currentFrontEndType === FrontendTypes.SCREEN} {#if $store.currentView !== "component" && $currentAsset && $store.currentFrontEndType === FrontendTypes.SCREEN}
<DetailSummary name="Screen" on:open show={openSection === "screen"}> <DetailSummary name="Screen" collapsible={false}>
{#each screenSettings as def (`${componentInstance._id}-${def.key}`)} {#each screenSettings as def (`${componentInstance._id}-${def.key}`)}
<PropertyControl <PropertyControl
bindable={false} bindable={false}

220
packages/builder/src/components/design/PropertiesPanel/componentStyles.js
View File

@ -81,32 +81,17 @@ export const layout = [
}, },
] ]
export const margin = [ export const margin = {
{ label: "Margin",
label: "All sides", inline: true,
key: "margin", settings: [
control: Select,
options: [
{ label: "None", value: "0px" },
{ label: "4px", value: "4px" },
{ label: "8px", value: "8px" },
{ label: "16px", value: "16px" },
{ label: "20px", value: "20px" },
{ label: "32px", value: "32px" },
{ label: "48px", value: "48px" },
{ label: "64px", value: "64px" },
{ label: "128px", value: "128px" },
{ label: "256px", value: "256px" },
{ label: "Auto", value: "auto" },
{ label: "100%", value: "100%" },
],
},
{ {
label: "Top", label: "Top",
key: "margin-top", key: "margin-top",
control: Select, control: Select,
bindable: false,
placeholder: "None",
options: [ options: [
{ label: "None", value: "0px" },
{ label: "4px", value: "4px" }, { label: "4px", value: "4px" },
{ label: "8px", value: "8px" }, { label: "8px", value: "8px" },
{ label: "16px", value: "16px" }, { label: "16px", value: "16px" },
@ -124,8 +109,9 @@ export const margin = [
label: "Right", label: "Right",
key: "margin-right", key: "margin-right",
control: Select, control: Select,
bindable: false,
placeholder: "None",
options: [ options: [
{ label: "None", value: "0px" },
{ label: "4px", value: "4px" }, { label: "4px", value: "4px" },
{ label: "8px", value: "8px" }, { label: "8px", value: "8px" },
{ label: "16px", value: "16px" }, { label: "16px", value: "16px" },
@ -143,8 +129,9 @@ export const margin = [
label: "Bottom", label: "Bottom",
key: "margin-bottom", key: "margin-bottom",
control: Select, control: Select,
bindable: false,
placeholder: "None",
options: [ options: [
{ label: "None", value: "0px" },
{ label: "4px", value: "4px" }, { label: "4px", value: "4px" },
{ label: "8px", value: "8px" }, { label: "8px", value: "8px" },
{ label: "16px", value: "16px" }, { label: "16px", value: "16px" },
@ -162,8 +149,9 @@ export const margin = [
label: "Left", label: "Left",
key: "margin-left", key: "margin-left",
control: Select, control: Select,
bindable: false,
placeholder: "None",
options: [ options: [
{ label: "None", value: "0px" },
{ label: "4px", value: "4px" }, { label: "4px", value: "4px" },
{ label: "8px", value: "8px" }, { label: "8px", value: "8px" },
{ label: "16px", value: "16px" }, { label: "16px", value: "16px" },
@ -177,32 +165,20 @@ export const margin = [
{ label: "100%", value: "100%" }, { label: "100%", value: "100%" },
], ],
}, },
]
export const padding = [
{
label: "All sides",
key: "padding",
control: Select,
options: [
{ label: "None", value: "0px" },
{ label: "4px", value: "4px" },
{ label: "8px", value: "8px" },
{ label: "16px", value: "16px" },
{ label: "20px", value: "20px" },
{ label: "32px", value: "32px" },
{ label: "48px", value: "48px" },
{ label: "64px", value: "64px" },
{ label: "Auto", value: "auto" },
{ label: "100%", value: "100%" },
], ],
}, }
export const padding = {
label: "Padding",
inline: true,
settings: [
{ {
label: "Top", label: "Top",
key: "padding-top", key: "padding-top",
control: Select, control: Select,
bindable: false,
placeholder: "None",
options: [ options: [
{ label: "None", value: "0px" },
{ label: "4px", value: "4px" }, { label: "4px", value: "4px" },
{ label: "8px", value: "8px" }, { label: "8px", value: "8px" },
{ label: "16px", value: "16px" }, { label: "16px", value: "16px" },
@ -210,6 +186,8 @@ export const padding = [
{ label: "32px", value: "32px" }, { label: "32px", value: "32px" },
{ label: "48px", value: "48px" }, { label: "48px", value: "48px" },
{ label: "64px", value: "64px" }, { label: "64px", value: "64px" },
{ label: "128px", value: "128px" },
{ label: "256px", value: "256px" },
{ label: "Auto", value: "auto" }, { label: "Auto", value: "auto" },
{ label: "100%", value: "100%" }, { label: "100%", value: "100%" },
], ],
@ -218,8 +196,9 @@ export const padding = [
label: "Right", label: "Right",
key: "padding-right", key: "padding-right",
control: Select, control: Select,
bindable: false,
placeholder: "None",
options: [ options: [
{ label: "None", value: "0px" },
{ label: "4px", value: "4px" }, { label: "4px", value: "4px" },
{ label: "8px", value: "8px" }, { label: "8px", value: "8px" },
{ label: "16px", value: "16px" }, { label: "16px", value: "16px" },
@ -227,6 +206,8 @@ export const padding = [
{ label: "32px", value: "32px" }, { label: "32px", value: "32px" },
{ label: "48px", value: "48px" }, { label: "48px", value: "48px" },
{ label: "64px", value: "64px" }, { label: "64px", value: "64px" },
{ label: "128px", value: "128px" },
{ label: "256px", value: "256px" },
{ label: "Auto", value: "auto" }, { label: "Auto", value: "auto" },
{ label: "100%", value: "100%" }, { label: "100%", value: "100%" },
], ],
@ -235,8 +216,9 @@ export const padding = [
label: "Bottom", label: "Bottom",
key: "padding-bottom", key: "padding-bottom",
control: Select, control: Select,
bindable: false,
placeholder: "None",
options: [ options: [
{ label: "None", value: "0px" },
{ label: "4px", value: "4px" }, { label: "4px", value: "4px" },
{ label: "8px", value: "8px" }, { label: "8px", value: "8px" },
{ label: "16px", value: "16px" }, { label: "16px", value: "16px" },
@ -244,6 +226,8 @@ export const padding = [
{ label: "32px", value: "32px" }, { label: "32px", value: "32px" },
{ label: "48px", value: "48px" }, { label: "48px", value: "48px" },
{ label: "64px", value: "64px" }, { label: "64px", value: "64px" },
{ label: "128px", value: "128px" },
{ label: "256px", value: "256px" },
{ label: "Auto", value: "auto" }, { label: "Auto", value: "auto" },
{ label: "100%", value: "100%" }, { label: "100%", value: "100%" },
], ],
@ -252,8 +236,9 @@ export const padding = [
label: "Left", label: "Left",
key: "padding-left", key: "padding-left",
control: Select, control: Select,
bindable: false,
placeholder: "None",
options: [ options: [
{ label: "None", value: "0px" },
{ label: "4px", value: "4px" }, { label: "4px", value: "4px" },
{ label: "8px", value: "8px" }, { label: "8px", value: "8px" },
{ label: "16px", value: "16px" }, { label: "16px", value: "16px" },
@ -261,22 +246,19 @@ export const padding = [
{ label: "32px", value: "32px" }, { label: "32px", value: "32px" },
{ label: "48px", value: "48px" }, { label: "48px", value: "48px" },
{ label: "64px", value: "64px" }, { label: "64px", value: "64px" },
{ label: "128px", value: "128px" },
{ label: "256px", value: "256px" },
{ label: "Auto", value: "auto" }, { label: "Auto", value: "auto" },
{ label: "100%", value: "100%" }, { label: "100%", value: "100%" },
], ],
}, },
]
export const size = [
{
label: "Flex",
key: "flex",
control: Select,
options: [
{ label: "Shrink", value: "0 1 auto" },
{ label: "Grow", value: "1 1 auto" },
], ],
}, }
export const size = {
label: "Size",
inline: true,
settings: [
{ {
label: "Width", label: "Width",
key: "width", key: "width",
@ -289,31 +271,8 @@ export const size = [
control: Input, control: Input,
placeholder: "px", placeholder: "px",
}, },
{ ],
label: "Min Width", }
key: "min-width",
control: Input,
placeholder: "px",
},
{
label: "Max Width",
key: "max-width",
control: Input,
placeholder: "px",
},
{
label: "Min Height",
key: "min-height",
control: Input,
placeholder: "px",
},
{
label: "Max Height",
key: "max-height",
control: Input,
placeholder: "px",
},
]
export const position = [ export const position = [
{ {
@ -480,7 +439,9 @@ export const typography = [
}, },
] ]
export const background = [ export const background = {
label: "Background",
settings: [
{ {
label: "Color", label: "Color",
key: "background", key: "background",
@ -494,7 +455,8 @@ export const background = [
{ label: "None", value: "none" }, { label: "None", value: "none" },
{ {
label: "Warm Flame", label: "Warm Flame",
value: "linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);", value:
"linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);",
}, },
{ {
label: "Night Fade", label: "Night Fade",
@ -563,15 +525,17 @@ export const background = [
}, },
], ],
}, },
{ ],
label: "Image", }
key: "background",
control: Input,
placeholder: "URL",
},
]
export const border = [ export const border = {
label: "Border",
settings: [
{
label: "Color",
key: "border-color",
control: Colorpicker,
},
{ {
label: "Radius", label: "Radius",
key: "border-radius", key: "border-radius",
@ -600,60 +564,6 @@ export const border = [
{ label: "X large", value: "8px" }, { label: "X large", value: "8px" },
], ],
}, },
{
label: "Color",
key: "border-color",
control: Colorpicker,
},
{
label: "Style",
key: "border-style",
control: Select,
options: [
{ label: "None", value: "none" },
{ label: "Hidden", value: "hidden" },
{ label: "Dotted", value: "dotted" },
{ label: "Dashed", value: "dashed" },
{ label: "Solid", value: "solid" },
{ label: "Double", value: "double" },
{ label: "Groove", value: "groove" },
{ label: "Ridge", value: "ridge" },
{ label: "Inset", value: "inset" },
{ label: "Outset", value: "outset" },
],
},
]
export const effects = [
{
label: "Opacity",
key: "opacity",
control: Select,
options: [
{ label: "0", value: "0" },
{ label: "0.2", value: "0.2" },
{ label: "0.4", value: "0.4" },
{ label: "0.6", value: "0.6" },
{ label: "0.8", value: "0.8" },
{ label: "1", value: "1" },
],
},
{
label: "Rotate",
key: "transform",
control: Select,
options: [
{ label: "None", value: "0" },
{ label: "45 deg", value: "rotate(45deg)" },
{ label: "90 deg", value: "rotate(90deg)" },
{ label: "135 deg", value: "rotate(135deg)" },
{ label: "180 deg", value: "rotate(180deg)" },
{ label: "225 deg", value: "rotate(225deg)" },
{ label: "270 deg", value: "rotate(270deg)" },
{ label: "315 deg", value: "rotate(315deg)" },
{ label: "360 deg", value: "rotate(360deg)" },
],
},
{ {
label: "Shadow", label: "Shadow",
key: "box-shadow", key: "box-shadow",
@ -683,7 +593,8 @@ export const effects = [
}, },
], ],
}, },
] ],
}
export const transitions = [ export const transitions = [
{ {
@ -734,15 +645,4 @@ export const transitions = [
}, },
] ]
export const allStyles = { export const all = [margin]
layout,
margin,
padding,
size,
position,
typography,
background,
border,
effects,
transitions,
}

1326
packages/server/yarn.lock
View File

File diff suppressed because it is too large Load Diff

4
packages/standard-components/manifest.json
View File

@ -61,7 +61,6 @@
"description": "This component contains things within itself", "description": "This component contains things within itself",
"icon": "Sandbox", "icon": "Sandbox",
"hasChildren": true, "hasChildren": true,
"styleable": true,
"showSettingsBar": true, "showSettingsBar": true,
"settings": [ "settings": [
{ {
@ -172,7 +171,8 @@
], ],
"defaultValue": "shrink" "defaultValue": "shrink"
} }
] ],
"styles": ["padding", "size", "background", "border", "shadow"]
}, },
"section": { "section": {
"name": "Section", "name": "Section",