CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-06-29 19:41:03 +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-13 18:08:55 +01:00
parent 8af2b8f2a0 744f943e95
commit 758297a093
40 changed files with 280 additions and 288 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
package.json
View file

@ -40,6 +40,10 @@
"build:docker:staging": "cd hosting/scripts/linux/ && ./release-to-docker-hub.sh staging && cd -"
},
"dependencies": {
"@spectrum-css/actionbutton": "^1.0.1",
"@spectrum-css/actiongroup": "^1.0.1",
"@spectrum-css/link": "^3.1.1",
"@spectrum-css/menu": "^3.0.1",
"@spectrum-css/toast": "^3.0.1"
}
}

65
packages/bbui/src/ActionButton/ActionButton.svelte Normal file
View file

@ -0,0 +1,65 @@
<script>
import "@spectrum-css/actionbutton/dist/index-vars.css"
import { createEventDispatcher } from "svelte"
const dispatch = createEventDispatcher()
/** @type {('S', 'M', 'L', 'XL')} Size of button */
export let size = "M";
export let quiet = false;
export let emphasized = false;
export let selected = false
export let longPressable = false;
export let disabled = false
export let icon = '';
function longPress(element) {
if (!longPressable) return
let timer
const listener = () => {
timer = setTimeout(() => {
dispatch('longpress')
}, 700)
}
element.addEventListener('pointerdown', listener)
return {
destroy() {
clearTimeout(timer)
element.removeEventListener('pointerdown', longPress)
}
}
}
</script>
<button
use:longPress
class:spectrum-ActionButton--quiet={quiet}
class:spectrum-ActionButton--emphasized={emphasized}
class:is-selected={selected}
class="spectrum-ActionButton spectrum-ActionButton--size{size.toUpperCase()}"
{disabled}
on:longPress
on:click|preventDefault>
{#if longPressable}
<svg class="spectrum-Icon spectrum-UIIcon-CornerTriangle100 spectrum-ActionButton-hold" focusable="false" aria-hidden="true">
<use xlink:href="#spectrum-css-icon-CornerTriangle100" />
</svg>
{/if}
{#if icon}
<svg class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}" focusable="false" aria-hidden="true" aria-label="{icon}">
<use xlink:href="#spectrum-icon-18-{icon}" />
</svg>
{/if}
{#if $$slots}
<span class="spectrum-ActionButton-label"><slot /></span>
{/if}
</button>
<style>
</style>

24
packages/bbui/src/ActionGroup/ActionGroup.svelte Normal file
View file

@ -0,0 +1,24 @@
<script>
import "@spectrum-css/actiongroup/dist/index-vars.css"
export let vertical;
export let justified;
export let quiet;
export let compact;
// Attaches a spectrum-ActionGroup-item class to buttons inside the div
function group(element) {
const buttons = Array.from(element.getElementsByTagName('button'))
buttons.forEach(button => {
button.classList.add('spectrum-ActionGroup-item')
})
}
</script>
<div use:group
class:spectrum-ActionGroup--vertical={vertical}
class:spectrum-ActionGroup--justified={justified}
class:spectrum-ActionGroup--quiet={quiet}
class:spectrum-ActionGroup--compact={compact}
class="spectrum-ActionGroup">
<slot />
</div>

30
packages/bbui/src/ActionMenu/ActionMenu.svelte Normal file
View file

@ -0,0 +1,30 @@
<script>
import DropdownMenu from '../DropdownMenu/DropdownMenu.svelte'
import Menu from '../Menu/Menu.svelte'
let anchor;
let dropdown;
// This is needed because display: contents is considered "invisible".
// It should only ever be an action button, so should be fine.
function getAnchor(node) {
anchor = node.firstChild
}
export const hide = () => { dropdown.hide() }
export const show = () => { dropdown.show() }
</script>
<div class="contents" use:getAnchor on:click={dropdown.show}>
<slot name="button" />
</div>
<DropdownMenu bind:this={dropdown} {anchor} align="left">
<Menu>
<slot />
</Menu>
</DropdownMenu>
<style>
div {
display: contents;
}
</style>

4
packages/bbui/src/Actions/position_dropdown.js
View file

@ -18,10 +18,10 @@ export default function positionDropdown(element, { anchor, align }) {
if (spaceAbove > spaceBelow) {
positionSide = "bottom"
maxHeight = spaceAbove - 20
y = window.innerHeight - spaceAbove
y = window.innerHeight - spaceAbove + 5
} else {
positionSide = "top"
y = bottom
y = bottom + 5
maxHeight = spaceBelow - 20
}

52
packages/bbui/src/Button/Button.svelte
View file

@ -1,15 +1,13 @@
<script>
import "@spectrum-css/button/dist/index-vars.css"
export let href = false
export let disabled = false
/** @type {('S', 'M', 'L', 'XL')} Size of button */
export let size = "M";
/** @type {('cta','primary','secondary','warning', 'overBackground')} Type of button */
export let type = "primary"
// Types
export let cta, primary, secondary, warning, overBackground;
export let quiet = false
@ -17,33 +15,25 @@
</script>
{#if href}
<a
class="spectrum-Button spectrum-Button--{type} spectrum-Button--size{size.toUpperCase()}"
{href}
{disabled}>
{#if icon}
<svg class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}" focusable="false" aria-hidden="true" aria-label="{icon}">
<use xlink:href="#spectrum-icon-18-{icon}" />
</svg>
{/if}
<button
class:spectrum-Button--cta={cta}
class:spectrum-Button--primary={primary}
class:spectrum-Button--secondary={secondary}
class:spectrum-Button--warning={warning}
class:spectrum-Button--overBackground={overBackground}
class:spectrum-Button--quiet={quiet}
class="spectrum-Button spectrum-Button--size{size.toUpperCase()}"
{disabled}
on:click|preventDefault>
{#if icon}
<svg class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}" focusable="false" aria-hidden="true" aria-label="{icon}">
<use xlink:href="#spectrum-icon-18-{icon}" />
</svg>
{/if}
{#if $$slots}
<span class="spectrum-Button-label"><slot /></span>
</a>
{:else}
<button
class="spectrum-Button spectrum-Button--{type} spectrum-Button--size{size.toUpperCase()} {quiet && 'spectrum-Button--quiet'}"
{disabled}
on:click|preventDefault>
{#if icon}
<svg class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}" focusable="false" aria-hidden="true" aria-label="{icon}">
<use xlink:href="#spectrum-icon-18-{icon}" />
</svg>
{/if}
{#if $$slots}
<span class="spectrum-Button-label"><slot /></span>
{/if}
</button>
{/if}
{/if}
</button>
<style>

128
packages/bbui/src/Button/TextButton.svelte
View file

@ -1,128 +0,0 @@
<script>
export let active = false,
text = false,
small = false,
medium = false,
large = false,
blue = false,
green = false,
yellow = false,
purple = false,
red = false,
orange = false,
disabled = false,
href = false
</script>
{#if href}
<a
{href}
class:active
class:small
class:medium
class:large
class:text
class:blue
class:green
class:yellow
class:purple
class:red
class:orange><slot /></a>
{:else}
<button
class:active
class:small
class:medium
class:large
class:text
class:blue
class:green
class:yellow
class:purple
class:red
class:orange
{disabled}
on:click|preventDefault>
<slot />
</button>
{/if}
<style>
button,
a {
font-family: var(--font-sans);
cursor: pointer;
font-weight: 600;
box-sizing: border-box;
overflow: hidden;
transition: all 0.08s ease 0s;
display: inline-flex;
align-items: center;
text-rendering: optimizeLegibility;
text-decoration: none;
outline: none;
-webkit-box-align: center;
user-select: none;
margin: 0;
padding: 0;
}
.text {
background-color: transparent;
color: var(--grey-7);
border: none;
font-weight: 500;
}
button.text:hover:not([disabled]) {
color: var(--ink);
}
button.text:active:not([disabled]) {
color: var(--blue);
}
button.text.active:not([disabled]) {
color: var(--blue);
}
button.text:disabled {
cursor: not-allowed;
color: var(--grey-4);
}
.blue {
color: var(--blue);
}
.green {
color: var(--green);
}
.red {
color: var(--red);
}
.purple {
color: var(--purple);
}
.yellow {
color: var(--yellow);
}
.orange {
color: var(--orange);
}
.small {
font-size: var(--font-size-xs);
margin: 0;
}
.medium {
font-size: var(--font-size-s);
margin: 0;
}
.large {
font-size: var(--font-size-m);
margin: 0;
}
</style>

69
packages/bbui/src/Button/TextButton.svench
View file

@ -1,69 +0,0 @@
<script>
import { View } from "svench";
import TextButton from "./TextButton.svelte";
import Icon from "../Icons/Icon.svelte";
</script>
<style>
div {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: var(--spacing-xl);
}
</style>
<View name="Text">
<div>
<TextButton text small on:click={() => alert('Clicked!')}>
<Icon name="view" />
Add View
</TextButton>
<TextButton text medium on:click={() => alert('Clicked!')}>
<Icon name="addcolumn" />
Add Column
</TextButton>
<TextButton text large on:click={() => alert('Clicked!')}>
<Icon name="addrow" />
Add Row
</TextButton>
<TextButton text disabled on:click={() => alert('Clicked!')}>
<Icon name="arrow" direction="w" />
Disabled Text Button
</TextButton>
<TextButton active text on:click={() => alert('Clicked!')}>
<Icon name="calculate" />
Active Calculation
</TextButton>
</div>
</View>
<View name="Colours">
<div>
<TextButton text medium yellow on:click={() => alert('Clicked!')}>
<Icon name="view" />
Add View
</TextButton>
<TextButton text medium blue on:click={() => alert('Clicked!')}>
<Icon name="addcolumn" />
Add Column
</TextButton>
<TextButton text medium purple on:click={() => alert('Clicked!')}>
<Icon name="addrow" />
Add Row
</TextButton>
<TextButton text medium red on:click={() => alert('Clicked!')}>
<Icon name="arrow" />
Delete
</TextButton>
<TextButton text medium green on:click={() => alert('Clicked!')}>
<Icon name="calculate" />
Calculate
</TextButton>
</div>
</View>
<View name="Usage as a link">
<div>
<TextButton green text href="https://google.com">This is a link</TextButton>
</div>
</View>

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

@ -1,6 +1,6 @@
<script>
import Flatpickr from "svelte-flatpickr"
import { Label, Input } from "../"
import { Label } from "../"
import "flatpickr/dist/flatpickr.css"
const PICKER_OPTIONS = {

4
packages/bbui/src/Drawer/Drawer.svelte
View file

@ -1,7 +1,7 @@
<script>
import { slide } from "svelte/transition"
import Portal from "svelte-portal"
import clickOutside from "../Actions/click_outside"
import ActionButton from '../ActionButton/ActionButton.svelte'
export let title
@ -40,7 +40,7 @@
</div>
<div class="controls">
<slot name="buttons" />
<i class="ri-close-fill close" on:click={hide} />
<ActionButton quiet icon="Close" on:click={hide} />
</div>
</header>
<slot name="body" />

17
packages/bbui/src/Link/Link.svelte Normal file
View file

@ -0,0 +1,17 @@
<script>
import "@spectrum-css/link/dist/index-vars.css"
export let href = "#"
export let size = "M"
export let quiet = false;
export let primary = false;
export let secondary = false;
export let overBackground = false
</script>
<a {href}
class:spectrum-Link--primary={primary}
class:spectrum-Link--secondary={secondary}
class:spectrum-Link--overBackground={overBackground}
class:spectrum-Link--quiet={quiet}
class="spectrum-Link spectrum-Link--size{size}"><slot /></a>

15
packages/bbui/src/Menu/Item.svelte Normal file
View file

@ -0,0 +1,15 @@
<script>
export let icon = undefined;
export let disabled = undefined;
</script>
<li on:click class="spectrum-Menu-item" class:is-disabled={disabled} role="menuitem" tabindex="0">
<span class="spectrum-Menu-itemLabel">
{#if icon}
<svg class="spectrum-Icon spectrum-Icon--sizeM spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label={icon}>
<use xlink:href="#spectrum-icon-18-{icon}"></use>
</svg>
{/if}
<span class="spectrum-Menu-itemLabel"><slot /></span>
</span>
</li>

7
packages/bbui/src/Menu/Menu.svelte Normal file
View file

@ -0,0 +1,7 @@
<script>
import "@spectrum-css/menu/dist/index-vars.css"
</script>
<ul class="spectrum-Menu" role="menu">
<slot />
</ul>

19
packages/bbui/src/Menu/Menu.svench Normal file
View file

@ -0,0 +1,19 @@
<script>
import Menu from './Menu.svelte'
import Separator from './Separator.svelte'
import Section from './Section.svelte'
import Item from './Item.svelte'
</script>
<Menu>
<Section heading="Section heading">
<Item>Some Item 1</Item>
<Item>Some Item 2</Item>
<Item>Some Item 3</Item>
</Section>
<Separator />
<Section heading="Section heading">
<Item icon="SaveFloppy">Save</Item>
<Item disabled icon="DataDownload">Download</Item>
</Section>
</Menu>

9
packages/bbui/src/Menu/Section.svelte Normal file
View file

@ -0,0 +1,9 @@
<script>
export let heading
</script>
<li role="presentation">
<span class="spectrum-Menu-sectionHeading">{heading}</span>
<ul class="spectrum-Menu" role="group">
<slot />
</ul>
</li>

1
packages/bbui/src/Menu/Separator.svelte Normal file
View file

@ -0,0 +1 @@
<li class="spectrum-Menu-divider" role="separator"></li>

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

@ -46,11 +46,11 @@
<div class="spectrum-ButtonGroup-item">
<slot name="footer" />
{#if showCancelButton}
<Button type="secondary" on:click={hide}>{cancelText}</Button>
<Button secondary on:click={hide}>{cancelText}</Button>
{/if}
{#if showConfirmButton}
<Button
type="cta"
cta
primary
{...$$restProps}
disabled={confirmDisabled}

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

@ -8,9 +8,11 @@ export { default as Select } from "./Form/Select.svelte"
export { default as DataList } from "./Form/DataList.svelte"
export { default as Dropzone } from "./Dropzone/Dropzone.svelte"
export { default as Drawer } from "./Drawer/Drawer.svelte"
export { default as ActionButton } from "./ActionButton/ActionButton.svelte"
export { default as ActionGroup } from "./ActionGroup/ActionGroup.svelte"
export { default as ActionMenu } from "./ActionMenu/ActionMenu.svelte"
export { default as Button } from "./Button/Button.svelte"
export { default as Icon, iconOptions, directions } from "./Icons/Icon.svelte"
export { default as TextButton } from "./Button/TextButton.svelte"
export { default as Toggle } from "./Form/Toggle.svelte"
export { default as Radio } from "./Form/Radio.svelte"
export { default as Checkbox } from "./Form/Checkbox.svelte"
@ -22,7 +24,12 @@ export { default as Popover } from "./Popover/Popover.svelte"
export { default as Body } from "./Styleguide/Body.svelte"
export { default as Heading } from "./Styleguide/Heading.svelte"
export { default as Label } from "./Styleguide/Label.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"
export { default as MenuItem } from "./Menu/Item.svelte"
export { default as Modal } from "./Modal/Modal.svelte"
export { default as ModalContent } from "./Modal/ModalContent.svelte"
export { default as NotificationDisplay } from "./Notification/NotificationDisplay.svelte"

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

@ -1,7 +1,7 @@
<script>
import { sortBy } from "lodash/fp"
import { automationStore } from "builderStore"
import { Button, DropdownMenu, Modal } from "@budibase/bbui"
import { ActionButton, DropdownMenu, Modal } from "@budibase/bbui"
import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
import CreateWebhookModal from "../Shared/CreateWebhookModal.svelte"
@ -64,14 +64,14 @@
<div class="tab-container">
{#each tabs as tab, idx}
<div bind:this={anchors[idx]}>
<Button
<ActionButton
size="S"
quiet
icon={tab.icon}
disabled={tab.disabled}
on:click={tab.disabled ? null : () => onChangeTab(idx)}>
{tab.label}
</Button>
</ActionButton>
</div>
{/each}
</div>

2
packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte
View file

@ -92,7 +92,7 @@
</div>
{/each}
{#if stepId === 'WEBHOOK'}
<Button type="secondary" on:click={() => webhookModal.show()}>
<Button secondary on:click={() => webhookModal.show()}>
Set Up Webhook
</Button>
{/if}

2
packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
View file

@ -65,7 +65,7 @@
{webhookModal} />
{:else if $automationStore.selectedAutomation}
<div class="block-label">{automation.name}</div>
<Button type="secondary" on:click={testAutomation}>Test Automation</Button>
<Button secondary on:click={testAutomation}>Test Automation</Button>
{/if}
<Button
secondary

2
packages/builder/src/components/backend/DataTable/buttons/CalculateButton.svelte
View file

@ -9,7 +9,7 @@
</script>
<div bind:this={anchor}>
<Button icon="Calculator" type="overBackground" size="S" quiet
<Button icon="Calculator" primary size="S" quiet
on:click={dropdown.show}
active={view.field && view.calculation}>
Calculate

2
packages/builder/src/components/backend/DataTable/buttons/CreateColumnButton.svelte
View file

@ -10,7 +10,7 @@
let modal
</script>
<Button icon="AddCircle" type="overBackground" size="S" quiet on:click={modal.show}>
<Button icon="AddCircle" primary size="S" quiet on:click={modal.show}>
Create New Column
</Button>
<Modal bind:this={modal}>

2
packages/builder/src/components/backend/DataTable/buttons/CreateRowButton.svelte
View file

@ -8,7 +8,7 @@
let modal
</script>
<Button icon="Add" type="overBackground" size="S" quiet on:click={modal.show}>
<Button icon="Add" primary size="S" quiet on:click={modal.show}>
{title}
</Button>
<Modal bind:this={modal}>

2
packages/builder/src/components/backend/DataTable/buttons/CreateViewButton.svelte
View file

@ -7,7 +7,7 @@
</script>
<div bind:this={anchor}>
<Button icon="CollectionAdd" type="overBackground" size="S" quiet on:click={dropdown.show}>
<Button icon="CollectionAdd" primary size="S" quiet on:click={dropdown.show}>
Create New View
</Button>
</div>

2
packages/builder/src/components/backend/DataTable/buttons/DeleteRowsButton.svelte
View file

@ -13,7 +13,7 @@
}
</script>
<Button icon="Delete" size="s" type="overBackground" quiet on:click={modal.show}>
<Button icon="Delete" size="s" primary quiet on:click={modal.show}>
Delete
{selectedRows.length}
row(s)

2
packages/builder/src/components/backend/DataTable/buttons/EditRolesButton.svelte
View file

@ -6,7 +6,7 @@
</script>
<div>
<Button icon="UsersLock" type="overBackground" size="S" quiet on:click={modal.show}>
<Button icon="UsersLock" primary size="S" quiet on:click={modal.show}>
Edit Roles
</Button>
</div>

2
packages/builder/src/components/backend/DataTable/buttons/ExportButton.svelte
View file

@ -9,7 +9,7 @@
</script>
<div bind:this={anchor}>
<Button icon="Download" type="overBackground" size="S" quiet on:click={dropdown.show}>
<Button icon="Download" primary size="S" quiet on:click={dropdown.show}>
Export
</Button>
</div>

2
packages/builder/src/components/backend/DataTable/buttons/FilterButton.svelte
View file

@ -9,7 +9,7 @@
</script>
<div bind:this={anchor}>
<Button icon="Filter" type="overBackground" size="S" quiet
<Button icon="Filter" primary size="S" quiet
on:click={dropdown.show}
active={view.filters && view.filters.length}>
Filter

2
packages/builder/src/components/backend/DataTable/buttons/GroupByButton.svelte
View file

@ -9,7 +9,7 @@
</script>
<div bind:this={anchor}>
<Button icon="Group" type="overBackground" size="S" quiet active={!!view.groupBy} on:click={dropdown.show}>
<Button icon="Group" primary size="S" quiet active={!!view.groupBy} on:click={dropdown.show}>
Group By
</Button>
</div>

2
packages/builder/src/components/backend/DataTable/buttons/HideAutocolumnButton.svelte
View file

@ -12,7 +12,7 @@
</script>
<div bind:this={anchor}>
<Button icon="MagicWand" type="overBackground" size="S" quiet on:click={hideOrUnhide}>
<Button icon="MagicWand" primary size="S" quiet on:click={hideOrUnhide}>
{#if hideAutocolumns}
Show Auto Columns
{:else}

2
packages/builder/src/components/backend/DataTable/buttons/ManageAccessButton.svelte
View file

@ -16,7 +16,7 @@
</script>
<div bind:this={anchor}>
<Button icon="LockClosed" type="overBackground" size="S" quiet on:click={openDropdown}>
<Button icon="LockClosed" primary size="S" quiet on:click={openDropdown}>
Manage Access
</Button>
</div>

4
packages/builder/src/components/backend/DataTable/modals/CreateEditColumn.svelte
View file

@ -288,10 +288,10 @@
{/if}
<footer class="create-column-options">
{#if !uneditable && originalName != null}
<Button type="warning" size="S" text on:click={confirmDelete}>Delete Column</Button>
<Button warning size="S" text on:click={confirmDelete}>Delete Column</Button>
{/if}
<Button on:click={onClosed}>Cancel</Button>
<Button type="cta" on:click={saveColumn} bind:disabled={invalid}>
<Button cta on:click={saveColumn} bind:disabled={invalid}>
Save Column
</Button>
</footer>

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

@ -81,7 +81,7 @@
{/each}
<div>
<Spacer small />
<Button icon="AddCircle" size="S" type="cta" on:click={addField}>
<Button icon="AddCircle" size="S" cta on:click={addField}>
Add
{fieldLabel}
</Button>

6
packages/builder/src/components/settings/tabs/APIKeys.svelte
View file

@ -1,5 +1,5 @@
<script>
import { Input, Label, TextButton } from "@budibase/bbui"
import { Input, Label, Link } from "@budibase/bbui"
import api from "builderStore/api"
import { notifications } from "@budibase/bbui"
import { database } from "stores/backend"
@ -41,9 +41,9 @@
edit
value={keys.budibase}
label="Budibase Cloud API Key" />
<TextButton text medium blue href="https://portal.budi.live">
<Link primary href="https://portal.budi.live">
Log in to the Budibase Hosting Portal to get your API Key. →
</TextButton>
</Link>
<div>
<Label extraSmall grey>Instance ID (Webhooks)</Label>
<span>{$database._id}</span>

2
packages/builder/src/components/settings/tabs/DangerZone.svelte
View file

@ -1,6 +1,6 @@
<script>
import { params, goto } from "@roxi/routify"
import { Input, TextArea, Button, Body } from "@budibase/bbui"
import { Input, Button, Body } from "@budibase/bbui"
import { del } from "builderStore/api"
let value = ""

12
packages/builder/src/components/start/AppCard.svelte
View file

@ -1,8 +1,6 @@
<script>
import { TextButton } from "@budibase/bbui"
import { Heading } from "@budibase/bbui"
import { Spacer } from "@budibase/bbui"
import api from "builderStore/api"
<script>
import { goto } from "@roxi/routify"
import { ActionButton, Heading, Spacer } from "@budibase/bbui"
import { notifications } from "@budibase/bbui"
import Spinner from "components/common/Spinner.svelte"
import download from "downloadjs"
@ -31,11 +29,11 @@
<Heading small black>{name}</Heading>
<Spacer medium />
<div class="card-footer" data-cy={`app-${name}`}>
<TextButton text medium blue href="/builder/{_id}">
<ActionButton text medium blue on:click={() => $goto(`/builder/${_id}`)}>
Open
{name}
→
</TextButton>
</ActionButton>
{#if appExportLoading}
<Spinner size="10" />
{:else}<i class="ri-folder-download-line" on:click={exportApp} />{/if}

23
packages/builder/src/components/start/BuilderSettingsButton.svelte
View file

@ -1,32 +1,15 @@
<script>
import { TextButton as Button, Modal } from "@budibase/bbui"
import { Button, Modal } from "@budibase/bbui"
import BuilderSettingsModal from "./BuilderSettingsModal.svelte"
let modal
</script>
<div>
<Button text on:click={modal.show}>
<i class="ri-settings-3-fill" />
<p>Settings</p>
<Button overBackground quiet icon="Settings" text on:click={modal.show}>
Settings
</Button>
</div>
<Modal bind:this={modal} width="30%">
<BuilderSettingsModal />
</Modal>
<style>
div i {
font-size: 26px;
color: var(--grey-7);
margin-left: 12px;
}
div p {
font-family: var(--font-sans);
font-size: var(--font-size-s);
color: var(--ink);
font-weight: 400;
margin: 0 0 0 12px;
}
</style>

4
packages/builder/src/pages/builder/index.svelte
View file

@ -3,7 +3,7 @@
import AppList from "components/start/AppList.svelte"
import { get } from "builderStore/api"
import CreateAppModal from "components/start/CreateAppModal.svelte"
import { Button, Heading, Modal, Spacer } from "@budibase/bbui"
import { Button, Heading, Modal, Spacer, Menu, MenuSection, MenuItem } from "@budibase/bbui"
import TemplateList from "components/start/TemplateList.svelte"
import analytics from "analytics"
import Banner from "/assets/orange-landscape.png"
@ -61,7 +61,7 @@
<div class="button-group">
<Button secondary on:click={initiateAppImport}>Import Web App</Button>
<Spacer medium />
<Button primary on:click={modal.show}>Create New Web App</Button>
<Button cta on:click={modal.show}>Create New Web App</Button>
</div>
</div>

20
yarn.lock
View file

@ -824,6 +824,26 @@
estree-walker "^1.0.1"
micromatch "^4.0.2"
"@spectrum-css/actionbutton@^1.0.1":
version "1.0.1"
resolved "https://registry.yarnpkg.com/@spectrum-css/actionbutton/-/actionbutton-1.0.1.tgz#9c75da37ea6915919fb574c74bd60dacc03b6577"
integrity sha512-AUqtyNabHF451Aj9i3xz82TxS5Z6k1dttA68/1hMeU9kbPCSS4P6Viw3vaRGs9CSspuR8xnnhDgrq+F+zMy2Hw==
"@spectrum-css/actiongroup@^1.0.1":
version "1.0.1"
resolved "https://registry.yarnpkg.com/@spectrum-css/actiongroup/-/actiongroup-1.0.1.tgz#b95b86e7af229e90fe1e70399d8d4b547b4bd31c"
integrity sha512-5Q6uMjzv5BFA2TwGASr/jAtJpTWl26fhWvgGY8kOA0RCSij35l+YJg/FPXf6Nnj2qCOl8DkNycjT9YXJ+bhyVA==
"@spectrum-css/link@^3.1.1":
version "3.1.1"
resolved "https://registry.yarnpkg.com/@spectrum-css/link/-/link-3.1.1.tgz#cb526a2e10b50ef5a7ae29cca7272e2610d597eb"
integrity sha512-Bi88lRhTY7g6nM/ryW1yY4Cji211ZYNtRxkxbV7n2lPvwMAAQtyx0qVD3ru4kTGj/FFVvmPR3XiOE10K13HSNA==
"@spectrum-css/menu@^3.0.1":
version "3.0.1"
resolved "https://registry.yarnpkg.com/@spectrum-css/menu/-/menu-3.0.1.tgz#2a376f991acc24e12ec892bb6b9db2650fc41fbe"
integrity sha512-Qjg0+1O0eC89sb/bRFq2AGnQ8XqhVy23TUXHyffNM8qdcMssnlny3QmhzjURCZKvx/Y5UytCpzhedPQqSpQwZg==
"@spectrum-css/toast@^3.0.1":
version "3.0.1"
resolved "https://registry.yarnpkg.com/@spectrum-css/toast/-/toast-3.0.1.tgz#36f62ea05302761e59b9d53e05f6c04423861796"