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

Convert Body component to use size="" prop

This commit is contained in:
Keviin Åberg Kultalahti 2021-04-30 13:31:45 +02:00
parent f660c86ba9
commit 9509b8f42b
14 changed files with 57 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -38,7 +38,7 @@
<header> <header>
<div class="text"> <div class="text">
<Heading xs>{title}</Heading> <Heading xs>{title}</Heading>
<Body xxs><slot name="description" /></Body> <Body size="XXS"><slot name="description" /></Body>
</div> </div>
<div class="buttons"> <div class="buttons">
<slot name="buttons" /> <slot name="buttons" />

22
packages/bbui/src/Typography/Body.svelte
View File

@ -1,29 +1,11 @@
<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 xxxl = false;
export let xxl = false;
export let xl = false;
export let l = false;
export let m = false;
export let s = false;
export let xs = false;
export let xxs = false;
export let serif = false; export let serif = false;
$: useDefault = ![xxxl, xxl, xl, l, m, s, xs, xxs].includes(true)
</script> </script>
<p class="spectrum-Body" <p class="spectrum-Body class:spectrum-Body--size{size}"
class:spectrum-Body--serif={serif} class:spectrum-Body--serif={serif}
class:spectrum-Body--sizeXXXL={xxxl}
class:spectrum-Body--sizeXXL={xxl}
class:spectrum-Body--sizeXL={xl}
class:spectrum-Body--sizeL={l}
class:spectrum-Body--sizeM={m || useDefault}
class:spectrum-Body--sizeS={s}
class:spectrum-Body--sizeXS={xs}
class:spectrum-Body--sizeXXS={xxs}>
<slot /> <slot />
</p> </p>

32
packages/builder/src/components/backend/DataTable/modals/FilterModal.svelte
View File

