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

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

This commit is contained in:
Andrew Kingston 2021-04-27 15:50:59 +01:00
parent f2dd930478 2e7e18a8b6
commit 11fa09ae8b
20 changed files with 337 additions and 418 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
packages/bbui/src/ActionButton/ActionButton.svelte
View File

@ -3,8 +3,6 @@
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
@ -12,6 +10,12 @@
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)
function longPress(element) {
if (!longPressable) return
let timer
@ -38,7 +42,11 @@
class:spectrum-ActionButton--quiet={quiet}
class:spectrum-ActionButton--emphasized={emphasized}
class:is-selected={selected}
class="spectrum-ActionButton spectrum-ActionButton--size{size.toUpperCase()}"
class:spectrum-ActionButton--sizeS={s}
class:spectrum-ActionButton--sizeM={m || useDefault}
class:spectrum-ActionButton--sizeL={l}
class:spectrum-ActionButton--sizeXL={xl}
class="spectrum-ActionButton"
{disabled}
on:longPress
on:click|preventDefault
@ -54,7 +62,11 @@
{/if}
{#if icon}
<svg
class="spectrum-Icon spectrum-Icon--size{size.toUpperCase()}"
class:spectrum-Icon--sizeS={s}
class:spectrum-Icon--sizeM={m || useDefault}
class:spectrum-Icon--sizeL={l}
class:spectrum-Icon--sizeXL={xl}
class="spectrum-Icon"
focusable="false"
aria-hidden="true"
aria-label={icon}

14
packages/bbui/src/ActionMenu/ActionMenu.svelte
View File

@ -1,6 +1,10 @@
<script>
import { setContext } from "svelte"
import Popover from "../Popover/Popover.svelte"
import Menu from "../Menu/Menu.svelte"
export let disabled = false
let anchor
let dropdown
@ -16,10 +20,16 @@
export const show = () => {
dropdown.show()
}
const openMenu = () => {
if (!disabled) show()
}
setContext("actionMenu", { show, hide })
</script>
<div class="contents" use:getAnchor on:click={dropdown.show}>
<slot name="button" />
<div class="contents" use:getAnchor on:click={openMenu}>
<slot name="control" />
</div>
<Popover bind:this={dropdown} {anchor} align="left">
<Menu>

2
packages/bbui/src/Drawer/Drawer.svelte
View File

@ -42,7 +42,7 @@
</div>
<div class="buttons">
<slot name="buttons" />
<ActionButton selected quiet icon="Close" on:click={hide} />
<ActionButton quiet icon="Close" on:click={hide} />
</div>
</header>
<slot name="body" />

65
packages/bbui/src/Layout/Layout.svelte Normal file
View File

@ -0,0 +1,65 @@
<script>
export let horizontal = false
export let paddingX = "M"
export let paddingY = "M"
export let noPadding = false
export let gap = "M"
export let noGap = false
</script>
<div
class:horizontal
class="container paddingX-{!noPadding && paddingX} paddingY-{!noPadding &&
paddingY} gap-{!noGap && gap}"
>
<slot />
</div>
<style>
.container {
display: grid;
grid-template-columns: 1fr;
}
.paddingX-S {
padding-left: var(--spacing-s);
padding-right: var(--spacing-s);
}
.paddingX-M {
padding-left: var(--spacing-m);
padding-right: var(--spacing-m);
}
.paddingX-L {
padding-left: var(--spacing-l);
padding-right: var(--spacing-l);
}
.paddingY-S {
padding-top: var(--spacing-s);
padding-bottom: var(--spacing-s);
}
.paddingY-M {
padding-top: var(--spacing-m);
padding-bottom: var(--spacing-m);
}
.paddingY-L {
padding-top: var(--spacing-l);
padding-bottom: var(--spacing-l);
}
.gap-S {
grid-gap: var(--spectrum-alias-grid-gutter-xsmall);
}
.gap-M {
grid-gap: var(--spectrum-alias-grid-gutter-small);
}
.gap-L {
grid-gap: var(--spectrum-alias-grid-gutter-medium);
}
.horizontal.gap-S :global(*) + :global(*) {
margin-left: var(--spectrum-alias-grid-gutter-xsmall);
}
.horizontal.gap-M :global(*) + :global(*) {
margin-left: var(--spectrum-alias-grid-gutter-small);
}
.horizontal.gap-L :global(*) + :global(*) {
margin-left: var(--spectrum-alias-grid-gutter-medium);
}
</style>

46
packages/bbui/src/Menu/Item.svelte
View File

@ -1,13 +1,39 @@
<script>
export let icon = undefined;
export let disabled = undefined;
import { createEventDispatcher, getContext } from "svelte"
const dispatch = createEventDispatcher()
const actionMenu = getContext("actionMenu")
export let dataCy
export let icon = undefined
export let disabled = undefined
export let noClose = false
const onClick = () => {
if (actionMenu && !noClose) {
actionMenu.hide()
}
dispatch("click")
}
</script>
<li on:click|preventDefault class="spectrum-Menu-item" class:is-disabled={disabled} role="menuitem" tabindex="0">
{#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>
</li>
<li
data-cy={dataCy}
on:click|preventDefault={onClick}
class="spectrum-Menu-item"
class:is-disabled={disabled}
role="menuitem"
tabindex="0"
>
{#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}" />
</svg>
{/if}
<span class="spectrum-Menu-itemLabel"><slot /></span>
</li>

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

@ -13,5 +13,5 @@
<Checkbox value={selected} />
{/if}
{#if allowEditRows}
<ActionButton size="s" on:click={onEdit}>Edit</ActionButton>
<ActionButton s on:click={onEdit}>Edit</ActionButton>
{/if}

1
packages/bbui/src/index.js
View File

@ -27,6 +27,7 @@ export { default as Popover } from "./Popover/Popover.svelte"
export { default as ProgressBar } from "./ProgressBar/ProgressBar.svelte"
export { default as ProgressCircle } from "./ProgressCircle/ProgressCircle.svelte"
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"

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

@ -65,8 +65,8 @@
{#each tabs as tab, idx}
<div bind:this={anchors[idx]}>
<ActionButton
size="S"
quiet
s
icon={tab.icon}
disabled={tab.disabled}
on:click={tab.disabled ? null : () => onChangeTab(idx)}>

33
packages/builder/src/components/automation/AutomationPanel/EditAutomationPopover.svelte
View File

@ -2,26 +2,14 @@
import { goto } from "@roxi/routify"
import { automationStore } from "builderStore"
import { database } from "stores/backend"
import { notifications } from "@budibase/bbui"
import { Icon, Popover } from "@budibase/bbui"
import {
DropdownContainer,
DropdownItem,
} from "components/common/Dropdowns"
import { ActionMenu, MenuItem, notifications, Icon } from "@budibase/bbui"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
export let automation
let anchor
let dropdown
let confirmDeleteDialog
$: instanceId = $database._id
function showModal() {
dropdown.hide()
confirmDeleteDialog.show()
}
async function deleteAutomation() {
await automationStore.actions.delete({
instanceId,
@ -32,20 +20,15 @@
}
</script>
<div on:click|stopPropagation>
<div bind:this={anchor} class="icon" on:click={dropdown.show}>
<ActionMenu>
<div slot="control" class="icon">
<Icon s hoverable name="MoreSmallList" />
</div>
<Popover align="left" {anchor} bind:this={dropdown}>
<DropdownContainer>
<DropdownItem
icon="ri-delete-bin-line"
title="Delete"
on:click={showModal}
/>
</DropdownContainer>
</Popover>
</div>
<MenuItem noClose icon="Delete" on:click={confirmDeleteDialog.show}
>Delete</MenuItem
>
</ActionMenu>
<ConfirmDialog
bind:this={confirmDeleteDialog}
okText="Delete Automation"

35
packages/builder/src/components/backend/DatasourceNavigator/popovers/EditDatasourcePopover.svelte
View File

@ -2,54 +2,31 @@
import { goto } from "@roxi/routify"
import { datasources } from "stores/backend"
import { notifications } from "@budibase/bbui"
import { Icon, Popover } from "@budibase/bbui"
import { ActionMenu, MenuItem, Icon, Popover } from "@budibase/bbui"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
export let datasource
let anchor
let dropdown
let confirmDeleteDialog
function hideEditor() {
dropdown?.hide()
}
function showModal() {
hideEditor()
confirmDeleteDialog.show()
}
async function deleteDatasource() {
const wasSelectedSource = $datasources.selected
console.log(wasSelectedSource)
console.log(datasource)
await datasources.delete(datasource)
notifications.success("Datasource deleted")
// navigate to first index page if the source you are deleting is selected
if (wasSelectedSource === datasource._id) {
$goto("./datasource")
}
hideEditor()
}
</script>
<div on:click|stopPropagation>
<div bind:this={anchor} class="icon" on:click={dropdown.show}>
<ActionMenu>
<div slot="control" class="icon">
<Icon s hoverable name="MoreSmallList" />
</div>
<Popover align="left" {anchor} bind:this={dropdown}>
<DropdownContainer>
<DropdownItem
icon="ri-delete-bin-line"
title="Delete"
on:click={showModal}
data-cy="delete-datasource"
/>
</DropdownContainer>
</Popover>
</div>
<MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
</ActionMenu>
<ConfirmDialog
bind:this={confirmDeleteDialog}
okText="Delete Datasource"

35
packages/builder/src/components/backend/DatasourceNavigator/popovers/EditQueryPopover.svelte
View File

@ -1,46 +1,25 @@
<script>
import { notifications } from "@budibase/bbui"
import { Icon, Popover } from "@budibase/bbui"
import { ActionMenu, MenuItem, Icon, notifications } from "@budibase/bbui"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
import { queries } from "stores/backend"
export let query
let anchor
let dropdown
let confirmDeleteDialog
function hideEditor() {
dropdown?.hide()
}
function showModal() {
hideEditor()
confirmDeleteDialog.show()
}
async function deleteQuery() {
await queries.delete(query)
notifications.success("Query deleted")
hideEditor()
}
</script>
<div on:click|stopPropagation>
<div bind:this={anchor} class="icon" on:click={dropdown.show}>
<ActionMenu>
<div slot="control" class="icon">
<Icon s hoverable name="MoreSmallList" />
</div>
<Popover align="left" {anchor} bind:this={dropdown}>
<DropdownContainer>
<DropdownItem
icon="ri-delete-bin-line"
title="Delete"
on:click={showModal}
data-cy="delete-datasource"
/>
</DropdownContainer>
</Popover>
</div>
<MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
</ActionMenu>
<ConfirmDialog
bind:this={confirmDeleteDialog}
okText="Delete Query"

90
packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte
View File

@ -3,31 +3,26 @@
import { store, allScreens } from "builderStore"
import { tables } from "stores/backend"
import { notifications } from "@budibase/bbui"
import { Icon, Popover, Button, Input } from "@budibase/bbui"
import {
ActionMenu,
MenuItem,
Icon,
Modal,
ModalContent,
Input,
} from "@budibase/bbui"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
export let table
let anchor
let dropdown
let editing
let editorModal
let confirmDeleteDialog
let error = ""
let originalName = table.name
let templateScreens
let willBeDeleted
function showEditor() {
editing = true
}
function hideEditor() {
dropdown?.hide()
editing = false
}
function showModal() {
function showDeleteModal() {
const screens = $allScreens
templateScreens = screens.filter(
(screen) => screen.autoTableId === table._id
@ -35,7 +30,6 @@
willBeDeleted = ["All table data"].concat(
templateScreens.map((screen) => `Screen ${screen.props._instanceName}`)
)
hideEditor()
confirmDeleteDialog.show()
}
@ -48,62 +42,48 @@
if (wasSelectedTable._id === table._id) {
$goto("./table")
}
hideEditor()
editorModal.hide()
}
async function save() {
await tables.save(table)
notifications.success("Table renamed successfully")
hideEditor()
editorModal.hide()
}
function checkValid(evt) {
const tableName = evt.target.value
error =
originalName !== tableName
originalName === tableName
? `Table with name ${tableName} already exists. Please choose another name.`
: ""
}
</script>
<div on:click|stopPropagation>
<div bind:this={anchor} class="icon" on:click={dropdown.show}>
<ActionMenu>
<div slot="control" class="icon">
<Icon s hoverable name="MoreSmallList" />
</div>
<Popover align="left" {anchor} bind:this={dropdown}>
{#if editing}
<div class="actions">
<h5>Edit Table</h5>
<Input
label="Table Name"
thin
bind:value={table.name}
on:input={checkValid}
{error}
/>
<footer>
<Button secondary on:click={hideEditor}>Cancel</Button>
<Button primary disabled={error} on:click={save}>Save</Button>
</footer>
</div>
{:else}
<DropdownContainer>
<DropdownItem
icon="ri-edit-line"
data-cy="edit-table"
title="Edit"
on:click={showEditor}
/>
<DropdownItem
icon="ri-delete-bin-line"
title="Delete"
on:click={showModal}
data-cy="delete-table"
/>
</DropdownContainer>
{/if}
</Popover>
</div>
<MenuItem icon="Edit" on:click={editorModal.show}>Edit</MenuItem>
<MenuItem icon="Delete" on:click={showDeleteModal}>Delete</MenuItem>
</ActionMenu>
<Modal bind:this={editorModal}>
<ModalContent
title="Edit Table"
confirmText="Save"
onConfirm={save}
disabled={table.name === originalName || error}
>
<Input
label="Table Name"
thin
bind:value={table.name}
on:input={checkValid}
{error}
/>
</ModalContent>
</Modal>
<ConfirmDialog
bind:this={confirmDeleteDialog}
okText="Delete Table"

111
packages/builder/src/components/design/AppPreview/ComponentSelectionList.svelte
View File

@ -1,25 +1,18 @@
<script>
import { goto } from "@roxi/routify"
import {
store,
currentAssetName,
selectedComponent,
currentAssetId,
} from "builderStore"
ActionMenu,
ActionGroup,
ActionButton,
MenuItem,
} from "@budibase/bbui"
import { store, currentAssetName } from "builderStore"
import structure from "./componentStructure.json"
import { Popover } from "@budibase/bbui"
import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
$: enrichedStructure = enrichStructure(structure, $store.components)
let selectedIndex
let anchors = []
let popover
$: anchor = selectedIndex === -1 ? null : anchors[selectedIndex]
const enrichStructure = (structure, definitions) => {
let enrichedStructure = []
structure.forEach(item => {
structure.forEach((item) => {
if (typeof item === "string") {
const def = definitions[`@budibase/standard-components/${item}`]
if (def) {
@ -43,77 +36,37 @@
if (item.isCategory) {
// Select and open this category
selectedIndex = idx
popover.show()
} else {
// Add this component
await store.actions.components.create(item.component)
popover.hide()
}
}
</script>
<div class="container">
<ActionGroup>
{#each enrichedStructure as item, idx}
<div
bind:this={anchors[idx]}
class="category"
data-cy={item.isCategory ? `category-${item.name}` : `component-${item.name}`}
on:click={() => onItemChosen(item, idx)}
class:active={idx === selectedIndex}>
{#if item.icon}<i class={item.icon} />{/if}
<span>{item.name}</span>
{#if item.isCategory}<i class="ri-arrow-down-s-line arrow" />{/if}
</div>
<ActionMenu disabled={!item.isCategory}>
<ActionButton
icon={item.icon}
xs
primary
quiet
slot="control"
on:click={() => onItemChosen(item, idx)}
>
{item.name}
</ActionButton>
{#each item.children || [] as item}
{#if !item.showOnAsset || item.showOnAsset.includes($currentAssetName)}
<MenuItem
dataCy={`component-${item.name}`}
icon={item.icon}
on:click={() => onItemChosen(item)}
>
{item.name}
</MenuItem>
{/if}
{/each}
</ActionMenu>
{/each}
</div>
<Popover
on:close={() => (selectedIndex = null)}
bind:this={popover}
{anchor}
align="left">
<DropdownContainer>
{#each enrichedStructure[selectedIndex].children as item}
{#if !item.showOnAsset || item.showOnAsset.includes($currentAssetName)}
<DropdownItem
data-cy={`component-${item.name}`}
icon={item.icon}
title={item.name}
on:click={() => onItemChosen(item)} />
{/if}
{/each}
</DropdownContainer>
</Popover>
<style>
.container {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
min-height: 24px;
flex-wrap: wrap;
gap: var(--spacing-l);
}
.category {
color: var(--grey-7);
cursor: pointer;
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: var(--spacing-s);
font-size: var(--spectrum-global-dimension-font-size-75);
}
.category span {
font-weight: 500;
user-select: none;
}
.category.active,
.category:hover {
color: var(--ink);
}
.category i:not(:last-child) {
font-size: 16px;
}
</style>
</ActionGroup>

100
packages/builder/src/components/design/NavigationPanel/ComponentDropdownMenu.svelte
View File

@ -3,23 +3,17 @@
import { store, currentAsset } from "builderStore"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import { findComponentParent } from "builderStore/storeUtils"
import { Icon, Popover } from "@budibase/bbui"
import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
import { ActionMenu, MenuItem, Icon } from "@budibase/bbui"
export let component
let confirmDeleteDialog
let dropdown
let anchor
$: definition = store.actions.components.getDefinition(component?._component)
$: noChildrenAllowed = !component || !definition?.hasChildren
$: noPaste = !$store.componentToPaste
const hideDropdown = () => {
dropdown.hide()
}
const moveUpComponent = () => {
const asset = get(currentAsset)
const parent = findComponentParent(asset.props, component._id)
@ -72,62 +66,42 @@
}
</script>
<div bind:this={anchor} on:click|stopPropagation>
<div class="icon" on:click={dropdown.show}><Icon hoverable name="MoreSmallList" /></div>
<Popover bind:this={dropdown} width="170px" {anchor} align="left">
<DropdownContainer on:click={hideDropdown}>
<DropdownItem
icon="ri-delete-bin-line"
title="Delete"
on:click={() => confirmDeleteDialog.show()}
/>
<DropdownItem
icon="ri-arrow-up-line"
title="Move up"
on:click={moveUpComponent}
/>
<DropdownItem
icon="ri-arrow-down-line"
title="Move down"
on:click={moveDownComponent}
/>
<DropdownItem
icon="ri-repeat-one-line"
title="Duplicate"
on:click={duplicateComponent}
/>
<DropdownItem
icon="ri-scissors-cut-line"
title="Cut"
on:click={() => storeComponentForCopy(true)}
/>
<DropdownItem
icon="ri-file-copy-line"
title="Copy"
on:click={() => storeComponentForCopy(false)}
/>
<hr class="hr-style" />
<DropdownItem
icon="ri-insert-row-top"
title="Paste above"
disabled={noPaste}
on:click={() => pasteComponent("above")}
/>
<DropdownItem
icon="ri-insert-row-bottom"
title="Paste below"
disabled={noPaste}
on:click={() => pasteComponent("below")}
/>
<DropdownItem
icon="ri-insert-column-right"
title="Paste inside"
disabled={noPaste || noChildrenAllowed}
on:click={() => pasteComponent("inside")}
/>
</DropdownContainer>
</Popover>
</div>
<ActionMenu>
<div slot="control" class="icon">
<Icon s hoverable name="MoreSmallList" />
</div>
<MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
<MenuItem noClose icon="ChevronUp" on:click={moveUpComponent}
>Move up</MenuItem
>
<MenuItem noClose icon="ChevronDown" on:click={moveDownComponent}
>Move down</MenuItem
>
<MenuItem noClose icon="Duplicate" on:click={duplicateComponent}
>Duplicate</MenuItem
>
<MenuItem icon="Cut" on:click={() => storeComponentForCopy(true)}
>Cut</MenuItem
>
<MenuItem icon="Copy" on:click={() => storeComponentForCopy(false)}
>Copy</MenuItem
>
<MenuItem
icon="LayersBringToFront"
on:click={() => pasteComponent("above")}
disabled={noPaste}>Paste above</MenuItem
>
<MenuItem
icon="LayersSendToBack"
on:click={() => pasteComponent("below")}
disabled={noPaste}>Paste below</MenuItem
>
<MenuItem
icon="ShowOneLayer"
on:click={() => pasteComponent("inside")}
disabled={noPaste || noChildrenAllowed}>Paste inside</MenuItem
>
</ActionMenu>
<ConfirmDialog
bind:this={confirmDeleteDialog}
title="Confirm Deletion"

37
packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/LayoutDropdownMenu.svelte
View File

@ -2,16 +2,20 @@
import { store } from "builderStore"
import { notifications } from "@budibase/bbui"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import { Icon, Popover, Modal, ModalContent, Input } from "@budibase/bbui"
import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
import {
ActionMenu,
MenuItem,
Icon,
Modal,
ModalContent,
Input,
} from "@budibase/bbui"
import { cloneDeep } from "lodash/fp"
export let layout
let confirmDeleteDialog
let editLayoutNameModal
let dropdown
let anchor
let name = layout.name
const deleteLayout = async () => {
@ -35,25 +39,14 @@
}
</script>
<div bind:this={anchor}>
<div class="icon" on:click={() => dropdown.show()}>
<Icon name="MoreSmallList" />
<ActionMenu>
<div slot="control" class="icon">
<Icon s hoverable name="MoreSmallList" />
</div>
<Popover bind:this={dropdown} {anchor} align="left">
<DropdownContainer>
<DropdownItem
icon="ri-pencil-line"
title="Edit"
on:click={() => editLayoutNameModal.show()}
/>
<DropdownItem
icon="ri-delete-bin-line"
title="Delete"
on:click={() => confirmDeleteDialog.show()}
/>
</DropdownContainer>
</Popover>
</div>
<MenuItem icon="Edit" on:click={editLayoutNameModal.show}>Edit</MenuItem>
<MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
</ActionMenu>
<ConfirmDialog
bind:this={confirmDeleteDialog}
title="Confirm Deletion"

29
packages/builder/src/components/design/NavigationPanel/ComponentNavigationTree/ScreenDropdownMenu.svelte
View File

@ -1,16 +1,12 @@
<script>
import { goto } from "@roxi/routify"
import { store, allScreens } from "builderStore"
import { notifications } from "@budibase/bbui"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
import { Icon, Popover } from "@budibase/bbui"
import { DropdownContainer, DropdownItem } from "components/common/Dropdowns"
import { ActionMenu, MenuItem, Icon, notifications } from "@budibase/bbui"
export let screenId
let confirmDeleteDialog
let dropdown
let anchor
$: screen = $allScreens.find((screen) => screen._id === screenId)
@ -27,20 +23,13 @@
}
</script>
<div bind:this={anchor} on:click|stopPropagation>
<div class="icon" on:click={() => dropdown.show()}>
<ActionMenu>
<div slot="control" class="icon">
<Icon s hoverable name="MoreSmallList" />
</div>
<Popover bind:this={dropdown} {anchor} align="left">
<DropdownContainer>
<DropdownItem
icon="ri-delete-bin-line"
title="Delete"
on:click={() => confirmDeleteDialog.show()}
/>
</DropdownContainer>
</Popover>
</div>
<MenuItem icon="Delete" on:click={confirmDeleteDialog.show}>Delete</MenuItem>
</ActionMenu>
<ConfirmDialog
bind:this={confirmDeleteDialog}
title="Confirm Deletion"
@ -48,9 +37,3 @@
okText="Delete Screen"
onOk={deleteScreen}
/>
<style>
.icon i {
font-size: 16px;
}
</style>

1
packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveFields.svelte
View File

@ -70,6 +70,7 @@
bindings={bindableProperties}
on:change={event => updateFieldValue(idx, event.detail)} />
<ActionButton
s
quiet
icon="Delete"
on:click={() => removeField(field[0])} />

33
packages/builder/src/components/integration/QueryParameterBuilder.svelte
View File

@ -52,22 +52,32 @@
placeholder="Parameter Name"
thin
disabled={bindable}
bind:value={parameter.name} />
bind:value={parameter.name}
/>
<Input
placeholder="Default"
thin
disabled={bindable}
bind:value={parameter.default} />
bind:value={parameter.default}
/>
{#if bindable}
<DrawerBindableInput
title={`Query parameter "${parameter.name}"`}
placeholder="Value"
thin
on:change={evt => onBindingChange(parameter.name, evt.detail)}
value={runtimeToReadableBinding(bindings, customParams?.[parameter.name])}
{bindings} />
on:change={(evt) => onBindingChange(parameter.name, evt.detail)}
value={runtimeToReadableBinding(
bindings,
customParams?.[parameter.name]
)}
{bindings}
/>
{:else}
<Icon hoverable name="Close" on:click={() => deleteQueryParameter(idx)} />
<Icon
hoverable
name="Close"
on:click={() => deleteQueryParameter(idx)}
/>
{/if}
{/each}
</div>
@ -90,16 +100,5 @@
grid-template-columns: 1fr 1fr 5%;
grid-gap: 10px;
align-items: center;
margin-bottom: var(--spacing-xl);
}
.delete {
transition: all 0.2s;
}
.delete:hover {
transform: scale(1.1);
font-weight: 500;
cursor: pointer;
}
</style>

97
packages/builder/src/components/integration/QueryViewer.svelte
View File

@ -6,6 +6,7 @@
Button,
Body,
Label,
Layout,
Input,
Heading,
Spacer,
@ -110,46 +111,33 @@
}
</script>
<section class="config">
<Spacer extraLarge />
<Layout gap="S" noPadding>
<Heading m>Query {integrationInfo?.friendlyName}</Heading>
<Spacer extraLarge />
<Divider />
<Spacer extraLarge />
<Heading s>Config</Heading>
<Body s>Provide a name for your query and select its function.</Body>
<Spacer medium />
<div class="config-field">
<Label>Query Name</Label>
<Input bind:value={query.name} />
</div>
<Spacer medium />
{#if queryConfig}
<div class="config">
<div class="config-field">
<Label>Function</Label>
<Select
bind:value={query.queryVerb}
options={Object.keys(queryConfig)}
getOptionLabel={(verb) =>
queryConfig[verb]?.displayName || capitalise(verb)}
/>
<Label>Query Name</Label>
<Input bind:value={query.name} />
</div>
<Spacer extraLarge />
{#if queryConfig}
<div class="config-field">
<Label>Function</Label>
<Select
bind:value={query.queryVerb}
options={Object.keys(queryConfig)}
getOptionLabel={(verb) =>
queryConfig[verb]?.displayName || capitalise(verb)}
/>
</div>
<ParameterBuilder bind:parameters={query.parameters} bindable={false} />
{/if}
</div>
{#if shouldShowQueryConfig}
<Divider />
<Spacer extraLarge />
<ParameterBuilder bind:parameters={query.parameters} bindable={false} />
<Spacer extraLarge />
<Divider />
{/if}
</section>
{#if shouldShowQueryConfig}
<section>
<Spacer extraLarge />
<div class="config">
<Heading s>Fields</Heading>
<Body s>Fill in the fields specific to this query.</Body>
<Spacer medium />
<IntegrationQueryEditor
{datasource}
{query}
@ -157,30 +145,27 @@
schema={queryConfig[query.queryVerb]}
bind:parameters
/>
<Spacer extraLarge />
<Divider />
<Spacer extraLarge />
<div class="viewer-controls">
<Heading s>Results</Heading>
<div class="button-container">
<Button
secondary
thin
disabled={data.length === 0 || !query.name}
on:click={saveQuery}
>
Save Query
</Button>
<Spacer medium />
<Button thin secondary on:click={previewQuery}>Run Query</Button>
</div>
</div>
<div class="viewer-controls">
<Heading s>Results</Heading>
<div class="button-container">
<Button
secondary
thin
disabled={data.length === 0 || !query.name}
on:click={saveQuery}
>
Save Query
</Button>
<Spacer medium />
<Button thin secondary on:click={previewQuery}>Run Query</Button>
</div>
<Spacer small />
</div>
<Body s>
Below, you can preview the results from your query and change the
schema.
</Body>
<Spacer medium />
<section class="viewer">
{#if data}
<Tabs selected="JSON">
@ -213,12 +198,14 @@
</Tabs>
{/if}
</section>
</div>
</section>
{/if}
<Spacer extraLarge />
{/if}
</Layout>
<style>
.config {
display: grid;
grid-gap: var(--spacing-s);
}
.config-field {
display: grid;
grid-template-columns: 20% 1fr;
@ -236,10 +223,6 @@
display: flex;
}
.config {
margin-bottom: var(--spacing-s);
}
.delete {
align-self: center;
cursor: pointer;

2
packages/builder/src/components/start/AppCard.svelte
View File

@ -29,7 +29,7 @@
<Heading s>{name}</Heading>
<Spacer medium />
<div class="card-footer" data-cy={`app-${name}`}>
<ActionButton text medium blue on:click={() => $goto(`/builder/${_id}`)}>
<ActionButton on:click={() => $goto(`/builder/${_id}`)}>
Open
{name}
→