forked from tsai/budibase
Andrew Kingston
5 years ago
15 changed files with 255 additions and 342 deletions
@ -0,0 +1,50 @@ |
|||
<script> |
|||
import { DetailSummary, 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 |
|||
|
|||
let confirmResetFieldsDialog |
|||
|
|||
const resetFormFields = () => { |
|||
const form = findClosestMatchingComponent( |
|||
$currentAsset.props, |
|||
componentInstance._id, |
|||
component => component._component.endsWith("/form") |
|||
) |
|||
const dataSource = form?.dataSource |
|||
const fields = makeDatasourceFormComponents(dataSource) |
|||
store.actions.components.updateProp( |
|||
"_children", |
|||
fields.map(field => field.json()) |
|||
) |
|||
} |
|||
</script> |
|||
|
|||
<DetailSummary name="Actions" on:open show={openSection === "actions"}> |
|||
<ActionButton secondary wide on:click={store.actions.components.resetStyles}> |
|||
Reset styles |
|||
</ActionButton> |
|||
{#if componentDefinition?.component?.endsWith("/fieldgroup")} |
|||
<ActionButton |
|||
secondary |
|||
wide |
|||
on:click={() => confirmResetFieldsDialog?.show()} |
|||
> |
|||
Update form fields |
|||
</ActionButton> |
|||
{/if} |
|||
</DetailSummary> |
|||
|
|||
<ConfirmDialog |
|||
bind:this={confirmResetFieldsDialog} |
|||
body={`All components inside this group will be deleted and replaced with fields to match the schema. Are you sure you want to update this Field Group?`} |
|||
okText="Update" |
|||
onOk={resetFormFields} |
|||
title="Confirm Form Field Update" |
|||
/> |
|||
@ -1,40 +0,0 @@ |
|||
<script> |
|||
export let categories = [] |
|||
export let selectedCategory = {} |
|||
export let onClick = () => {} |
|||
</script> |
|||
|
|||
<div class="tabs"> |
|||
{#each categories as category} |
|||
<li |
|||
data-cy={category.name} |
|||
on:click={() => onClick(category)} |
|||
class:active={selectedCategory === category} |
|||
> |
|||
{category.name} |
|||
</li> |
|||
{/each} |
|||
</div> |
|||
|
|||
<style> |
|||
.tabs { |
|||
display: flex; |
|||
flex-direction: row; |
|||
justify-content: flex-start; |
|||
align-items: center; |
|||
list-style: none; |
|||
font-size: var(--font-size-m); |
|||
font-weight: 600; |
|||
height: 24px; |
|||
} |
|||
|
|||
li { |
|||
color: var(--grey-5); |
|||
cursor: pointer; |
|||
margin-right: 20px; |
|||
} |
|||
|
|||
.active { |
|||
color: var(--ink); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,33 @@ |
|||
<script> |
|||
import { TextArea, DetailSummary } from "@budibase/bbui" |
|||
import { store } from "builderStore" |
|||
|
|||
export let componentInstance |
|||
export let openSection |
|||
|
|||
function onChange(css) { |
|||
store.actions.components.updateCustomStyle(css) |
|||
} |
|||
</script> |
|||
|
|||
<DetailSummary |
|||
name={`Custom Styles${componentInstance?._styles?.custom ? " *" : ""}`} |
|||
on:open |
|||
show={openSection === "custom"} |
|||
> |
|||
<div class="custom-styles"> |
|||
<TextArea |
|||
value={componentInstance?._styles?.custom} |
|||
on:change={event => onChange(event.detail)} |
|||
placeholder="Enter some CSS..." |
|||
/> |
|||
</div> |
|||
</DetailSummary> |
|||
|
|||
<style> |
|||
.custom-styles :global(textarea) { |
|||
font-family: monospace; |
|||
min-height: 120px; |
|||
font-size: var(--font-size-xs); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,42 @@ |
|||
<script> |
|||
import { DetailSummary } from "@budibase/bbui" |
|||
import PropertyGroup from "./PropertyControls/PropertyGroup.svelte" |
|||
import { allStyles } from "./componentStyles" |
|||
import { store } from "builderStore" |
|||
|
|||
export let componentDefinition |
|||
export let componentInstance |
|||
export let openSection |
|||
|
|||
let selectedCategory = "normal" |
|||
let currentGroup |
|||
|
|||
$: groups = componentDefinition?.styleable ? Object.keys(allStyles) : [] |
|||
</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> |
|||
@ -1,111 +0,0 @@ |
|||
<script> |
|||
import { TextArea, DetailSummary, Button } from "@budibase/bbui" |
|||
import PropertyGroup from "./PropertyControls/PropertyGroup.svelte" |
|||
import FlatButtonGroup from "./PropertyControls/FlatButtonGroup" |
|||
import { allStyles } from "./componentStyles" |
|||
|
|||
export let componentDefinition = {} |
|||
export let componentInstance = {} |
|||
export let onStyleChanged = () => {} |
|||
export let onCustomStyleChanged = () => {} |
|||
export let onResetStyles = () => {} |
|||
|
|||
let selectedCategory = "normal" |
|||
let currentGroup |
|||
|
|||
function onChange(category) { |
|||
selectedCategory = category |
|||
} |
|||
|
|||
const buttonProps = [ |
|||
{ value: "normal", text: "Normal" }, |
|||
{ value: "hover", text: "Hover" }, |
|||
{ value: "active", text: "Active" }, |
|||
] |
|||
|
|||
$: groups = componentDefinition?.styleable ? Object.keys(allStyles) : [] |
|||
</script> |
|||
|
|||
<div class="container"> |
|||
<div class="state-categories"> |
|||
<FlatButtonGroup value={selectedCategory} {buttonProps} {onChange} /> |
|||
</div> |
|||
|
|||
<div class="positioned-wrapper"> |
|||
<div class="property-groups"> |
|||
{#if groups.length > 0} |
|||
{#each groups as groupName} |
|||
<PropertyGroup |
|||
name={groupName} |
|||
properties={allStyles[groupName]} |
|||
styleCategory={selectedCategory} |
|||
{onStyleChanged} |
|||
{componentInstance} |
|||
open={currentGroup === groupName} |
|||
on:open={() => (currentGroup = groupName)} |
|||
/> |
|||
{/each} |
|||
<DetailSummary |
|||
name={`Custom Styles${componentInstance._styles.custom ? " *" : ""}`} |
|||
on:open={() => (currentGroup = "custom")} |
|||
show={currentGroup === "custom"} |
|||
thin |
|||
> |
|||
<div class="custom-styles"> |
|||
<TextArea |
|||
value={componentInstance._styles.custom} |
|||
on:change={event => onCustomStyleChanged(event.detail)} |
|||
placeholder="Enter some CSS..." |
|||
/> |
|||
</div> |
|||
</DetailSummary> |
|||
<Button secondary wide on:click={onResetStyles}>Reset Styles</Button> |
|||
{:else} |
|||
<div class="no-design"> |
|||
This component doesn't have any design properties. |
|||
</div> |
|||
{/if} |
|||
</div> |
|||
</div> |
|||
</div> |
|||
|
|||
<style> |
|||
.container { |
|||
display: flex; |
|||
flex-direction: column; |
|||
width: 100%; |
|||
height: 100%; |
|||
gap: var(--spacing-l); |
|||
} |
|||
|
|||
.positioned-wrapper { |
|||
position: relative; |
|||
display: flex; |
|||
min-height: 0; |
|||
flex: 1 1 auto; |
|||
} |
|||
|
|||
.property-groups { |
|||
flex: 1; |
|||
overflow-y: auto; |
|||
min-height: 0; |
|||
margin: 0 -20px; |
|||
padding: 0 20px; |
|||
display: flex; |
|||
flex-direction: column; |
|||
justify-content: flex-start; |
|||
align-items: stretch; |
|||
gap: var(--spacing-m); |
|||
} |
|||
|
|||
.no-design { |
|||
font-size: var(--font-size-xs); |
|||
color: var(--grey-5); |
|||
} |
|||
|
|||
.custom-styles :global(textarea) { |
|||
font-family: monospace; |
|||
min-height: 120px; |
|||
font-size: var(--font-size-xs); |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue