CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-06-14 16:35:02 +12:00
Code Issues Projects Releases Wiki Activity

fix body sizing in some components

Browse source
This commit is contained in:
Keviin Åberg Kultalahti 2021-04-23 14:03:34 +02:00
parent ef354ded09
commit 8904d32c14
3 changed files with 28 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
View file

@ -1,7 +1,7 @@
<script>
import { flip } from "svelte/animate"
import { dndzone } from "svelte-dnd-action"
import { Button, Popover, Spacer } from "@budibase/bbui"
import { Icon, Button, Popover, Spacer } from "@budibase/bbui"
import actionTypes from "./actions"
import { generate } from "shortid"
@ -14,7 +14,7 @@
// dndzone needs an id on the array items, so this adds some temporary ones.
$: {
if (actions) {
actions.forEach(action => {
actions.forEach((action) => {
if (!action.id) {
action.id = generate()
}
@ -28,7 +28,7 @@
$: selectedActionComponent =
selectedAction &&
actionTypes.find(t => t.name === selectedAction[EVENT_TYPE_KEY]).component
actionTypes.find((t) => t.name === selectedAction[EVENT_TYPE_KEY]).component
// Select the first action if we delete an action
$: {
@ -37,12 +37,12 @@
}
}
const deleteAction = index => {
const deleteAction = (index) => {
actions.splice(index, 1)
actions = actions
}
const addAction = actionType => () => {
const addAction = (actionType) => () => {
const newAction = {
parameters: {},
[EVENT_TYPE_KEY]: actionType.name,
@ -56,7 +56,7 @@
addActionDropdown.hide()
}
const selectAction = action => () => {
const selectAction = (action) => () => {
selectedAction = action
}
@ -80,7 +80,8 @@
<Popover
bind:this={addActionDropdown}
anchor={addActionButton}
align="right">
align="right"
>
<div class="available-actions-container">
{#each actionTypes as actionType}
<div class="available-action" on:click={addAction(actionType)}>
@ -94,24 +95,33 @@
{#if actions && actions.length > 0}
<div
class="action-dnd-container"
use:dndzone={{ items: actions, flipDurationMs, dropTargetStyle: { outline: 'none' } }}
use:dndzone={{
items: actions,
flipDurationMs,
dropTargetStyle: { outline: "none" },
}}
on:consider={handleDndConsider}
on:finalize={handleDndFinalize}>
on:finalize={handleDndFinalize}
>
{#each actions as action, index (action.id)}
<div
class="action-container"
animate:flip={{ duration: flipDurationMs }}>
animate:flip={{ duration: flipDurationMs }}
>
<div
class="action-header"
class:selected={action === selectedAction}
on:click={selectAction(action)}>
on:click={selectAction(action)}
>
{index + 1}.
{action[EVENT_TYPE_KEY]}
</div>
<i
class="ri-close-fill"
<div
on:click={() => deleteAction(index)}
style="margin-left: auto;"
on:click={() => deleteAction(index)} />
>
<Icon s hoverable name="Close" />
</div>
</div>
{/each}
</div>
@ -122,7 +132,8 @@
<div class="selected-action-container">
<svelte:component
this={selectedActionComponent}
parameters={selectedAction.parameters} />
parameters={selectedAction.parameters}
/>
</div>
{/if}
</div>

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

@ -3,7 +3,7 @@
</script>
<div class="root">
<Body small grey>This action doesn't require any additional settings.</Body>
<Body s>This action doesn't require any additional settings.</Body>
</div>
<style>

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

@ -28,7 +28,7 @@
</script>
<div class="root">
<Body small grey>
<Body s>
Choosing a Data Source will automatically use the data it provides, but it's
optional.<br />
You can always add or override fields manually.