Add new style definitions for containers
This commit is contained in:
Andrew Kingston
parent
ab56301ace
commit
817dc7b3cf
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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}
|
||||
|
|
|
|||
|
|
@ -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]
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -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",
|
||||
|
|
|
|||
Loading…
Reference in a new issue