From cee06067a84593f523d7d65736720a132c5147ff 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] 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 -
- + - -
- -
+ -
-
- - + 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 @@