Merge branch 'spectrum-bbui' of github.com:Budibase/budibase into spectrum-bbui
This commit is contained in:
commit
fdc0f6b415
|
@ -10,11 +10,7 @@
|
||||||
export let disabled = false
|
export let disabled = false
|
||||||
export let icon = ""
|
export let icon = ""
|
||||||
|
|
||||||
export let xl = false
|
export let size = "M"
|
||||||
export let l = false
|
|
||||||
export let m = false
|
|
||||||
export let s = false
|
|
||||||
$: useDefault = ![xl, l, m, s].includes(true)
|
|
||||||
|
|
||||||
function longPress(element) {
|
function longPress(element) {
|
||||||
if (!longPressable) return
|
if (!longPressable) return
|
||||||
|
@ -42,11 +38,7 @@
|
||||||
class:spectrum-ActionButton--quiet={quiet}
|
class:spectrum-ActionButton--quiet={quiet}
|
||||||
class:spectrum-ActionButton--emphasized={emphasized}
|
class:spectrum-ActionButton--emphasized={emphasized}
|
||||||
class:is-selected={selected}
|
class:is-selected={selected}
|
||||||
class:spectrum-ActionButton--sizeS={s}
|
class="spectrum-ActionButton spectrum-ActionButton--size{size}"
|
||||||
class:spectrum-ActionButton--sizeM={m || useDefault}
|
|
||||||
class:spectrum-ActionButton--sizeL={l}
|
|
||||||
class:spectrum-ActionButton--sizeXL={xl}
|
|
||||||
class="spectrum-ActionButton"
|
|
||||||
{disabled}
|
{disabled}
|
||||||
on:longPress
|
on:longPress
|
||||||
on:click|preventDefault
|
on:click|preventDefault
|
||||||
|
@ -62,11 +54,7 @@
|
||||||
{/if}
|
{/if}
|
||||||
{#if icon}
|
{#if icon}
|
||||||
<svg
|
<svg
|
||||||
class:spectrum-Icon--sizeS={s}
|
class="spectrum-Icon spectrum-Icon--size{size}"
|
||||||
class:spectrum-Icon--sizeM={m || useDefault}
|
|
||||||
class:spectrum-Icon--sizeL={l}
|
|
||||||
class:spectrum-Icon--sizeXL={xl}
|
|
||||||
class="spectrum-Icon"
|
|
||||||
focusable="false"
|
focusable="false"
|
||||||
aria-hidden="true"
|
aria-hidden="true"
|
||||||
aria-label={icon}
|
aria-label={icon}
|
||||||
|
|
|
@ -1,59 +0,0 @@
|
||||||
<script>
|
|
||||||
export let onClose
|
|
||||||
export let dark = false
|
|
||||||
export let small = false
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<button class:small class:dark on:click={onClose}>×</button>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
button {
|
|
||||||
display: block;
|
|
||||||
box-sizing: border-box;
|
|
||||||
position: absolute;
|
|
||||||
font-size: var(--font-size-l);
|
|
||||||
z-index: 1000;
|
|
||||||
top: var(--spacing-l);
|
|
||||||
right: var(--spacing-l);
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
width: 1.5rem;
|
|
||||||
height: 1.5rem;
|
|
||||||
border: 0;
|
|
||||||
color: black;
|
|
||||||
border-radius: var(--border-radius-xl);
|
|
||||||
background: white;
|
|
||||||
transition: transform 0.2s cubic-bezier(0.25, 0.1, 0.25, 1),
|
|
||||||
background 0.2s cubic-bezier(0.25, 0.1, 0.25, 1);
|
|
||||||
-webkit-appearance: none;
|
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
button:hover {
|
|
||||||
background-color: var(--grey-2);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
button:active {
|
|
||||||
background-color: var(--grey-4);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.small {
|
|
||||||
font-size: var(--font-size-m);
|
|
||||||
line-height: 110%;
|
|
||||||
width: 1.3rem;
|
|
||||||
height: 1.3rem;
|
|
||||||
}
|
|
||||||
.dark {
|
|
||||||
color: white;
|
|
||||||
background: black;
|
|
||||||
}
|
|
||||||
.dark:hover {
|
|
||||||
background-color: var(--grey-8);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
.dark:active {
|
|
||||||
background-color: var(--grey-9);
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
</style>
|
|
|
@ -1,36 +0,0 @@
|
||||||
<script>
|
|
||||||
import { View } from "svench";
|
|
||||||
import Close from "./Close.svelte";
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
div {
|
|
||||||
display: block;
|
|
||||||
position: relative;
|
|
||||||
min-width: 400px;
|
|
||||||
height: 200px;
|
|
||||||
border: var(--border-dark);
|
|
||||||
border-radius: var(--border-radius-l);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<View name="default">
|
|
||||||
<div>
|
|
||||||
<Close />
|
|
||||||
</div>
|
|
||||||
</View>
|
|
||||||
<View name="dark color">
|
|
||||||
<div>
|
|
||||||
<Close dark />
|
|
||||||
</div>
|
|
||||||
</View>
|
|
||||||
<View name="small">
|
|
||||||
<div>
|
|
||||||
<Close small />
|
|
||||||
</div>
|
|
||||||
</View>
|
|
||||||
<View name="small dark">
|
|
||||||
<div>
|
|
||||||
<Close small dark />
|
|
||||||
</div>
|
|
||||||
</View>
|
|
|
@ -1,10 +1,19 @@
|
||||||
<script>
|
<script>
|
||||||
export let s = false;
|
export let small = false
|
||||||
export let disabled;
|
export let disabled
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<button on:click class="spectrum-ClearButton" class:spectrum-ClearButton--small={s} {disabled}>
|
<button
|
||||||
<svg class="spectrum-Icon spectrum-UIIcon-Cross75" focusable="false" aria-hidden="true">
|
on:click
|
||||||
<use xlink:href="#spectrum-css-icon-Cross75" />
|
class="spectrum-ClearButton"
|
||||||
</svg>
|
class:spectrum-ClearButton--small={small}
|
||||||
</button>
|
{disabled}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
class="spectrum-Icon spectrum-UIIcon-Cross75"
|
||||||
|
focusable="false"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
<use xlink:href="#spectrum-css-icon-Cross75" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
|
|
@ -20,7 +20,7 @@
|
||||||
<div class="property-group-name" on:click={onHeaderClick}>
|
<div class="property-group-name" on:click={onHeaderClick}>
|
||||||
<div class:thin class="name">{name}</div>
|
<div class:thin class="name">{name}</div>
|
||||||
<div class="icon">
|
<div class="icon">
|
||||||
<Icon s name={show ? 'Remove' : 'Add'} />
|
<Icon size="S" name={show ? "Remove" : "Add"} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="property-panel" class:show>
|
<div class="property-panel" class:show>
|
||||||
|
|
|
@ -1,23 +1,19 @@
|
||||||
<script>
|
<script>
|
||||||
import "@spectrum-css/divider/dist/index-vars.css"
|
import "@spectrum-css/divider/dist/index-vars.css"
|
||||||
export let l = false
|
export let size = "M"
|
||||||
export let m = false
|
|
||||||
export let s = false
|
|
||||||
|
|
||||||
export let vertical = false
|
export let vertical = false
|
||||||
export let noMargin = false
|
export let noMargin = false
|
||||||
export let noGrid = false
|
export let noGrid = false
|
||||||
|
|
||||||
$: useDefault = ![l, m, s].includes(true)
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<hr
|
<hr
|
||||||
class:noMargin
|
class:noMargin
|
||||||
class:noGrid
|
class:noGrid
|
||||||
class:spectrum-Divider--sizeL={l}
|
class="spectrum-Divider spectrum-Divider--{vertical
|
||||||
class:spectrum-Divider--sizeM={m || useDefault}
|
? 'vertical'
|
||||||
class:spectrum-Divider--sizeS={s}
|
: 'horizontal'} spectrum-Dialog-divider spectrum-Divider--size{size}"
|
||||||
class="spectrum-Divider spectrum-Divider--{vertical ? 'vertical' : 'horizontal'} spectrum-Dialog-divider" />
|
/>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
hr.noMargin {
|
hr.noMargin {
|
||||||
|
|
|
@ -0,0 +1,40 @@
|
||||||
|
<div class="drawer-contents">
|
||||||
|
<div class="container" data-cy="binding-dropdown-modal">
|
||||||
|
<div class="sidebar">
|
||||||
|
<slot name="sidebar" />
|
||||||
|
</div>
|
||||||
|
<div class="main">
|
||||||
|
<slot name="main" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.drawer-contents {
|
||||||
|
height: 40vh;
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
height: 100%;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 290px 1fr;
|
||||||
|
}
|
||||||
|
.sidebar {
|
||||||
|
border-right: var(--border-light);
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
font-family: var(--font-sans);
|
||||||
|
}
|
||||||
|
.main :global(textarea) {
|
||||||
|
min-height: 200px;
|
||||||
|
}
|
||||||
|
.main :global(p) {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -6,26 +6,18 @@
|
||||||
export let direction = "n"
|
export let direction = "n"
|
||||||
export let name = "Add"
|
export let name = "Add"
|
||||||
export let hidden = false
|
export let hidden = false
|
||||||
export let s = false
|
export let size = "M"
|
||||||
export let m = false
|
|
||||||
export let l = false
|
|
||||||
export let xl = false
|
|
||||||
export let hoverable = false
|
export let hoverable = false
|
||||||
export let disabled = false
|
export let disabled = false
|
||||||
|
|
||||||
$: rotation = directions.indexOf(direction) * 45
|
$: rotation = directions.indexOf(direction) * 45
|
||||||
$: useDefault = ![s, m, l, xl].includes(true)
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svg
|
<svg
|
||||||
on:click
|
on:click
|
||||||
class:hoverable
|
class:hoverable
|
||||||
class:disabled
|
class:disabled
|
||||||
class:spectrum-Icon--sizeS={s}
|
class="spectrum-Icon spectrum-Icon--size{size}"
|
||||||
class:spectrum-Icon--sizeM={m || useDefault}
|
|
||||||
class:spectrum-Icon--sizeL={l}
|
|
||||||
class:spectrum-Icon--sizeXL={xl}
|
|
||||||
class="spectrum-Icon"
|
|
||||||
focusable="false"
|
focusable="false"
|
||||||
aria-hidden={hidden}
|
aria-hidden={hidden}
|
||||||
aria-label={name}
|
aria-label={name}
|
||||||
|
|
|
@ -1,50 +0,0 @@
|
||||||
<script>
|
|
||||||
export let href,
|
|
||||||
icon,
|
|
||||||
title,
|
|
||||||
active = false
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<a {href} target="_blank" class="nav-item" class:active>
|
|
||||||
{#if icon}
|
|
||||||
<span class="nav-item-icon">
|
|
||||||
<svelte:component this={icon} />
|
|
||||||
</span>
|
|
||||||
{/if}
|
|
||||||
{#if title}
|
|
||||||
<div class="nav-item-title">{title}</div>
|
|
||||||
{/if}
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.nav-item {
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 12px;
|
|
||||||
height: 2rem;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
box-sizing: border-box;
|
|
||||||
border-radius: var(--border-radius-s);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-item:hover {
|
|
||||||
background-color: var(--grey-1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-item-title {
|
|
||||||
font-family: var(--font-sans);
|
|
||||||
font-size: var(--font-size-xs);
|
|
||||||
color: var(--ink);
|
|
||||||
font-weight: 400;
|
|
||||||
margin-left: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-item-icon {
|
|
||||||
color: var(--grey-7);
|
|
||||||
}
|
|
||||||
|
|
||||||
.active {
|
|
||||||
background-color: var(--grey-2);
|
|
||||||
}
|
|
||||||
</style>
|
|
|
@ -1,19 +0,0 @@
|
||||||
<script>
|
|
||||||
import { View } from "svench";
|
|
||||||
import Home from "./Home.svelte";
|
|
||||||
import Contribution from "../Icons/Contribution.svelte";
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<View name="default">
|
|
||||||
<Home
|
|
||||||
href="https://github.com/Budibase/budibase/blob/master/CONTRIBUTING.md"
|
|
||||||
title="Contribute"
|
|
||||||
icon={Contribution} />
|
|
||||||
</View>
|
|
||||||
<View name="active">
|
|
||||||
<Home
|
|
||||||
active
|
|
||||||
href="https://github.com/Budibase/budibase/blob/master/CONTRIBUTING.md"
|
|
||||||
title="Contribute"
|
|
||||||
icon={Contribution} />
|
|
||||||
</View>
|
|
|
@ -42,7 +42,7 @@
|
||||||
{title}
|
{title}
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
<Divider m />
|
<Divider size="M" />
|
||||||
<!-- TODO: Remove content-grid class once Layout components are in bbui -->
|
<!-- TODO: Remove content-grid class once Layout components are in bbui -->
|
||||||
<section class="spectrum-Dialog-content content-grid">
|
<section class="spectrum-Dialog-content content-grid">
|
||||||
<slot />
|
<slot />
|
||||||
|
|
|
@ -1,38 +1,63 @@
|
||||||
<script>
|
<script>
|
||||||
import "@spectrum-css/progressbar/dist/index-vars.css"
|
import "@spectrum-css/progressbar/dist/index-vars.css"
|
||||||
import { tweened } from 'svelte/motion';
|
import { tweened } from "svelte/motion"
|
||||||
import { cubicOut } from 'svelte/easing';
|
import { cubicOut } from "svelte/easing"
|
||||||
|
|
||||||
export let value = false
|
export let value = false
|
||||||
export let easing = cubicOut
|
export let easing = cubicOut
|
||||||
export let duration = 1000;
|
export let duration = 1000
|
||||||
export let width = false;
|
export let width = false
|
||||||
export let sideLabel = false
|
export let sideLabel = false
|
||||||
export let overBackground = false
|
export let overBackground = false
|
||||||
|
|
||||||
export let s = false;
|
export let size = "M"
|
||||||
export let m = false;
|
|
||||||
export let l = false;
|
|
||||||
export let xl = false;
|
|
||||||
|
|
||||||
const progress = tweened(0, {
|
const progress = tweened(0, {
|
||||||
duration: duration,
|
duration: duration,
|
||||||
easing: easing
|
easing: easing,
|
||||||
});
|
})
|
||||||
|
|
||||||
$: if (value) $progress = value
|
$: if (value) $progress = value
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
<div
|
||||||
<div class:spectrum-ProgressBar--indeterminate={!value} class:spectrum-ProgressBar--sideLabel={sideLabel} class:spectrum-ProgressBar--sizeS={s} class:spectrum-ProgressBar--sizeM={m} class:spectrum-ProgressBar--sizeL={l} class:spectrum-ProgressBar--sizeXL={xl} class="spectrum-ProgressBar" value={$progress} role="progressbar" aria-valuenow={$progress} aria-valuemin="0" aria-valuemax="100" style={width ? `width: ${width}px;` : ''}>
|
class:spectrum-ProgressBar--indeterminate={!value}
|
||||||
{#if $$slots}
|
class:spectrum-ProgressBar--sideLabel={sideLabel}
|
||||||
<div class:spectrum-FieldLabel--sizeS={s} class:spectrum-FieldLabel--sizeM={m} class:spectrum-FieldLabel--sizeL={l} class:spectrum-FieldLabel--sizeXL={xl} class="spectrum-FieldLabel spectrum-ProgressBar-label"><slot /></div>
|
class="spectrum-ProgressBar spectrum-ProgressBar--size{size}"
|
||||||
{/if}
|
value={$progress}
|
||||||
{#if value}
|
role="progressbar"
|
||||||
<div class:spectrum-FieldLabel--sizeS={s} class:spectrum-FieldLabel--sizeM={m} class:spectrum-FieldLabel--sizeL={l} class:spectrum-FieldLabel--sizeXL={xl} class="spectrum-FieldLabel spectrum-ProgressBar-percentage">{Math.round($progress)}%</div>
|
aria-valuenow={$progress}
|
||||||
{/if}
|
aria-valuemin="0"
|
||||||
<div class="spectrum-ProgressBar-track">
|
aria-valuemax="100"
|
||||||
<div class="spectrum-ProgressBar-fill" style={value ? `width: ${$progress}%` : ''}></div>
|
style={width ? `width: ${width}px;` : ""}
|
||||||
|
>
|
||||||
|
{#if $$slots}
|
||||||
|
<div
|
||||||
|
class:spectrum-FieldLabel--sizeS={s}
|
||||||
|
class:spectrum-FieldLabel--sizeM={m}
|
||||||
|
class:spectrum-FieldLabel--sizeL={l}
|
||||||
|
class:spectrum-FieldLabel--sizeXL={xl}
|
||||||
|
class="spectrum-FieldLabel spectrum-ProgressBar-label"
|
||||||
|
>
|
||||||
|
<slot />
|
||||||
</div>
|
</div>
|
||||||
<div class="spectrum-ProgressBar-label" hidden=""></div>
|
{/if}
|
||||||
|
{#if value}
|
||||||
|
<div
|
||||||
|
class:spectrum-FieldLabel--sizeS={s}
|
||||||
|
class:spectrum-FieldLabel--sizeM={m}
|
||||||
|
class:spectrum-FieldLabel--sizeL={l}
|
||||||
|
class:spectrum-FieldLabel--sizeXL={xl}
|
||||||
|
class="spectrum-FieldLabel spectrum-ProgressBar-percentage"
|
||||||
|
>
|
||||||
|
{Math.round($progress)}%
|
||||||
|
</div>
|
||||||
|
{/if}
|
||||||
|
<div class="spectrum-ProgressBar-track">
|
||||||
|
<div
|
||||||
|
class="spectrum-ProgressBar-fill"
|
||||||
|
style={value ? `width: ${$progress}%` : ""}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="spectrum-ProgressBar-label" hidden="" />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -13,5 +13,5 @@
|
||||||
<Checkbox value={selected} />
|
<Checkbox value={selected} />
|
||||||
{/if}
|
{/if}
|
||||||
{#if allowEditRows}
|
{#if allowEditRows}
|
||||||
<ActionButton s on:click={onEdit}>Edit</ActionButton>
|
<ActionButton size="S" on:click={onEdit}>Edit</ActionButton>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
|
@ -10,6 +10,7 @@ export { default as Select } from "./Form/Select.svelte"
|
||||||
export { default as Combobox } from "./Form/Combobox.svelte"
|
export { default as Combobox } from "./Form/Combobox.svelte"
|
||||||
export { default as Dropzone } from "./Form/Dropzone.svelte"
|
export { default as Dropzone } from "./Form/Dropzone.svelte"
|
||||||
export { default as Drawer } from "./Drawer/Drawer.svelte"
|
export { default as Drawer } from "./Drawer/Drawer.svelte"
|
||||||
|
export { default as DrawerContentWithSidebar } from "./Drawer/DrawerContentWithSidebar.svelte"
|
||||||
export { default as Avatar } from "./Avatar/Avatar.svelte"
|
export { default as Avatar } from "./Avatar/Avatar.svelte"
|
||||||
export { default as ActionButton } from "./ActionButton/ActionButton.svelte"
|
export { default as ActionButton } from "./ActionButton/ActionButton.svelte"
|
||||||
export { default as ActionGroup } from "./ActionGroup/ActionGroup.svelte"
|
export { default as ActionGroup } from "./ActionGroup/ActionGroup.svelte"
|
||||||
|
@ -21,7 +22,6 @@ export { default as Icon, directions } from "./Icon/Icon.svelte"
|
||||||
export { default as Toggle } from "./Form/Toggle.svelte"
|
export { default as Toggle } from "./Form/Toggle.svelte"
|
||||||
export { default as RadioGroup } from "./Form/RadioGroup.svelte"
|
export { default as RadioGroup } from "./Form/RadioGroup.svelte"
|
||||||
export { default as Checkbox } from "./Form/Checkbox.svelte"
|
export { default as Checkbox } from "./Form/Checkbox.svelte"
|
||||||
export { default as Home } from "./Links/Home.svelte"
|
|
||||||
export { default as DetailSummary } from "./DetailSummary/DetailSummary.svelte"
|
export { default as DetailSummary } from "./DetailSummary/DetailSummary.svelte"
|
||||||
export { default as Popover } from "./Popover/Popover.svelte"
|
export { default as Popover } from "./Popover/Popover.svelte"
|
||||||
export { default as ProgressBar } from "./ProgressBar/ProgressBar.svelte"
|
export { default as ProgressBar } from "./ProgressBar/ProgressBar.svelte"
|
||||||
|
@ -29,7 +29,6 @@ export { default as ProgressCircle } from "./ProgressCircle/ProgressCircle.svelt
|
||||||
export { default as Label } from "./Styleguide/Label.svelte"
|
export { default as Label } from "./Styleguide/Label.svelte"
|
||||||
export { default as Layout } from "./Layout/Layout.svelte"
|
export { default as Layout } from "./Layout/Layout.svelte"
|
||||||
export { default as Link } from "./Link/Link.svelte"
|
export { default as Link } from "./Link/Link.svelte"
|
||||||
export { default as Close } from "./Button/Close.svelte"
|
|
||||||
export { default as Menu } from "./Menu/Menu.svelte"
|
export { default as Menu } from "./Menu/Menu.svelte"
|
||||||
export { default as MenuSection } from "./Menu/Section.svelte"
|
export { default as MenuSection } from "./Menu/Section.svelte"
|
||||||
export { default as MenuSeparator } from "./Menu/Separator.svelte"
|
export { default as MenuSeparator } from "./Menu/Separator.svelte"
|
||||||
|
|
|
@ -66,7 +66,7 @@
|
||||||
<div bind:this={anchors[idx]}>
|
<div bind:this={anchors[idx]}>
|
||||||
<ActionButton
|
<ActionButton
|
||||||
quiet
|
quiet
|
||||||
s
|
size="S"
|
||||||
icon={tab.icon}
|
icon={tab.icon}
|
||||||
disabled={tab.disabled}
|
disabled={tab.disabled}
|
||||||
on:click={tab.disabled ? null : () => onChangeTab(idx)}>
|
on:click={tab.disabled ? null : () => onChangeTab(idx)}>
|
||||||
|
|
|
@ -47,8 +47,4 @@
|
||||||
justify-content: flex-end;
|
justify-content: flex-end;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
div.icon i {
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<script>
|
<script>
|
||||||
import groupBy from "lodash/fp/groupBy"
|
import groupBy from "lodash/fp/groupBy"
|
||||||
import { Input, TextArea, Heading, Spacer, Label } from "@budibase/bbui"
|
import { Input, TextArea, Heading, Layout } from "@budibase/bbui"
|
||||||
import { createEventDispatcher } from "svelte"
|
import { createEventDispatcher } from "svelte"
|
||||||
import { isValid } from "@budibase/string-templates"
|
import { isValid } from "@budibase/string-templates"
|
||||||
import { handlebarsCompletions } from "constants/completions"
|
import { handlebarsCompletions } from "constants/completions"
|
||||||
|
@ -46,43 +46,50 @@
|
||||||
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="list">
|
<div class="list">
|
||||||
<Heading s h3>Available bindings</Heading>
|
<Layout>
|
||||||
<Spacer medium />
|
<div class="section">
|
||||||
<Input extraThin placeholder="Search" bind:value={search} />
|
<Heading s h3>Available bindings</Heading>
|
||||||
<Spacer medium />
|
<Input extraThin placeholder="Search" bind:value={search} />
|
||||||
{#each categories as [categoryName, bindings]}
|
|
||||||
<Heading xs h4>{categoryName}</Heading>
|
|
||||||
<Spacer extraSmall />
|
|
||||||
{#each bindableProperties.filter(binding =>
|
|
||||||
binding.label.match(searchRgx)
|
|
||||||
) as binding}
|
|
||||||
<div class="binding" on:click={() => addToText(binding)}>
|
|
||||||
<span class="binding__label">{binding.label}</span>
|
|
||||||
<span class="binding__type">{binding.type}</span>
|
|
||||||
<br />
|
|
||||||
<div class="binding__description">{binding.description || ''}</div>
|
|
||||||
</div>
|
|
||||||
{/each}
|
|
||||||
{/each}
|
|
||||||
<Heading xs h3>Helpers</Heading>
|
|
||||||
<Spacer extraSmall />
|
|
||||||
{#each helpers.filter(helper => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
|
|
||||||
<div class="binding" on:click={() => addToText(helper)}>
|
|
||||||
<span class="binding__label">{helper.label}</span>
|
|
||||||
<br />
|
|
||||||
<div class="binding__description">
|
|
||||||
{@html helper.description || ''}
|
|
||||||
</div>
|
|
||||||
<pre>{helper.example || ''}</pre>
|
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
<div class="section">
|
||||||
|
{#each categories as [categoryName, bindings]}
|
||||||
|
<Heading xs h4>{categoryName}</Heading>
|
||||||
|
{#each bindableProperties.filter((binding) =>
|
||||||
|
binding.label.match(searchRgx)
|
||||||
|
) as binding}
|
||||||
|
<div class="binding" on:click={() => addToText(binding)}>
|
||||||
|
<span class="binding__label">{binding.label}</span>
|
||||||
|
<span class="binding__type">{binding.type}</span>
|
||||||
|
<br />
|
||||||
|
<div class="binding__description">
|
||||||
|
{binding.description || ""}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
<div class="section">
|
||||||
|
<Heading xs h3>Helpers</Heading>
|
||||||
|
{#each helpers.filter((helper) => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
|
||||||
|
<div class="binding" on:click={() => addToText(helper)}>
|
||||||
|
<span class="binding__label">{helper.label}</span>
|
||||||
|
<br />
|
||||||
|
<div class="binding__description">
|
||||||
|
{@html helper.description || ""}
|
||||||
|
</div>
|
||||||
|
<pre>{helper.example || ''}</pre>
|
||||||
|
</div>
|
||||||
|
{/each}
|
||||||
|
</div>
|
||||||
|
</Layout>
|
||||||
</div>
|
</div>
|
||||||
<div class="text">
|
<div class="text">
|
||||||
<TextArea
|
<TextArea
|
||||||
bind:getCaretPosition
|
bind:getCaretPosition
|
||||||
thin
|
thin
|
||||||
bind:value
|
bind:value
|
||||||
placeholder="Add text, or click the objects on the left to add them to the textbox." />
|
placeholder="Add text, or click the objects on the left to add them to the textbox."
|
||||||
|
/>
|
||||||
{#if !validity}
|
{#if !validity}
|
||||||
<p class="syntax-error">
|
<p class="syntax-error">
|
||||||
Current Handlebars syntax is invalid, please check the guide
|
Current Handlebars syntax is invalid, please check the guide
|
||||||
|
@ -98,22 +105,17 @@
|
||||||
height: 40vh;
|
height: 40vh;
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 280px 1fr;
|
grid-template-columns: 290px 1fr;
|
||||||
}
|
}
|
||||||
|
|
||||||
.list {
|
.list {
|
||||||
|
grid-gap: var(--spacing-s);
|
||||||
border-right: var(--border-light);
|
border-right: var(--border-light);
|
||||||
padding: var(--spacing-l);
|
overflow-y: auto;
|
||||||
overflow: auto;
|
|
||||||
}
|
}
|
||||||
.list {
|
.section {
|
||||||
border-right: var(--border-light);
|
display: grid;
|
||||||
padding: var(--spacing-l);
|
grid-gap: var(--spacing-s);
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.text {
|
.text {
|
||||||
|
@ -159,21 +161,6 @@
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.editor {
|
|
||||||
padding-left: var(--spacing-l);
|
|
||||||
}
|
|
||||||
.editor :global(textarea) {
|
|
||||||
min-height: 60px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.controls {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr auto;
|
|
||||||
grid-gap: var(--spacing-l);
|
|
||||||
align-items: center;
|
|
||||||
margin-top: var(--spacing-m);
|
|
||||||
}
|
|
||||||
|
|
||||||
.syntax-error {
|
.syntax-error {
|
||||||
color: var(--red);
|
color: var(--red);
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
|
|
|
@ -30,7 +30,7 @@
|
||||||
<div>
|
<div>
|
||||||
<Input readonly value={fullWebhookURL(value)} />
|
<Input readonly value={fullWebhookURL(value)} />
|
||||||
<div class="icon" on:click={() => copyToClipboard()}>
|
<div class="icon" on:click={() => copyToClipboard()}>
|
||||||
<Icon s name="Copy" />
|
<Icon size="S" name="Copy" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -11,19 +11,21 @@
|
||||||
|
|
||||||
<form>
|
<form>
|
||||||
{#each Object.keys(schema) as configKey}
|
{#each Object.keys(schema) as configKey}
|
||||||
{#if schema[configKey].type === 'object'}
|
{#if schema[configKey].type === "object"}
|
||||||
<Label>{capitalise(configKey)}</Label>
|
<Label>{capitalise(configKey)}</Label>
|
||||||
<Spacer small />
|
<Spacer small />
|
||||||
<KeyValueBuilder
|
<KeyValueBuilder
|
||||||
defaults={schema[configKey].default}
|
defaults={schema[configKey].default}
|
||||||
bind:object={integration[configKey]} />
|
bind:object={integration[configKey]}
|
||||||
|
/>
|
||||||
{:else}
|
{:else}
|
||||||
<div class="form-row">
|
<div class="form-row">
|
||||||
<Label>{capitalise(configKey)}</Label>
|
<Label>{capitalise(configKey)}</Label>
|
||||||
<Input
|
<Input
|
||||||
type={schema[configKey].type}
|
type={schema[configKey].type}
|
||||||
on:change
|
on:change
|
||||||
bind:value={integration[configKey]} />
|
bind:value={integration[configKey]}
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
{/each}
|
{/each}
|
||||||
|
|
|
@ -22,7 +22,7 @@
|
||||||
|
|
||||||
<ActionMenu>
|
<ActionMenu>
|
||||||
<div slot="control" class="icon">
|
<div slot="control" class="icon">
|
||||||
<Icon s hoverable name="MoreSmallList" />
|
<Icon size="S" hoverable name="MoreSmallList" />
|
||||||
</div>
|
</div>
|
||||||
<MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
|
<MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
|
||||||
</ActionMenu>
|
</ActionMenu>
|
||||||
|
|
|
@ -15,7 +15,7 @@
|
||||||
|
|
||||||
<ActionMenu>
|
<ActionMenu>
|
||||||
<div slot="control" class="icon">
|
<div slot="control" class="icon">
|
||||||
<Icon s hoverable name="MoreSmallList" />
|
<Icon size="S" hoverable name="MoreSmallList" />
|
||||||
</div>
|
</div>
|
||||||
<MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
|
<MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
|
||||||
</ActionMenu>
|
</ActionMenu>
|
||||||
|
|
|
@ -36,7 +36,7 @@
|
||||||
on:change={event => onChange(event.detail)}
|
on:change={event => onChange(event.detail)}
|
||||||
{placeholder} />
|
{placeholder} />
|
||||||
<div class="icon" on:click={bindingDrawer.show}>
|
<div class="icon" on:click={bindingDrawer.show}>
|
||||||
<Icon s name="FlashOn" />
|
<Icon size="S" name="FlashOn" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Drawer bind:this={bindingDrawer} {title}>
|
<Drawer bind:this={bindingDrawer} {title}>
|
||||||
|
|
|
@ -29,13 +29,13 @@
|
||||||
<div class="content">
|
<div class="content">
|
||||||
{#if withArrow}
|
{#if withArrow}
|
||||||
<div class:opened class="icon arrow">
|
<div class:opened class="icon arrow">
|
||||||
<Icon s name="ChevronRight" />
|
<Icon size="S" name="ChevronRight" />
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<slot name="icon" />
|
<slot name="icon" />
|
||||||
{#if icon}
|
{#if icon}
|
||||||
<div class="icon"><Icon s name={icon} /></div>
|
<div class="icon"><Icon size="S" name={icon} /></div>
|
||||||
{/if}
|
{/if}
|
||||||
<div class="text">{text}</div>
|
<div class="text">{text}</div>
|
||||||
{#if withActions}
|
{#if withActions}
|
||||||
|
|
|
@ -32,11 +32,8 @@
|
||||||
return enrichedStructure
|
return enrichedStructure
|
||||||
}
|
}
|
||||||
|
|
||||||
const onItemChosen = async (item, idx) => {
|
const onItemChosen = async (item) => {
|
||||||
if (item.isCategory) {
|
if (!item.isCategory) {
|
||||||
// Select and open this category
|
|
||||||
selectedIndex = idx
|
|
||||||
} else {
|
|
||||||
// Add this component
|
// Add this component
|
||||||
await store.actions.components.create(item.component)
|
await store.actions.components.create(item.component)
|
||||||
}
|
}
|
||||||
|
@ -44,15 +41,14 @@
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<ActionGroup>
|
<ActionGroup>
|
||||||
{#each enrichedStructure as item, idx}
|
{#each enrichedStructure as item}
|
||||||
<ActionMenu disabled={!item.isCategory}>
|
<ActionMenu disabled={!item.isCategory}>
|
||||||
<ActionButton
|
<ActionButton
|
||||||
icon={item.icon}
|
icon={item.icon}
|
||||||
xs
|
|
||||||
primary
|
primary
|
||||||
quiet
|
quiet
|
||||||
slot="control"
|
slot="control"
|
||||||
on:click={() => onItemChosen(item, idx)}
|
on:click={() => onItemChosen(item)}
|
||||||
>
|
>
|
||||||
{item.name}
|
{item.name}
|
||||||
</ActionButton>
|
</ActionButton>
|
||||||
|
|
|
@ -68,7 +68,7 @@
|
||||||
|
|
||||||
<ActionMenu>
|
<ActionMenu>
|
||||||
<div slot="control" class="icon">
|
<div slot="control" class="icon">
|
||||||
<Icon s hoverable name="MoreSmallList" />
|
<Icon size="S" hoverable name="MoreSmallList" />
|
||||||
</div>
|
</div>
|
||||||
<MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
|
<MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
|
||||||
<MenuItem noClose icon="ChevronUp" on:click={moveUpComponent}
|
<MenuItem noClose icon="ChevronUp" on:click={moveUpComponent}
|
||||||
|
|
|
@ -41,7 +41,7 @@
|
||||||
|
|
||||||
<ActionMenu>
|
<ActionMenu>
|
||||||
<div slot="control" class="icon">
|
<div slot="control" class="icon">
|
||||||
<Icon s hoverable name="MoreSmallList" />
|
<Icon size="S" hoverable name="MoreSmallList" />
|
||||||
</div>
|
</div>
|
||||||
<MenuItem icon="Edit" on:click={editLayoutNameModal.show}>Edit</MenuItem>
|
<MenuItem icon="Edit" on:click={editLayoutNameModal.show}>Edit</MenuItem>
|
||||||
<MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
|
<MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
|
||||||
|
|
|
@ -25,7 +25,7 @@
|
||||||
|
|
||||||
<ActionMenu>
|
<ActionMenu>
|
||||||
<div slot="control" class="icon">
|
<div slot="control" class="icon">
|
||||||
<Icon s hoverable name="MoreSmallList" />
|
<Icon size="S" hoverable name="MoreSmallList" />
|
||||||
</div>
|
</div>
|
||||||
<MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
|
<MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
|
||||||
</ActionMenu>
|
</ActionMenu>
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
<script>
|
<script>
|
||||||
import groupBy from "lodash/fp/groupBy"
|
import groupBy from "lodash/fp/groupBy"
|
||||||
import { Search, TextArea, Heading, Spacer, Label } from "@budibase/bbui"
|
import { Search, TextArea, Heading, Label, DrawerContentWithSidebar, Layout } from "@budibase/bbui"
|
||||||
import { createEventDispatcher } from "svelte"
|
import { createEventDispatcher } from "svelte"
|
||||||
import { isValid } from "@budibase/string-templates"
|
import { isValid } from "@budibase/string-templates"
|
||||||
import {
|
import {
|
||||||
|
@ -57,16 +57,15 @@
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="drawer-contents">
|
<DrawerContentWithSidebar>
|
||||||
<div class="container" data-cy="binding-dropdown-modal">
|
<svelte:fragment slot="sidebar">
|
||||||
<div class="list">
|
<Layout>
|
||||||
<Search placeholder="Search" bind:value={search} />
|
<Search placeholder="Search" bind:value={search} />
|
||||||
<Spacer medium />
|
{#if context}
|
||||||
{#if context}
|
<section>
|
||||||
<Heading xs h3>Columns</Heading>
|
<Heading xs h3>Columns</Heading>
|
||||||
<Spacer small />
|
|
||||||
<ul>
|
<ul>
|
||||||
{#each context.filter(context =>
|
{#each context.filter((context) =>
|
||||||
context.readableBinding.match(searchRgx)
|
context.readableBinding.match(searchRgx)
|
||||||
) as { readableBinding }}
|
) as { readableBinding }}
|
||||||
<li on:click={() => addToText(readableBinding)}>
|
<li on:click={() => addToText(readableBinding)}>
|
||||||
|
@ -74,13 +73,13 @@
|
||||||
</li>
|
</li>
|
||||||
{/each}
|
{/each}
|
||||||
</ul>
|
</ul>
|
||||||
{/if}
|
</section>
|
||||||
<Spacer small />
|
{/if}
|
||||||
{#if instance}
|
{#if instance}
|
||||||
|
<section>
|
||||||
<Heading xs h3>Components</Heading>
|
<Heading xs h3>Components</Heading>
|
||||||
<Spacer small />
|
|
||||||
<ul>
|
<ul>
|
||||||
{#each instance.filter(instance =>
|
{#each instance.filter((instance) =>
|
||||||
instance.readableBinding.match(searchRgx)
|
instance.readableBinding.match(searchRgx)
|
||||||
) as { readableBinding }}
|
) as { readableBinding }}
|
||||||
<li on:click={() => addToText(readableBinding)}>
|
<li on:click={() => addToText(readableBinding)}>
|
||||||
|
@ -88,12 +87,12 @@
|
||||||
</li>
|
</li>
|
||||||
{/each}
|
{/each}
|
||||||
</ul>
|
</ul>
|
||||||
{/if}
|
</section>
|
||||||
<Spacer small />
|
{/if}
|
||||||
|
<section>
|
||||||
<Heading xs h3>Helpers</Heading>
|
<Heading xs h3>Helpers</Heading>
|
||||||
<Spacer small />
|
|
||||||
<ul>
|
<ul>
|
||||||
{#each helpers.filter(helper => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
|
{#each helpers.filter((helper) => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
|
||||||
<li on:click={() => addToText(helper.text)}>
|
<li on:click={() => addToText(helper.text)}>
|
||||||
<div>
|
<div>
|
||||||
<Label extraSmall>{helper.displayText}</Label>
|
<Label extraSmall>{helper.displayText}</Label>
|
||||||
|
@ -105,48 +104,32 @@
|
||||||
</li>
|
</li>
|
||||||
{/each}
|
{/each}
|
||||||
</ul>
|
</ul>
|
||||||
</div>
|
</section>
|
||||||
<div class="text">
|
</Layout>
|
||||||
<TextArea
|
</svelte:fragment>
|
||||||
bind:getCaretPosition
|
<div class="main" slot="main">
|
||||||
bind:value
|
<TextArea
|
||||||
placeholder="Add text, or click the objects on the left to add them to the textbox." />
|
bind:getCaretPosition
|
||||||
{#if !valid}
|
bind:value
|
||||||
<p class="syntax-error">
|
placeholder="Add text, or click the objects on the left to add them to the textbox."
|
||||||
Current Handlebars syntax is invalid, please check the guide
|
/>
|
||||||
<a href="https://handlebarsjs.com/guide/">here</a>
|
{#if !valid}
|
||||||
for more details.
|
<p class="syntax-error">
|
||||||
</p>
|
Current Handlebars syntax is invalid, please check the guide
|
||||||
{/if}
|
<a href="https://handlebarsjs.com/guide/">here</a>
|
||||||
</div>
|
for more details.
|
||||||
|
</p>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</DrawerContentWithSidebar>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.container {
|
.main {
|
||||||
height: 100%;
|
padding: var(--spacing-m)
|
||||||
|
}
|
||||||
|
section {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 260px 1fr;
|
grid-gap: var(--spacing-s);
|
||||||
}
|
|
||||||
.list {
|
|
||||||
border-right: var(--border-light);
|
|
||||||
padding: var(--spacing-l);
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.list::-webkit-scrollbar {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.text {
|
|
||||||
padding: var(--spacing-l);
|
|
||||||
font-family: var(--font-sans);
|
|
||||||
}
|
|
||||||
.text :global(textarea) {
|
|
||||||
min-height: 200px;
|
|
||||||
}
|
|
||||||
.text :global(p) {
|
|
||||||
margin: 0;
|
|
||||||
}
|
}
|
||||||
ul {
|
ul {
|
||||||
list-style: none;
|
list-style: none;
|
||||||
|
@ -160,10 +143,11 @@
|
||||||
font-family: var(--font-sans);
|
font-family: var(--font-sans);
|
||||||
font-size: var(--font-size-xs);
|
font-size: var(--font-size-xs);
|
||||||
color: var(--grey-7);
|
color: var(--grey-7);
|
||||||
padding: var(--spacing-m) 0;
|
padding: var(--spacing-m);
|
||||||
margin: auto 0px;
|
margin: auto 0px;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
|
border-radius: var(--spacing-s);
|
||||||
border: var(--border-light);
|
border: var(--border-light);
|
||||||
border-width: 1px 0 1px 0;
|
border-width: 1px 0 1px 0;
|
||||||
}
|
}
|
||||||
|
@ -174,19 +158,14 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
li:hover {
|
li:hover {
|
||||||
color: var(--ink);
|
background-color: var(--grey-2);
|
||||||
font-weight: 500;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
li:active {
|
li:active {
|
||||||
color: var(--blue);
|
color: var(--blue);
|
||||||
}
|
}
|
||||||
|
|
||||||
.drawer-contents {
|
|
||||||
height: 40vh;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.syntax-error {
|
.syntax-error {
|
||||||
padding-top: var(--spacing-m);
|
padding-top: var(--spacing-m);
|
||||||
color: var(--red);
|
color: var(--red);
|
||||||
|
|
|
@ -149,7 +149,7 @@
|
||||||
</li>
|
</li>
|
||||||
{/each}
|
{/each}
|
||||||
</ul>
|
</ul>
|
||||||
<Divider s />
|
<Divider size="S" />
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<Heading xs h3>Views</Heading>
|
<Heading xs h3>Views</Heading>
|
||||||
</div>
|
</div>
|
||||||
|
@ -162,7 +162,7 @@
|
||||||
</li>
|
</li>
|
||||||
{/each}
|
{/each}
|
||||||
</ul>
|
</ul>
|
||||||
<Divider s />
|
<Divider size="S" />
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<Heading xs h3>Relationships</Heading>
|
<Heading xs h3>Relationships</Heading>
|
||||||
</div>
|
</div>
|
||||||
|
@ -175,7 +175,7 @@
|
||||||
</li>
|
</li>
|
||||||
{/each}
|
{/each}
|
||||||
</ul>
|
</ul>
|
||||||
<Divider s />
|
<Divider size="S" />
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<Heading xs h3>Queries</Heading>
|
<Heading xs h3>Queries</Heading>
|
||||||
</div>
|
</div>
|
||||||
|
@ -190,7 +190,7 @@
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
{#if otherSources?.length}
|
{#if otherSources?.length}
|
||||||
<Divider s />
|
<Divider size="S" />
|
||||||
<div class="title">
|
<div class="title">
|
||||||
<Heading extraSmall>Other</Heading>
|
<Heading extraSmall>Other</Heading>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -120,7 +120,7 @@
|
||||||
on:click={() => deleteAction(index)}
|
on:click={() => deleteAction(index)}
|
||||||
style="margin-left: auto;"
|
style="margin-left: auto;"
|
||||||
>
|
>
|
||||||
<Icon s hoverable name="Close" />
|
<Icon size="S" hoverable name="Close" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/each}
|
{/each}
|
||||||
|
|
|
@ -70,7 +70,7 @@
|
||||||
bindings={bindableProperties}
|
bindings={bindableProperties}
|
||||||
on:change={event => updateFieldValue(idx, event.detail)} />
|
on:change={event => updateFieldValue(idx, event.detail)} />
|
||||||
<ActionButton
|
<ActionButton
|
||||||
s
|
size="S"
|
||||||
quiet
|
quiet
|
||||||
icon="Delete"
|
icon="Delete"
|
||||||
on:click={() => removeField(field[0])} />
|
on:click={() => removeField(field[0])} />
|
||||||
|
|
|
@ -87,7 +87,7 @@
|
||||||
class="icon"
|
class="icon"
|
||||||
data-cy={`${key}-binding-button`}
|
data-cy={`${key}-binding-button`}
|
||||||
on:click={bindingDrawer.show}>
|
on:click={bindingDrawer.show}>
|
||||||
<Icon s name="FlashOn" />
|
<Icon size="S" name="FlashOn" />
|
||||||
</div>
|
</div>
|
||||||
<Drawer bind:this={bindingDrawer} title={capitalise(key)}>
|
<Drawer bind:this={bindingDrawer} title={capitalise(key)}>
|
||||||
<svelte:fragment slot="description">
|
<svelte:fragment slot="description">
|
||||||
|
|
|
@ -20,7 +20,7 @@
|
||||||
|
|
||||||
<div class="root">
|
<div class="root">
|
||||||
<Heading m>Your Apps</Heading>
|
<Heading m>Your Apps</Heading>
|
||||||
<Divider m />
|
<Divider size="M" />
|
||||||
{#await promise}
|
{#await promise}
|
||||||
<div class="spinner-container">
|
<div class="spinner-container">
|
||||||
<Spinner size="30" />
|
<Spinner size="30" />
|
||||||
|
|
|
@ -9,7 +9,9 @@
|
||||||
|
|
||||||
let unsaved = false
|
let unsaved = false
|
||||||
|
|
||||||
$: datasource = $datasources.list.find(ds => ds._id === $datasources.selected)
|
$: datasource = $datasources.list.find(
|
||||||
|
(ds) => ds._id === $datasources.selected
|
||||||
|
)
|
||||||
$: integration = datasource && $integrations[datasource.source]
|
$: integration = datasource && $integrations[datasource.source]
|
||||||
|
|
||||||
async function saveDatasource() {
|
async function saveDatasource() {
|
||||||
|
@ -46,7 +48,8 @@
|
||||||
<svelte:component
|
<svelte:component
|
||||||
this={ICONS[datasource.source]}
|
this={ICONS[datasource.source]}
|
||||||
height="26"
|
height="26"
|
||||||
width="26" />
|
width="26"
|
||||||
|
/>
|
||||||
<Heading m>{datasource.name}</Heading>
|
<Heading m>{datasource.name}</Heading>
|
||||||
</header>
|
</header>
|
||||||
<Body small grey lh>{integration.description}</Body>
|
<Body small grey lh>{integration.description}</Body>
|
||||||
|
@ -63,17 +66,18 @@
|
||||||
<IntegrationConfigForm
|
<IntegrationConfigForm
|
||||||
schema={integration.datasource}
|
schema={integration.datasource}
|
||||||
integration={datasource.config}
|
integration={datasource.config}
|
||||||
on:change={setUnsaved} />
|
on:change={setUnsaved}
|
||||||
|
/>
|
||||||
<Spacer extraLarge />
|
<Spacer extraLarge />
|
||||||
<Divider />
|
<Divider />
|
||||||
<Spacer extraLarge />
|
<Spacer extraLarge />
|
||||||
<div class="query-header">
|
<div class="query-header">
|
||||||
<Heading s>Queries</Heading>
|
<Heading s>Queries</Heading>
|
||||||
<Button secondary on:click={() => $goto('./new')}>Add Query</Button>
|
<Button secondary on:click={() => $goto("./new")}>Add Query</Button>
|
||||||
</div>
|
</div>
|
||||||
<Spacer extraLarge />
|
<Spacer extraLarge />
|
||||||
<div class="query-list">
|
<div class="query-list">
|
||||||
{#each $queries.list.filter(query => query.datasourceId === datasource._id) as query}
|
{#each $queries.list.filter((query) => query.datasourceId === datasource._id) as query}
|
||||||
<div class="query-list-item" on:click={() => onClickQuery(query)}>
|
<div class="query-list-item" on:click={() => onClickQuery(query)}>
|
||||||
<p class="query-name">{query.name}</p>
|
<p class="query-name">{query.name}</p>
|
||||||
<p>{capitalise(query.queryVerb)}</p>
|
<p>{capitalise(query.queryVerb)}</p>
|
||||||
|
@ -86,11 +90,6 @@
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
h3 {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 24px;
|
|
||||||
}
|
|
||||||
|
|
||||||
section {
|
section {
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
width: 640px;
|
width: 640px;
|
||||||
|
|
|
@ -1,6 +1,8 @@
|
||||||
<script>
|
<script>
|
||||||
import { goto } from "@roxi/routify"
|
import {
|
||||||
import { Home as Link, SideNavigation as Navigation, SideNavigationItem as Item} from "@budibase/bbui"
|
SideNavigation as Navigation,
|
||||||
|
SideNavigationItem as Item,
|
||||||
|
} from "@budibase/bbui"
|
||||||
import BuilderSettingsButton from "components/start/BuilderSettingsButton.svelte"
|
import BuilderSettingsButton from "components/start/BuilderSettingsButton.svelte"
|
||||||
import Logo from "/assets/budibase-logo.svg"
|
import Logo from "/assets/budibase-logo.svg"
|
||||||
</script>
|
</script>
|
||||||
|
@ -11,19 +13,25 @@
|
||||||
<div class="nav-section">
|
<div class="nav-section">
|
||||||
<div class="nav-top">
|
<div class="nav-top">
|
||||||
<Navigation>
|
<Navigation>
|
||||||
<Item href="/builder/" icon="Apps" selected>
|
<Item href="/builder/" icon="Apps" selected>Apps</Item>
|
||||||
Apps
|
|
||||||
</Item>
|
|
||||||
<Item external href="https://portal.budi.live/" icon="Servers">
|
<Item external href="https://portal.budi.live/" icon="Servers">
|
||||||
Hosting
|
Hosting
|
||||||
</Item>
|
</Item>
|
||||||
<Item external href="https://docs.budibase.com/" icon="Book">
|
<Item external href="https://docs.budibase.com/" icon="Book">
|
||||||
Documentation
|
Documentation
|
||||||
</Item>
|
</Item>
|
||||||
<Item external href="https://github.com/Budibase/budibase/discussions" icon="PeopleGroup">
|
<Item
|
||||||
|
external
|
||||||
|
href="https://github.com/Budibase/budibase/discussions"
|
||||||
|
icon="PeopleGroup"
|
||||||
|
>
|
||||||
Community
|
Community
|
||||||
</Item>
|
</Item>
|
||||||
<Item external href="https://github.com/Budibase/budibase/issues/new/choose" icon="Bug">
|
<Item
|
||||||
|
external
|
||||||
|
href="https://github.com/Budibase/budibase/issues/new/choose"
|
||||||
|
icon="Bug"
|
||||||
|
>
|
||||||
Raise an issue
|
Raise an issue
|
||||||
</Item>
|
</Item>
|
||||||
</Navigation>
|
</Navigation>
|
||||||
|
|
Loading…
Reference in New Issue