@ -5,12 +5,13 @@
Body,
Layout,
Detail,
Heading,
notifications,
} from "@budibase/bbui"
import { onMount } from "svelte"
import ICONS from "../icons"
import { API } from "api"
import { IntegrationNames , Integration Types } from "constants/backend"
import { IntegrationTypes } from "constants/backend"
import CreateTableModal from "components/backend/TableNavigator/modals/CreateTableModal.svelte"
import DatasourceConfigModal from "components/backend/DatasourceNavigator/modals/DatasourceConfigModal.svelte"
import GoogleDatasourceConfigModal from "components/backend/DatasourceNavigator/modals/GoogleDatasourceConfigModal.svelte"
@ -118,7 +119,7 @@
< Modal bind:this = { modal } >
< ModalContent
disabled={ ! Object . keys ( integration ). length }
title="Data "
title="Add data source "
confirmText="Continue"
showSecondaryButton={ showImportButton }
secondaryButtonText="Import"
@ -129,27 +130,25 @@
chooseNextModal()
}}
>
< Layout noPadding >
< Body size = "S"
>All apps need data. You can connect to a data source below, or add data
to your app using Budibase's built-in database.
< / Body >
< Layout noPadding gap = "XS" >
< Body size = "S" > Get started with Budibase DB< / Body >
< div
class:selected={ integration . type === IntegrationTypes . INTERNAL }
on:click={() => selectIntegration ( IntegrationTypes . INTERNAL )}
class="item hoverable"
>
< div class = "item-body" >
< svelte:component this = { ICONS . BUDIBASE } height="18" width = "18" />
< span class = "icon-spacing" > < Body size = "S" > Budibase DB< / Body > < / span >
< div class = "item-body with-type" >
< svelte:component this = { ICONS . BUDIBASE } height="20" width = "20" />
< div class = "text" >
< Heading size = "XXS" > Budibase DB< / Heading >
< Detail size = "S" class = "type" > Non-relational< / Detail >
< / div >
< / div >
< / div >
< / Layout >
< Layout gap = "XS" noPadding >
< div class = "title-spacing" >
< Detail size = "S" > Connect to data source< / Detail >
< / div >
< Layout noPadding gap = "XS" >
< Body size = "S" > Connect to an external data source< / Body >
< div class = "item-list" >
{ #each Object . entries ( integrations ). filter (([ key ]) => key !== IntegrationTypes . INTERNAL ) as [ integrationType , schema ]}
< div
@ -157,18 +156,18 @@
on:click={() => selectIntegration ( integrationType )}
class="item hoverable"
>
< div class = "item-body" >
< div class = "item-body" class:with-type = { !! schema . type } >
< svelte:component
this={ ICONS [ integrationType ]}
height="18 "
width="18 "
height="20 "
width="20 "
/>
< span class = "icon-spacing" >
< Body size = "S"
>{ schema . name || IntegrationNames [ integrationType ]} < /Body
>< /span
>
< div class = "text" >
< Heading size = "XXS" > { schema . friendlyName } </ Heading >
{ #if schema . type }
< Detail size = "S" > { schema . type || "" } </ Detail >
{ /if }
< / div >
< / div >
< / div >
{ /each }
@ -178,13 +177,6 @@
< / Modal >
< style >
.icon-spacing {
margin-left: var(--spacing-m);
}
.item-body {
display: flex;
margin-left: var(--spacing-m);
}
.item-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
@ -195,21 +187,35 @@
cursor: pointer;
display: grid;
grid-gap: var(--spectrum-alias-grid-margin-xsmall);
padding: var(--spectrum-alias-item-padding-s);
padding: var(--spectrum-alias-item-padding-s)
var(--spectrum-alias-item-padding-m);
background: var(--spectrum-alias-background-color-secondary);
transition: 0.3s all ;
transition: background 0.13s ease-out ;
border: solid var(--spectrum-alias-border-color);
border-radius: 5px;
box-sizing: border-box;
border-width: 2px;
}
.selected {
.item:hover,
.item. selected {
background: var(--spectrum-alias-background-color-tertiary);
}
.item:hover,
.selected {
background: var(--spectrum-alias-background-color-tertiary);
.item-body {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: var(--spacing-m);
}
.item-body.with-type {
align-items: flex-start;
}
.item-body.with-type :global(svg) {
margin-top: 4px;
}
.text :global(.spectrum-Detail) {
color: var(--spectrum-global-color-gray-700);
}
< / style >
Andrew Kingston
4 years ago