CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-08 07:46:10 +12:00
Code Issues Projects Releases Wiki Activity

Merge branch 'spectrum-bbui' of github.com:Budibase/budibase into spectrum-bbui

Browse source
This commit is contained in:
Andrew Kingston 2021-04-28 09:53:15 +01:00
parent 11fa09ae8b 4c776f68f2
commit fdc0f6b415
35 changed files with 262 additions and 410 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
packages/bbui/src/ActionButton/ActionButton.svelte
View file

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

59
packages/bbui/src/Button/Close.svelte
View file

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

36
packages/bbui/src/Button/Close.svench
View file

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

23
packages/bbui/src/ClearButton/ClearButton.svelte
View file

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

2
packages/bbui/src/DetailSummary/DetailSummary.svelte
View file

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

14
packages/bbui/src/Divider/Divider.svelte
View file

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

40
packages/bbui/src/Drawer/DrawerContentWithSidebar.svelte Normal file
View file

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

12
packages/bbui/src/Icon/Icon.svelte
View file

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

50
packages/bbui/src/Links/Home.svelte
View file

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

19
packages/bbui/src/Links/Home.svench
View file

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

2
packages/bbui/src/Modal/ModalContent.svelte
View file

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

83
packages/bbui/src/ProgressBar/ProgressBar.svelte
View file

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

2
packages/bbui/src/Table/SelectEditRenderer.svelte
View file

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

3
packages/bbui/src/index.js
View file

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

2
packages/builder/src/components/automation/AutomationBuilder/BlockList.svelte
View file

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

4
packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte
View file

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

101
packages/builder/src/components/automation/SetupPanel/AutomationBindingPanel.svelte
View file

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

2
packages/builder/src/components/automation/Shared/WebhookDisplay.svelte
View file

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

8
packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/IntegrationConfigForm.svelte
View file

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

2
packages/builder/src/components/backend/DatasourceNavigator/popovers/EditDatasourcePopover.svelte
View file

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

2
packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryPopover.svelte
View file

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

2
packages/builder/src/components/common/DrawerBindableInput.svelte
View file

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

4
packages/builder/src/components/common/NavItem.svelte
View file

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

12
packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte
View file

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

2
packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte
View file

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

2
packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/LayoutDropdownMenu.svelte
View file

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

2
packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ScreenDropdownMenu.svelte
View file

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

107
packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte
View file

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

8
packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
View file

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

2
packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
View file

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

2
packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte
View file

@ -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])} />

2
packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
View file

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

2
packages/builder/src/components/start/AppList.svelte
View file

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

19
packages/builder/src/pages/builder/[application]/data/datasource/[selectedDatasource]/index.svelte
View file

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

22
packages/builder/src/pages/builder/_layout.svelte
View file

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