Merge pull request #1447 from Budibase/admin/top-layout

Adds the Admin Layout

hosting/envoy.dev.yaml.hbs

@@ -38,7 +38,7 @@ static_resources:
                 route:
                   cluster: server-dev
 
-              - match: { prefix: "/builder/" }
+              - match: { prefix: "/" }
                 route:
                   cluster: builder-dev
 
@@ -47,10 +47,6 @@ static_resources:
                   cluster: builder-dev
                   prefix_rewrite: "/builder/"
  
-              # special case in dev to redirect no path to builder
-              - match: { path: "/" } 
-                redirect: { path_redirect: "/builder/" }
- 
               # minio is on the default route because this works
               # best, minio + AWS SDK doesn't handle path proxy
               - match: { prefix: "/" }

packages/bbui/src/Avatar/Avatar.svelte

@@ -1,12 +1,58 @@
 <script>
   import "@spectrum-css/avatar/dist/index-vars.css"
+  let sizes = new Map([
+    ["XXS", "--spectrum-alias-avatar-size-50"],
+    ["XS", "--spectrum-alias-avatar-size-75"],
+    ["S", "--spectrum-alias-avatar-size-200"],
+    ["M", "--spectrum-alias-avatar-size-300"],
+    ["L", "--spectrum-alias-avatar-size-500"],
+    ["XL", "--spectrum-alias-avatar-size-600"],
+    ["XXL", "--spectrum-alias-avatar-size-700"],
+  ])
+  export let size = "M"
   export let url = ""
   export let disabled = false
+  export let name = "John Doe"
+
+  function getInitials(name) {
+    let parts = name.split(" ")
+    return parts.map((name) => name[0]).join("")
+  }
 </script>
 
+{#if url}
   <img
     class:is-disabled={disabled}
     class="spectrum-Avatar"
     src={url}
     alt="Avatar"
+    style="width: var({sizes.get(size)}); height: var({sizes.get(size)});"
   />
+{:else}
+  <div
+    class:is-disabled={disabled}
+    style="width: var({sizes.get(size)}); height: var({sizes.get(
+      size
+    )}); font-size: calc(var({sizes.get(size)}) / 2)"
+  >
+    {getInitials(name)}
+  </div>
+{/if}
+
+<style>
+  div {
+    color: white;
+    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%
+    );
+    border-radius: 50%;
+    overflow: hidden;
+    user-select: none;
+  }
+</style>

packages/bbui/src/ProgressCircle/ProgressCircle.svelte

@@ -1,31 +1,60 @@
 <script>
-  // WIP! Does not yet work.
   import "@spectrum-css/progresscircle/dist/index-vars.css"
-  import { tweened } from "svelte/motion"
+
-  import { cubicOut } from "svelte/easing"
+  export let size = "M"
+  function convertSize(size) {
+    switch (size) {
+      case "S":
+        return "small"
+      case "L":
+        return "large"
+      default:
+        return
+    }
+  }
 
   export let value = false
-  export let small
+  export let minValue = 0
-  export let large
+  export let maxValue = 100
+
+  let subMask1Style
+  let subMask2Style
+  $: calculateSubMasks(value)
+
+  function calculateSubMasks(value) {
+    if (value) {
+      let percentage = ((value - minValue) / (maxValue - minValue)) * 100
+      let angle
+      if (percentage > 0 && percentage <= 50) {
+        angle = -180 + (percentage / 50) * 180
+        subMask1Style = `transform: rotate(${angle}deg);`
+        subMask2Style = "transform: rotate(-180deg);"
+      } else if (percentage > 50) {
+        angle = -180 + ((percentage - 50) / 50) * 180
+        subMask1Style = "transform: rotate(0deg);"
+        subMask2Style = `transform: rotate(${angle}deg);`
+      }
+    }
+  }
 
   export let overBackground
 </script>
 
 <div
+  on:click
   class:spectrum-ProgressBar--indeterminate={!value}
-  class:spectrum-ProgressCircle--small={small}
+  class:spectrum-ProgressCircle--overBackground={overBackground}
-  class:spectrum-ProgressCircle--large={large}
+  class="spectrum-ProgressCircle spectrum-ProgressCircle--{convertSize(size)}"
-  class="spectrum-ProgressCircle"
 >
   <div class="spectrum-ProgressCircle-track" />
   <div class="spectrum-ProgressCircle-fills">
     <div class="spectrum-ProgressCircle-fillMask1">
-      <div class="spectrum-ProgressCircle-fillSubMask1">
+      <div class="spectrum-ProgressCircle-fillSubMask1" style={subMask1Style}>
         <div class="spectrum-ProgressCircle-fill" />
       </div>
     </div>
     <div class="spectrum-ProgressCircle-fillMask2">
-      <div class="spectrum-ProgressCircle-fillSubMask2">
+      <div class="spectrum-ProgressCircle-fillSubMask2" style={subMask2Style}>
         <div class="spectrum-ProgressCircle-fill" />
       </div>
     </div>

