From 5792e7c0f3d872a0eef83eee8578442c5fd6fe8f Mon Sep 17 00:00:00 2001 From: Michael Shanks Date: Fri, 29 May 2020 13:28:12 +0100 Subject: [PATCH 1/5] added common switcher component, and moved add component to left --- .../src/components/common/Switcher.svelte | 74 ++++++++++ .../ComponentSelectionList.svelte | 2 +- .../ComponentsPaneSwitcher.svelte | 81 ----------- .../userInterface/FrontendNavigatePane.svelte | 126 +++++++++++++++++ .../userInterface/ItemTab/Tab.svelte | 1 - .../[application]/frontend/_layout.svelte | 132 +++--------------- 6 files changed, 221 insertions(+), 195 deletions(-) create mode 100644 packages/builder/src/components/common/Switcher.svelte delete mode 100644 packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte create mode 100644 packages/builder/src/components/userInterface/FrontendNavigatePane.svelte diff --git a/packages/builder/src/components/common/Switcher.svelte b/packages/builder/src/components/common/Switcher.svelte new file mode 100644 index 0000000000..cf23e39507 --- /dev/null +++ b/packages/builder/src/components/common/Switcher.svelte @@ -0,0 +1,74 @@ + + +
+ +
+ + {#each tabs as tab} + + {/each} + +
+ +
+ {#if selectedIndex === 0} + + {:else if selectedIndex === 1} + + {:else if selectedIndex === 2} + + {:else if selectedIndex === 3} + + {/if} +
+ +
+ + diff --git a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte index 0bf848e4a8..2a46e5d6f6 100644 --- a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte +++ b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte @@ -32,7 +32,7 @@ const onComponentChosen = component => { store.addChildComponent(component._component) - toggleTab() + toggleTab("Navigate") } diff --git a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte deleted file mode 100644 index de523cd7bf..0000000000 --- a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte +++ /dev/null @@ -1,81 +0,0 @@ - - -
- {#if $store.currentFrontEndType === 'page' || $store.screens.length} -
- - - - - -
- -
- {#if selected === PROPERTIES_TAB} - - {/if} - - {#if selected === COMPONENT_SELECTION_TAB} - - {/if} - -
- {/if} - -
- - diff --git a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte new file mode 100644 index 0000000000..8b4b8e1843 --- /dev/null +++ b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte @@ -0,0 +1,126 @@ + + +
+
+ Navigate + Pages +
+ +
+ +
+
+ +
+ + + +
+ +
+
+ + Screens + +
+ +
+
+
+ +
+
+ + + + \ No newline at end of file diff --git a/packages/builder/src/components/userInterface/ItemTab/Tab.svelte b/packages/builder/src/components/userInterface/ItemTab/Tab.svelte index 80f1733cc1..f811a56670 100644 --- a/packages/builder/src/components/userInterface/ItemTab/Tab.svelte +++ b/packages/builder/src/components/userInterface/ItemTab/Tab.svelte @@ -3,7 +3,6 @@ const dispatch = createEventDispatcher() import Item from "./Item.svelte" - import { store } from "builderStore" export let list let category = list diff --git a/packages/builder/src/pages/[application]/frontend/_layout.svelte b/packages/builder/src/pages/[application]/frontend/_layout.svelte index c480a75bfa..deea52ce3e 100644 --- a/packages/builder/src/pages/[application]/frontend/_layout.svelte +++ b/packages/builder/src/pages/[application]/frontend/_layout.svelte @@ -2,18 +2,17 @@ import { store, backendUiStore } from "builderStore" import { goto } from "@sveltech/routify" import { onMount } from "svelte" - import ComponentsHierarchy from "components/userInterface/ComponentsHierarchy.svelte" import ComponentsHierarchyChildren from "components/userInterface/ComponentsHierarchyChildren.svelte" - import PageLayout from "components/userInterface/PageLayout.svelte" - import PagesList from "components/userInterface/PagesList.svelte" import IconButton from "components/common/IconButton.svelte" - import NewScreen from "components/userInterface/NewScreen.svelte" import CurrentItemPreview from "components/userInterface/AppPreview" import PageView from "components/userInterface/PageView.svelte" - import ComponentsPaneSwitcher from "components/userInterface/ComponentsPaneSwitcher.svelte" + import ComponentPropertiesPanel from "components/userInterface/ComponentPropertiesPanel.svelte" + import ComponentSelectionList from "components/userInterface/ComponentSelectionList.svelte" + import Switcher from "components/common/Switcher.svelte" import ConfirmDialog from "components/common/ConfirmDialog.svelte" import { last } from "lodash/fp" import { AddIcon } from "components/common/Icons" + import FrontendNavigatePane from "components/userInterface/FrontendNavigatePane.svelte" $: instances = $store.appInstances @@ -27,13 +26,10 @@ } }) - let newScreenPicker + let confirmDeleteDialog let componentToDelete = "" - const newScreen = () => { - newScreenPicker.show() - } let settingsView const settings = () => { @@ -45,6 +41,8 @@ confirmDeleteDialog.show() } + let leftNavSwitcher + const lastPartOfName = c => (c ? last(c.split("/")) : "") @@ -52,54 +50,32 @@
-
-
- Navigate - Pages + +
+
- -
- -
-
- -
- - - -
- -
-
- - Screens - -
- -
-
-
- -
-
+
+
+ +
+ {#if $store.currentPageName && $store.currentPageName.length > 0} + {/if}
{#if $store.currentFrontEndType === 'screen' || $store.currentFrontEndType === 'page'}
- +
{/if}
- + From 0f1a472b6f90c83640a5ebdcec9a051f1623440b Mon Sep 17 00:00:00 2001 From: Michael Shanks Date: Fri, 29 May 2020 14:06:25 +0100 Subject: [PATCH 2/5] configurable logLevel - defaults to error --- packages/server/.env.template | 5 ++++- packages/server/scripts/jestSetup.js | 1 + packages/server/src/app.js | 2 +- 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/server/.env.template b/packages/server/.env.template index bc2e7954a4..170d391520 100644 --- a/packages/server/.env.template +++ b/packages/server/.env.template @@ -12,4 +12,7 @@ ADMIN_SECRET={{adminSecret}} JWT_SECRET={{cookieKey1}} # port to run http server on -PORT=4001 \ No newline at end of file +PORT=4001 + +# error level for koa-pino +LOG_LEVEL=error \ No newline at end of file diff --git a/packages/server/scripts/jestSetup.js b/packages/server/scripts/jestSetup.js index 5289aef9f4..ab5bc83885 100644 --- a/packages/server/scripts/jestSetup.js +++ b/packages/server/scripts/jestSetup.js @@ -5,3 +5,4 @@ process.env.JWT_SECRET = "test-jwtsecret" process.env.CLIENT_ID = "test-client-id" process.env.BUDIBASE_DIR = tmpdir("budibase-unittests") process.env.ADMIN_SECRET = "test-admin-secret" +process.env.LOG_LEVEL = "silent" diff --git a/packages/server/src/app.js b/packages/server/src/app.js index bec5f8d16e..f23aeca02c 100644 --- a/packages/server/src/app.js +++ b/packages/server/src/app.js @@ -15,7 +15,7 @@ app.use( prettyPrint: { levelFirst: true, }, - level: process.env.NODE_ENV === "jest" ? "silent" : "info", + level: env.LOG_LEVEL || "error", }) ) From e7f314e046d6f508fc6ed0ee2025c41fcec70bca Mon Sep 17 00:00:00 2001 From: Michael Shanks Date: Fri, 29 May 2020 14:56:21 +0100 Subject: [PATCH 3/5] bugfix: not selecting component after add --- .../userInterface/ComponentSelectionList.svelte | 9 +++++++++ .../src/components/userInterface/PagesList.svelte | 3 ++- .../src/pages/[application]/frontend/_layout.svelte | 3 ++- 3 files changed, 13 insertions(+), 2 deletions(-) diff --git a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte index 2a46e5d6f6..d39acf872a 100644 --- a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte +++ b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte @@ -1,4 +1,5 @@ diff --git a/packages/builder/src/components/userInterface/PagesList.svelte b/packages/builder/src/components/userInterface/PagesList.svelte index 562c813865..823f922bb6 100644 --- a/packages/builder/src/components/userInterface/PagesList.svelte +++ b/packages/builder/src/components/userInterface/PagesList.svelte @@ -20,7 +20,8 @@ }, ] - store.setCurrentPage($params.page ? $params.page : "main") + if (!$store.currentPageName) + store.setCurrentPage($params.page ? $params.page : "main") const changePage = id => { store.setCurrentPage(id) diff --git a/packages/builder/src/pages/[application]/frontend/_layout.svelte b/packages/builder/src/pages/[application]/frontend/_layout.svelte index deea52ce3e..293623f8d2 100644 --- a/packages/builder/src/pages/[application]/frontend/_layout.svelte +++ b/packages/builder/src/pages/[application]/frontend/_layout.svelte @@ -55,7 +55,8 @@
-
+ +
From 43a2e6752c76e87b67f0c89d4e3f162d7aaa8068 Mon Sep 17 00:00:00 2001 From: Joe <49767913+joebudi@users.noreply.github.com> Date: Fri, 29 May 2020 18:31:47 +0100 Subject: [PATCH 4/5] Update to Frontend UI Nav and Component Panel Components moved to the left Nav panel UI updated Props tabs moved up --- packages/builder/src/budibase.css | 14 ++-- .../ComponentPropertiesPanel.svelte | 1 + .../userInterface/ComponentsHierarchy.svelte | 13 ++- .../ComponentsPaneSwitcher.svelte | 81 +++++++++++++++++++ .../userInterface/FrontendNavigatePane.svelte | 80 +++++------------- .../userInterface/ItemTab/Item.svelte | 2 +- .../userInterface/PageLayout.svelte | 36 +++------ .../components/userInterface/PagesList.svelte | 57 ++++--------- .../userInterface/UserInterfaceRoot.svelte | 5 -- .../[application]/frontend/_layout.svelte | 5 -- packages/builder/src/pages/_layout.svelte | 12 +-- 11 files changed, 146 insertions(+), 160 deletions(-) create mode 100644 packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte diff --git a/packages/builder/src/budibase.css b/packages/builder/src/budibase.css index f433b016da..0d74ed7221 100644 --- a/packages/builder/src/budibase.css +++ b/packages/builder/src/budibase.css @@ -57,23 +57,23 @@ .budibase__nav-item { cursor: pointer; - padding: 0 7px 0 3px; + padding: 0 4px 0 2px; height: 35px; - margin: 5px 20px 5px 0px; + margin: 5px 0px 4px 0px; border-radius: 0 5px 5px 0; display: flex; align-items: center; - font-weight: 500; - font-size: 13px; + font-size: 14px; + transition: 0.2s; } .budibase__nav-item.selected { - color: var(--button-text); - background: #f1f4fc; + color: var(--ink); + background: var(--blue-light); } .budibase__nav-item:hover { - background: #fafafa; + background: var(--grey-light); } .budibase__input { diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte index 726fb35aae..afce0576e1 100644 --- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte +++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte @@ -105,6 +105,7 @@ display: flex; flex-direction: column; overflow-x: hidden; + padding: 20px; } .title > div:nth-child(1) { diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte index 26929fcdce..bb6d369956 100644 --- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte +++ b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte @@ -1,7 +1,6 @@ + +
+ {#if $store.currentFrontEndType === 'page' || $store.screens.length} +
+ + + + + +
+ +
+ {#if selected === PROPERTIES_TAB} + + {/if} + + {#if selected === COMPONENT_SELECTION_TAB} + + {/if} + +
+ {/if} + +
+ + diff --git a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte index 8b4b8e1843..565301213d 100644 --- a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte +++ b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte @@ -3,7 +3,6 @@ import ComponentsHierarchy from "components/userInterface/ComponentsHierarchy.svelte" import PageLayout from "components/userInterface/PageLayout.svelte" import PagesList from "components/userInterface/PagesList.svelte" - import { AddIcon } from "components/common/Icons" import NewScreen from "components/userInterface/NewScreen.svelte" const newScreen = () => { @@ -13,64 +12,44 @@ let newScreenPicker -
-
- Navigate - Pages -
+ -
- -
-
- -
+ -
-
-
- - Screens - -
- -
-
-
- -
+
+
diff --git a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte index 8b600047d8..3fe67e6482 100644 --- a/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte +++ b/packages/builder/src/components/userInterface/UserInterfaceRoot.svelte @@ -120,7 +120,6 @@ background-color: var(--white); height: calc(100vh - 49px); padding: 0; - overflow: scroll; display: flex; flex-direction: column; } @@ -215,10 +214,6 @@ letter-spacing: 1px; } - .border-line { - border-bottom: 1px solid #d8d8d8; - } - .components-list-container { padding: 20px 0px 0 0; } diff --git a/packages/builder/src/pages/[application]/frontend/_layout.svelte b/packages/builder/src/pages/[application]/frontend/_layout.svelte index 536da887d6..1dfdb82168 100644 --- a/packages/builder/src/pages/[application]/frontend/_layout.svelte +++ b/packages/builder/src/pages/[application]/frontend/_layout.svelte @@ -100,7 +100,6 @@ background-color: var(--white); height: calc(100vh - 49px); padding: 0; - overflow: scroll; display: flex; flex-direction: column; } @@ -117,8 +116,6 @@ background-color: var(--white); } - - .nav-group-header > div:nth-child(1) { padding: 0rem 0.5rem 0rem 0rem; vertical-align: bottom; @@ -126,8 +123,6 @@ margin-right: 5px; } - - .nav-group-header > div:nth-child(3) { vertical-align: bottom; grid-column-start: button; diff --git a/packages/builder/src/pages/_layout.svelte b/packages/builder/src/pages/_layout.svelte index 363efcf619..001561cae9 100644 --- a/packages/builder/src/pages/_layout.svelte +++ b/packages/builder/src/pages/_layout.svelte @@ -119,22 +119,12 @@ diff --git a/packages/builder/src/components/common/Switcher.svelte b/packages/builder/src/components/common/Switcher.svelte index cf23e39507..b1c84e6eac 100644 --- a/packages/builder/src/components/common/Switcher.svelte +++ b/packages/builder/src/components/common/Switcher.svelte @@ -9,9 +9,6 @@ let selectedIndex = 0 const isSelected = tab => selected === tab - - -
@@ -19,9 +16,7 @@
{#each tabs as tab} - {/each} @@ -30,13 +25,13 @@
{#if selectedIndex === 0} - + {:else if selectedIndex === 1} - + {:else if selectedIndex === 2} - + {:else if selectedIndex === 3} - + {/if}
diff --git a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte index d39acf872a..590cf9c985 100644 --- a/packages/builder/src/components/userInterface/ComponentSelectionList.svelte +++ b/packages/builder/src/components/userInterface/ComponentSelectionList.svelte @@ -33,15 +33,14 @@ const onComponentChosen = component => { store.addChildComponent(component._component) - + toggleTab("Navigate") - + // Get ID path const path = store.getPathToComponent($store.currentComponentInfo) // Go to correct URL $goto(`./:page/:screen/${path}`) - } diff --git a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte index bb6d369956..714e1c2cc9 100644 --- a/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte +++ b/packages/builder/src/components/userInterface/ComponentsHierarchy.svelte @@ -61,7 +61,7 @@ {/if} - + {screen.title}
diff --git a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte index 565301213d..cee63c4cbb 100644 --- a/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte +++ b/packages/builder/src/components/userInterface/FrontendNavigatePane.svelte @@ -4,7 +4,7 @@ import PageLayout from "components/userInterface/PageLayout.svelte" import PagesList from "components/userInterface/PagesList.svelte" import NewScreen from "components/userInterface/NewScreen.svelte" - + const newScreen = () => { newScreenPicker.show() } @@ -14,15 +14,10 @@ - + -
@@ -30,59 +25,25 @@ \ No newline at end of file + diff --git a/packages/builder/src/components/userInterface/PageLayout.svelte b/packages/builder/src/components/userInterface/PageLayout.svelte index f35a080a65..ec32e1cb44 100644 --- a/packages/builder/src/components/userInterface/PageLayout.svelte +++ b/packages/builder/src/components/userInterface/PageLayout.svelte @@ -55,8 +55,8 @@ class:rotate={$store.currentPreviewItem.name !== _layout.title}> - - Master Screen + + Master Screen
{#if $store.currentPreviewItem.name === _layout.title && _layout.component.props._children} @@ -79,7 +79,6 @@ onOk={() => store.deleteComponent(componentToDelete)} /> diff --git a/packages/builder/src/pages/[application]/frontend/_layout.svelte b/packages/builder/src/pages/[application]/frontend/_layout.svelte index 1dfdb82168..e30c11daae 100644 --- a/packages/builder/src/pages/[application]/frontend/_layout.svelte +++ b/packages/builder/src/pages/[application]/frontend/_layout.svelte @@ -26,11 +26,9 @@ } }) - let confirmDeleteDialog let componentToDelete = "" - let settingsView const settings = () => { settingsView.show() @@ -50,21 +48,20 @@
- +
- +
-
{#if $store.currentPageName && $store.currentPageName.length > 0} - + {/if}
@@ -76,8 +73,6 @@
- - div:nth-child(3):hover { color: var(--primary75); } -