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

Update data page to use new styles

This commit is contained in:
Andrew Kingston 2020-10-23 12:25:22 +01:00
parent 6f9c29a955
commit 2c7910ee51
4 changed files with 124 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

73
packages/builder/src/components/backend/DataTable/Table.svelte
View File

@ -51,19 +51,17 @@
} }
</script> </script>
<section> <div class="table-container">
<div class="table-controls"> <div class="title">
<h2 class="title"> <h1>{title}</h1>
<span>{title}</span> {#if loading}
{#if loading} <div transition:fade>
<div transition:fade> <Spinner size="10" />
<Spinner size="10" /> </div>
</div> {/if}
{/if} </div>
</h2> <div class="popovers">
<div class="popovers"> <slot />
<slot />
</div>
</div> </div>
<table class="bb-table"> <table class="bb-table">
<thead> <thead>
@ -125,20 +123,44 @@
bind:currentPage bind:currentPage
pageItemCount={paginatedData.length} pageItemCount={paginatedData.length}
{ITEMS_PER_PAGE} /> {ITEMS_PER_PAGE} />
</section> </div>
<style> <style>
.table-container {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
gap: var(--spacing-l);
}
.title { .title {
font-size: 24px; height: 24px;
font-weight: 600;
text-rendering: optimizeLegibility;
margin-top: 0;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
} }
.title > span { .title h1 {
font-size: var(--font-size-m);
font-weight: 500;
margin: 0;
}
.title > div {
margin-left: var(--spacing-xs);
}
.popovers {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: var(--spacing-l);
}
.popovers :global(button) {
font-weight: 500;
}
.popovers :global(button svg) {
margin-right: var(--spacing-xs); margin-right: var(--spacing-xs);
} }
@ -200,19 +222,6 @@
background: var(--grey-1); background: var(--grey-1);
} }
.table-controls {
width: 100%;
}
.popovers {
display: flex;
}
:global(.popovers > div) {
margin-right: var(--spacing-m);
margin-bottom: var(--spacing-xl);
}
.edit-header { .edit-header {
width: 60px; width: 60px;
} }

103
packages/builder/src/components/backend/TableNavigator/TableNavigator.svelte
View File

