CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-21 06:05:52 +12:00
Code Issues Projects Releases Wiki Activity

Component panel now uses Tabs component

Browse source
This commit is contained in:
Keviin Åberg Kultalahti 2021-04-16 11:28:53 +02:00
parent 2255fdad64
commit ef74a2fe98
3 changed files with 23 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
packages/builder/src/components/design/NavigationPanel/FrontendNavigatePane.svelte
View file

@ -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}) => {

46
packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte
View file

@ -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,47 +45,46 @@
} }
</script> </script>
<CategoryTab <Tabs selected="Settings">
onClick={category => (selectedCategory = category)} <Tab title="Settings">
{categories} <div class="tab-content-padding">
{selectedCategory} /> {#if definition && definition.name}
<div class="instance-name">{definition.name}</div>
{#if definition && definition.name} {/if}
<div class="instance-name">{definition.name}</div> <DesignView
{/if}
<div class="component-props-container">
{#if selectedCategory.value === 'design'}
<DesignView
componentInstance={$selectedComponent} componentInstance={$selectedComponent}
componentDefinition={definition} componentDefinition={definition}
{onStyleChanged} {onStyleChanged}
{onCustomStyleChanged} {onCustomStyleChanged}
{onUpdateTransition} {onUpdateTransition}
{onResetStyles} /> {onResetStyles} />
{:else if selectedCategory.value === 'settings'} </div>
<SettingsView </Tab>
<Tab title="Design">
<div class="tab-content-padding">
{#if definition && definition.name}
<div class="instance-name">{definition.name}</div>
{/if}
<SettingsView
componentInstance={$selectedComponent} componentInstance={$selectedComponent}
componentDefinition={definition} componentDefinition={definition}
{showDisplayName} {showDisplayName}
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);
} }

2
packages/builder/src/pages/builder/[application]/design/[assetType]/_layout.svelte
View file

@ -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>