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

adds divider component

This commit is contained in:
Keviin Åberg Kultalahti 2021-04-14 14:52:25 +02:00
parent 697c3d33df
commit 3056d4316a
12 changed files with 63 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/bbui/package.json
View File

@ -57,6 +57,7 @@
"@spectrum-css/modal": "^3.0.1",
"@spectrum-css/popover": "^3.0.1",
"@spectrum-css/table": "^3.0.1",
"@spectrum-css/tabs": "^3.0.1",
"@spectrum-css/toast": "^3.0.1",
"@spectrum-css/typography": "^3.0.1",
"@spectrum-css/underlay": "^2.0.9",

14
packages/bbui/src/Divider/Divider.svelte Normal file
View File

@ -0,0 +1,14 @@
<script>
import "@spectrum-css/divider/dist/index-vars.css"
export let l = false
export let m = false
export let s = false
export let vertical = false
</script>
<hr
class:spectrum-Divider--sizeL={l}
class:spectrum-Divider--sizeM={m}
class:spectrum-Divider--sizeS={s}
class="spectrum-Divider spectrum-Divider--{vertical ? 'vertical' : 'horizontal'} spectrum-Dialog-divider">

8
packages/bbui/src/Modal/ModalContent.svelte
View File

@ -1,8 +1,8 @@
<script>
import "@spectrum-css/divider/dist/index-vars.css"
import { getContext } from "svelte"
import Button from "../Button/Button.svelte"
import Heading from "../Typography/Heading.svelte"
import Divider from "../Divider/Divider.svelte"
import Icon from "../Icons/Icon.svelte"
import Context from "../context"
@ -31,8 +31,8 @@
<div class="spectrum-Dialog spectrum-Dialog--{size}" role="dialog" tabindex="-1" aria-modal="true">
<div class="spectrum-Dialog-grid">
<h1 class="spectrum-Dialog-heading">{title}</h1>
<hr class="spectrum-Divider spectrum-Divider--sizeS spectrum-Divider--horizontal spectrum-Dialog-divider">
<Heading m h2>{title}</Heading>
<Divider m />
<!-- TODO: Remove content-grid class once Layout components are in bbui -->
<section class="spectrum-Dialog-content content-grid">

20
packages/bbui/src/Tabs/Tabs.svelte Normal file
View File

@ -0,0 +1,20 @@
<script>
import "@spectrum-css/tabs/dist/index-vars.css"
export let vertical = false
</script>
<div class="spectrum-Tabs spectrum-Tabs--{vertical ? 'vertical' : 'horizontal'}">
<div class="spectrum-Tabs-item is-selected" tabindex="0">
<span class="spectrum-Tabs-itemLabel">Tab 1</span>
</div>
<div class="spectrum-Tabs-item" tabindex="0">
<span class="spectrum-Tabs-itemLabel">Tab 2</span>
</div>
<div class="spectrum-Tabs-item" tabindex="0">
<span class="spectrum-Tabs-itemLabel">Tab 3</span>
</div>
<div class="spectrum-Tabs-item" tabindex="0">
<span class="spectrum-Tabs-itemLabel">Tab 4</span>
</div>
<div class="spectrum-Tabs-selectionIndicator" style="width: 27px; left: 0px;"></div>
</div>

1
packages/bbui/src/index.js
View File

@ -37,6 +37,7 @@ export { default as Multiselect } from "./Form/Multiselect.svelte"
export { default as Slider } from "./Form/Slider.svelte"
export { default as Context } from "./context"
export { default as Table } from "./Table/Table.svelte"
export { default as Divider } from "./Divider/Divider.svelte"
// Typography
export { default as Body } from "./Typography/Body.svelte"

5
packages/bbui/yarn.lock
View File

@ -480,6 +480,11 @@
resolved "https://registry.yarnpkg.com/@spectrum-css/table/-/table-3.0.1.tgz#753e0e2498082c0c36b9600828516aff3ac338cd"
integrity sha512-XQ+srMTv9hK1H0nctWUtqyzitmvyb5TNR+7mjAmKRdkBRSTQQSipDhenxZp72ekzMtMoSYZVZ77kgo0Iw3Fpug==
"@spectrum-css/tabs@^3.0.1":
version "3.0.1"
resolved "https://registry.yarnpkg.com/@spectrum-css/tabs/-/tabs-3.0.1.tgz#81cebae7a0db0056834c2b8fdf0df3e71aaaa812"
integrity sha512-uyWGiSuv+rKY57RVnNkYe0+8fQxgXtQl09JAmqyqUnvlX5b9sHG/R5TP7ExZ8C7BgE8hzVjPVAMH3RMEQERGUQ==
"@spectrum-css/toast@^3.0.1":
version "3.0.1"
resolved "https://registry.yarnpkg.com/@spectrum-css/toast/-/toast-3.0.1.tgz#36f62ea05302761e59b9d53e05f6c04423861796"