@ -5,9 +5,10 @@
import CreateTableModal from "./modals/CreateTableModal.svelte" import CreateTableModal from "./modals/CreateTableModal.svelte"
import EditTablePopover from "./popovers/EditTablePopover.svelte" import EditTablePopover from "./popovers/EditTablePopover.svelte"
import EditViewPopover from "./popovers/EditViewPopover.svelte" import EditViewPopover from "./popovers/EditViewPopover.svelte"
import { Heading } from "@budibase/bbui" import { Modal } from "@budibase/bbui"
import { Spacer } from "@budibase/bbui" import NavItem from "components/common/NavItem.svelte"
let modal
$: selectedView = $: selectedView =
$backendUiStore.selectedView && $backendUiStore.selectedView.name $backendUiStore.selectedView && $backendUiStore.selectedView.name
@ -20,67 +21,77 @@
backendUiStore.actions.views.select(view) backendUiStore.actions.views.select(view)
$goto(`./view/${view.name}`) $goto(`./view/${view.name}`)
} }
function onClickView(table, viewName) {
if (selectedView === viewName) {
return
}
selectView({
name: viewName,
...table.views[viewName],
})
}
</script> </script>
<div class="items-root"> <div class="items-root">
{#if $backendUiStore.selectedDatabase && $backendUiStore.selectedDatabase._id} {#if $backendUiStore.selectedDatabase && $backendUiStore.selectedDatabase._id}
<div class="hierarchy"> <div class="title">
<div class="components-list-container"> <h1>Tables</h1>
<Heading small>Tables</Heading> <i on:click={modal.show} class="ri-add-circle-fill" />
<Spacer medium /> </div>
<CreateTableModal /> <div class="hierarchy-items-container">
<div class="hierarchy-items-container"> {#each $backendUiStore.tables as table}
{#each $backendUiStore.tables as table} <NavItem
<ListItem icon="ri-table-line"
selected={selectedView === `all_${table._id}`} text={table.name}
title={table.name} selected={selectedView === `all_${table._id}`}
icon="ri-table-fill" on:click={() => selectTable(table)}>
on:click={() => selectTable(table)}> <EditTablePopover {table} />
<EditTablePopover {table} /> </NavItem>
</ListItem> {#each Object.keys(table.views || {}) as viewName}
{#each Object.keys(table.views || {}) as viewName} <NavItem
<ListItem indentLevel={1}
indented icon="ri-eye-line"
selected={selectedView === viewName} text={viewName}
title={viewName} selected={selectedView === viewName}
icon="ri-eye-line" on:click={() => onClickView(table, viewName)}>
on:click={() => (selectedView === viewName ? {} : selectView({ <EditViewPopover
name: viewName, view={{ name: viewName, ...table.views[viewName] }} />
...table.views[viewName], </NavItem>
}))}> {/each}
<EditViewPopover {/each}
view={{ name: viewName, ...table.views[viewName] }} />
</ListItem>
{/each}
{/each}
</div>
</div>
</div> </div>
{/if} {/if}
</div> </div>
<Modal bind:this={modal}>
<CreateTableModal />
</Modal>
<style> <style>
h5 {
font-size: 18px;
font-weight: 600;
margin-top: 0;
margin-bottom: var(--spacing-xl);
}
.items-root { .items-root {
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);
} }
.hierarchy { .title {
display: flex; display: flex;
flex-direction: column; flex-direction: row;
justify-content: space-between;
align-items: center;
} }
.title h1 {
.hierarchy-items-container { font-size: var(--font-size-m);
margin-top: var(--spacing-xl); font-weight: 500;
flex: 1 1 auto; margin: 0;
}
.title i {
font-size: 20px;
}
.title i:hover {
cursor: pointer;
color: var(--blue);
} }
</style> </style>

54
packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
View File

@ -2,8 +2,7 @@
import { goto } from "@sveltech/routify" import { goto } from "@sveltech/routify"
import { backendUiStore, store } from "builderStore" import { backendUiStore, store } from "builderStore"
import { notifier } from "builderStore/store/notifications" import { notifier } from "builderStore/store/notifications"
import { Button, Input, Label, ModalContent, Modal } from "@budibase/bbui" import { Input, Label, ModalContent } from "@budibase/bbui"
import Spinner from "components/common/Spinner.svelte"
import TableDataImport from "../TableDataImport.svelte" import TableDataImport from "../TableDataImport.svelte"
import analytics from "analytics" import analytics from "analytics"
import screenTemplates from "builderStore/store/screenTemplates" import screenTemplates from "builderStore/store/screenTemplates"
@ -22,15 +21,9 @@
let dataImport let dataImport
let error = "" let error = ""
function resetState() {
name = ""
dataImport = undefined
error = ""
}
function checkValid(evt) { function checkValid(evt) {
const tableName = evt.target.value const tableName = evt.target.value
if ($backendUiStore.models?.some(model => model.name === tableName)) { if ($backendUiStore.models?.some((model) => model.name === tableName)) {
error = `Table with name ${tableName} already exists. Please choose another name.` error = `Table with name ${tableName} already exists. Please choose another name.`
return return
} }
@ -56,8 +49,8 @@
// Create auto screens // Create auto screens
const screens = screenTemplates($store, [table]) const screens = screenTemplates($store, [table])
.filter(template => defaultScreens.includes(template.id)) .filter((template) => defaultScreens.includes(template.id))
.map(template => template.create()) .map((template) => template.create())
for (let screen of screens) { for (let screen of screens) {
// Record the table that created this screen so we can link it later // Record the table that created this screen so we can link it later
screen.autoTableId = table._id screen.autoTableId = table._id
@ -74,7 +67,7 @@
} }
// Create autolink to newly created list page // Create autolink to newly created list page
const listPage = screens.find(screen => const listPage = screens.find((screen) =>
screen.props._instanceName.endsWith("List") screen.props._instanceName.endsWith("List")
) )
await store.createLink(listPage.route, table.name) await store.createLink(listPage.route, table.name)
@ -84,23 +77,20 @@
} }
</script> </script>
<Button primary wide on:click={modal.show}>Create New Table</Button> <ModalContent
<Modal bind:this={modal} on:hide={resetState}> title="Create Table"
<ModalContent confirmText="Create"
title="Create Table" onConfirm={saveTable}
confirmText="Create" disabled={error || !name || (dataImport && !dataImport.valid)}>
onConfirm={saveTable} <Input
disabled={error || !name || (dataImport && !dataImport.valid)}> data-cy="table-name-input"
<Input thin
data-cy="table-name-input" label="Table Name"
thin on:input={checkValid}
label="Table Name" bind:value={name}
on:input={checkValid} {error} />
bind:value={name} <div>
{error} /> <Label grey extraSmall>Create Table from CSV (Optional)</Label>
<div> <TableDataImport bind:dataImport />
<Label grey extraSmall>Create Table from CSV (Optional)</Label> </div>
<TableDataImport bind:dataImport /> </ModalContent>
</div>
</ModalContent>
</Modal>

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

@ -18,18 +18,17 @@
.root { .root {
height: calc(100vh - 60px); height: calc(100vh - 60px);
display: grid; display: grid;
grid-template-columns: 300px minmax(0, 1fr); grid-template-columns: 260px minmax(0, 1fr);
background: var(--grey-1); background: var(--grey-2);
line-height: 1;
} }
.content { .content {
flex: 1 1 auto; flex: 1 1 auto;
padding: var(--spacing-xl) 40px; padding: var(--spacing-l) 40px;
overflow-y: auto; overflow-y: auto;
} }
.nav { .nav {
overflow-y: auto; overflow-y: auto;
background: var(--white); background: var(--white);
padding: var(--spacing-xl); padding: var(--spacing-l) var(--spacing-xl);
} }
</style> </style>