actually convert table command buttons

This commit is contained in:
Keviin Åberg Kultalahti 2021-04-08 18:10:18 +02:00
parent d8b352a9ae
commit f72dda18de
18 changed files with 52 additions and 87 deletions

View File

@ -14,3 +14,10 @@
<NotificationDisplay />
<Router {routes} {config} />
<div class="modal-container" />
<style>
.modal-container {
position: absolute;
}
</style>

View File

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

View File

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

View File

@ -1,5 +1,5 @@
<script>
import { Popover, TextButton, Icon } from "@budibase/bbui"
import { Popover, Button } from "@budibase/bbui"
import CalculatePopover from "../popovers/CalculatePopover.svelte"
export let view = {}
@ -9,14 +9,11 @@
</script>
<div bind:this={anchor}>
<TextButton
text
small
<Button icon="Calculator" type="overBackground" size="S" quiet
on:click={dropdown.show}
active={view.field && view.calculation}>
<Icon name="calculate" />
Calculate
</TextButton>
</Button>
</div>
<Popover bind:this={dropdown} {anchor} align="left">
<CalculatePopover {view} onClosed={dropdown.hide} />

View File

@ -1,7 +1,6 @@
<script>
import {
DropdownMenu,
TextButton as Button,
Button,
Icon,
Modal,
ModalContent,
@ -9,15 +8,11 @@
import CreateEditColumn from "../modals/CreateEditColumn.svelte"
let modal
let fieldName
</script>
<div>
<Button text small on:click={modal.show}>
<Icon name="addcolumn" />
<Button icon="AddCircle" type="overBackground" size="S" quiet on:click={modal.show}>
Create New Column
</Button>
</div>
</Button>
<Modal bind:this={modal}>
<ModalContent
showCancelButton={false}

View File

@ -1,5 +1,5 @@
<script>
import { TextButton as Button, Icon, Modal } from "@budibase/bbui"
import { Button, Icon, Modal } from "@budibase/bbui"
import CreateEditRow from "../modals/CreateEditRow.svelte"
export let modalContentComponent = CreateEditRow
@ -8,12 +8,9 @@
let modal
</script>
<div>
<Button text small on:click={modal.show}>
<Icon name="addrow" />
<Button icon="Add" type="overBackground" size="S" quiet on:click={modal.show}>
{title}
</Button>
</div>
</Button>
<Modal bind:this={modal}>
<svelte:component this={modalContentComponent} />
</Modal>

View File

@ -1,5 +1,5 @@
<script>
import { Popover, TextButton, Icon } from "@budibase/bbui"
import { Popover, Button } from "@budibase/bbui"
import CreateViewPopover from "../popovers/CreateViewPopover.svelte"
let anchor
@ -7,10 +7,9 @@
</script>
<div bind:this={anchor}>
<TextButton text small on:click={dropdown.show}>
<Icon name="view" />
<Button icon="CollectionAdd" type="overBackground" size="S" quiet on:click={dropdown.show}>
Create New View
</TextButton>
</Button>
</div>
<Popover bind:this={dropdown} {anchor} align="left">
<CreateViewPopover onClosed={dropdown.hide} />

View File

@ -1,5 +1,5 @@
<script>
import { TextButton, Icon } from "@budibase/bbui"
import { Button, Icon } from "@budibase/bbui"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
export let selectedRows
@ -13,14 +13,11 @@
}
</script>
<div>
<TextButton small text on:click={modal.show}>
<Icon name="delete" />
<Button icon="Delete" size="s" type="overBackground" quiet on:click={modal.show}>
Delete
{selectedRows.length}
row(s)
</TextButton>
</div>
</Button>
<ConfirmDialog
bind:this={modal}
okText="Delete"

View File

@ -1,23 +1,15 @@
<script>
import { TextButton as Button, Modal } from "@budibase/bbui"
import { Button, Modal } from "@budibase/bbui"
import EditRolesModal from "../modals/EditRoles.svelte"
let modal
</script>
<div>
<Button text small on:click={modal.show}>
<i class="ri-lock-line" />
<Button icon="UsersLock" type="overBackground" size="S" quiet on:click={modal.show}>
Edit Roles
</Button>
</div>
<Modal bind:this={modal}>
<EditRolesModal />
</Modal>
<style>
i {
margin-right: var(--spacing-xs);
font-size: var(--font-size-s);
}
</style>

View File

