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

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

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

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

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

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

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

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

@ -1,42 +1,34 @@
<script>
import { DetailSummary } from "@budibase/bbui"
import PropertyGroup from "./PropertyControls/PropertyGroup.svelte"
import { allStyles } from "./componentStyles"
import { store } from "builderStore"
import * as ComponentStyles from "./componentStyles"
export let componentDefinition
export let componentInstance
export let openSection
let selectedCategory = "normal"
let currentGroup
const getStyles = def => {
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>
<DetailSummary name="Design" show={openSection === "design"} on:open>
{#if groups.length > 0}
{#each groups as groupName}
<PropertyGroup
name={groupName}
properties={allStyles[groupName]}
styleCategory={selectedCategory}
onStyleChanged={store.actions.components.updateStyle}
{componentInstance}
open={currentGroup === groupName}
on:open={() => (currentGroup = groupName)}
/>
{/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>
{#if styles?.length > 0}
{#each styles as style}
<PropertyGroup
{style}
name={style.label}
inline={style.inline}
properties={style.settings}
{componentInstance}
/>
{/each}
{/if}

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

@ -7,8 +7,6 @@
import CustomStylesSection from "./CustomStylesSection.svelte"
import ActionsSection from "./ActionsSection.svelte"
let openSection = "settings"
$: componentInstance = $selectedComponent
$: componentDefinition = store.actions.components.getDefinition(
$selectedComponent?._component
@ -17,35 +15,21 @@
<Tabs selected="Settings" noPadding>
<Tab title="Settings">
<ScreenSettingsSection
{componentInstance}
{componentDefinition}
{openSection}
on:open={() => (openSection = "settings")}
/>
<ComponentSettingsSection
{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")}
/>
<div class="container">
<ScreenSettingsSection {componentInstance} {componentDefinition} />
<ComponentSettingsSection {componentInstance} {componentDefinition} />
<DesignSection {componentInstance} {componentDefinition} />
<CustomStylesSection {componentInstance} {componentDefinition} />
<ActionsSection {componentInstance} {componentDefinition} />
</div>
</Tab>
</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>
import PropertyControl from "./PropertyControl.svelte"
import { DetailSummary } from "@budibase/bbui"
import { store } from "builderStore"
export let name = ""
export let styleCategory = "normal"
export let properties = []
export let componentInstance = {}
export let onStyleChanged = () => {}
export let open = false
export let name
export let inline = false
export let properties
export let componentInstance
$: style = componentInstance["_styles"][styleCategory] || {}
$: changed = properties.some(prop => hasPropChanged(style, prop))
$: style = componentInstance._styles.normal || {}
$: changed = properties?.some(prop => hasPropChanged(style, prop)) ?? false
const hasPropChanged = (style, prop) => {
return style[prop.key] != null && style[prop.key] !== ""
@ -25,30 +24,32 @@
}
</script>
<DetailSummary name={`${name}${changed ? " *" : ""}`} on:open show={open} thin>
{#if open}
<div>
{#each properties as prop (`${componentInstance._id}-${prop.key}-${prop.label}`)}
<PropertyControl
bindable={false}
label={`${prop.label}${hasPropChanged(style, prop) ? " *" : ""}`}
control={prop.control}
key={prop.key}
value={style[prop.key]}
onChange={value => onStyleChanged(styleCategory, prop.key, value)}
props={getControlProps(prop)}
/>
{/each}
</div>
{/if}
<DetailSummary collapsible={false} name={`${name}${changed ? " *" : ""}`}>
<div class="group-content" class:inline>
{#each properties as prop (`${componentInstance._id}-${prop.key}-${prop.label}`)}
<PropertyControl
bindable={false}
label={`${prop.label}${hasPropChanged(style, prop) ? " *" : ""}`}
control={prop.control}
key={prop.key}
value={style[prop.key]}
onChange={val => store.actions.components.updateStyle(prop.key, val)}
props={getControlProps(prop)}
/>
{/each}
</div>
</DetailSummary>
<style>
div {
.group-content {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
gap: var(--spacing-s);
gap: var(--spacing-l);
}
.inline {
display: grid;
grid-template-columns: 1fr 1fr;
}
</style>

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

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

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

@ -81,239 +81,198 @@ export const layout = [
},
]
export const margin = [
{
label: "All sides",
key: "margin",
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",
key: "margin-top",
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: "Right",
key: "margin-right",
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: "Bottom",
key: "margin-bottom",
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: "Left",
key: "margin-left",
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%" },
],
},
]
export const margin = {
label: "Margin",
inline: true,
settings: [
{
label: "Top",
key: "margin-top",
control: Select,
bindable: false,
placeholder: "None",
options: [
{ 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: "Right",
key: "margin-right",
control: Select,
bindable: false,
placeholder: "None",
options: [
{ 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: "Bottom",
key: "margin-bottom",
control: Select,
bindable: false,
placeholder: "None",
options: [
{ 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: "Left",
key: "margin-left",
control: Select,
bindable: false,
placeholder: "None",
options: [
{ 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 = [
{
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%" },
],
},
{
label: "Top",
key: "padding-top",
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%" },
],
},
{
label: "Right",
key: "padding-right",
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%" },
],
},
{
label: "Bottom",
key: "padding-bottom",
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%" },
],
},
{
label: "Left",
key: "padding-left",
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",
key: "padding-top",
control: Select,
bindable: false,
placeholder: "None",
options: [
{ 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: "Right",
key: "padding-right",
control: Select,
bindable: false,
placeholder: "None",
options: [
{ 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: "Bottom",
key: "padding-bottom",
control: Select,
bindable: false,
placeholder: "None",
options: [
{ 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: "Left",
key: "padding-left",
control: Select,
bindable: false,
placeholder: "None",
options: [
{ 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 size = [
{
label: "Flex",
key: "flex",
control: Select,
options: [
{ label: "Shrink", value: "0 1 auto" },
{ label: "Grow", value: "1 1 auto" },
],
},
{
label: "Width",
key: "width",
control: Input,
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 size = {
label: "Size",
inline: true,
settings: [
{
label: "Width",
key: "width",
control: Input,
placeholder: "px",
},
{
label: "Height",
key: "height",
control: Input,
placeholder: "px",
},
],
}
export const position = [
{
@ -480,210 +439,162 @@ export const typography = [
},
]
export const background = [
{
label: "Color",
key: "background",
control: Colorpicker,
},
{
label: "Gradient",
key: "background-image",
control: Select,
options: [
{ label: "None", value: "none" },
{
label: "Warm Flame",
value: "linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);",
},
{
label: "Night Fade",
value: "linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);",
},
{
label: "Spring Warmth",
value: "linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%);",
},
{
label: "Sunny Morning",
value: "linear-gradient(120deg, #f6d365 0%, #fda085 100%);",
},
{
label: "Winter Neva",
value: "linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);",
},
{
label: "Tempting Azure",
value: "linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);",
},
{
label: "Heavy Rain",
value: "linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);",
},
{
label: "Deep Blue",
value: "linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);",
},
{
label: "Near Moon",
value: "linear-gradient(to top, #5ee7df 0%, #b490ca 100%);",
},
{
label: "Wild Apple",
value: "linear-gradient(to top, #d299c2 0%, #fef9d7 100%);",
},
{
label: "Plum Plate",
value: "linear-gradient(135deg, #667eea 0%, #764ba2 100%);",
},
{
label: "Peach Kiss",
value:
"radial-gradient(circle farthest-corner at 50% 100%,rgba(255,173,138,.50), rgba(255,248,247,1) 100%);",
},
{
label: "Flamingo Sunrise",
value:
"-webkit-radial-gradient(center top, rgb(255, 250, 245), rgb(255, 242, 242))",
},
{
label: "Budi Mist",
value:
"radial-gradient(circle, rgba(252,215,212,1) 0%, rgba(255,227,214,1) 50%, rgba(207,218,255,1) 100%);",
},
{
label: "Ballet Slipper",
value:
"linear-gradient(135deg, rgba(252,215,212,1) 20%, rgba(207,218,255,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 background = {
label: "Background",
settings: [
{
label: "Color",
key: "background",
control: Colorpicker,
},
{
label: "Gradient",
key: "background-image",
control: Select,
options: [
{ label: "None", value: "none" },
{
label: "Warm Flame",
value:
"linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);",
},
{
label: "Night Fade",
value: "linear-gradient(to top, #a18cd1 0%, #fbc2eb 100%);",
},
{
label: "Spring Warmth",
value: "linear-gradient(to top, #fad0c4 0%, #ffd1ff 100%);",
},
{
label: "Sunny Morning",
value: "linear-gradient(120deg, #f6d365 0%, #fda085 100%);",
},
{
label: "Winter Neva",
value: "linear-gradient(120deg, #a1c4fd 0%, #c2e9fb 100%);",
},
{
label: "Tempting Azure",
value: "linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);",
},
{
label: "Heavy Rain",
value: "linear-gradient(to top, #cfd9df 0%, #e2ebf0 100%);",
},
{
label: "Deep Blue",
value: "linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);",
},
{
label: "Near Moon",
value: "linear-gradient(to top, #5ee7df 0%, #b490ca 100%);",
},
{
label: "Wild Apple",
value: "linear-gradient(to top, #d299c2 0%, #fef9d7 100%);",
},
{
label: "Plum Plate",
value: "linear-gradient(135deg, #667eea 0%, #764ba2 100%);",
},
{
label: "Peach Kiss",
value:
"radial-gradient(circle farthest-corner at 50% 100%,rgba(255,173,138,.50), rgba(255,248,247,1) 100%);",
},
{
label: "Flamingo Sunrise",
value:
"-webkit-radial-gradient(center top, rgb(255, 250, 245), rgb(255, 242, 242))",
},
{
label: "Budi Mist",
value:
"radial-gradient(circle, rgba(252,215,212,1) 0%, rgba(255,227,214,1) 50%, rgba(207,218,255,1) 100%);",
},
{
label: "Ballet Slipper",
value:
"linear-gradient(135deg, rgba(252,215,212,1) 20%, rgba(207,218,255,1) 100%);",
},
{
label: "Black Noir",
value:
"linear-gradient(312deg, rgba(60,60,60,1) 0%, rgba(42,42,42,1) 100%);",
},
],
},
],
}
export const border = [
{
label: "Radius",
key: "border-radius",
control: Select,
options: [
{ label: "None", value: "0" },
{ label: "X Small", value: "0.125rem" },
{ label: "Small", value: "0.25rem" },
{ label: "Medium", value: "0.5rem" },
{ label: "Large", value: "1rem" },
{ label: "X Large", value: "2rem" },
{ label: "XX Large", value: "4rem" },
{ label: "Round", value: "5678px" },
],
},
{
label: "Width",
key: "border-width",
control: Select,
options: [
{ label: "None", value: "0" },
{ label: "X Small", value: "0.5px" },
{ label: "Small", value: "1px" },
{ label: "Medium", value: "2px" },
{ label: "Large", value: "4px" },
{ 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",
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 border = {
label: "Border",
settings: [
{
label: "Color",
key: "border-color",
control: Colorpicker,
},
{
label: "Radius",
key: "border-radius",
control: Select,
options: [
{ label: "None", value: "0" },
{ label: "X Small", value: "0.125rem" },
{ label: "Small", value: "0.25rem" },
{ label: "Medium", value: "0.5rem" },
{ label: "Large", value: "1rem" },
{ label: "X Large", value: "2rem" },
{ label: "XX Large", value: "4rem" },
{ label: "Round", value: "5678px" },
],
},
{
label: "Width",
key: "border-width",
control: Select,
options: [
{ label: "None", value: "0" },
{ label: "X Small", value: "0.5px" },
{ label: "Small", value: "1px" },
{ label: "Medium", value: "2px" },
{ label: "Large", value: "4px" },
{ label: "X large", value: "8px" },
],
},
{
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 = [
{
@ -734,15 +645,4 @@ export const transitions = [
},
]
export const allStyles = {
layout,
margin,
padding,
size,
position,
typography,
background,
border,
effects,
transitions,
}
export const all = [margin]

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",
"icon": "Sandbox",
"hasChildren": true,
"styleable": true,
"showSettingsBar": true,
"settings": [
{
@ -172,7 +171,8 @@
],
"defaultValue": "shrink"
}
]
],
"styles": ["padding", "size", "background", "border", "shadow"]
},
"section": {
"name": "Section",