CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-02 13:01:09 +12:00
Code Issues Projects Releases Wiki Activity

Fix empty screen list when navigating between roles

Browse source
This commit is contained in:
Andrew Kingston 2020-12-23 08:54:09 +00:00
parent be9f036b40
commit f63b6946ec
2 changed files with 7 additions and 85 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

82
packages/builder/src/components/userInterface/ComponentsPaneSwitcher.svelte
View file

@ -1,82 +0,0 @@
<script>
import { store, allScreens } from "builderStore"
import { FrontendTypes } from "constants"
import ComponentPropertiesPanel from "./ComponentPropertiesPanel.svelte"
import ComponentSelectionList from "./ComponentSelectionList.svelte"
const PROPERTIES_TAB = "properties"
const COMPONENT_SELECTION_TAB = "components"
let selected = PROPERTIES_TAB
const isSelected = tab => selected === tab
const selectTab = tab => (selected = tab)
const toggleTab = () =>
(selected =
selected === PROPERTIES_TAB ? COMPONENT_SELECTION_TAB : PROPERTIES_TAB)
</script>
<div class="root">
{#if $store.currentFrontEndType === FrontendTypes.LAYOUT || $allScreens.length}
<div class="switcher">
<button
class:selected={selected === COMPONENT_SELECTION_TAB}
on:click={() => selectTab(COMPONENT_SELECTION_TAB)}>
Add
</button>
<button
class:selected={selected === PROPERTIES_TAB}
on:click={() => selectTab(PROPERTIES_TAB)}>
Edit
</button>
</div>
<div class="panel">
{#if selected === PROPERTIES_TAB}
<ComponentPropertiesPanel {toggleTab} />
{/if}
{#if selected === COMPONENT_SELECTION_TAB}
<ComponentSelectionList {toggleTab} />
{/if}
</div>
{/if}
</div>
<style>
.root {
height: 100%;
display: flex;
flex-direction: column;
padding: 20px 5px 20px 10px;
border-left: solid 1px var(--grey-2);
}
.switcher {
display: flex;
margin: 0px 20px 20px 0px;
}
.switcher > button {
display: inline-block;
border: none;
margin: 0;
padding: 0;
cursor: pointer;
font-size: 18px;
font-weight: 600;
color: var(--grey-5);
margin-right: 20px;
}
.switcher > .selected {
color: var(--ink);
}
.panel {
height: 100%;
}
</style>

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

@ -1,7 +1,11 @@
<script>
import { store, backendUiStore, currentAsset } from "builderStore"
import {
store,
backendUiStore,
currentAsset,
selectedComponent,
} from "builderStore"
import { onMount } from "svelte"
import { FrontendTypes } from "constants"
import CurrentItemPreview from "components/userInterface/AppPreview"
import ComponentPropertiesPanel from "components/userInterface/ComponentPropertiesPanel.svelte"
import ComponentSelectionList from "components/userInterface/ComponentSelectionList.svelte"
@ -43,7 +47,7 @@
{/if}
</div>
{#if $store.currentFrontEndType === FrontendTypes.SCREEN || $store.currentFrontEndType === FrontendTypes.LAYOUT}
{#if $selectedComponent != null}
<div class="components-pane">
<ComponentPropertiesPanel />
</div>