packages/builder/index.html

@@ -3,7 +3,7 @@
 <head>
 	<meta charset='utf8'>
 	<meta name='viewport' content='width=device-width'>
-	<title>Budibase Builder</title>
+	<title>Budibase</title>
 	<link rel='icon' type='image/png' href='./src/favicon.png'>
 </head>
 <body id="app">

packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte

@@ -119,10 +119,6 @@
     top: var(--spacing-l);
     right: var(--spacing-xl);
   }
-  .title i:hover {
-    cursor: pointer;
-    color: var(--blue);
-  }
 
   .role-select {
     display: flex;

packages/builder/src/pages/index.svelte

@@ -0,0 +1 @@
+Index route

packages/builder/src/pages/portal/_layout.svelte

@@ -0,0 +1,124 @@
+<script>
+  import { isActive } from "@roxi/routify"
+  import { onMount } from "svelte"
+  import {
+    Icon,
+    Avatar,
+    Search,
+    Layout,
+    ProgressCircle,
+    SideNavigation as Navigation,
+    SideNavigationItem as Item,
+  } from "@budibase/bbui"
+
+  let orgName, orgLogo, onBoardingProgress, user
+
+  async function getInfo() {
+    // fetch orgInfo
+    orgName = "ACME Inc."
+    orgLogo = "https://via.placeholder.com/150"
+
+    // set onBoardingProgress
+    onBoardingProgress = 20
+    user = { name: "John Doe" }
+  }
+
+  onMount(getInfo)
+
+  let menu = [
+    { title: "Apps", href: "/portal" },
+    { title: "Drafts", href: "/portal/drafts" },
+    { title: "Users", href: "/portal/users", heading: "Manage" },
+    { title: "Groups", href: "/portal/groups" },
+    { title: "Auth", href: "/portal/auth" },
+    { title: "Email", href: "/portal/email" },
+    { title: "General", href: "/portal/general", heading: "Settings" },
+    { title: "Theming", href: "/portal/theming" },
+    { title: "Account", href: "/portal/account" },
+  ]
+</script>
+
+<div class="container">
+  <Layout>
+    <div class="nav">
+      <div class="branding">
+        <div class="name">
+          <img src={orgLogo} alt="Logotype" />
+          <span>{orgName}</span>
+        </div>
+        <div class="onboarding">
+          <ProgressCircle size="S" value={onBoardingProgress} />
+        </div>
+      </div>
+      <div class="menu">
+        <Navigation>
+          {#each menu as { title, href, heading }}
+            <Item selected={$isActive(href)} {href} {heading}>{title}</Item>
+          {/each}
+        </Navigation>
+      </div>
+    </div>
+  </Layout>
+  <div class="main">
+    <div class="toolbar">
+      <Search />
+      <div class="avatar">
+        <Avatar size="M" name="John Doe" />
+        <Icon size="XL" name="ChevronDown" />
+      </div>
+    </div>
+    <div class="content">
+      <slot />
+    </div>
+  </div>
+</div>
+
+<style>
+  .container {
+    min-height: 100vh;
+    display: grid;
+    grid-template-columns: 250px 1fr;
+  }
+  .main {
+    display: grid;
+    grid-template-rows: auto 1fr;
+    border-left: 2px solid var(--spectrum-alias-background-color-primary);
+  }
+  .branding {
+    display: grid;
+    grid-template-columns: auto auto;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: var(--spacing-xl);
+  }
+  .name {
+    display: grid;
+    grid-template-columns: auto auto;
+    grid-gap: var(--spacing-m);
+    align-items: center;
+  }
+  .content {
+    padding: var(--spacing-m);
+  }
+  .avatar {
+    display: grid;
+    grid-template-columns: auto auto;
+    place-items: center;
+    grid-gap: var(--spacing-xs);
+  }
+  .avatar:hover {
+    cursor: pointer;
+    filter: brightness(110%);
+  }
+  .toolbar {
+    border-bottom: 2px solid var(--spectrum-alias-background-color-primary);
+    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;
+  }
+</style>

packages/builder/vite.config.js

@@ -6,7 +6,7 @@ import path from "path"
 export default ({ mode }) => {
   const isProduction = mode === "production"
   return {
-    base: "/builder/",
+    base: "/",
     build: {
       minify: isProduction,
       outDir: "../server/builder",

packages/server/yarn.lock

@@ -6270,22 +6270,6 @@ jsonschema@1.4.0:
   resolved "https://registry.yarnpkg.com/jsonschema/-/jsonschema-1.4.0.tgz#1afa34c4bc22190d8e42271ec17ac8b3404f87b2"
   integrity sha512-/YgW6pRMr6M7C+4o8kS+B/2myEpHCrxO4PEWnqJNBFMjn7EWXqlQ4tGwL6xTHeRplwuZmcAncdvfOad1nT2yMw==
 
-jsonwebtoken@^8.2.0, jsonwebtoken@^8.5.1:
-  version "8.5.1"
-  resolved "https://registry.yarnpkg.com/jsonwebtoken/-/jsonwebtoken-8.5.1.tgz#00e71e0b8df54c2121a1f26137df2280673bcc0d"
-  integrity sha512-XjwVfRS6jTMsqYs0EsuJ4LGxXV14zQybNd4L2r0UvbVnSF9Af8x7p5MzbJ90Ioz/9TI41/hTCvznF/loiSzn8w==
-  dependencies:
-    jws "^3.2.2"
-    lodash.includes "^4.3.0"
-    lodash.isboolean "^3.0.3"
-    lodash.isinteger "^4.0.4"
-    lodash.isnumber "^3.0.3"
-    lodash.isplainobject "^4.0.6"
-    lodash.isstring "^4.0.1"
-    lodash.once "^4.0.0"
-    ms "^2.1.1"
-    semver "^5.6.0"
-
 jsprim@^1.2.2:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/jsprim/-/jsprim-1.4.1.tgz#313e66bc1e5cc06e438bc1b7499c2e5c56acb6a2"
@@ -6325,7 +6309,7 @@ jwa@^1.4.1:
     ecdsa-sig-formatter "1.0.11"
     safe-buffer "^5.0.1"
 
-jws@3.x.x, jws@^3.0.0, jws@^3.1.4, jws@^3.2.2:
+jws@3.x.x:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/jws/-/jws-3.2.2.tgz#001099f3639468c9414000e99995fa52fb478304"
   integrity sha512-YHlZCB6lMTllWDtSPHz/ZXTsi8S00usEV6v1tjq8tOUZzw7DpSDWVXjXDre6ed1w/pd495ODpHZYSdkRTsa0HA==
@@ -6763,51 +6747,11 @@ lodash.debounce@^4.0.8:
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
   integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
 
-lodash.defaults@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-4.2.0.tgz#d09178716ffea4dde9e5fb7b37f6f0802274580c"
-  integrity sha1-0JF4cW/+pN3p5ft7N/bwgCJ0WAw=
-
-lodash.flatten@^4.4.0:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/lodash.flatten/-/lodash.flatten-4.4.0.tgz#f31c22225a9632d2bbf8e4addbef240aa765a61f"
-  integrity sha1-8xwiIlqWMtK7+OSt2+8kCqdlph8=
-
-lodash.includes@^4.3.0:
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/lodash.includes/-/lodash.includes-4.3.0.tgz#60bb98a87cb923c68ca1e51325483314849f553f"
-  integrity sha1-YLuYqHy5I8aMoeUTJUgzFISfVT8=
-
-lodash.isboolean@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/lodash.isboolean/-/lodash.isboolean-3.0.3.tgz#6c2e171db2a257cd96802fd43b01b20d5f5870f6"
-  integrity sha1-bC4XHbKiV82WgC/UOwGyDV9YcPY=
-
 lodash.isequal@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
   integrity sha1-QVxEePK8wwEgwizhDtMib30+GOA=
 
-lodash.isinteger@^4.0.4:
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/lodash.isinteger/-/lodash.isinteger-4.0.4.tgz#619c0af3d03f8b04c31f5882840b77b11cd68343"
-  integrity sha1-YZwK89A/iwTDH1iChAt3sRzWg0M=
-
-lodash.isnumber@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/lodash.isnumber/-/lodash.isnumber-3.0.3.tgz#3ce76810c5928d03352301ac287317f11c0b1ffc"
-  integrity sha1-POdoEMWSjQM1IwGsKHMX8RwLH/w=
-
-lodash.isplainobject@^4.0.6:
-  version "4.0.6"
-  resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
-  integrity sha1-fFJqUtibRcRcxpC4gWO+BJf1UMs=
-
-lodash.isstring@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/lodash.isstring/-/lodash.isstring-4.0.1.tgz#d527dfb5456eca7cc9bb95d5daeaf88ba54a5451"
-  integrity sha1-1SfftUVuynzJu5XV2ur4i6VKVFE=
-
 lodash.keys@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/lodash.keys/-/lodash.keys-4.2.0.tgz#a08602ac12e4fb83f91fc1fb7a360a4d9ba35205"
@@ -6828,11 +6772,6 @@ lodash.omit@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.omit/-/lodash.omit-4.5.0.tgz#6eb19ae5a1ee1dd9df0b969e66ce0b7fa30b5e60"
   integrity sha1-brGa5aHuHdnfC5aeZs4Lf6MLXmA=
 
-lodash.once@^4.0.0:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/lodash.once/-/lodash.once-4.1.1.tgz#0dd3971213c7c56df880977d504c88fb471a97ac"
-  integrity sha1-DdOXEhPHxW34gJd9UEyI+0cal6w=
-
 lodash.pick@^4.0.0:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/lodash.pick/-/lodash.pick-4.4.0.tgz#52f05610fff9ded422611441ed1fc123a03001b3"