Merge pull request #8714 from Budibase/feature/delete-and-duplicate-component-actions
Show settings bar for all components
This commit is contained in:
commit
3dbea26407
2 changed files with 26 additions and 28 deletions
|
@ -84,7 +84,6 @@
|
||||||
"description": "This component contains things within itself",
|
"description": "This component contains things within itself",
|
||||||
"icon": "Selection",
|
"icon": "Selection",
|
||||||
"hasChildren": true,
|
"hasChildren": true,
|
||||||
"showSettingsBar": true,
|
|
||||||
"size": {
|
"size": {
|
||||||
"width": 400,
|
"width": 400,
|
||||||
"height": 200
|
"height": 200
|
||||||
|
@ -283,7 +282,6 @@
|
||||||
"description": "A basic html button that is ready for styling",
|
"description": "A basic html button that is ready for styling",
|
||||||
"icon": "Button",
|
"icon": "Button",
|
||||||
"editable": true,
|
"editable": true,
|
||||||
"showSettingsBar": true,
|
|
||||||
"size": {
|
"size": {
|
||||||
"width": 105,
|
"width": 105,
|
||||||
"height": 35
|
"height": 35
|
||||||
|
@ -420,7 +418,6 @@
|
||||||
"section"
|
"section"
|
||||||
],
|
],
|
||||||
"hasChildren": true,
|
"hasChildren": true,
|
||||||
"showSettingsBar": true,
|
|
||||||
"size": {
|
"size": {
|
||||||
"width": 400,
|
"width": 400,
|
||||||
"height": 100
|
"height": 100
|
||||||
|
@ -683,7 +680,6 @@
|
||||||
"illegalChildren": [
|
"illegalChildren": [
|
||||||
"section"
|
"section"
|
||||||
],
|
],
|
||||||
"showSettingsBar": true,
|
|
||||||
"editable": true,
|
"editable": true,
|
||||||
"size": {
|
"size": {
|
||||||
"width": 400,
|
"width": 400,
|
||||||
|
@ -809,7 +805,6 @@
|
||||||
"illegalChildren": [
|
"illegalChildren": [
|
||||||
"section"
|
"section"
|
||||||
],
|
],
|
||||||
"showSettingsBar": true,
|
|
||||||
"editable": true,
|
"editable": true,
|
||||||
"size": {
|
"size": {
|
||||||
"width": 400,
|
"width": 400,
|
||||||
|
@ -931,7 +926,6 @@
|
||||||
"tag": {
|
"tag": {
|
||||||
"name": "Tag",
|
"name": "Tag",
|
||||||
"icon": "Label",
|
"icon": "Label",
|
||||||
"showSettingsBar": true,
|
|
||||||
"size": {
|
"size": {
|
||||||
"width": 100,
|
"width": 100,
|
||||||
"height": 25
|
"height": 25
|
||||||
|
@ -1189,7 +1183,6 @@
|
||||||
"name": "Link",
|
"name": "Link",
|
||||||
"description": "A basic link component for internal and external links",
|
"description": "A basic link component for internal and external links",
|
||||||
"icon": "Link",
|
"icon": "Link",
|
||||||
"showSettingsBar": true,
|
|
||||||
"editable": true,
|
"editable": true,
|
||||||
"size": {
|
"size": {
|
||||||
"width": 200,
|
"width": 200,
|
||||||
|
@ -3927,7 +3920,6 @@
|
||||||
"dynamicfilter": {
|
"dynamicfilter": {
|
||||||
"name": "Dynamic Filter",
|
"name": "Dynamic Filter",
|
||||||
"icon": "Filter",
|
"icon": "Filter",
|
||||||
"showSettingsBar": true,
|
|
||||||
"size": {
|
"size": {
|
||||||
"width": 100,
|
"width": 100,
|
||||||
"height": 35
|
"height": 35
|
||||||
|
@ -4797,7 +4789,6 @@
|
||||||
"section"
|
"section"
|
||||||
],
|
],
|
||||||
"hasChildren": true,
|
"hasChildren": true,
|
||||||
"showSettingsBar": true,
|
|
||||||
"size": {
|
"size": {
|
||||||
"width": 400,
|
"width": 400,
|
||||||
"height": 100
|
"height": 100
|
||||||
|
|
|
@ -16,13 +16,16 @@
|
||||||
let measured = false
|
let measured = false
|
||||||
|
|
||||||
$: definition = $componentStore.selectedComponentDefinition
|
$: definition = $componentStore.selectedComponentDefinition
|
||||||
$: showBar = definition?.showSettingsBar && !$dndIsDragging
|
$: showBar =
|
||||||
|
definition?.showSettingsBar !== false && !$dndIsDragging && definition
|
||||||
$: {
|
$: {
|
||||||
if (!showBar) {
|
if (!showBar) {
|
||||||
measured = false
|
measured = false
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
$: settings = getBarSettings(definition)
|
$: settings = getBarSettings(definition)
|
||||||
|
$: isScreen =
|
||||||
|
$builderStore.selectedComponentId === $builderStore.screen?.props?._id
|
||||||
|
|
||||||
const getBarSettings = definition => {
|
const getBarSettings = definition => {
|
||||||
let allSettings = []
|
let allSettings = []
|
||||||
|
@ -152,26 +155,30 @@
|
||||||
{:else if setting.type === "color"}
|
{:else if setting.type === "color"}
|
||||||
<SettingsColorPicker prop={setting.key} />
|
<SettingsColorPicker prop={setting.key} />
|
||||||
{/if}
|
{/if}
|
||||||
{#if setting.barSeparator !== false}
|
{#if setting.barSeparator !== false && (settings.length != idx + 1 || !isScreen)}
|
||||||
<div class="divider" />
|
<div class="divider" />
|
||||||
{/if}
|
{/if}
|
||||||
{/each}
|
{/each}
|
||||||
<SettingsButton
|
{#if !isScreen}
|
||||||
icon="Duplicate"
|
<SettingsButton
|
||||||
on:click={() => {
|
icon="Duplicate"
|
||||||
builderStore.actions.duplicateComponent(
|
on:click={() => {
|
||||||
$builderStore.selectedComponentId
|
builderStore.actions.duplicateComponent(
|
||||||
)
|
$builderStore.selectedComponentId
|
||||||
}}
|
)
|
||||||
title="Duplicate component"
|
}}
|
||||||
/>
|
title="Duplicate component"
|
||||||
<SettingsButton
|
/>
|
||||||
icon="Delete"
|
<SettingsButton
|
||||||
on:click={() => {
|
icon="Delete"
|
||||||
builderStore.actions.deleteComponent($builderStore.selectedComponentId)
|
on:click={() => {
|
||||||
}}
|
builderStore.actions.deleteComponent(
|
||||||
title="Delete component"
|
$builderStore.selectedComponentId
|
||||||
/>
|
)
|
||||||
|
}}
|
||||||
|
title="Delete component"
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue