From 10b010f9d6423f8f938402cec9f55f376d6b13a1 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 22 Apr 2021 13:23:02 +0100 Subject: [PATCH 01/10] Fix crash due ot leftover export from BBUI --- packages/bbui/src/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js index 312c6fa3b0..3bc24d1705 100644 --- a/packages/bbui/src/index.js +++ b/packages/bbui/src/index.js @@ -23,7 +23,6 @@ export { default as RadioGroup } from "./Form/RadioGroup.svelte" export { default as Checkbox } from "./Form/Checkbox.svelte" export { default as Home } from "./Links/Home.svelte" export { default as DetailSummary } from "./DetailSummary/DetailSummary.svelte" -export { default as DropdownMenu } from "./DropdownMenu/DropdownMenu.svelte" export { default as Popover } from "./Popover/Popover.svelte" export { default as ProgressBar } from "./ProgressBar/ProgressBar.svelte" export { default as ProgressCircle } from "./ProgressCircle/ProgressCircle.svelte" From f0a07cfe9fb47aef1d975270f470e7d8a3c44d13 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 22 Apr 2021 13:37:24 +0100 Subject: [PATCH 02/10] Update deploy page to use spectrum --- .../deploy/DeploymentHistory.svelte | 25 ++++++++++++------- .../builder/[application]/deploy/index.svelte | 25 +++++++++---------- 2 files changed, 28 insertions(+), 22 deletions(-) diff --git a/packages/builder/src/components/deploy/DeploymentHistory.svelte b/packages/builder/src/components/deploy/DeploymentHistory.svelte index d84f6b7f49..21942727af 100644 --- a/packages/builder/src/components/deploy/DeploymentHistory.svelte +++ b/packages/builder/src/components/deploy/DeploymentHistory.svelte @@ -75,7 +75,9 @@ } catch (err) { console.error(err) clearInterval(poll) - notifications.error("Error fetching deployment history. Please try again.") + notifications.error( + "Error fetching deployment history. Please try again." + ) } } @@ -96,7 +98,7 @@ {#if deployments.length > 0}
-

Deployment History

+ Deployment History
{#if deployments.some(deployment => deployment.status === DeploymentStatus.SUCCESS)} View Your Deployed App → @@ -148,13 +150,13 @@ From 863406574c4f1e04b2fc921a8684dea85b5732b8 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 22 Apr 2021 13:59:00 +0100 Subject: [PATCH 03/10] Improve builder settings modal styles --- packages/bbui/src/Divider/Divider.svelte | 13 +++++++ packages/bbui/src/Modal/ModalContent.svelte | 3 ++ packages/bbui/src/bbui.css | 39 ++----------------- .../components/settings/ThemeEditor.svelte | 16 +------- .../start/BuilderSettingsModal.svelte | 38 +++++++++--------- 5 files changed, 39 insertions(+), 70 deletions(-) diff --git a/packages/bbui/src/Divider/Divider.svelte b/packages/bbui/src/Divider/Divider.svelte index 26e2b2677c..cc50225d2f 100644 --- a/packages/bbui/src/Divider/Divider.svelte +++ b/packages/bbui/src/Divider/Divider.svelte @@ -5,12 +5,25 @@ export let s = false export let vertical = false + export let noMargin = false + export let noGrid = false $: useDefault = ![l, m, s].includes(true)
+ + diff --git a/packages/bbui/src/Modal/ModalContent.svelte b/packages/bbui/src/Modal/ModalContent.svelte index c12b9417cf..47848dc44f 100644 --- a/packages/bbui/src/Modal/ModalContent.svelte +++ b/packages/bbui/src/Modal/ModalContent.svelte @@ -84,6 +84,9 @@ .spectrum-Dialog-content { overflow: visible; } + .spectrum-Dialog-heading { + font-family: var(--spectrum-alias-body-text-font-family); + } .spectrum-Dialog-buttonGroup { gap: var(--spectrum-global-dimension-static-size-200); diff --git a/packages/bbui/src/bbui.css b/packages/bbui/src/bbui.css index ba3147cd5d..01d5c80f1b 100644 --- a/packages/bbui/src/bbui.css +++ b/packages/bbui/src/bbui.css @@ -1,32 +1,3 @@ -.svench-content { - color: #666; - font-family: -apple-system, BlinkMacSystemFont, Segoe UI, "Roboto", - Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; -} - -h1.svench-content { - font-size: 2em; -} -h2.svench-content { - font-size: 1.66em; -} -h3.svench-content { - font-size: 1.33em; -} -h4.svench-content { - font-size: 1.33em; - font-weight: normal; -} -h5.svench-content { - font-size: 1em; - font-weight: bold; -} -h6.svench-content { - font-size: 1em; - font-weight: normal; - font-style: italic; -} - :root { --background: #ffffff; --ink: #000000; @@ -127,7 +98,6 @@ h6.svench-content { h1 { font-size: 3rem; - font-family: var(--font-sans); font-weight: 700; text-rendering: var(--text-render); -webkit-font-smoothing: var(--text-smooth); @@ -136,7 +106,6 @@ h1 { h2 { font-size: 2.25rem; - font-family: var(--font-sans); font-weight: 600; text-rendering: var(--text-render); -webkit-font-smoothing: var(--text-smooth); @@ -145,7 +114,6 @@ h2 { h3 { font-size: 1.7rem; - font-family: var(--font-sans); font-weight: 600; text-rendering: var(--text-render); -webkit-font-smoothing: var(--text-smooth); @@ -154,7 +122,6 @@ h3 { h4 { font-size: var(--font-size-xl); - font-family: var(--font-sans); font-weight: 500; text-rendering: var(--text-render); -webkit-font-smoothing: var(--text-smooth); @@ -163,7 +130,6 @@ h4 { h5 { font-size: var(--font-size-l); - font-family: var(--font-sans); font-weight: 500; text-rendering: var(--text-render); -webkit-font-smoothing: var(--text-smooth); @@ -172,7 +138,6 @@ h5 { h6 { font-size: var(--font-size-m); - font-family: var(--font-sans); font-weight: 500; text-rendering: var(--text-render); -webkit-font-smoothing: var(--text-smooth); @@ -191,3 +156,7 @@ p { a { text-decoration: none; } + +.spectrum { + --spectrum-alias-body-text-font-family: "Inter", sans-serif; +} \ No newline at end of file diff --git a/packages/builder/src/components/settings/ThemeEditor.svelte b/packages/builder/src/components/settings/ThemeEditor.svelte index d715a17d70..9c7235ce62 100644 --- a/packages/builder/src/components/settings/ThemeEditor.svelte +++ b/packages/builder/src/components/settings/ThemeEditor.svelte @@ -5,18 +5,4 @@ let showAdvanced = false -
-
- -
-
- - + diff --git a/packages/builder/src/components/start/BuilderSettingsModal.svelte b/packages/builder/src/components/start/BuilderSettingsModal.svelte index 33151041a9..8f1b51a9db 100644 --- a/packages/builder/src/components/start/BuilderSettingsModal.svelte +++ b/packages/builder/src/components/start/BuilderSettingsModal.svelte @@ -1,8 +1,15 @@ -
Theme
+ Theme -
Hosting
-

+ + Hosting + This section contains settings that relate to the deployment and hosting of apps made in this builder. -

+ {/if} -
Analytics
-

+ + Analytics + If you would like to send analytics that help us make budibase better, please let us know below. -

+ - - From 9a0a7eded84411f4e456b2b4e5572369e2d60119 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 22 Apr 2021 13:59:26 +0100 Subject: [PATCH 04/10] Remove test button group --- packages/builder/src/pages/builder/index.svelte | 5 ----- 1 file changed, 5 deletions(-) diff --git a/packages/builder/src/pages/builder/index.svelte b/packages/builder/src/pages/builder/index.svelte index b0c9bcdc2f..98ea6cba1d 100644 --- a/packages/builder/src/pages/builder/index.svelte +++ b/packages/builder/src/pages/builder/index.svelte @@ -77,11 +77,6 @@
- - - - - From f859ad5210c0eaa8b1ea2dfddd08d749990adef1 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 23 Apr 2021 10:48:19 +0100 Subject: [PATCH 05/10] Update lots of font sizes, padding and other UI improvements --- packages/bbui/src/Button/Button.svelte | 12 +- .../src/DetailSummary/DetailSummary.svelte | 5 +- packages/bbui/src/Modal/Modal.svelte | 3 + packages/bbui/src/Popover/Popover.svelte | 6 + packages/bbui/src/Table/Table.svelte | 4 +- packages/bbui/src/Tabs/Tab.svelte | 64 +++++---- packages/bbui/src/Tabs/Tabs.svelte | 123 ++++++++++-------- packages/bbui/src/bbui.css | 63 +-------- .../AutomationPanel/AutomationPanel.svelte | 4 +- .../popovers/CreateViewPopover.svelte | 6 +- .../DataTable/popovers/ExportPopover.svelte | 5 +- .../popovers/ManageAccessPopover.svelte | 20 ++- .../TableNavigator/TableDataImport.svelte | 2 +- .../common/Dropdowns/DropdownItem.svelte | 2 +- .../src/components/common/NavItem.svelte | 2 +- .../AppPreview/ComponentSelectionList.svelte | 4 +- .../FrontendNavigatePane.svelte | 23 +--- .../PropertiesPanel/PropertiesPanel.svelte | 34 ++--- .../FlatButtonGroup/FlatButton.svelte | 2 +- .../PropertiesPanel/SettingsView.svelte | 4 +- .../src/components/start/AppCard.svelte | 8 +- .../src/components/start/AppList.svelte | 11 +- packages/builder/src/global.css | 6 +- .../[application]/automate/_layout.svelte | 2 + .../builder/[application]/data/_layout.svelte | 6 +- 25 files changed, 191 insertions(+), 230 deletions(-) diff --git a/packages/bbui/src/Button/Button.svelte b/packages/bbui/src/Button/Button.svelte index 4023653d2b..83128c4f16 100644 --- a/packages/bbui/src/Button/Button.svelte +++ b/packages/bbui/src/Button/Button.svelte @@ -3,11 +3,11 @@ export let disabled = false export let size = "M" - export let cta = false; - export let primary = false; - export let secondary = false; + export let cta = false + export let primary = false + export let secondary = false export let warning = false - export let overBackground = false; + export let overBackground = false export let quiet = false export let icon = undefined export let active = false @@ -44,8 +44,4 @@ overflow: hidden; text-overflow: ellipsis; } - - button.active { - color: var(--spectrum-semantic-cta-color-background-default); - } diff --git a/packages/bbui/src/DetailSummary/DetailSummary.svelte b/packages/bbui/src/DetailSummary/DetailSummary.svelte index 84a4d9613a..3ff8462776 100644 --- a/packages/bbui/src/DetailSummary/DetailSummary.svelte +++ b/packages/bbui/src/DetailSummary/DetailSummary.svelte @@ -1,5 +1,5 @@ -
$selected = {...$selected, title, info: tab.getBoundingClientRect()} } class:is-selected={$selected.title === title} class="spectrum-Tabs-item" tabindex="0"> - {#if icon} - - {/if} - {title} +
($selected = { ...$selected, title, info: tab.getBoundingClientRect() })} + class:is-selected={$selected.title === title} + class="spectrum-Tabs-item" + tabindex="0"> + {#if icon} + + {/if} + {title}
{#if $selected.title === title} - - - -{/if} \ No newline at end of file + + + +{/if} diff --git a/packages/bbui/src/Tabs/Tabs.svelte b/packages/bbui/src/Tabs/Tabs.svelte index 10617a6a5a..3accd87e8f 100644 --- a/packages/bbui/src/Tabs/Tabs.svelte +++ b/packages/bbui/src/Tabs/Tabs.svelte @@ -1,71 +1,82 @@ -
- -
+ +
+ + {#if $tab.info} +
+ {/if}
\ No newline at end of file + .spectrum-Tabs { + padding-left: var(--spacing-xl); + padding-right: var(--spacing-xl); + } + .spectrum-Tabs-content { + margin-top: var(--spectrum-global-dimension-static-size-150); + } + .indicator-transition { + transition: all 200ms; + } + diff --git a/packages/bbui/src/bbui.css b/packages/bbui/src/bbui.css index 01d5c80f1b..de758ec7fa 100644 --- a/packages/bbui/src/bbui.css +++ b/packages/bbui/src/bbui.css @@ -45,7 +45,7 @@ --font-bold: "Inter Bold"; --font-medium: "Inter Medium"; --font-light: "Inter Light"; - --font-sans: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, "Inter", + --font-sans: Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, "Inter", "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-serif: "Georgia", Cambria, Times New Roman, Times, serif; @@ -96,67 +96,6 @@ --border-transparent: 2px transparent solid; } -h1 { - font-size: 3rem; - font-weight: 700; - text-rendering: var(--text-render); - -webkit-font-smoothing: var(--text-smooth); - color: var(--ink); -} - -h2 { - font-size: 2.25rem; - font-weight: 600; - text-rendering: var(--text-render); - -webkit-font-smoothing: var(--text-smooth); - color: var(--ink); -} - -h3 { - font-size: 1.7rem; - font-weight: 600; - text-rendering: var(--text-render); - -webkit-font-smoothing: var(--text-smooth); - color: var(--ink); -} - -h4 { - font-size: var(--font-size-xl); - font-weight: 500; - text-rendering: var(--text-render); - -webkit-font-smoothing: var(--text-smooth); - color: var(--ink); -} - -h5 { - font-size: var(--font-size-l); - font-weight: 500; - text-rendering: var(--text-render); - -webkit-font-smoothing: var(--text-smooth); - color: var(--ink); -} - -h6 { - font-size: var(--font-size-m); - font-weight: 500; - text-rendering: var(--text-render); - -webkit-font-smoothing: var(--text-smooth); - color: var(--ink); -} - -p { - font-size: var(--font-size); - font-family: var(--font-sans); - font-weight: 400; - text-rendering: var(--text-render); - -webkit-font-smoothing: var(--text-smooth); - color: var(--ink); -} - a { text-decoration: none; -} - -.spectrum { - --spectrum-alias-body-text-font-family: "Inter", sans-serif; } \ No newline at end of file diff --git a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte index 2dcb7ab211..159faff576 100644 --- a/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte +++ b/packages/builder/src/components/automation/AutomationPanel/AutomationPanel.svelte @@ -24,14 +24,14 @@ diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte index 9b33e04056..3d0209b4d3 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte @@ -1,7 +1,7 @@
- {name} + {name}
$goto(`/builder/${_id}`)}> @@ -36,7 +36,9 @@ {#if appExportLoading} - {:else}{/if} + {:else} + + {/if}
diff --git a/packages/builder/src/components/start/AppList.svelte b/packages/builder/src/components/start/AppList.svelte index 66cd14a6eb..0715fa0302 100644 --- a/packages/builder/src/components/start/AppList.svelte +++ b/packages/builder/src/components/start/AppList.svelte @@ -19,8 +19,8 @@
- Your Apps - + Your Apps + {#await promise} diff --git a/packages/builder/src/global.css b/packages/builder/src/global.css index 185e6e2e8b..28490782aa 100644 --- a/packages/builder/src/global.css +++ b/packages/builder/src/global.css @@ -6,6 +6,10 @@ html, body { min-height: 100%; } +.spectrum--light { + --spectrum-alias-background-color-primary: var(--spectrum-global-color-gray-75); +} + body { --background: var(--spectrum-alias-background-color-primary); --background-alt: var(--spectrum-alias-background-color-secondary); @@ -24,7 +28,7 @@ body { font-family: var(--font-sans); color: var(--ink); - background-color: var(--background); + background-color: var(--background-alt); } #app { diff --git a/packages/builder/src/pages/builder/[application]/automate/_layout.svelte b/packages/builder/src/pages/builder/[application]/automate/_layout.svelte index 968d5ec251..922631a582 100644 --- a/packages/builder/src/pages/builder/[application]/automate/_layout.svelte +++ b/packages/builder/src/pages/builder/[application]/automate/_layout.svelte @@ -33,6 +33,7 @@ justify-content: flex-start; align-items: stretch; border-right: var(--border-light); + background-color: var(--background); } .content { @@ -54,5 +55,6 @@ justify-content: flex-start; align-items: stretch; gap: var(--spacing-l); + background-color: var(--background); } diff --git a/packages/builder/src/pages/builder/[application]/data/_layout.svelte b/packages/builder/src/pages/builder/[application]/data/_layout.svelte index 5256c42b3b..eb54110b4f 100644 --- a/packages/builder/src/pages/builder/[application]/data/_layout.svelte +++ b/packages/builder/src/pages/builder/[application]/data/_layout.svelte @@ -69,7 +69,6 @@ height: calc(100vh - 60px); display: grid; grid-template-columns: 260px minmax(0, 1fr); - background: var(--grey-2); } .content { @@ -81,13 +80,12 @@ justify-content: flex-start; align-items: stretch; gap: var(--spacing-l); - background: var(--background); } .content :global(> span) { display: contents; } .tab-content-padding { - padding: 0 var(--spacing-s); + padding: 0 var(--spacing-xl); } .nav { @@ -105,7 +103,7 @@ font-size: 20px; position: absolute; top: var(--spacing-l); - right: var(--spacing-l); + right: var(--spacing-xl); } i:hover { From d36a80b0de6e15662ba9504f583b77f8b3a2c2cd Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Fri, 23 Apr 2021 11:30:17 +0100 Subject: [PATCH 06/10] Update top nav to use tabs and fix a few tab layout issues --- packages/bbui/src/Tabs/Tab.svelte | 10 ++- packages/bbui/src/Tabs/Tabs.svelte | 7 +- .../pages/builder/[application]/_reset.svelte | 68 ++++++++----------- 3 files changed, 42 insertions(+), 43 deletions(-) diff --git a/packages/bbui/src/Tabs/Tab.svelte b/packages/bbui/src/Tabs/Tab.svelte index d82ebd7343..b2637f2784 100644 --- a/packages/bbui/src/Tabs/Tab.svelte +++ b/packages/bbui/src/Tabs/Tab.svelte @@ -1,9 +1,10 @@
($selected = { ...$selected, title, info: tab.getBoundingClientRect() })} + on:click={onClick} class:is-selected={$selected.title === title} class="spectrum-Tabs-item" tabindex="0"> diff --git a/packages/bbui/src/Tabs/Tabs.svelte b/packages/bbui/src/Tabs/Tabs.svelte index 3accd87e8f..7cd3e50b18 100644 --- a/packages/bbui/src/Tabs/Tabs.svelte +++ b/packages/bbui/src/Tabs/Tabs.svelte @@ -33,10 +33,8 @@ function calculateIndicatorOffset() { if (!vertical) { left = $tab.info?.left - container?.getBoundingClientRect().left + "px" - top = $tab.info?.top } else { top = $tab.info?.top - container?.getBoundingClientRect().top + "px" - left = $tab.info?.left } } @@ -72,6 +70,8 @@ .spectrum-Tabs { padding-left: var(--spacing-xl); padding-right: var(--spacing-xl); + position: relative; + border-width: 1px !important; } .spectrum-Tabs-content { margin-top: var(--spectrum-global-dimension-static-size-150); @@ -79,4 +79,7 @@ .indicator-transition { transition: all 200ms; } + .spectrum-Tabs--horizontal .spectrum-Tabs-selectionIndicator { + bottom: 0 !important; + } diff --git a/packages/builder/src/pages/builder/[application]/_reset.svelte b/packages/builder/src/pages/builder/[application]/_reset.svelte index d6eba33c96..8c778a70c4 100644 --- a/packages/builder/src/pages/builder/[application]/_reset.svelte +++ b/packages/builder/src/pages/builder/[application]/_reset.svelte @@ -1,18 +1,22 @@