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

fix body sizing in some components

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

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

@ -3,7 +3,7 @@
</script> </script>
<div class="root"> <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> </div>
<style> <style>

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

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