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