Fix more sizes in settings and drawer
This commit is contained in:
parent
00573827b9
commit
836fdab139
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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.
|
||||||
|
|
|
@ -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">
|
||||||
|
|
Loading…
Reference in New Issue