MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'next' of https://github.com/Budibase/budibase into oauth-config-screen

This commit is contained in:
Martin McKeaveney 2021-05-05 14:54:12 +01:00
parent 1b2fa1bbd6 6932deb7c7
commit 037299d324
10 changed files with 220 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
hosting/envoy.dev.yaml.hbs
View File

@ -38,7 +38,7 @@ static_resources:
route:
cluster: server-dev
- match: { prefix: "/builder/" }
- match: { prefix: "/" }
route:
cluster: builder-dev
@ -46,10 +46,6 @@ static_resources:
route:
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

58
packages/bbui/src/Avatar/Avatar.svelte
View File

@ -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
class:is-disabled={disabled}
class="spectrum-Avatar"
src={url}
alt="Avatar"
/>
{#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>

49
packages/bbui/src/ProgressCircle/ProgressCircle.svelte
View File

@ -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>

2
packages/builder/index.html
View File

@ -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">

4
packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
View File

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

1
packages/builder/src/pages/index.svelte Normal file
View File

@ -0,0 +1 @@
Index route

124
packages/builder/src/pages/portal/_layout.svelte Normal file
View File

@ -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>

0
packages/builder/src/pages/portal/index.svelte Normal file
View File

2
packages/builder/vite.config.js
View File

@ -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",

63
packages/server/yarn.lock
View File

@ -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"