From dd4c7a186ec6d0119383479c60116f9e53edf096 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Wed, 23 Jun 2021 07:55:33 +0100 Subject: [PATCH] Add new style definitions for containers --- .../src/DetailSummary/DetailSummary.svelte | 10 +- .../PropertiesPanel/ActionsSection.svelte | 24 +- .../ComponentSettingsSection.svelte | 6 +- .../CustomStylesSection.svelte | 59 +- .../PropertiesPanel/DesignSection.svelte | 58 +- .../PropertiesPanel/PropertiesPanel.svelte | 48 +- .../PropertyControls/PropertyGroup.svelte | 53 +- .../ScreenSettingsSection.svelte | 7 +- .../design/PropertiesPanel/componentStyles.js | 792 +++++----- packages/server/yarn.lock | 1326 +---------------- packages/standard-components/manifest.json | 4 +- 11 files changed, 495 insertions(+), 1892 deletions(-) diff --git a/packages/bbui/src/DetailSummary/DetailSummary.svelte b/packages/bbui/src/DetailSummary/DetailSummary.svelte index a3772cee3..518c61550 100644 --- a/packages/bbui/src/DetailSummary/DetailSummary.svelte +++ b/packages/bbui/src/DetailSummary/DetailSummary.svelte @@ -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 @@
{name}
- + {#if collapsible} + + {/if}
-
+
diff --git a/packages/builder/src/components/design/PropertiesPanel/ActionsSection.svelte b/packages/builder/src/components/design/PropertiesPanel/ActionsSection.svelte index febfb56f1..9d6297913 100644 --- a/packages/builder/src/components/design/PropertiesPanel/ActionsSection.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/ActionsSection.svelte @@ -1,11 +1,10 @@ - - - Reset styles +{#if componentDefinition?.component?.endsWith("/fieldgroup")} + confirmResetFieldsDialog?.show()} + > + Update form fields - {#if componentDefinition?.component?.endsWith("/fieldgroup")} - confirmResetFieldsDialog?.show()} - > - Update form fields - - {/if} - +{/if} 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 @@ } - + - 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() } -
-