6
packages/builder/src/components/automation/SetupPanel/AutomationBindingPanel.svelte
View File

@ -46,12 +46,12 @@
<div class="container">
<div class="list">
<Heading small>Available bindings</Heading>
<Heading s h3>Available bindings</Heading>
<Spacer medium />
<Input extraThin placeholder="Search" bind:value={search} />
<Spacer medium />
{#each categories as [categoryName, bindings]}
<Heading extraSmall>{categoryName}</Heading>
<Heading xs h4>{categoryName}</Heading>
<Spacer extraSmall />
{#each bindableProperties.filter(binding =>
binding.label.match(searchRgx)
@ -64,7 +64,7 @@
</div>
{/each}
{/each}
<Heading extraSmall>Helpers</Heading>
<Heading xs h3>Helpers</Heading>
<Spacer extraSmall />
{#each helpers.filter(helper => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
<div class="binding" on:click={() => addToText(helper)}>

6
packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte
View File

@ -63,7 +63,7 @@
<Input extraThin placeholder="Search" bind:value={search} />
<Spacer medium />
{#if context}
<Heading extraSmall>Columns</Heading>
<Heading xs h3>Columns</Heading>
<Spacer small />
<ul>
{#each context.filter(context =>
@ -77,7 +77,7 @@
{/if}
<Spacer small />
{#if instance}
<Heading extraSmall>Components</Heading>
<Heading xs h3>Components</Heading>
<Spacer small />
<ul>
{#each instance.filter(instance =>
@ -90,7 +90,7 @@
</ul>
{/if}
<Spacer small />
<Heading extraSmall>Helpers</Heading>
<Heading xs h3>Helpers</Heading>
<Spacer small />
<ul>
{#each helpers.filter(helper => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}

4
packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte
View File

@ -137,7 +137,7 @@
<DropdownMenu bind:this={dropdownRight} anchor={anchorRight}>
<div class="dropdown">
<div class="title">
<Heading extraSmall>Tables</Heading>
<Heading xs h3>Tables</Heading>
</div>
<ul>
{#each tables as table}
@ -150,7 +150,7 @@
</ul>
<hr />
<div class="title">
<Heading extraSmall>Views</Heading>
<Heading xs h3>Views</Heading>
</div>
<ul>
{#each views as view}

2
packages/builder/src/components/start/AppCard.svelte
View File

@ -26,7 +26,7 @@
</script>
<div class="apps-card">
<Heading small black>{name}</Heading>
<Heading s h3>{name}</Heading>
<Spacer medium />
<div class="card-footer" data-cy={`app-${name}`}>
<ActionButton text medium blue on:click={() => $goto(`/builder/${_id}`)}>

20
packages/builder/src/components/start/AppList.svelte
View File

@ -1,6 +1,6 @@
<script>
import AppCard from "./AppCard.svelte"
import { Heading } from "@budibase/bbui"
import { Heading, Divider } from "@budibase/bbui"
import Spinner from "components/common/Spinner.svelte"
import { get } from "builderStore/api"
@ -19,22 +19,17 @@
</script>
<div class="root">
<Heading lh medium black>Your Apps</Heading>
<Heading m h2>Your Apps</Heading>
<Divider s />
{#await promise}
<div class="spinner-container">
<Spinner size="30" />
</div>
{:then apps}
<div class="inner">
<div>
<div>
<div class="apps">
{#each apps as app}
<AppCard {...app} />
{/each}
</div>
</div>
</div>
<div class="apps">
{#each apps as app}
<AppCard {...app} />
{/each}
</div>
{:catch err}
<h1 style="color:red">{err}</h1>
@ -43,6 +38,7 @@
<style>
.apps {
margin-top: var(--spectrum-global-dimension-static-size-150);
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
grid-gap: var(--layout-m);

2
packages/builder/src/pages/builder/index.svelte
View File

@ -57,7 +57,7 @@
<div class="container">
<div class="header">
<Heading medium black>Welcome to the Budibase Beta</Heading>
<Heading m h1>Welcome to the Budibase Beta</Heading>
<div class="button-group">
<Button secondary on:click={initiateAppImport}>Import Web App</Button>
<Spacer medium />