From 8d522e3eafa7d8996b901926b06a4f32bc4fe266 Mon Sep 17 00:00:00 2001 From: Joe <49767913+joebudi@users.noreply.github.com> Date: Tue, 26 May 2020 20:44:24 +0100 Subject: [PATCH] Ui Update Tidied up a few areas of the new edit panel within the Design UI, including: Margins Input box sizes Colors Tabs TBD - The parent tab, Add, will move to the left in the future and edit will disappear. Design, settings and actions will become parents. --- .../src/components/common/Input.svelte | 12 +++++----- .../common/Inputs/InputGroup.svelte | 13 ++++++----- .../userInterface/CategoryTab.svelte | 22 ++++++------------- .../ComponentPropertiesPanel.svelte | 2 +- .../ComponentsPaneSwitcher.svelte | 4 ++-- .../userInterface/FlatButton.svelte | 10 ++++----- .../userInterface/FlatButtonGroup.svelte | 2 -- .../userInterface/PropertyControl.svelte | 13 ++++++----- .../userInterface/PropertyGroup.svelte | 11 +++++----- .../[application]/frontend/_layout.svelte | 4 ---- 10 files changed, 42 insertions(+), 51 deletions(-) diff --git a/packages/builder/src/components/common/Input.svelte b/packages/builder/src/components/common/Input.svelte index bc6741e0d8..a136b4e2f3 100644 --- a/packages/builder/src/components/common/Input.svelte +++ b/packages/builder/src/components/common/Input.svelte @@ -11,12 +11,12 @@ input { display: block; font-size: 14px; - font-family: sans-serif; font-weight: 500; - color: #163057; + color: var(--ink); line-height: 1.3; - padding: 1em 2.6em 0.9em 1.4em; - width: 100%; + padding: 12px; + width: 164px; + float: right; max-width: 100%; box-sizing: border-box; margin: 0; @@ -24,7 +24,7 @@ -webkit-appearance: none; appearance: none; background: #fff; - border: 1px solid #ccc; - height: 35px; + border: 1px solid var(--grey-dark); + height: 32px; } diff --git a/packages/builder/src/components/common/Inputs/InputGroup.svelte b/packages/builder/src/components/common/Inputs/InputGroup.svelte index c4118aa289..ffe6880f51 100644 --- a/packages/builder/src/components/common/Inputs/InputGroup.svelte +++ b/packages/builder/src/components/common/Inputs/InputGroup.svelte @@ -29,7 +29,6 @@ diff --git a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte index 507d04c356..3ab8c522f0 100644 --- a/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte +++ b/packages/builder/src/components/userInterface/ComponentPropertiesPanel.svelte @@ -117,7 +117,7 @@ } .component-props-container { - margin-top: 10px; + margin-top: 20px; flex: 1 1 auto; } diff --git a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte index c85e23403c..185b1d640d 100644 --- a/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte +++ b/packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte @@ -54,13 +54,13 @@ height: 100%; display: flex; flex-direction: column; - padding: 20px 0; + padding: 20px 20px; border-left: solid 1px #e8e8ef; } .switcher { display: flex; - margin: 0px 20px 20px 20px; + margin: 0px 20px 20px 0px; } .switcher > button { diff --git a/packages/builder/src/components/userInterface/FlatButton.svelte b/packages/builder/src/components/userInterface/FlatButton.svelte index abc4a3dc28..9e11a546e3 100644 --- a/packages/builder/src/components/userInterface/FlatButton.svelte +++ b/packages/builder/src/components/userInterface/FlatButton.svelte @@ -19,16 +19,16 @@ diff --git a/packages/builder/src/components/userInterface/PropertyControl.svelte b/packages/builder/src/components/userInterface/PropertyControl.svelte index cd1bad35f7..82acb8b3f9 100644 --- a/packages/builder/src/components/userInterface/PropertyControl.svelte +++ b/packages/builder/src/components/userInterface/PropertyControl.svelte @@ -43,21 +43,24 @@ diff --git a/packages/builder/src/components/userInterface/PropertyGroup.svelte b/packages/builder/src/components/userInterface/PropertyGroup.svelte index 240618a4c7..6d0cf63ab0 100644 --- a/packages/builder/src/components/userInterface/PropertyGroup.svelte +++ b/packages/builder/src/components/userInterface/PropertyGroup.svelte @@ -42,14 +42,15 @@ display: flex; flex-direction: column; height: auto; - background: #fbfbfb; - margin: 5px; - padding: 5px; + background: var(--grey-light); + margin: 0px 0px 4px 0px; + padding: 8px 12px; + justify-content: center; + border-radius: 4px; } .property-group-name { cursor: pointer; - flex: 0 0 20px; display: flex; flex-flow: row nowrap; } @@ -61,7 +62,7 @@ font-size: 14px; font-weight: 500; letter-spacing: 0.14px; - color: #393c44; + color: var(--ink); } .icon { diff --git a/packages/builder/src/pages/[application]/frontend/_layout.svelte b/packages/builder/src/pages/[application]/frontend/_layout.svelte index df9762fb07..c480a75bfa 100644 --- a/packages/builder/src/pages/[application]/frontend/_layout.svelte +++ b/packages/builder/src/pages/[application]/frontend/_layout.svelte @@ -127,7 +127,6 @@ .root { display: grid; grid-template-columns: 275px 1fr 275px; - height: 100%; width: 100%; background: var(--grey-light); } @@ -136,7 +135,6 @@ .root { display: grid; grid-template-columns: 300px 1fr 300px; - height: 100%; width: 100%; background: var(--grey-light); } @@ -162,8 +160,6 @@ .components-pane { grid-column: 3; background-color: var(--white); - min-height: 0px; - overflow-y: scroll; } .components-nav-page {