Update title in component settings panel and fix issue when components are not selected

This commit is contained in:
Andrew Kingston 2022-04-26 14:40:29 +01:00
parent bff36f499a
commit 1f6c6dd1a0
2 changed files with 13 additions and 9 deletions

View File

@ -1,6 +1,6 @@
<script> <script>
import SettingsPanel from "components/design/settings/SettingsPanel.svelte" import SettingsPanel from "components/design/settings/SettingsPanel.svelte"
import { store, selectedComponent, currentAsset } from "builderStore" import { store, selectedComponent, selectedScreen } from "builderStore"
import ComponentSettingsSection from "./ComponentSettingsSection.svelte" import ComponentSettingsSection from "./ComponentSettingsSection.svelte"
import DesignSection from "./DesignSection.svelte" import DesignSection from "./DesignSection.svelte"
import CustomStylesSection from "./CustomStylesSection.svelte" import CustomStylesSection from "./CustomStylesSection.svelte"
@ -14,23 +14,26 @@
$: componentDefinition = store.actions.components.getDefinition( $: componentDefinition = store.actions.components.getDefinition(
$selectedComponent?._component $selectedComponent?._component
) )
$: bindings = getBindableProperties($currentAsset, $store.selectedComponentId) $: bindings = getBindableProperties(
$: componentBindings = getComponentBindableProperties( $selectedScreen,
$currentAsset,
$store.selectedComponentId $store.selectedComponentId
) )
$: componentBindings = getComponentBindableProperties(
$selectedScreen,
$store.selectedComponentId
)
$: isScreen = $selectedComponent?._id === $selectedScreen?.props._id
$: title = isScreen ? "Screen" : $selectedComponent?._instanceName
</script> </script>
{#if $selectedComponent} {#if $selectedComponent}
<SettingsPanel <SettingsPanel {title} icon={componentDefinition.icon}>
title={$selectedComponent._instanceName}
icon={componentDefinition.icon}
>
<ComponentSettingsSection <ComponentSettingsSection
{componentInstance} {componentInstance}
{componentDefinition} {componentDefinition}
{bindings} {bindings}
{componentBindings} {componentBindings}
{isScreen}
/> />
<DesignSection {componentInstance} {componentDefinition} {bindings} /> <DesignSection {componentInstance} {componentDefinition} {bindings} />
<CustomStylesSection {componentInstance} {componentDefinition} {bindings} /> <CustomStylesSection {componentInstance} {componentDefinition} {bindings} />

View File

@ -14,6 +14,7 @@
export let assetInstance export let assetInstance
export let bindings export let bindings
export let componentBindings export let componentBindings
export let isScreen = false
const layoutDefinition = [] const layoutDefinition = []
const screenDefinition = [ const screenDefinition = [
@ -90,7 +91,7 @@
{#each sections as section, idx (section.name)} {#each sections as section, idx (section.name)}
<DetailSummary name={section.name} collapsible={false}> <DetailSummary name={section.name} collapsible={false}>
{#if idx === 0 && !componentInstance._component.endsWith("/layout")} {#if idx === 0 && !componentInstance._component.endsWith("/layout") && !isScreen}
<PropertyControl <PropertyControl
control={Input} control={Input}
label="Name" label="Name"