MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

builder data side panel now uses new tabs component

This commit is contained in:
Keviin Åberg Kultalahti 2021-04-16 10:07:33 +02:00
parent a800c6198a
commit af2b3198a5
2 changed files with 32 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
packages/builder/src/pages/builder/[application]/data/_layout.svelte
View File

@ -1,6 +1,6 @@
<script> <script>
import { isActive, goto } from "@roxi/routify" import { isActive, goto } from "@roxi/routify"
import { Switcher, Modal } from "@budibase/bbui" import { Switcher, Modal, Tabs, Tab } from "@budibase/bbui"
import TableNavigator from "components/backend/TableNavigator/TableNavigator.svelte" import TableNavigator from "components/backend/TableNavigator/TableNavigator.svelte"
import DatasourceNavigator from "components/backend/DatasourceNavigator/DatasourceNavigator.svelte" import DatasourceNavigator from "components/backend/DatasourceNavigator/DatasourceNavigator.svelte"
import CreateDatasourceModal from "components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte" import CreateDatasourceModal from "components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte"
@ -17,11 +17,11 @@
}, },
] ]
let tab = $isActive("./datasource") ? "datasource" : "table" let selected = $isActive("./datasource") ? "External" : "Internal"
function selectFirstTableOrSource({ detail }) { function selectFirstTableOrSource({ detail }) {
const type = detail.heading.key const { key } = tabs.find(t => t.title === detail)
if (type === "datasource") { if (key === "datasource") {
$goto("./datasource") $goto("./datasource")
} else { } else {
$goto("./table") $goto("./table")
@ -34,28 +34,30 @@
<!-- routify:options index=0 --> <!-- routify:options index=0 -->
<div class="root"> <div class="root">
<div class="nav"> <div class="nav">
<Switcher <Tabs {selected} on:select={selectFirstTableOrSource}>
headings={tabs} <Tab title="Internal">
bind:value={tab} <div class="tab-content-padding">
on:change={selectFirstTableOrSource}> <TableNavigator />
<div class="title"> <Modal bind:this={modal}>
<i <CreateTableModal />
data-cy={`new-${tab}`} </Modal>
class="ri-add-circle-fill" </div>
on:click={modal.show} /> </Tab>
</div> <Tab title="External">
{#if tab === 'table'} <div class="tab-content-padding">
<TableNavigator /> <DatasourceNavigator />
<Modal bind:this={modal}> <Modal bind:this={modal}>
<CreateTableModal /> <CreateDatasourceModal />
</Modal> </Modal>
{:else if tab === 'datasource'} </div>
<DatasourceNavigator /> </Tab>
<Modal bind:this={modal}> </Tabs>
<CreateDatasourceModal /> <div class="title">
</Modal> <i
{/if} data-cy={`new-${selected === 'External' ? 'datasource' : 'tabel'}`}
</Switcher> class="ri-add-circle-fill"
on:click={modal.show} />
</div>
</div> </div>
<div class="content"> <div class="content">
<slot /> <slot />
@ -84,16 +86,17 @@
.content :global(> span) { .content :global(> span) {
display: contents; display: contents;
} }
.tab-content-padding {
padding: 0 var(--spacing-s);
}
.nav { .nav {
overflow-y: auto; overflow-y: auto;
background: var(--background); background: var(--background);
padding: var(--spacing-l) var(--spacing-xl);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
align-items: stretch; align-items: stretch;
gap: var(--spacing-l);
position: relative; position: relative;
border-right: var(--border-light); border-right: var(--border-light);
} }

2
packages/builder/src/pages/builder/[application]/data/datasource/index.svelte
View File

@ -5,7 +5,7 @@
onMount(async () => { onMount(async () => {
// navigate to first table in list, if not already selected // navigate to first table in list, if not already selected
$datasources.list.length > 0 && $goto(`../${$datasources.list[0]._id}`) $datasources.list.length > 0 && $goto(`./${$datasources.list[0]._id}`)
}) })
</script> </script>