Merge pull request #1447 from Budibase/admin/top-layout
Adds the Admin Layout
This commit is contained in:
Kevin Åberg Kultalahti
GitHub
commit
6932deb7c7
|
|
@ -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: "/" }
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
<img
|
||||
{#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>
|
||||
|
|
|
|||
|
|
@ -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 large
|
||||
export let minValue = 0
|
||||
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--large={large}
|
||||
class="spectrum-ProgressCircle"
|
||||
class:spectrum-ProgressCircle--overBackground={overBackground}
|
||||
class="spectrum-ProgressCircle spectrum-ProgressCircle--{convertSize(size)}"
|
||||
>
|
||||
<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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -119,10 +119,6 @@
|
|||
top: var(--spacing-l);
|
||||
right: var(--spacing-xl);
|
||||
}
|
||||
.title i:hover {
|
||||
cursor: pointer;
|
||||
color: var(--blue);
|
||||
}
|
||||
|
||||
.role-select {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
Index route
|
||||
|
|
@ -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>
|
||||
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Reference in New Issue