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

convert all Heading instances to use new API

This commit is contained in:
Keviin Åberg Kultalahti 2021-04-30 13:38:06 +02:00
parent 8ecdbc9bf4
commit 7dc53dc2e6
18 changed files with 79 additions and 64 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/bbui/src/Drawer/Drawer.svelte
View File

@ -37,7 +37,7 @@
<section class="drawer" transition:slide> <section class="drawer" transition:slide>
<header> <header>
<div class="text"> <div class="text">
<Heading xs>{title}</Heading> <Heading size="XS">{title}</Heading>
<Body size="XXS"><slot name="description" /></Body> <Body size="XXS"><slot name="description" /></Body>
</div> </div>
<div class="buttons"> <div class="buttons">

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

@ -54,12 +54,12 @@
<div slot="sidebar" class="list"> <div slot="sidebar" class="list">
<Layout> <Layout>
<div class="section"> <div class="section">
<Heading s h3>Available bindings</Heading> <Heading size="S">Available bindings</Heading>
<Input extraThin placeholder="Search" bind:value={search} /> <Input extraThin placeholder="Search" bind:value={search} />
</div> </div>
<div class="section"> <div class="section">
{#each categories as [categoryName, bindings]} {#each categories as [categoryName, bindings]}
<Heading xs h4>{categoryName}</Heading> <Heading size="XS">{categoryName}</Heading>
{#each bindableProperties.filter((binding) => {#each bindableProperties.filter((binding) =>
binding.label.match(searchRgx) binding.label.match(searchRgx)
) as binding} ) as binding}
@ -75,7 +75,7 @@
{/each} {/each}
</div> </div>
<div class="section"> <div class="section">
<Heading xs h3>Helpers</Heading> <Heading size="XS">Helpers</Heading>
{#each helpers.filter((helper) => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper} {#each helpers.filter((helper) => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
<div class="binding" on:click={() => addToText(helper)}> <div class="binding" on:click={() => addToText(helper)}>
<span class="binding__label">{helper.label}</span> <span class="binding__label">{helper.label}</span>

14
packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte
View File

@ -47,25 +47,28 @@
</script> </script>
<div class="title"> <div class="title">
<Heading s>Setup</Heading> <Heading size="S">Setup</Heading>
<Icon <Icon
l l
disabled={!automationLive} disabled={!automationLive}
hoverable={automationLive} hoverable={automationLive}
name="PauseCircle" name="PauseCircle"
on:click={() => setAutomationLive(false)} /> on:click={() => setAutomationLive(false)}
/>
<Icon <Icon
l l
name="PlayCircle" name="PlayCircle"
disabled={automationLive} disabled={automationLive}
hoverable={!automationLive} hoverable={!automationLive}
data-cy="activate-automation" data-cy="activate-automation"
on:click={() => setAutomationLive(true)} /> on:click={() => setAutomationLive(true)}
/>
</div> </div>
{#if $automationStore.selectedBlock} {#if $automationStore.selectedBlock}
<AutomationBlockSetup <AutomationBlockSetup
bind:block={$automationStore.selectedBlock} bind:block={$automationStore.selectedBlock}
{webhookModal} /> {webhookModal}
/>
{:else if $automationStore.selectedAutomation} {:else if $automationStore.selectedAutomation}
<div class="block-label">{automation.name}</div> <div class="block-label">{automation.name}</div>
<Button secondary on:click={testAutomation}>Test Automation</Button> <Button secondary on:click={testAutomation}>Test Automation</Button>
@ -74,7 +77,8 @@
secondary secondary
wide wide
data-cy="save-automation-setup" data-cy="save-automation-setup"
on:click={saveAutomation}> on:click={saveAutomation}
>
Save Automation Save Automation
</Button> </Button>
<Modal bind:this={webhookModal} width="30%"> <Modal bind:this={webhookModal} width="30%">

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

@ -40,7 +40,7 @@
component: RoleCell, component: RoleCell,
}, },
] ]
UNEDITABLE_USER_FIELDS.forEach(field => { UNEDITABLE_USER_FIELDS.forEach((field) => {
if (schema[field]) { if (schema[field]) {
schema[field].editable = false schema[field].editable = false
} }
@ -68,19 +68,19 @@
rows: selectedRows, rows: selectedRows,
type: "delete", type: "delete",
}) })
data = data.filter(row => !selectedRows.includes(row)) data = data.filter((row) => !selectedRows.includes(row))
notifications.success(`Successfully deleted ${selectedRows.length} rows`) notifications.success(`Successfully deleted ${selectedRows.length} rows`)
selectedRows = [] selectedRows = []
} }
const editRow = row => { const editRow = (row) => {
editableRow = row editableRow = row
if (row) { if (row) {
editRowModal.show() editRowModal.show()
} }
} }
const editColumn = field => { const editColumn = (field) => {
editableColumn = schema?.[field] editableColumn = schema?.[field]
if (editableColumn) { if (editableColumn) {
editColumnModal.show() editColumnModal.show()
@ -91,7 +91,7 @@
<div> <div>
<div class="table-title"> <div class="table-title">
{#if title} {#if title}
<Heading s>{title}</Heading> <Heading size="S">{title}</Heading>
{/if} {/if}
{#if loading} {#if loading}
<div transition:fade> <div transition:fade>
@ -118,9 +118,10 @@
allowEditRows={allowEditing} allowEditRows={allowEditing}
allowEditColumns={allowEditing} allowEditColumns={allowEditing}
showAutoColumns={!hideAutocolumns} showAutoColumns={!hideAutocolumns}
on:editcolumn={e => editColumn(e.detail)} on:editcolumn={(e) => editColumn(e.detail)}
on:editrow={e => editRow(e.detail)} on:editrow={(e) => editRow(e.detail)}
on:clickrelationship={e => selectRelationship(e.detail)} /> on:clickrelationship={(e) => selectRelationship(e.detail)}
/>
{/key} {/key}
<Modal bind:this={editRowModal}> <Modal bind:this={editRowModal}>

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

@ -63,7 +63,7 @@
<Search placeholder="Search" bind:value={search} /> <Search placeholder="Search" bind:value={search} />
{#if context} {#if context}
<section> <section>
<Heading xs h3>Columns</Heading> <Heading size="XS">Columns</Heading>
<ul> <ul>
{#each context.filter((context) => {#each context.filter((context) =>
context.readableBinding.match(searchRgx) context.readableBinding.match(searchRgx)
@ -77,7 +77,7 @@
{/if} {/if}
{#if instance} {#if instance}
<section> <section>
<Heading xs h3>Components</Heading> <Heading size="XS">Components</Heading>
<ul> <ul>
{#each instance.filter((instance) => {#each instance.filter((instance) =>
instance.readableBinding.match(searchRgx) instance.readableBinding.match(searchRgx)
@ -90,7 +90,7 @@
</section> </section>
{/if} {/if}
<section> <section>
<Heading xs h3>Helpers</Heading> <Heading size="XS">Helpers</Heading>
<ul> <ul>
{#each helpers.filter((helper) => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper} {#each helpers.filter((helper) => helper.label.match(searchRgx) || helper.description.match(searchRgx)) as helper}
<li on:click={() => addToText(helper.text)}> <li on:click={() => addToText(helper.text)}>

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

@ -143,7 +143,7 @@
<Popover bind:this={dropdownRight} anchor={anchorRight}> <Popover bind:this={dropdownRight} anchor={anchorRight}>
<div class="dropdown"> <div class="dropdown">
<div class="title"> <div class="title">
<Heading xs h3>Tables</Heading> <Heading size="XS">Tables</Heading>
</div> </div>
<ul> <ul>
{#each tables as table} {#each tables as table}
@ -157,7 +157,7 @@
</ul> </ul>
<Divider size="S" /> <Divider size="S" />
<div class="title"> <div class="title">
<Heading xs h3>Views</Heading> <Heading size="XS">Views</Heading>
</div> </div>
<ul> <ul>
{#each views as view} {#each views as view}
@ -171,7 +171,7 @@
</ul> </ul>
<Divider size="S" /> <Divider size="S" />
<div class="title"> <div class="title">
<Heading xs h3>Relationships</Heading> <Heading size="XS">Relationships</Heading>
</div> </div>
<ul> <ul>
{#each links as link} {#each links as link}
@ -185,7 +185,7 @@
</ul> </ul>
<Divider size="S" /> <Divider size="S" />
<div class="title"> <div class="title">
<Heading xs h3>Queries</Heading> <Heading size="XS">Queries</Heading>
</div> </div>
<ul> <ul>
{#each queries as query} {#each queries as query}
@ -201,7 +201,7 @@
{#if otherSources?.length} {#if otherSources?.length}
<Divider size="S" /> <Divider size="S" />
<div class="title"> <div class="title">
<Heading extraSmall>Other</Heading> <Heading size="XS">Other</Heading>
</div> </div>
<ul> <ul>
{#each otherSources as source} {#each otherSources as source}

2
packages/builder/src/components/integration/QueryParameterBuilder.svelte
View File

@ -31,7 +31,7 @@
<Layout paddingX="none" gap="S"> <Layout paddingX="none" gap="S">
<div class="controls"> <div class="controls">
<Heading s>Parameters</Heading> <Heading size="XS">Parameters</Heading>
{#if !bindable} {#if !bindable}
<Button secondary on:click={newQueryParameter}>Add Param</Button> <Button secondary on:click={newQueryParameter}>Add Param</Button>
{/if} {/if}

8
packages/builder/src/components/integration/QueryViewer.svelte
View File

@ -112,9 +112,9 @@
</script> </script>
<Layout gap="S" noPadding> <Layout gap="S" noPadding>
<Heading m>Query {integrationInfo?.friendlyName}</Heading> <Heading size="M">Query {integrationInfo?.friendlyName}</Heading>
<Divider /> <Divider />
<Heading s>Config</Heading> <Heading size="S">Config</Heading>
<div class="config"> <div class="config">
<div class="config-field"> <div class="config-field">
<Label>Query Name</Label> <Label>Query Name</Label>
@ -136,7 +136,7 @@
{#if shouldShowQueryConfig} {#if shouldShowQueryConfig}
<Divider /> <Divider />
<div class="config"> <div class="config">
<Heading s>Fields</Heading> <Heading size="S">Fields</Heading>
<Body size="S">Fill in the fields specific to this query.</Body> <Body size="S">Fill in the fields specific to this query.</Body>
<IntegrationQueryEditor <IntegrationQueryEditor
{datasource} {datasource}
@ -148,7 +148,7 @@
<Divider /> <Divider />
</div> </div>
<div class="viewer-controls"> <div class="viewer-controls">
<Heading s>Results</Heading> <Heading size="S">Results</Heading>
<ButtonGroup> <ButtonGroup>
<Button <Button
cta cta

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

@ -26,7 +26,7 @@
</script> </script>
<div class="apps-card"> <div class="apps-card">
<Heading s>{name}</Heading> <Heading size="S">{name}</Heading>
<div class="card-footer" data-cy={`app-${name}`}> <div class="card-footer" data-cy={`app-${name}`}>
<ActionButton on:click={() => $goto(`/builder/${_id}`)}> <ActionButton on:click={() => $goto(`/builder/${_id}`)}>
Open Open

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

@ -19,7 +19,7 @@
</script> </script>
<div class="root"> <div class="root">
<Heading m>Your Apps</Heading> <Heading size="M">Your Apps</Heading>
<Divider size="M" /> <Divider size="M" />
{#await promise} {#await promise}
<div class="spinner-container"> <div class="spinner-container">

6
packages/builder/src/components/start/BuilderSettingsModal.svelte
View File

@ -59,10 +59,10 @@
</script> </script>
<ModalContent title="Builder settings" confirmText="Save" onConfirm={save}> <ModalContent title="Builder settings" confirmText="Save" onConfirm={save}>
<Heading xs>Theme</Heading> <Heading size="XS">Theme</Heading>
<ThemeEditor /> <ThemeEditor />
<Divider noMargin noGrid /> <Divider noMargin noGrid />
<Heading xs>Hosting</Heading> <Heading size="XS">Hosting</Heading>
<Body size="S"> <Body size="S">
This section contains settings that relate to the deployment and hosting of This section contains settings that relate to the deployment and hosting of
apps made in this builder. apps made in this builder.
@ -78,7 +78,7 @@
<Toggle text="HTTPS" bind:value={hostingInfo.useHttps} /> <Toggle text="HTTPS" bind:value={hostingInfo.useHttps} />
{/if} {/if}
<Divider noMargin noGrid /> <Divider noMargin noGrid />
<Heading xs>Analytics</Heading> <Heading size="XS">Analytics</Heading>
<Body size="S"> <Body size="S">
If you would like to send analytics that help us make budibase better, If you would like to send analytics that help us make budibase better,
please let us know below. please let us know below.

21
packages/builder/src/components/start/CreateAppModal.svelte
View File

@ -47,9 +47,9 @@
.test( .test(
"non-existing-app-name", "non-existing-app-name",
"App with same name already exists. Please try another app name.", "App with same name already exists. Please try another app name.",
value => (value) =>
!existingAppNames.some( !existingAppNames.some(
appName => appName.toLowerCase() === value.toLowerCase() (appName) => appName.toLowerCase() === value.toLowerCase()
) )
) )
} }
@ -57,11 +57,11 @@
const checkValidity = async (values, validator) => { const checkValidity = async (values, validator) => {
const obj = object().shape(validator) const obj = object().shape(validator)
Object.keys(validator).forEach(key => ($errors[key] = null)) Object.keys(validator).forEach((key) => ($errors[key] = null))
try { try {
await obj.validate(values, { abortEarly: false }) await obj.validate(values, { abortEarly: false })
} catch (validationErrors) { } catch (validationErrors) {
validationErrors.inner.forEach(error => { validationErrors.inner.forEach((error) => {
$errors[error.path] = capitalise(error.message) $errors[error.path] = capitalise(error.message)
}) })
} }
@ -129,13 +129,14 @@
<Indicator <Indicator
active={$currentStep === i} active={$currentStep === i}
done={i < $currentStep} done={i < $currentStep}
step={i + 1} /> step={i + 1}
/>
{/each} {/each}
</div> </div>
</div> </div>
<div class="body"> <div class="body">
<div class="heading"> <div class="heading">
<Heading h2 l>Get started with Budibase</Heading> <Heading size="L">Get started with Budibase</Heading>
</div> </div>
<div class="step"> <div class="step">
{#each steps as component, i (i)} {#each steps as component, i (i)}
@ -145,7 +146,8 @@
{template} {template}
{values} {values}
{errors} {errors}
{touched} /> {touched}
/>
</div> </div>
{/each} {/each}
</div> </div>
@ -163,8 +165,9 @@
medium medium
cta cta
on:click={createNewApp} on:click={createNewApp}
disabled={!valid || submitting}> disabled={!valid || submitting}
{submitting ? 'Loading...' : 'Submit'} >
{submitting ? "Loading..." : "Submit"}
</Button> </Button>
{/if} {/if}
</div> </div>

19
packages/builder/src/components/start/Steps/Info.svelte
View File

@ -14,10 +14,11 @@
function handleFile(evt) { function handleFile(evt) {
const fileArray = Array.from(evt.target.files) const fileArray = Array.from(evt.target.files)
if (fileArray.some(file => file.size >= FILE_SIZE_LIMIT)) { if (fileArray.some((file) => file.size >= FILE_SIZE_LIMIT)) {
notifications.error( notifications.error(
`Files cannot exceed ${FILE_SIZE_LIMIT / `Files cannot exceed ${
BYTES_IN_MB}MB. Please try again with smaller files.` FILE_SIZE_LIMIT / BYTES_IN_MB
}MB. Please try again with smaller files.`
) )
return return
} }
@ -28,9 +29,9 @@
<div class="container"> <div class="container">
{#if template?.fromFile} {#if template?.fromFile}
<Heading l h2>Import your Web App</Heading> <Heading size="L">Import your Web App</Heading>
{:else} {:else}
<Heading l h2>Create your Web App</Heading> <Heading size="L">Create your Web App</Heading>
{/if} {/if}
{#if template?.fromFile} {#if template?.fromFile}
<div class="template"> <div class="template">
@ -40,7 +41,8 @@
id="file-upload" id="file-upload"
accept=".txt" accept=".txt"
type="file" type="file"
on:change={handleFile} /> on:change={handleFile}
/>
<label for="file-upload" class:uploaded={file}> <label for="file-upload" class:uploaded={file}>
{#if file}{file.name}{:else}Import{/if} {#if file}{file.name}{:else}Import{/if}
</label> </label>
@ -49,7 +51,7 @@
{:else if template} {:else if template}
<div class="template"> <div class="template">
<Label extraSmall grey>Selected Template</Label> <Label extraSmall grey>Selected Template</Label>
<Heading small>{template.name}</Heading> <Heading size="S">{template.name}</Heading>
</div> </div>
{/if} {/if}
<Input <Input
@ -57,7 +59,8 @@
bind:value={$values.applicationName} bind:value={$values.applicationName}
label="Web App Name" label="Web App Name"
placeholder="Enter name of your web application" placeholder="Enter name of your web application"
error={$touched.applicationName && $errors.applicationName} /> error={$touched.applicationName && $errors.applicationName}
/>
</div> </div>
<style> <style>

14
packages/builder/src/components/start/Steps/User.svelte
View File

@ -7,14 +7,18 @@
</script> </script>
<div class="container"> <div class="container">
<Heading l h2>What's your role for this app?</Heading> <Heading size="L">What's your role for this app?</Heading>
<Select <Select
bind:value={$values.roleId} bind:value={$values.roleId}
label="Role" label="Role"
options={[{ label: 'Admin', value: 'ADMIN' }, { label: 'Power User', value: 'POWER_USER' }]} options={[
getOptionLabel={option => option.label} { label: "Admin", value: "ADMIN" },
getOptionValue={option => option.value} { label: "Power User", value: "POWER_USER" },
error={$errors.roleId} /> ]}
getOptionLabel={(option) => option.label}
getOptionValue={(option) => option.value}
error={$errors.roleId}
/>
</div> </div>
<style> <style>

4
packages/builder/src/components/start/TemplateList.svelte
View File

@ -15,7 +15,7 @@
</script> </script>
<div class="root"> <div class="root">
<Heading lh medium black>Start With a Template</Heading> <Heading size="M">Start With a Template</Heading>
{#await templatesPromise} {#await templatesPromise}
<div class="spinner-container"> <div class="spinner-container">
<Spinner size="30" /> <Spinner size="30" />
@ -24,7 +24,7 @@
<div class="templates"> <div class="templates">
{#each templates as template} {#each templates as template}
<div class="templates-card"> <div class="templates-card">
<Heading black small>{template.name}</Heading> <Heading size="S">{template.name}</Heading>
<Body size="M" grey>{template.category}</Body> <Body size="M" grey>{template.category}</Body>
<Body size="S" black>{template.description}</Body> <Body size="S" black>{template.description}</Body>
<div><img src={template.image} width="100%" /></div> <div><img src={template.image} width="100%" /></div>

6
packages/builder/src/pages/builder/[application]/data/datasource/[selectedDatasource]/index.svelte
View File

@ -50,13 +50,13 @@
height="26" height="26"
width="26" width="26"
/> />
<Heading m>{datasource.name}</Heading> <Heading size="M">{datasource.name}</Heading>
</header> </header>
<Body size="S" grey lh>{integration.description}</Body> <Body size="S" grey lh>{integration.description}</Body>
<Divider /> <Divider />
<div class="container"> <div class="container">
<div class="config-header"> <div class="config-header">
<Heading s>Configuration</Heading> <Heading size="S">Configuration</Heading>
<Button secondary on:click={saveDatasource}>Save</Button> <Button secondary on:click={saveDatasource}>Save</Button>
</div> </div>
<Body size="S" <Body size="S"
@ -70,7 +70,7 @@
</div> </div>
<Divider /> <Divider />
<div class="query-header"> <div class="query-header">
<Heading s>Queries</Heading> <Heading size="S">Queries</Heading>
<Button secondary on:click={() => $goto("./new")}>Add Query</Button> <Button secondary on:click={() => $goto("./new")}>Add Query</Button>
</div> </div>
<div class="query-list"> <div class="query-list">

2
packages/builder/src/pages/builder/[application]/deploy/index.svelte
View File

@ -59,7 +59,7 @@
<section> <section>
<img src={Rocket} alt="Rocket flying through sky" /> <img src={Rocket} alt="Rocket flying through sky" />
<div> <div>
<Heading m>It's time to shine!</Heading> <Heading size="M">It's time to shine!</Heading>
<Button size="XL" cta medium on:click={deployApp}>Deploy App</Button> <Button size="XL" cta medium on:click={deployApp}>Deploy App</Button>
</div> </div>
</section> </section>

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

@ -57,7 +57,7 @@
<div class="container"> <div class="container">
<div class="header"> <div class="header">
<Heading m h1>Welcome to the Budibase Beta</Heading> <Heading size="M">Welcome to the Budibase Beta</Heading>
<ButtonGroup> <ButtonGroup>
<Button secondary on:click={initiateAppImport}>Import Web App</Button> <Button secondary on:click={initiateAppImport}>Import Web App</Button>
<Button cta on:click={modal.show}>Create New Web App</Button> <Button cta on:click={modal.show}>Create New Web App</Button>