Merge pull request #12124 from Budibase/feature/component-name-setting-ux-update
Edit component name from the settings panel title
This commit is contained in:
deanhannigan
GitHub
commit
26cecf2543
|
|
@ -5,6 +5,7 @@ import {
|
|||
encodeJSBinding,
|
||||
findHBSBlocks,
|
||||
} from "@budibase/string-templates"
|
||||
import { capitalise } from "helpers"
|
||||
|
||||
/**
|
||||
* Recursively searches for a specific component ID
|
||||
|
|
@ -235,3 +236,13 @@ export const makeComponentUnique = component => {
|
|||
// Recurse on all children
|
||||
return JSON.parse(definition)
|
||||
}
|
||||
|
||||
export const getComponentText = component => {
|
||||
if (component?._instanceName) {
|
||||
return component._instanceName
|
||||
}
|
||||
const type =
|
||||
component._component.replace("@budibase/standard-components/", "") ||
|
||||
"component"
|
||||
return capitalise(type)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@
|
|||
export let closeButtonIcon = "Close"
|
||||
|
||||
$: customHeaderContent = $$slots["panel-header-content"]
|
||||
$: customTitleContent = $$slots["panel-title-content"]
|
||||
</script>
|
||||
|
||||
<div
|
||||
|
|
@ -33,7 +34,11 @@
|
|||
<Icon name={icon} />
|
||||
{/if}
|
||||
<div class="title">
|
||||
<Body size="S">{title}</Body>
|
||||
{#if customTitleContent}
|
||||
<slot name="panel-title-content" />
|
||||
{:else}
|
||||
<Body size="S">{title || ""}</Body>
|
||||
{/if}
|
||||
</div>
|
||||
{#if showAddButton}
|
||||
<div class="add-button" on:click={onClickAddButton}>
|
||||
|
|
@ -134,4 +139,7 @@
|
|||
.custom-content-wrap {
|
||||
border-bottom: var(--border-light);
|
||||
}
|
||||
.title {
|
||||
display: flex;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
<script>
|
||||
import Panel from "components/design/Panel.svelte"
|
||||
import { store, selectedComponent, selectedScreen } from "builderStore"
|
||||
import { getComponentText } from "builderStore/componentUtils"
|
||||
import ComponentSettingsSection from "./ComponentSettingsSection.svelte"
|
||||
import DesignSection from "./DesignSection.svelte"
|
||||
import CustomStylesSection from "./CustomStylesSection.svelte"
|
||||
import ConditionalUISection from "./ConditionalUISection.svelte"
|
||||
import { notifications } from "@budibase/bbui"
|
||||
|
||||
import {
|
||||
getBindableProperties,
|
||||
|
|
@ -13,6 +15,14 @@
|
|||
import { ActionButton } from "@budibase/bbui"
|
||||
import { capitalise } from "helpers"
|
||||
|
||||
const onUpdateName = async value => {
|
||||
try {
|
||||
await store.actions.components.updateSetting("_instanceName", value)
|
||||
} catch (error) {
|
||||
notifications.error("Error updating component name")
|
||||
}
|
||||
}
|
||||
|
||||
$: componentInstance = $selectedComponent
|
||||
$: componentDefinition = store.actions.components.getDefinition(
|
||||
$selectedComponent?._component
|
||||
|
|
@ -39,6 +49,22 @@
|
|||
{#if $selectedComponent}
|
||||
{#key $selectedComponent._id}
|
||||
<Panel {title} icon={componentDefinition?.icon} borderLeft wide>
|
||||
<span class="panel-title-content" slot="panel-title-content">
|
||||
<input
|
||||
class="input"
|
||||
value={title}
|
||||
{title}
|
||||
placeholder={getComponentText(componentInstance)}
|
||||
on:keypress={e => {
|
||||
if (e.key.toLowerCase() === "enter") {
|
||||
e.target.blur()
|
||||
}
|
||||
}}
|
||||
on:change={e => {
|
||||
onUpdateName(e.target.value)
|
||||
}}
|
||||
/>
|
||||
</span>
|
||||
<span slot="panel-header-content">
|
||||
<div class="settings-tabs">
|
||||
{#each tabs as tab}
|
||||
|
|
@ -90,4 +116,24 @@
|
|||
padding: 0 var(--spacing-l);
|
||||
padding-bottom: var(--spacing-l);
|
||||
}
|
||||
.input {
|
||||
color: inherit;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.panel-title-content {
|
||||
display: contents;
|
||||
}
|
||||
.input:focus {
|
||||
outline: none;
|
||||
}
|
||||
input::placeholder {
|
||||
color: var(--spectrum-global-color-gray-600);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script>
|
||||
import { helpers } from "@budibase/shared-core"
|
||||
import { Input, DetailSummary, notifications } from "@budibase/bbui"
|
||||
import { DetailSummary, notifications } from "@budibase/bbui"
|
||||
import { store } from "builderStore"
|
||||
import PropertyControl from "components/design/settings/controls/PropertyControl.svelte"
|
||||
import ResetFieldsButton from "components/design/settings/controls/ResetFieldsButton.svelte"
|
||||
|
|
@ -16,7 +16,6 @@
|
|||
export let isScreen = false
|
||||
export let onUpdateSetting
|
||||
export let showSectionTitle = true
|
||||
export let showInstanceName = true
|
||||
|
||||
$: sections = getSections(componentInstance, componentDefinition, isScreen)
|
||||
|
||||
|
|
@ -140,15 +139,6 @@
|
|||
/>
|
||||
{/if}
|
||||
<div class="settings">
|
||||
{#if idx === 0 && !componentInstance._component.endsWith("/layout") && !isScreen && showInstanceName}
|
||||
<PropertyControl
|
||||
control={Input}
|
||||
label="Name"
|
||||
key="_instanceName"
|
||||
value={componentInstance._instanceName}
|
||||
onChange={val => updateSetting({ key: "_instanceName" }, val)}
|
||||
/>
|
||||
{/if}
|
||||
{#each section.settings as setting (setting.key)}
|
||||
{#if setting.visible}
|
||||
<PropertyControl
|
||||
|
|
|
|||
|
|
@ -2,14 +2,16 @@
|
|||
import { store, userSelectedResourceMap } from "builderStore"
|
||||
import ComponentDropdownMenu from "./ComponentDropdownMenu.svelte"
|
||||
import NavItem from "components/common/NavItem.svelte"
|
||||
import { capitalise } from "helpers"
|
||||
import { notifications } from "@budibase/bbui"
|
||||
import {
|
||||
selectedComponentPath,
|
||||
selectedComponent,
|
||||
selectedScreen,
|
||||
} from "builderStore"
|
||||
import { findComponentPath } from "builderStore/componentUtils"
|
||||
import {
|
||||
findComponentPath,
|
||||
getComponentText,
|
||||
} from "builderStore/componentUtils"
|
||||
import { get } from "svelte/store"
|
||||
import { dndStore } from "./dndStore"
|
||||
|
||||
|
|
@ -35,16 +37,6 @@
|
|||
return false
|
||||
}
|
||||
|
||||
const getComponentText = component => {
|
||||
if (component._instanceName) {
|
||||
return component._instanceName
|
||||
}
|
||||
const type =
|
||||
component._component.replace("@budibase/standard-components/", "") ||
|
||||
"component"
|
||||
return capitalise(type)
|
||||
}
|
||||
|
||||
const getComponentIcon = component => {
|
||||
const def = store.actions.components.getDefinition(component?._component)
|
||||
return def?.icon
|
||||
|
|
|
|||
Loading…
Reference in New Issue