@ -1,6 +1,5 @@
<script>
import { TextButton, Icon, Popover } from "@budibase/bbui"
import api from "builderStore/api"
import { Button, Icon, Popover } from "@budibase/bbui"
import ExportPopover from "../popovers/ExportPopover.svelte"
export let view
@ -10,10 +9,9 @@
</script>
<div bind:this={anchor}>
<TextButton text small on:click={dropdown.show}>
<Icon name="download" />
<Button icon="Download" type="overBackground" size="S" quiet on:click={dropdown.show}>
Export
</TextButton>
</Button>
</div>
<Popover bind:this={dropdown} {anchor} align="left">
<ExportPopover {view} onClosed={dropdown.hide} />

View File

@ -1,5 +1,5 @@
<script>
import { Popover, TextButton, Icon } from "@budibase/bbui"
import { Popover, Button, Icon } from "@budibase/bbui"
import FilterPopover from "../popovers/FilterPopover.svelte"
export let view = {}
@ -9,14 +9,11 @@
</script>
<div bind:this={anchor}>
<TextButton
text
small
<Button icon="Filter" type="overBackground" size="S" quiet
on:click={dropdown.show}
active={view.filters && view.filters.length}>
<Icon name="filter" />
Filter
</TextButton>
</Button>
</div>
<Popover bind:this={dropdown} {anchor} align="left">
<FilterPopover {view} onClosed={dropdown.hide} />

View File

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

View File

@ -1,5 +1,5 @@
<script>
import { TextButton } from "@budibase/bbui"
import { Button } from "@budibase/bbui"
export let hideAutocolumns
@ -12,12 +12,13 @@
</script>
<div bind:this={anchor}>
<TextButton text small on:click={hideOrUnhide}>
<Button icon="MagicWand" type="overBackground" size="S" quiet on:click={hideOrUnhide}>
{#if hideAutocolumns}
<i class="ri-magic-line" />
Show Auto Columns
{:else}<i class="ri-magic-fill" /> Hide Auto Columns{/if}
</TextButton>
{:else}
Hide Auto Columns
{/if}
</Button>
</div>
<style>

View File

@ -1,5 +1,5 @@
<script>
import { TextButton, Popover } from "@budibase/bbui"
import { Button, Popover } from "@budibase/bbui"
import { permissions } from "stores/backend"
import ManageAccessPopover from "../popovers/ManageAccessPopover.svelte"
@ -16,10 +16,9 @@
</script>
<div bind:this={anchor}>
<TextButton text small on:click={openDropdown}>
<i class="ri-lock-line" />
<Button icon="LockClosed" type="overBackground" size="S" quiet on:click={openDropdown}>
Manage Access
</TextButton>
</Button>
</div>
<Popover bind:this={dropdown} {anchor} align="left">
<ManageAccessPopover
@ -28,10 +27,3 @@
permissions={resourcePermissions}
onClosed={dropdown.hide} />
</Popover>
<style>
i {
margin-right: var(--spacing-xs);
font-size: var(--font-size-s);
}
</style>

View File

@ -291,8 +291,8 @@
{#if !uneditable && originalName != null}
<TextButton text on:click={confirmDelete}>Delete Column</TextButton>
{/if}
<Button secondary on:click={onClosed}>Cancel</Button>
<Button primary on:click={saveColumn} bind:disabled={invalid}>
<Button on:click={onClosed}>Cancel</Button>
<Button type="cta" on:click={saveColumn} bind:disabled={invalid}>
Save Column
</Button>
</footer>
@ -319,7 +319,6 @@
.actions {
display: grid;
grid-gap: var(--spacing-xl);
min-width: 400px;
}
footer {

View File

@ -56,7 +56,7 @@
.integration-list {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-columns: repeat( auto-fit, minmax(150px, 1fr));
grid-gap: var(--spacing-m);
}
@ -68,7 +68,6 @@
transition: 0.3s all;
border-radius: var(--border-radius-s);
height: 75px;
width: 200px;
}
span {

View File

@ -41,6 +41,7 @@
<ModalContent
title="Create Datasource"
size="large"
confirmText="Create"
onConfirm={saveDatasource}
disabled={error || !name}>

View File

@ -76,7 +76,6 @@
<AppList />
</div>
<div id="modal-container" />
<Modal bind:this={modal} padding={false} width="600px" on:hide={closeModal}>
<CreateAppModal {hasKey} {template} />
@ -122,8 +121,4 @@
display: flex;
flex-direction: row;
}
#modal-container {
position: absolute;
}
</style>