Component panel now uses Tabs component
This commit is contained in:
parent
2255fdad64
commit
ef74a2fe98
3 changed files with 23 additions and 26 deletions
|
@ -27,7 +27,6 @@
|
||||||
]
|
]
|
||||||
|
|
||||||
let modal
|
let modal
|
||||||
let routes = {}
|
|
||||||
$: selected = tabs.find(t => t.key === $params.assetType).title
|
$: selected = tabs.find(t => t.key === $params.assetType).title
|
||||||
|
|
||||||
const navigate = ({detail}) => {
|
const navigate = ({detail}) => {
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
<script>
|
<script>
|
||||||
import { get } from "svelte/store"
|
import { get } from "svelte/store"
|
||||||
import { store, selectedComponent, currentAsset } from "builderStore"
|
import { store, selectedComponent, currentAsset } from "builderStore"
|
||||||
|
import { Tabs, Tab } from '@budibase/bbui'
|
||||||
import { FrontendTypes } from "constants"
|
import { FrontendTypes } from "constants"
|
||||||
import CategoryTab from "./CategoryTab.svelte"
|
import CategoryTab from "./CategoryTab.svelte"
|
||||||
import DesignView from "./DesignView.svelte"
|
import DesignView from "./DesignView.svelte"
|
||||||
|
@ -44,17 +45,12 @@
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<CategoryTab
|
<Tabs selected="Settings">
|
||||||
onClick={category => (selectedCategory = category)}
|
<Tab title="Settings">
|
||||||
{categories}
|
<div class="tab-content-padding">
|
||||||
{selectedCategory} />
|
{#if definition && definition.name}
|
||||||
|
|
||||||
{#if definition && definition.name}
|
|
||||||
<div class="instance-name">{definition.name}</div>
|
<div class="instance-name">{definition.name}</div>
|
||||||
{/if}
|
{/if}
|
||||||
|
|
||||||
<div class="component-props-container">
|
|
||||||
{#if selectedCategory.value === 'design'}
|
|
||||||
<DesignView
|
<DesignView
|
||||||
componentInstance={$selectedComponent}
|
componentInstance={$selectedComponent}
|
||||||
componentDefinition={definition}
|
componentDefinition={definition}
|
||||||
|
@ -62,7 +58,13 @@
|
||||||
{onCustomStyleChanged}
|
{onCustomStyleChanged}
|
||||||
{onUpdateTransition}
|
{onUpdateTransition}
|
||||||
{onResetStyles} />
|
{onResetStyles} />
|
||||||
{:else if selectedCategory.value === 'settings'}
|
</div>
|
||||||
|
</Tab>
|
||||||
|
<Tab title="Design">
|
||||||
|
<div class="tab-content-padding">
|
||||||
|
{#if definition && definition.name}
|
||||||
|
<div class="instance-name">{definition.name}</div>
|
||||||
|
{/if}
|
||||||
<SettingsView
|
<SettingsView
|
||||||
componentInstance={$selectedComponent}
|
componentInstance={$selectedComponent}
|
||||||
componentDefinition={definition}
|
componentDefinition={definition}
|
||||||
|
@ -70,21 +72,19 @@
|
||||||
onChange={store.actions.components.updateProp}
|
onChange={store.actions.components.updateProp}
|
||||||
onScreenPropChange={setAssetProps}
|
onScreenPropChange={setAssetProps}
|
||||||
assetInstance={$store.currentView !== 'component' && $currentAsset} />
|
assetInstance={$store.currentView !== 'component' && $currentAsset} />
|
||||||
{/if}
|
</div>
|
||||||
</div>
|
</Tab>
|
||||||
|
</Tabs>
|
||||||
|
|
||||||
<style>
|
<style>
|
||||||
.component-props-container {
|
|
||||||
flex: 1 1 auto;
|
.tab-content-padding {
|
||||||
min-height: 0;
|
padding: 0 var(--spacing-s);
|
||||||
overflow-y: auto;
|
|
||||||
margin-left: -20px;
|
|
||||||
margin-right: -20px;
|
|
||||||
padding: 0 20px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.instance-name {
|
.instance-name {
|
||||||
font-size: var(--font-size-xs);
|
font-size: var(--font-size-xs);
|
||||||
|
margin-bottom: var(--spacing-l);
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
color: var(--grey-7);
|
color: var(--grey-7);
|
||||||
}
|
}
|
||||||
|
|
|
@ -206,8 +206,6 @@
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
align-items: stretch;
|
align-items: stretch;
|
||||||
gap: var(--spacing-l);
|
|
||||||
padding: var(--spacing-l) var(--spacing-xl);
|
|
||||||
border-left: var(--border-light);
|
border-left: var(--border-light);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in a new issue