From aee876a68188c3a167829983255072156e972a2c Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Tue, 22 Jun 2021 09:14:17 +0100 Subject: [PATCH 01/47] Add initial work on merging settings and design panels, improve code structure, improve styles --- .../src/DetailSummary/DetailSummary.svelte | 53 ++++----- packages/bbui/src/Tabs/Tabs.svelte | 12 +- .../src/builderStore/store/frontend.js | 6 +- .../PropertiesPanel/ActionsSection.svelte | 50 ++++++++ .../design/PropertiesPanel/CategoryTab.svelte | 40 ------- .../CustomStylesSection.svelte | 33 ++++++ .../PropertiesPanel/DesignSection.svelte | 42 +++++++ .../design/PropertiesPanel/DesignView.svelte | 111 ------------------ .../PropertiesPanel/PropertiesPanel.svelte | 85 ++++++-------- .../PropertyControls/PropertyControl.svelte | 81 ++++++------- ...ingsView.svelte => SettingsSection.svelte} | 76 +++--------- .../src/charts/BarChart.svelte | 2 +- .../src/charts/CandleStickChart.svelte | 2 +- .../src/charts/LineChart.svelte | 2 +- .../src/charts/PieChart.svelte | 2 +- 15 files changed, 255 insertions(+), 342 deletions(-) create mode 100644 packages/builder/src/components/design/PropertiesPanel/ActionsSection.svelte delete mode 100644 packages/builder/src/components/design/PropertiesPanel/CategoryTab.svelte create mode 100644 packages/builder/src/components/design/PropertiesPanel/CustomStylesSection.svelte create mode 100644 packages/builder/src/components/design/PropertiesPanel/DesignSection.svelte delete mode 100644 packages/builder/src/components/design/PropertiesPanel/DesignView.svelte rename packages/builder/src/components/design/PropertiesPanel/{SettingsView.svelte => SettingsSection.svelte} (72%) diff --git a/packages/bbui/src/DetailSummary/DetailSummary.svelte b/packages/bbui/src/DetailSummary/DetailSummary.svelte index 7071ab26d5..f20ccc56ae 100644 --- a/packages/bbui/src/DetailSummary/DetailSummary.svelte +++ b/packages/bbui/src/DetailSummary/DetailSummary.svelte @@ -2,12 +2,10 @@ import Icon from "../Icon/Icon.svelte" import { createEventDispatcher } from "svelte" + export let name + export let show = false + const dispatch = createEventDispatcher() - - export let thin = false - export let name, - show = false - const onHeaderClick = () => { show = !show if (show) { @@ -16,12 +14,10 @@ } -
+
-
{name}
-
- -
+
{name}
+
@@ -32,10 +28,9 @@ .property-group-container { display: flex; flex-direction: column; - height: auto; - justify-content: center; - border-radius: var(--border-radius-m); - font-family: var(--font-sans); + justify-content: flex-start; + align-items: stretch; + border-bottom: var(--border-light); } .property-group-name { @@ -45,42 +40,38 @@ flex-direction: row; justify-content: space-between; align-items: center; + padding: var(--spacing-m) var(--spacing-xl); + color: var(--spectrum-global-color-gray-600); + transition: color 130ms ease-in-out; + } + .property-group-name:hover { + color: var(--spectrum-global-color-gray-900); } .name { text-align: left; - font-size: 14px; + font-size: var(--font-size-s); font-weight: 600; letter-spacing: 0.14px; - color: var(--ink); flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; - text-transform: capitalize; + text-transform: uppercase; white-space: nowrap; user-select: none; } - .name.thin { - font-size: var(--spectrum-global-dimension-font-size-75); - } - - .icon { - flex: 0 0 20px; - text-align: center; - } .property-panel { - /* height: 0px; - overflow: hidden; */ display: none; + padding: var(--spacing-s) var(--spacing-xl) var(--spacing-xl) + var(--spacing-xl); } .show { - /* overflow: auto; - height: auto; */ display: flex; flex-direction: column; - flex: 1; - margin-top: var(--spacing-m); + justify-content: flex-start; + align-items: stretch; + gap: var(--spacing-m); } diff --git a/packages/bbui/src/Tabs/Tabs.svelte b/packages/bbui/src/Tabs/Tabs.svelte index 3eddb3dfec..3e1080f2cd 100644 --- a/packages/bbui/src/Tabs/Tabs.svelte +++ b/packages/bbui/src/Tabs/Tabs.svelte @@ -5,6 +5,8 @@ export let selected export let vertical = false + export let noPadding = false + let _id = id() const tab = writable({ title: selected, id: _id }) setContext("tab", tab) @@ -63,14 +65,17 @@ {/if}
-
+
diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js index 9a7e2715da..a462167ce2 100644 --- a/packages/builder/src/builderStore/store/frontend.js +++ b/packages/builder/src/builderStore/store/frontend.js @@ -488,12 +488,12 @@ export const getFrontendStore = () => { }) await Promise.all(promises) }, - updateStyle: async (type, name, value) => { + updateStyle: async (name, value) => { const selected = get(selectedComponent) if (value == null || value === "") { - delete selected._styles[type][name] + delete selected._styles.normal[name] } else { - selected._styles[type][name] = value + selected._styles.normal[name] = value } await store.actions.preview.saveSelected() }, diff --git a/packages/builder/src/components/design/PropertiesPanel/ActionsSection.svelte b/packages/builder/src/components/design/PropertiesPanel/ActionsSection.svelte new file mode 100644 index 0000000000..febfb56f16 --- /dev/null +++ b/packages/builder/src/components/design/PropertiesPanel/ActionsSection.svelte @@ -0,0 +1,50 @@ + + + + + Reset styles + + {#if componentDefinition?.component?.endsWith("/fieldgroup")} + confirmResetFieldsDialog?.show()} + > + Update form fields + + {/if} + + + diff --git a/packages/builder/src/components/design/PropertiesPanel/CategoryTab.svelte b/packages/builder/src/components/design/PropertiesPanel/CategoryTab.svelte deleted file mode 100644 index 66212036a8..0000000000 --- a/packages/builder/src/components/design/PropertiesPanel/CategoryTab.svelte +++ /dev/null @@ -1,40 +0,0 @@ - - -
- {#each categories as category} -
  • onClick(category)} - class:active={selectedCategory === category} - > - {category.name} -
  • - {/each} -
    - - diff --git a/packages/builder/src/components/design/PropertiesPanel/CustomStylesSection.svelte b/packages/builder/src/components/design/PropertiesPanel/CustomStylesSection.svelte new file mode 100644 index 0000000000..17a3e7c084 --- /dev/null +++ b/packages/builder/src/components/design/PropertiesPanel/CustomStylesSection.svelte @@ -0,0 +1,33 @@ + + + +
    +