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

10
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>
<Icon size="S" name={show ? "Remove" : "Add"} /> {#if collapsible}
<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>

24
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,20 +25,15 @@
} }
</script> </script>
<DetailSummary name="Actions" on:open show={openSection === "actions"}> {#if componentDefinition?.component?.endsWith("/fieldgroup")}
<ActionButton secondary wide on:click={store.actions.components.resetStyles}> <ActionButton
Reset styles secondary
wide
on:click={() => confirmResetFieldsDialog?.show()}
>
Update form fields
</ActionButton> </ActionButton>
{#if componentDefinition?.component?.endsWith("/fieldgroup")} {/if}
<ActionButton
secondary
wide
on:click={() => confirmResetFieldsDialog?.show()}
>
Update form fields
</ActionButton>
{/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>

58
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 {style}
name={groupName} name={style.label}
properties={allStyles[groupName]} inline={style.inline}
styleCategory={selectedCategory} properties={style.settings}
onStyleChanged={store.actions.components.updateStyle} {componentInstance}
{componentInstance} />
open={currentGroup === groupName} {/each}
on:open={() => (currentGroup = groupName)} {/if}
/>
{/each}
{:else}
<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>

53
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,30 +24,32 @@
} }
</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} label={`${prop.label}${hasPropChanged(style, prop) ? " *" : ""}`}
label={`${prop.label}${hasPropChanged(style, prop) ? " *" : ""}`} control={prop.control}
control={prop.control} key={prop.key}
key={prop.key} value={style[prop.key]}
value={style[prop.key]} onChange={val => store.actions.components.updateStyle(prop.key, val)}
onChange={value => onStyleChanged(styleCategory, prop.key, value)} 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}

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

