From 04dfbe4d18b36b3f64e3d8077019c013656754b1 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 6 May 2021 10:17:27 +0100 Subject: [PATCH 1/7] Add Page layout component to BBUI --- packages/bbui/src/Layout/Page.svelte | 23 +++++++++++++++++++++++ packages/bbui/src/index.js | 1 + 2 files changed, 24 insertions(+) create mode 100644 packages/bbui/src/Layout/Page.svelte diff --git a/packages/bbui/src/Layout/Page.svelte b/packages/bbui/src/Layout/Page.svelte new file mode 100644 index 0000000000..d8c8cbfce4 --- /dev/null +++ b/packages/bbui/src/Layout/Page.svelte @@ -0,0 +1,23 @@ + + +
+ +
+ + diff --git a/packages/bbui/src/index.js b/packages/bbui/src/index.js index e1b68cb35f..9d47958461 100644 --- a/packages/bbui/src/index.js +++ b/packages/bbui/src/index.js @@ -28,6 +28,7 @@ export { default as ProgressBar } from "./ProgressBar/ProgressBar.svelte" export { default as ProgressCircle } from "./ProgressCircle/ProgressCircle.svelte" export { default as Label } from "./Label/Label.svelte" export { default as Layout } from "./Layout/Layout.svelte" +export { default as Page } from "./Layout/Page.svelte" export { default as Link } from "./Link/Link.svelte" export { default as Menu } from "./Menu/Menu.svelte" export { default as MenuSection } from "./Menu/Section.svelte" From 67fad5def03946ed5d74322dc13acc72cbfc37ca Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 6 May 2021 10:17:47 +0100 Subject: [PATCH 2/7] Update border colour definitions to match designs --- packages/builder/src/global.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/builder/src/global.css b/packages/builder/src/global.css index 298513bd23..726f422a48 100644 --- a/packages/builder/src/global.css +++ b/packages/builder/src/global.css @@ -13,8 +13,8 @@ html, body { body { --background: var(--spectrum-alias-background-color-primary); --background-alt: var(--spectrum-alias-background-color-secondary); - --border-light: 1px solid var(--spectrum-global-color-gray-200); - --border-dark: 1px solid var(--spectrum-global-color-gray-300); + --border-light: 1px solid var(--spectrum-global-color-gray-300); + --border-dark: 1px solid var(--spectrum-global-color-gray-400); --ink: var(--spectrum-alias-text-color); --grey-1: var(--spectrum-global-color-gray-100); --grey-2: var(--spectrum-global-color-gray-200); From 61d81a719ac50b9350562f7e06799f917828d168 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 6 May 2021 10:18:25 +0100 Subject: [PATCH 3/7] Update core layout to allow full width pages and match designs --- .../builder/src/pages/portal/_layout.svelte | 39 +++++++++---------- 1 file changed, 18 insertions(+), 21 deletions(-) diff --git a/packages/builder/src/pages/portal/_layout.svelte b/packages/builder/src/pages/portal/_layout.svelte index e26148b666..028f04285e 100644 --- a/packages/builder/src/pages/portal/_layout.svelte +++ b/packages/builder/src/pages/portal/_layout.svelte @@ -23,7 +23,7 @@ onMount(getInfo) let menu = [ - { title: "Apps", href: "/portal/" }, + { title: "Apps", href: "/portal/apps" }, { title: "Drafts", href: "/portal/drafts" }, { title: "Users", href: "/portal/users", heading: "Manage" }, { title: "Groups", href: "/portal/groups" }, @@ -36,15 +36,15 @@
- -
+
+
Logotype - {$organisation?.company} + {$organisation?.company || "Budibase"}
@@ -59,17 +59,17 @@ {/each}
-
- + +
- +
-
+
@@ -81,10 +81,13 @@ display: grid; grid-template-columns: 250px 1fr; } + .nav { + background: var(--background); + border-right: var(--border-light); + } .main { display: grid; grid-template-rows: auto 1fr; - border-left: 2px solid var(--spectrum-alias-background-color-primary); } .branding { display: grid; @@ -92,7 +95,6 @@ grid-template-columns: auto auto; justify-content: space-between; align-items: center; - margin-bottom: var(--spacing-xl); } .name { display: grid; @@ -100,13 +102,6 @@ grid-gap: var(--spacing-m); align-items: center; } - .content { - display: grid; - padding: calc(var(--spacing-xl) * 2) var(--spacing-m) var(--spacing-m) - var(--spacing-m); - max-width: 80ch; - margin: 0 auto; - } .avatar { display: grid; grid-template-columns: auto auto; @@ -118,18 +113,20 @@ filter: brightness(110%); } .toolbar { - border-bottom: 2px solid var(--spectrum-alias-background-color-primary); + background: var(--background); + border-bottom: var(--border-light); display: grid; grid-template-columns: 250px auto; justify-content: space-between; padding: var(--spacing-m) calc(var(--spacing-xl) * 2); } img { - width: 32px; - height: 32px; + width: 28px; + height: 28px; } span { overflow: hidden; text-overflow: ellipsis; + font-weight: 500; } From efdac8bc665b0cba6b268f259cd1af43cdc21a1a Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 6 May 2021 10:18:41 +0100 Subject: [PATCH 4/7] Add default portal redirect --- packages/builder/src/pages/portal/index.svelte | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/packages/builder/src/pages/portal/index.svelte b/packages/builder/src/pages/portal/index.svelte index e69de29bb2..3d74e8c6fa 100644 --- a/packages/builder/src/pages/portal/index.svelte +++ b/packages/builder/src/pages/portal/index.svelte @@ -0,0 +1,4 @@ + From e576e464e29959677a145b09071a9b7f93a5d963 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 6 May 2021 10:22:17 +0100 Subject: [PATCH 5/7] Update existing pages to use Page layout component --- packages/builder/src/pages/portal/oauth/index.svelte | 5 +++-- packages/builder/src/pages/portal/settings/_layout.svelte | 7 +++++++ 2 files changed, 10 insertions(+), 2 deletions(-) create mode 100644 packages/builder/src/pages/portal/settings/_layout.svelte diff --git a/packages/builder/src/pages/portal/oauth/index.svelte b/packages/builder/src/pages/portal/oauth/index.svelte index d4e5332d0d..45c9761d38 100644 --- a/packages/builder/src/pages/portal/oauth/index.svelte +++ b/packages/builder/src/pages/portal/oauth/index.svelte @@ -9,6 +9,7 @@ Layout, Input, Body, + Page, } from "@budibase/bbui" import { onMount } from "svelte" import api from "builderStore/api" @@ -58,7 +59,7 @@ }) -
+
OAuth @@ -88,7 +89,7 @@
{/if} - + From 058daeb57f8d03238e8b716874d04eede0d2c3e0 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 6 May 2021 10:49:04 +0100 Subject: [PATCH 7/7] Update avatar to solid background --- packages/bbui/src/Avatar/Avatar.svelte | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/packages/bbui/src/Avatar/Avatar.svelte b/packages/bbui/src/Avatar/Avatar.svelte index 1b2310b61f..7a6ad5f004 100644 --- a/packages/bbui/src/Avatar/Avatar.svelte +++ b/packages/bbui/src/Avatar/Avatar.svelte @@ -45,12 +45,7 @@ display: grid; place-items: center; font-weight: 500; - background: rgb(63, 94, 251); - background: linear-gradient( - 155deg, - rgba(63, 94, 251, 1) 0%, - rgba(53, 199, 86, 1) 47% - ); + background: #3aab87; border-radius: 50%; overflow: hidden; user-select: none;