ufkc7e3d
/
budibase
forked from tsai/budibase
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Update styles to use spectrum components

master
Andrew Kingston 4 years ago
parent
5dd8186383
commit
2663860ec1
2 changed files with 39 additions and 54 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      packages/bbui/src/Typography/Detail.svelte
  2. 91
      packages/builder/src/components/backend/DatasourceNavigator/modals/CreateDatasourceModal.svelte

2
packages/bbui/src/Typography/Detail.svelte
View File

@ -1,9 +1,7 @@
<script> <script>
import "@spectrum-css/typography/dist/index-vars.css" import "@spectrum-css/typography/dist/index-vars.css"
// Sizes
export let size = "M" export let size = "M"
export let serif = false export let serif = false
</script> </script>

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

@ -131,53 +131,48 @@
chooseNextModal() chooseNextModal()
}} }}
> >
<Layout noPadding gap="M"> <Layout noPadding gap="XS">
<Layout noPadding> <Body size="S">Get started with Budibase DB</Body>
<Body size="S"> <div
All apps need data. You can connect to a data source below, or add class:selected={integration.type === IntegrationTypes.INTERNAL}
data to your app using Budibase's built-in database. on:click={() => selectIntegration(IntegrationTypes.INTERNAL)}
</Body> class="item hoverable"
<div >
class:selected={integration.type === IntegrationTypes.INTERNAL} <div class="item-body with-type">
on:click={() => selectIntegration(IntegrationTypes.INTERNAL)} <svelte:component this={ICONS.BUDIBASE} height="20" width="20" />
class="item hoverable" <div class="text">
> <Heading size="XXS">Budibase DB</Heading>
<div class="item-body with-type"> <Detail size="S" class="type">Non-relational</Detail>
<svelte:component this={ICONS.BUDIBASE} height="20" width="20" />
<div class="text">
<div class="name">Budibase DB</div>
<div class="type">Non-relational</div>
</div>
</div> </div>
</div> </div>
</Layout> </div>
</Layout>
<Layout gap="XS" noPadding>
<div class="type">Connect to data source</div> <Layout noPadding gap="XS">
<div class="item-list"> <Body size="S">Connect to an external data source</Body>
{#each Object.entries(integrations).filter(([key]) => key !== IntegrationTypes.INTERNAL) as [integrationType, schema]} <div class="item-list">
<div {#each Object.entries(integrations).filter(([key]) => key !== IntegrationTypes.INTERNAL) as [integrationType, schema]}
class:selected={integration.type === integrationType} <div
on:click={() => selectIntegration(integrationType)} class:selected={integration.type === integrationType}
class="item hoverable" on:click={() => selectIntegration(integrationType)}
> class="item hoverable"
<div class="item-body" class:with-type={!!schema.type}> >
<svelte:component <div class="item-body" class:with-type={!!schema.type}>
this={ICONS[integrationType]} <svelte:component
height="20" this={ICONS[integrationType]}
width="20" height="20"
/> width="20"
<div class="text"> />
<div class="name">{schema.friendlyName}</div> <div class="text">
{#if schema.type} <Heading size="XXS">{schema.friendlyName}</Heading>
<div class="type">{schema.type || ""}</div> {#if schema.type}
{/if} <Detail size="S">{schema.type || ""}</Detail>
</div> {/if}
</div> </div>
</div> </div>
{/each} </div>
</div> {/each}
</Layout> </div>
</Layout> </Layout>
</ModalContent> </ModalContent>
</Modal> </Modal>
@ -221,15 +216,7 @@
margin-top: 4px; margin-top: 4px;
} }
.name { .text :global(.spectrum-Detail) {
color: var(--spectrum-global-color-gray-900);
font-weight: 600;
}
.type {
font-weight: 600;
margin-top: 4px;
text-transform: uppercase;
font-size: 11px;
color: var(--spectrum-global-color-gray-700); color: var(--spectrum-global-color-gray-700);
} }
</style> </style>

Write Preview
Loading…
Cancel
Save