@ -81,239 +81,198 @@ export const layout = [
}, },
] ]
export const margin = [ export const margin = {
{ label: "Margin",
label: "All sides", inline: true,
key: "margin", settings: [
control: Select, {
options: [ label: "Top",
{ label: "None", value: "0px" }, key: "margin-top",
{ label: "4px", value: "4px" }, control: Select,
{ label: "8px", value: "8px" }, bindable: false,
{ label: "16px", value: "16px" }, placeholder: "None",
{ label: "20px", value: "20px" }, options: [
{ label: "32px", value: "32px" }, { label: "4px", value: "4px" },
{ label: "48px", value: "48px" }, { label: "8px", value: "8px" },
{ label: "64px", value: "64px" }, { label: "16px", value: "16px" },
{ label: "128px", value: "128px" }, { label: "20px", value: "20px" },
{ label: "256px", value: "256px" }, { label: "32px", value: "32px" },
{ label: "Auto", value: "auto" }, { label: "48px", value: "48px" },
{ label: "100%", value: "100%" }, { label: "64px", value: "64px" },
], { label: "128px", value: "128px" },
}, { label: "256px", value: "256px" },
{ { label: "Auto", value: "auto" },
label: "Top", { label: "100%", value: "100%" },
key: "margin-top", ],
control: Select, },
options: [ {
{ label: "None", value: "0px" }, label: "Right",
{ label: "4px", value: "4px" }, key: "margin-right",
{ label: "8px", value: "8px" }, control: Select,
{ label: "16px", value: "16px" }, bindable: false,
{ label: "20px", value: "20px" }, placeholder: "None",
{ label: "32px", value: "32px" }, options: [
{ label: "48px", value: "48px" }, { label: "4px", value: "4px" },
{ label: "64px", value: "64px" }, { label: "8px", value: "8px" },
{ label: "128px", value: "128px" }, { label: "16px", value: "16px" },
{ label: "256px", value: "256px" }, { label: "20px", value: "20px" },
{ label: "Auto", value: "auto" }, { label: "32px", value: "32px" },
{ label: "100%", value: "100%" }, { label: "48px", value: "48px" },
], { label: "64px", value: "64px" },
}, { label: "128px", value: "128px" },
{ { label: "256px", value: "256px" },
label: "Right", { label: "Auto", value: "auto" },
key: "margin-right", { label: "100%", value: "100%" },
control: Select, ],
options: [ },
{ label: "None", value: "0px" }, {
{ label: "4px", value: "4px" }, label: "Bottom",
{ label: "8px", value: "8px" }, key: "margin-bottom",
{ label: "16px", value: "16px" }, control: Select,
{ label: "20px", value: "20px" }, bindable: false,
{ label: "32px", value: "32px" }, placeholder: "None",
{ label: "48px", value: "48px" }, options: [
{ label: "64px", value: "64px" }, { label: "4px", value: "4px" },
{ label: "128px", value: "128px" }, { label: "8px", value: "8px" },
{ label: "256px", value: "256px" }, { label: "16px", value: "16px" },
{ label: "Auto", value: "auto" }, { label: "20px", value: "20px" },
{ label: "100%", value: "100%" }, { label: "32px", value: "32px" },
], { label: "48px", value: "48px" },
}, { label: "64px", value: "64px" },
{ { label: "128px", value: "128px" },
label: "Bottom", { label: "256px", value: "256px" },
key: "margin-bottom", { label: "Auto", value: "auto" },
control: Select, { label: "100%", value: "100%" },
options: [ ],
{ label: "None", value: "0px" }, },
{ label: "4px", value: "4px" }, {
{ label: "8px", value: "8px" }, label: "Left",
{ label: "16px", value: "16px" }, key: "margin-left",
{ label: "20px", value: "20px" }, control: Select,
{ label: "32px", value: "32px" }, bindable: false,
{ label: "48px", value: "48px" }, placeholder: "None",
{ label: "64px", value: "64px" }, options: [
{ label: "128px", value: "128px" }, { label: "4px", value: "4px" },
{ label: "256px", value: "256px" }, { label: "8px", value: "8px" },
{ label: "Auto", value: "auto" }, { label: "16px", value: "16px" },
{ label: "100%", value: "100%" }, { label: "20px", value: "20px" },
], { label: "32px", value: "32px" },
}, { label: "48px", value: "48px" },
{ { label: "64px", value: "64px" },
label: "Left", { label: "128px", value: "128px" },
key: "margin-left", { label: "256px", value: "256px" },
control: Select, { label: "Auto", value: "auto" },
options: [ { label: "100%", value: "100%" },
{ 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%" },
],
},
]
export const padding = [ export const padding = {
{ label: "Padding",
label: "All sides", inline: true,
key: "padding", settings: [
control: Select, {
options: [ label: "Top",
{ label: "None", value: "0px" }, key: "padding-top",
{ label: "4px", value: "4px" }, control: Select,
{ label: "8px", value: "8px" }, bindable: false,
{ label: "16px", value: "16px" }, placeholder: "None",
{ label: "20px", value: "20px" }, options: [
{ label: "32px", value: "32px" }, { label: "4px", value: "4px" },
{ label: "48px", value: "48px" }, { label: "8px", value: "8px" },
{ label: "64px", value: "64px" }, { label: "16px", value: "16px" },
{ label: "Auto", value: "auto" }, { label: "20px", value: "20px" },
{ label: "100%", value: "100%" }, { label: "32px", value: "32px" },
], { label: "48px", value: "48px" },
}, { label: "64px", value: "64px" },
{ { label: "128px", value: "128px" },
label: "Top", { label: "256px", value: "256px" },
key: "padding-top", { label: "Auto", value: "auto" },
control: Select, { label: "100%", value: "100%" },
options: [ ],
{ label: "None", value: "0px" }, },
{ label: "4px", value: "4px" }, {
{ label: "8px", value: "8px" }, label: "Right",
{ label: "16px", value: "16px" }, key: "padding-right",
{ label: "20px", value: "20px" }, control: Select,
{ label: "32px", value: "32px" }, bindable: false,
{ label: "48px", value: "48px" }, placeholder: "None",
{ label: "64px", value: "64px" }, options: [
{ label: "Auto", value: "auto" }, { label: "4px", value: "4px" },
{ label: "100%", value: "100%" }, { label: "8px", value: "8px" },
], { label: "16px", value: "16px" },
}, { label: "20px", value: "20px" },
{ { label: "32px", value: "32px" },
label: "Right", { label: "48px", value: "48px" },
key: "padding-right", { label: "64px", value: "64px" },
control: Select, { label: "128px", value: "128px" },
options: [ { label: "256px", value: "256px" },
{ label: "None", value: "0px" }, { label: "Auto", value: "auto" },
{ label: "4px", value: "4px" }, { label: "100%", value: "100%" },
{ label: "8px", value: "8px" }, ],
{ label: "16px", value: "16px" }, },
{ label: "20px", value: "20px" }, {
{ label: "32px", value: "32px" }, label: "Bottom",
{ label: "48px", value: "48px" }, key: "padding-bottom",
{ label: "64px", value: "64px" }, control: Select,
{ label: "Auto", value: "auto" }, bindable: false,
{ label: "100%", value: "100%" }, placeholder: "None",
], options: [
}, { label: "4px", value: "4px" },
{ { label: "8px", value: "8px" },
label: "Bottom", { label: "16px", value: "16px" },
key: "padding-bottom", { label: "20px", value: "20px" },
control: Select, { label: "32px", value: "32px" },
options: [ { label: "48px", value: "48px" },
{ label: "None", value: "0px" }, { label: "64px", value: "64px" },
{ label: "4px", value: "4px" }, { label: "128px", value: "128px" },
{ label: "8px", value: "8px" }, { label: "256px", value: "256px" },
{ label: "16px", value: "16px" }, { label: "Auto", value: "auto" },
{ label: "20px", value: "20px" }, { label: "100%", value: "100%" },
{ label: "32px", value: "32px" }, ],
{ label: "48px", value: "48px" }, },
{ label: "64px", value: "64px" }, {
{ label: "Auto", value: "auto" }, label: "Left",
{ label: "100%", value: "100%" }, key: "padding-left",
], control: Select,
}, bindable: false,
{ placeholder: "None",
label: "Left", options: [
key: "padding-left", { label: "4px", value: "4px" },
control: Select, { label: "8px", value: "8px" },
options: [ { label: "16px", value: "16px" },
{ label: "None", value: "0px" }, { label: "20px", value: "20px" },
{ label: "4px", value: "4px" }, { label: "32px", value: "32px" },
{ label: "8px", value: "8px" }, { label: "48px", value: "48px" },
{ label: "16px", value: "16px" }, { label: "64px", value: "64px" },
{ label: "20px", value: "20px" }, { label: "128px", value: "128px" },
{ label: "32px", value: "32px" }, { label: "256px", value: "256px" },
{ label: "48px", value: "48px" }, { label: "Auto", value: "auto" },
{ label: "64px", value: "64px" }, { label: "100%", value: "100%" },
{ label: "Auto", value: "auto" }, ],
{ label: "100%", value: "100%" }, },
], ],
}, }
]
export const size = [ export const size = {
{ label: "Size",
label: "Flex", inline: true,
key: "flex", settings: [
control: Select, {
options: [ label: "Width",
{ label: "Shrink", value: "0 1 auto" }, key: "width",
{ label: "Grow", value: "1 1 auto" }, control: Input,
], placeholder: "px",
}, },
{ {
label: "Width", label: "Height",
key: "width", key: "height",
control: Input, control: Input,
placeholder: "px", placeholder: "px",
}, },
{ ],
label: "Height", }
key: "height",
control: Input,
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,210 +439,162 @@ export const typography = [
}, },
] ]
export const background = [ export const background = {
{ label: "Background",
label: "Color", settings: [
key: "background", {
control: Colorpicker, label: "Color",
}, key: "background",
{ control: Colorpicker,
label: "Gradient", },
key: "background-image", {
control: Select, label: "Gradient",
options: [ key: "background-image",
{ label: "None", value: "none" }, control: Select,
{ options: [
label: "Warm Flame", { label: "None", value: "none" },
value: "linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);", {
}, label: "Warm Flame",
{ value:
label: "Night Fade", "linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);",
value: "linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);", },
}, {
{ label: "Night Fade",
label: "Spring Warmth", value: "linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);",
value: "linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%);", },
}, {
{ label: "Spring Warmth",
label: "Sunny Morning", value: "linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%);",
value: "linear-gradient(120deg, #f6d365 0%, #fda085 100%);", },
}, {
{ label: "Sunny Morning",
label: "Winter Neva", value: "linear-gradient(120deg, #f6d365 0%, #fda085 100%);",
value: "linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);", },
}, {
{ label: "Winter Neva",
label: "Tempting Azure", value: "linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);",
value: "linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);", },
}, {
{ label: "Tempting Azure",
label: "Heavy Rain", value: "linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);",
value: "linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);", },
}, {
{ label: "Heavy Rain",
label: "Deep Blue", value: "linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);",
value: "linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);", },
}, {
{ label: "Deep Blue",
label: "Near Moon", value: "linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);",
value: "linear-gradient(to top, #5ee7df 0%, #b490ca 100%);", },
}, {
{ label: "Near Moon",
label: "Wild Apple", value: "linear-gradient(to top, #5ee7df 0%, #b490ca 100%);",
value: "linear-gradient(to top, #d299c2 0%, #fef9d7 100%);", },
}, {
{ label: "Wild Apple",
label: "Plum Plate", value: "linear-gradient(to top, #d299c2 0%, #fef9d7 100%);",
value: "linear-gradient(135deg, #667eea 0%, #764ba2 100%);", },
}, {
{ label: "Plum Plate",
label: "Peach Kiss", value: "linear-gradient(135deg, #667eea 0%, #764ba2 100%);",
value: },
"radial-gradient(circle farthest-corner at 50% 100%,rgba(255,173,138,.50), rgba(255,248,247,1) 100%);", {
}, label: "Peach Kiss",
{ value:
label: "Flamingo Sunrise", "radial-gradient(circle farthest-corner at 50% 100%,rgba(255,173,138,.50), rgba(255,248,247,1) 100%);",
value: },
"-webkit-radial-gradient(center top, rgb(255, 250, 245), rgb(255, 242, 242))", {
}, label: "Flamingo Sunrise",
{ value:
label: "Budi Mist", "-webkit-radial-gradient(center top, rgb(255, 250, 245), rgb(255, 242, 242))",
value: },
"radial-gradient(circle, rgba(252,215,212,1) 0%, rgba(255,227,214,1) 50%, rgba(207,218,255,1) 100%);", {
}, label: "Budi Mist",
{ value:
label: "Ballet Slipper", "radial-gradient(circle, rgba(252,215,212,1) 0%, rgba(255,227,214,1) 50%, rgba(207,218,255,1) 100%);",
value: },
"linear-gradient(135deg, rgba(252,215,212,1) 20%, rgba(207,218,255,1) 100%);", {
}, label: "Ballet Slipper",
{ value:
label: "Black Noir", "linear-gradient(135deg, rgba(252,215,212,1) 20%, rgba(207,218,255,1) 100%);",
value: },
"linear-gradient(312deg, rgba(60,60,60,1) 0%, rgba(42,42,42,1) 100%);", {
}, label: "Black Noir",
], value:
}, "linear-gradient(312deg, rgba(60,60,60,1) 0%, rgba(42,42,42,1) 100%);",
{ },
label: "Image", ],
key: "background", },
control: Input, ],
placeholder: "URL", }
},
]
export const border = [ export const border = {
{ label: "Border",
label: "Radius", settings: [
key: "border-radius", {
control: Select, label: "Color",
options: [ key: "border-color",
{ label: "None", value: "0" }, control: Colorpicker,
{ label: "X Small", value: "0.125rem" }, },
{ label: "Small", value: "0.25rem" }, {
{ label: "Medium", value: "0.5rem" }, label: "Radius",
{ label: "Large", value: "1rem" }, key: "border-radius",
{ label: "X Large", value: "2rem" }, control: Select,
{ label: "XX Large", value: "4rem" }, options: [
{ label: "Round", value: "5678px" }, { label: "None", value: "0" },
], { label: "X Small", value: "0.125rem" },
}, { label: "Small", value: "0.25rem" },
{ { label: "Medium", value: "0.5rem" },
label: "Width", { label: "Large", value: "1rem" },
key: "border-width", { label: "X Large", value: "2rem" },
control: Select, { label: "XX Large", value: "4rem" },
options: [ { label: "Round", value: "5678px" },
{ label: "None", value: "0" }, ],
{ label: "X Small", value: "0.5px" }, },
{ label: "Small", value: "1px" }, {
{ label: "Medium", value: "2px" }, label: "Width",
{ label: "Large", value: "4px" }, key: "border-width",
{ label: "X large", value: "8px" }, control: Select,
], options: [
}, { label: "None", value: "0" },
{ { label: "X Small", value: "0.5px" },
label: "Color", { label: "Small", value: "1px" },
key: "border-color", { label: "Medium", value: "2px" },
control: Colorpicker, { label: "Large", value: "4px" },
}, { label: "X large", value: "8px" },
{ ],
label: "Style", },
key: "border-style", {
control: Select, label: "Shadow",
options: [ key: "box-shadow",
{ label: "None", value: "none" }, control: Select,
{ label: "Hidden", value: "hidden" }, options: [
{ label: "Dotted", value: "dotted" }, { label: "None", value: "none" },
{ label: "Dashed", value: "dashed" }, { label: "X Small", value: "0 1px 2px 0 rgba(0, 0, 0, 0.05)" },
{ label: "Solid", value: "solid" }, {
{ label: "Double", value: "double" }, label: "Small",
{ label: "Groove", value: "groove" }, value:
{ label: "Ridge", value: "ridge" }, "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)",
{ label: "Inset", value: "inset" }, },
{ label: "Outset", value: "outset" }, {
], label: "Medium",
}, value:
] "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)",
},
export const effects = [ {
{ label: "Large",
label: "Opacity", value:
key: "opacity", "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)",
control: Select, },
options: [ {
{ label: "0", value: "0" }, label: "X Large",
{ label: "0.2", value: "0.2" }, value:
{ label: "0.4", value: "0.4" }, "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
{ 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",
key: "box-shadow",
control: Select,
options: [
{ label: "None", value: "none" },
{ label: "X 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: "X Large",
value:
"0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)",
},
],
},
]
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",