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

Add setting button for ejecting blocks. Update manifest to show info beside relevant settings

This commit is contained in:
Andrew Kingston 2022-08-30 10:53:58 +01:00
parent 945a4c99c5
commit b4dc03751d
4 changed files with 50 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
packages/builder/src/components/design/settings/controls/EjectBlockButton.svelte Normal file
View File

@ -0,0 +1,23 @@
<script>
import { ActionButton } from "@budibase/bbui"
import { store } from "builderStore"
import ConfirmDialog from "components/common/ConfirmDialog.svelte"
export let componentInstance
let confirmDialog
</script>
<div>
<ActionButton secondary on:click={confirmDialog.show}>
Eject block
</ActionButton>
</div>
<ConfirmDialog
bind:this={confirmDialog}
title="Eject block"
body="Ejecting a block breaks it down into multiple components. Are you sure you want to eject this block?"
onOk={() =>
store.actions.components.requestEjectBlock(componentInstance?._id)}
okText="Eject block"
/>

9
packages/builder/src/components/design/settings/controls/PropertyControl.svelte
View File

@ -20,6 +20,7 @@
export let componentBindings = []
export let nested = false
export let highlighted = false
export let info = null
$: nullishValue = value == null || value === ""
$: allBindings = getAllBindings(bindings, componentBindings, nested)
@ -99,6 +100,9 @@
{...props}
/>
</div>
{#if info}
<div class="text">{@html info}</div>
{/if}
</div>
<style>
@ -123,4 +127,9 @@
.control {
position: relative;
}
.text {
margin-top: var(--spectrum-global-dimension-size-65);
font-size: var(--spectrum-global-dimension-font-size-75);
color: var(--grey-6);
}
</style>

16
packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/settings/ComponentSettingsSection.svelte
View File

@ -4,6 +4,7 @@
import { store } from "builderStore"
import PropertyControl from "components/design/settings/controls/PropertyControl.svelte"
import ResetFieldsButton from "components/design/settings/controls/ResetFieldsButton.svelte"
import EjectBlockButton from "components/design/settings/controls/EjectBlockButton.svelte"
import { getComponentForSetting } from "components/design/settings/componentSettings"
export let componentDefinition
@ -21,7 +22,6 @@
return [
{
name: "General",
info: componentDefinition?.info,
settings: generalSettings,
},
...(customSections || []),
@ -103,6 +103,7 @@
nested={setting.nested}
onChange={val => updateSetting(setting.key, val)}
highlighted={$store.highlightedSettingKey === setting.key}
info={setting.info}
props={{
// Generic settings
placeholder: setting.placeholder || null,
@ -124,17 +125,8 @@
{#if idx === 0 && componentDefinition?.component?.endsWith("/fieldgroup")}
<ResetFieldsButton {componentInstance} />
{/if}
{#if section?.info}
<div class="text">
{@html section.info}
</div>
{#if idx === 0 && componentDefinition?.block}
<EjectBlockButton {componentInstance} />
{/if}
</DetailSummary>
{/each}
<style>
.text {
font-size: var(--spectrum-global-dimension-font-size-75);
color: var(--grey-6);
}
</style>

28
packages/client/manifest.json
View File

@ -3437,7 +3437,6 @@
},
"s3upload": {
"name": "S3 File Upload",
"info": "This component can't be used with S3 datasources that use custom endpoints.",
"icon": "UploadToCloud",
"styles": [
"size"
@ -3458,7 +3457,8 @@
{
"type": "dataSource/s3",
"label": "S3 Datasource",
"key": "datasourceId"
"key": "datasourceId",
"info": "This component can't be used with S3 datasources that use custom endpoints"
},
{
"type": "text",
@ -3496,7 +3496,6 @@
},
"dataprovider": {
"name": "Data Provider",
"info": "Pagination is only available for data stored in tables.",
"icon": "Data",
"illegalChildren": [
"section"
@ -3542,7 +3541,8 @@
"type": "boolean",
"label": "Paginate",
"key": "paginate",
"defaultValue": true
"defaultValue": true,
"info": "Pagination is only available for data stored in tables"
}
],
"context": {
@ -3579,7 +3579,6 @@
],
"hasChildren": true,
"showEmptyState": false,
"info": "Row selection is only compatible with internal or SQL tables",
"settings": [
{
"type": "dataProvider",
@ -3636,7 +3635,8 @@
"type": "boolean",
"label": "Allow row selection",
"key": "allowSelectRows",
"defaultValue": false
"defaultValue": false,
"info": "Row selection is only compatible with internal or SQL tables"
},
{
"type": "boolean",
@ -3677,13 +3677,13 @@
"size"
],
"hasChildren": false,
"info": "Your data provider will be automatically filtered to the given date range.",
"settings": [
{
"type": "dataProvider",
"label": "Provider",
"key": "dataProvider",
"required": true
"required": true,
"info": "Your data provider will be automatically filtered to the given date range."
},
{
"type": "field",
@ -3818,7 +3818,6 @@
"styles": [
"size"
],
"info": "Only the first 3 search columns will be used.",
"settings": [
{
"type": "text",
@ -3835,7 +3834,8 @@
"type": "searchfield",
"label": "Search Columns",
"key": "searchColumns",
"placeholder": "Choose search columns"
"placeholder": "Choose search columns",
"info": "Only the first 3 search columns will be used"
},
{
"type": "filter",
@ -3882,7 +3882,6 @@
{
"section": true,
"name": "Table",
"info": "Row selection is only compatible with internal or SQL tables",
"settings": [
{
"type": "number",
@ -3916,7 +3915,8 @@
{
"type": "boolean",
"label": "Allow row selection",
"key": "allowSelectRows"
"key": "allowSelectRows",
"info": "Row selection is only compatible with internal or SQL tables"
},
{
"type": "boolean",
@ -3983,7 +3983,6 @@
"styles": [
"size"
],
"info": "Only the first 3 search columns will be used.",
"settings": [
{
"type": "text",
@ -4000,7 +3999,8 @@
"type": "searchfield",
"label": "Search Columns",
"key": "searchColumns",
"placeholder": "Choose search columns"
"placeholder": "Choose search columns",
"info": "Only the first 3 search columns will be used"
},
{
"type": "filter",