Fix more sizes in settings and drawer

This commit is contained in:
Andrew Kingston 2021-04-30 16:53:33 +01:00
parent 00573827b9
commit 836fdab139
3 changed files with 20 additions and 26 deletions

View File

@ -1,7 +1,14 @@
<script> <script>
import { flip } from "svelte/animate" import { flip } from "svelte/animate"
import { dndzone } from "svelte-dnd-action" import { dndzone } from "svelte-dnd-action"
import { Icon, Button, Popover, Layout, DrawerContent } from "@budibase/bbui" import {
Icon,
Button,
Layout,
DrawerContent,
ActionMenu,
MenuItem,
} from "@budibase/bbui"
import actionTypes from "./actions" import actionTypes from "./actions"
import { generate } from "shortid" import { generate } from "shortid"
@ -22,8 +29,6 @@
} }
} }
let addActionButton
let addActionDropdown
let selectedAction = actions?.length ? actions[0] : null let selectedAction = actions?.length ? actions[0] : null
$: selectedActionComponent = $: selectedActionComponent =
@ -53,7 +58,6 @@
} }
actions = [...actions, newAction] actions = [...actions, newAction]
selectedAction = newAction selectedAction = newAction
addActionDropdown.hide()
} }
const selectAction = (action) => () => { const selectAction = (action) => () => {
@ -71,24 +75,14 @@
<DrawerContent> <DrawerContent>
<div class="actions-list" slot="sidebar"> <div class="actions-list" slot="sidebar">
<Layout> <Layout>
<div bind:this={addActionButton}> <ActionMenu>
<Button wide secondary on:click={addActionDropdown.show}> <Button slot="control" secondary>Add Action</Button>
Add Action {#each actionTypes as actionType}
</Button> <MenuItem on:click={addAction(actionType)}>
</div> {actionType.name}
<Popover </MenuItem>
bind:this={addActionDropdown} {/each}
anchor={addActionButton} </ActionMenu>
align="right"
>
<div class="available-actions-container">
{#each actionTypes as actionType}
<div class="available-action" on:click={addAction(actionType)}>
<span>{actionType.name}</span>
</div>
{/each}
</div>
</Popover>
{#if actions && actions.length > 0} {#if actions && actions.length > 0}
<div <div
@ -148,7 +142,7 @@
.action-header { .action-header {
margin-bottom: var(--spacing-m); margin-bottom: var(--spacing-m);
font-size: var(--font-size-xs); font-size: var(--font-size-s);
color: var(--grey-7); color: var(--grey-7);
font-weight: 500; font-weight: 500;
} }
@ -161,7 +155,7 @@
.available-action { .available-action {
padding: var(--spacing-s); padding: var(--spacing-s);
font-size: var(--font-size-xs); font-size: var(--font-size-s);
cursor: pointer; cursor: pointer;
} }

View File

@ -51,7 +51,7 @@
} }
</script> </script>
<Button secondary size="S" on:click={drawer.show}>Define Actions</Button> <Button secondary on:click={drawer.show}>Define Actions</Button>
<Drawer bind:this={drawer} title={'Actions'}> <Drawer bind:this={drawer} title={'Actions'}>
<svelte:fragment slot="description"> <svelte:fragment slot="description">
Define what actions to run. Define what actions to run.

View File

@ -35,7 +35,7 @@
} }
</script> </script>
<Button size="S" secondary wide on:click={drawer.show}>Define Filters</Button> <Button secondary on:click={drawer.show}>Define Filters</Button>
<Drawer bind:this={drawer} title="Filtering"> <Drawer bind:this={drawer} title="Filtering">
<Button cta slot="buttons" on:click={saveFilter}>Save</Button> <Button cta slot="buttons" on:click={saveFilter}>Save</Button>
<DrawerContent slot="body"> <DrawerContent slot="body">