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

converts Create Datasource modal

This commit is contained in:
Keviin Åberg Kultalahti 2021-04-22 14:38:35 +02:00
parent ad1b6aaf54
commit 7fc487b6fc
2 changed files with 13 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
packages/builder/src/components/backend/DatasourceNavigator/TableIntegrationMenu/index.svelte
View File

@ -1,4 +1,5 @@
<script> <script>
import { Body } from "@budibase/bbui"
import { onMount } from "svelte" import { onMount } from "svelte"
import api from "builderStore/api" import api from "builderStore/api"
import ICONS from "../icons" import ICONS from "../icons"
@ -41,19 +42,15 @@
on:click={() => selectIntegration(integrationType)}> on:click={() => selectIntegration(integrationType)}>
<svelte:component <svelte:component
this={ICONS[integrationType]} this={ICONS[integrationType]}
height="100" height="50"
width="100" /> width="50"/>
<span>{integrationType}</span> <Body xs>{integrationType}</Body>
</div> </div>
{/each} {/each}
</div> </div>
</section> </section>
<style> <style>
section {
display: grid;
}
.integration-list { .integration-list {
display: grid; display: grid;
grid-template-columns: repeat( auto-fit, minmax(150px, 1fr)); grid-template-columns: repeat( auto-fit, minmax(150px, 1fr));
@ -61,23 +58,17 @@
} }
.integration { .integration {
display: flex; display: grid;
align-items: center; background: var(--background-alt);
flex-direction: column; place-items: center;
padding: 5px; grid-gap: 10px;
padding: 10px;
transition: 0.3s all; transition: 0.3s all;
border-radius: var(--border-radius-s); border-radius: var(--spectrum-alias-item-rounded-border-radius-s);
height: 75px;
}
span {
font-size: var(--font-size-xs);
margin-top: var(--spacing-m);
margin-bottom: var(--spacing-xs);
} }
.integration:hover, .integration:hover,
.selected { .selected {
background-color: var(--grey-3); background: var(--spectrum-alias-background-color-tertiary);
} }
</style> </style>

4
packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte
View File

@ -2,7 +2,7 @@
import { goto } from "@roxi/routify" import { goto } from "@roxi/routify"
import { datasources } from "stores/backend" import { datasources } from "stores/backend"
import { notifications } from "@budibase/bbui" import { notifications } from "@budibase/bbui"
import { Input, Heading, ModalContent } from "@budibase/bbui" import { Input, Label, ModalContent } from "@budibase/bbui"
import TableIntegrationMenu from "../TableIntegrationMenu/index.svelte" import TableIntegrationMenu from "../TableIntegrationMenu/index.svelte"
import analytics from "analytics" import analytics from "analytics"
@ -51,6 +51,6 @@
on:input={checkValid} on:input={checkValid}
bind:value={name} bind:value={name}
{error} /> {error} />
<Heading h2 xxs>Source</Heading> <Label>Datasource Type</Label>
<TableIntegrationMenu bind:integration /> <TableIntegrationMenu bind:integration />
</ModalContent> </ModalContent>