@ -102,7 +102,7 @@
return viewTable.schema[field].type === "number" return viewTable.schema[field].type === "number"
} }
const fieldChanged = filter => ev => { const fieldChanged = (filter) => (ev) => {
// reset if type changed // reset if type changed
if ( if (
filter.key && filter.key &&
@ -113,15 +113,16 @@
} }
} }
const getOptionLabel = x => x.name const getOptionLabel = (x) => x.name
const getOptionValue = x => x.key const getOptionValue = (x) => x.key
</script> </script>
<ModalContent <ModalContent
title="Filter" title="Filter"
confirmText="Save" confirmText="Save"
onConfirm={saveView} onConfirm={saveView}
size="large"> size="large"
>
{#if view.filters.length} {#if view.filters.length}
<div class="input-group-row"> <div class="input-group-row">
{#each view.filters as filter, idx} {#each view.filters as filter, idx}
@ -133,41 +134,48 @@
options={CONJUNCTIONS} options={CONJUNCTIONS}
placeholder={null} placeholder={null}
{getOptionLabel} {getOptionLabel}
{getOptionValue} /> {getOptionValue}
/>
{/if} {/if}
<Select <Select
bind:value={filter.key} bind:value={filter.key}
on:change={fieldChanged(filter)} on:change={fieldChanged(filter)}
options={fields} /> options={fields}
/>
<Select <Select
bind:value={filter.condition} bind:value={filter.condition}
options={CONDITIONS} options={CONDITIONS}
{getOptionLabel} {getOptionLabel}
{getOptionValue} /> {getOptionValue}
/>
{#if filter.key && isMultipleChoice(filter.key)} {#if filter.key && isMultipleChoice(filter.key)}
<Select <Select
bind:value={filter.value} bind:value={filter.value}
options={fieldOptions(filter.key)} options={fieldOptions(filter.key)}
getOptionLabel={x => x.toString()} /> getOptionLabel={(x) => x.toString()}
/>
{:else if filter.key && isDate(filter.key)} {:else if filter.key && isDate(filter.key)}
<DatePicker <DatePicker
bind:value={filter.value} bind:value={filter.value}
placeholder={filter.key || fields[0]} /> placeholder={filter.key || fields[0]}
/>
{:else if filter.key && isNumber(filter.key)} {:else if filter.key && isNumber(filter.key)}
<Input <Input
bind:value={filter.value} bind:value={filter.value}
placeholder={filter.key || fields[0]} placeholder={filter.key || fields[0]}
type="number" /> type="number"
/>
{:else} {:else}
<Input <Input
placeholder={filter.key || fields[0]} placeholder={filter.key || fields[0]}
bind:value={filter.value} /> bind:value={filter.value}
/>
{/if} {/if}
<Icon hoverable name="Close" on:click={() => removeFilter(idx)} /> <Icon hoverable name="Close" on:click={() => removeFilter(idx)} />
{/each} {/each}
</div> </div>
{:else} {:else}
<Body s>Add a filter to get started.</Body> <Body size="S">Add a filter to get started.</Body>
{/if} {/if}
<div slot="footer"> <div slot="footer">
<Button secondary on:click={addFilter}>Add Filter</Button> <Button secondary on:click={addFilter}>Add Filter</Button>

2
packages/builder/src/components/backend/DataTable/modals/ManageAccessModal.svelte
View File

@ -30,7 +30,7 @@
</script> </script>
<ModalContent title="Manage Access" showCancelButton={false} confirmText="Done"> <ModalContent title="Manage Access" showCancelButton={false} confirmText="Done">
<Body s>Specify the minimum access level role for this data.</Body> <Body size="S">Specify the minimum access level role for this data.</Body>
<div class="row"> <div class="row">
<Label extraSmall grey>Level</Label> <Label extraSmall grey>Level</Label>
<Label extraSmall grey>Role</Label> <Label extraSmall grey>Role</Label>

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

@ -39,12 +39,14 @@
<div <div
class="integration hoverable" class="integration hoverable"
class:selected={integration.type === integrationType} class:selected={integration.type === integrationType}
on:click={() => selectIntegration(integrationType)}> on:click={() => selectIntegration(integrationType)}
>
<svelte:component <svelte:component
this={ICONS[integrationType]} this={ICONS[integrationType]}
height="50" height="50"
width="50"/> width="50"
<Body xs>{integrationType}</Body> />
<Body size="XS">{integrationType}</Body>
</div> </div>
{/each} {/each}
</div> </div>

2
packages/builder/src/components/common/ConfirmDialog.svelte
View File

@ -20,7 +20,7 @@
<Modal bind:this={modal} on:hide={onCancel}> <Modal bind:this={modal} on:hide={onCancel}>
<ModalContent onConfirm={onOk} {title} confirmText={okText} {cancelText} red> <ModalContent onConfirm={onOk} {title} confirmText={okText} {cancelText} red>
<Body s> <Body size="S">
{body} {body}
<slot /> <slot />
</Body> </Body>

2
packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/LogOut.svelte
View File

@ -3,7 +3,7 @@
</script> </script>
<div class="root"> <div class="root">
<Body s>This action doesn't require any additional settings.</Body> <Body size="S">This action doesn't require any additional settings.</Body>
</div> </div>
<style> <style>

19
packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/SaveRow.svelte
View File

@ -17,18 +17,18 @@
$: schemaFields = getSchemaFields(parameters?.tableId) $: schemaFields = getSchemaFields(parameters?.tableId)
$: tableOptions = $tables.list || [] $: tableOptions = $tables.list || []
const getSchemaFields = tableId => { const getSchemaFields = (tableId) => {
const { schema } = getSchemaForDatasource({ type: "table", tableId }) const { schema } = getSchemaForDatasource({ type: "table", tableId })
return Object.values(schema || {}) return Object.values(schema || {})
} }
const onFieldsChanged = e => { const onFieldsChanged = (e) => {
parameters.fields = e.detail parameters.fields = e.detail
} }
</script> </script>
<div class="root"> <div class="root">
<Body s> <Body size="S">
Choosing a Data Source will automatically use the data it provides, but it's Choosing a Data Source will automatically use the data it provides, but it's
optional.<br /> optional.<br />
You can always add or override fields manually. You can always add or override fields manually.
@ -39,21 +39,24 @@
bind:value={parameters.providerId} bind:value={parameters.providerId}
options={dataProviderComponents} options={dataProviderComponents}
placeholder="None" placeholder="None"
getOptionLabel={option => option._instanceName} getOptionLabel={(option) => option._instanceName}
getOptionValue={option => option._id} /> getOptionValue={(option) => option._id}
/>
<Label small>Table</Label> <Label small>Table</Label>
<Select <Select
bind:value={parameters.tableId} bind:value={parameters.tableId}
options={tableOptions} options={tableOptions}
getOptionLabel={option => option.name} getOptionLabel={(option) => option.name}
getOptionValue={option => option._id} /> getOptionValue={(option) => option._id}
/>
{#if parameters.tableId} {#if parameters.tableId}
<SaveFields <SaveFields
parameterFields={parameters.fields} parameterFields={parameters.fields}
{schemaFields} {schemaFields}
on:change={onFieldsChanged} /> on:change={onFieldsChanged}
/>
{/if} {/if}
</div> </div>
</div> </div>

2
packages/builder/src/components/design/PropertiesPanel/PropertyControls/FilterEditor.svelte
View File

@ -40,7 +40,7 @@
<Button cta slot="buttons" on:click={saveFilter}>Save</Button> <Button cta slot="buttons" on:click={saveFilter}>Save</Button>
<DrawerContent slot="body"> <DrawerContent slot="body">
<Layout> <Layout>
<Body s> <Body size="S">
{#if !Object.keys(tempValue || {}).length} {#if !Object.keys(tempValue || {}).length}
Add your first filter column. Add your first filter column.
{:else} {:else}

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

@ -36,7 +36,7 @@
<Button secondary on:click={newQueryParameter}>Add Param</Button> <Button secondary on:click={newQueryParameter}>Add Param</Button>
{/if} {/if}
</div> </div>
<Body s> <Body size="S">
{#if !bindable} {#if !bindable}
Parameters come in two parts: the parameter name, and a default/fallback Parameters come in two parts: the parameter name, and a default/fallback
value. value.

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

@ -137,7 +137,7 @@
<Divider /> <Divider />
<div class="config"> <div class="config">
<Heading s>Fields</Heading> <Heading s>Fields</Heading>
<Body 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}
{query} {query}
@ -160,7 +160,7 @@
<Button secondary on:click={previewQuery}>Run Query</Button> <Button secondary on:click={previewQuery}>Run Query</Button>
</ButtonGroup> </ButtonGroup>
</div> </div>
<Body s> <Body size="S">
Below, you can preview the results from your query and change the schema. Below, you can preview the results from your query and change the schema.
</Body> </Body>
<section class="viewer"> <section class="viewer">

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

@ -63,14 +63,15 @@
<ThemeEditor /> <ThemeEditor />
<Divider noMargin noGrid /> <Divider noMargin noGrid />
<Heading xs>Hosting</Heading> <Heading xs>Hosting</Heading>
<Body 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.
</Body> </Body>
<Toggle <Toggle
text="Self hosted" text="Self hosted"
on:change={updateSelfHosting} on:change={updateSelfHosting}
bind:value={selfhosted} /> bind:value={selfhosted}
/>
{#if selfhosted} {#if selfhosted}
<Input bind:value={hostingInfo.hostingUrl} label="Hosting URL" /> <Input bind:value={hostingInfo.hostingUrl} label="Hosting URL" />
<Input bind:value={hostingInfo.selfHostKey} label="Hosting Key" /> <Input bind:value={hostingInfo.selfHostKey} label="Hosting Key" />
@ -78,12 +79,13 @@
{/if} {/if}
<Divider noMargin noGrid /> <Divider noMargin noGrid />
<Heading xs>Analytics</Heading> <Heading xs>Analytics</Heading>
<Body 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.
</Body> </Body>
<Toggle <Toggle
text="Send Analytics To Budibase" text="Send Analytics To Budibase"
value={!analyticsDisabled} value={!analyticsDisabled}
on:change={toggleAnalytics} /> on:change={toggleAnalytics}
/>
</ModalContent> </ModalContent>

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

@ -25,8 +25,8 @@
{#each templates as template} {#each templates as template}
<div class="templates-card"> <div class="templates-card">
<Heading black small>{template.name}</Heading> <Heading black small>{template.name}</Heading>
<Body medium grey>{template.category}</Body> <Body size="M" grey>{template.category}</Body>
<Body lh small 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>
<div class="card-footer"> <div class="card-footer">
<Button secondary on:click={() => onSelect(template)}> <Button secondary on:click={() => onSelect(template)}>

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

@ -52,7 +52,7 @@
/> />
<Heading m>{datasource.name}</Heading> <Heading m>{datasource.name}</Heading>
</header> </header>
<Body small 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">