CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-06-29 19:41:03 +12:00
Code Issues Projects Releases Wiki Activity

Merge pull request #1153 from Budibase/ui-tidy-up

Browse source 
UI tidy up
This commit is contained in:
Joe 2021-02-22 13:16:24 +00:00 committed by GitHub
parent f05a581532 a45a1b1e80
commit bcdcee11b1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 52 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
packages/builder/src/components/integration/QueryViewer.svelte
View file

@ -133,14 +133,15 @@
<section class="config"> <section class="config">
<Heading medium lh>Query {integrationInfo?.friendlyName}</Heading> <Heading medium lh>Query {integrationInfo?.friendlyName}</Heading>
<hr /> <hr />
<Spacer extraLarge />
<Heading small lh>Config</Heading> <Heading small lh>Config</Heading>
<Body small grey>Provide a name for your query and select its function.</Body> <Body small grey>Provide a name for your query and select its function.</Body>
<Spacer medium /> <Spacer large />
<div class="config-field"> <div class="config-field">
<Label small>Query Name</Label> <Label small>Query Name</Label>
<Input thin outline bind:value={query.name} /> <Input thin outline bind:value={query.name} />
</div> </div>
<Spacer medium /> <Spacer extraLarge />
{#if queryConfig} {#if queryConfig}
<div class="config-field"> <div class="config-field">
<Label small>Function</Label> <Label small>Function</Label>
@ -152,7 +153,10 @@
{/each} {/each}
</Select> </Select>
</div> </div>
<Spacer extraLarge />
<hr /> <hr />
<Spacer extraLarge />
<Spacer small />
<ParameterBuilder bind:parameters={query.parameters} bindable={false} /> <ParameterBuilder bind:parameters={query.parameters} bindable={false} />
<hr /> <hr />
{/if} {/if}
@ -160,20 +164,24 @@
{#if shouldShowQueryConfig} {#if shouldShowQueryConfig}
<section> <section>
<Spacer extraLarge />
<Spacer small />
<div class="config"> <div class="config">
<Heading small lh>Fields</Heading> <Heading small lh>Fields</Heading>
<Body small grey>Fill in the fields specific to this query.</Body> <Body small grey>Fill in the fields specific to this query.</Body>
<Spacer medium /> <Spacer medium />
<Spacer extraLarge />
<IntegrationQueryEditor <IntegrationQueryEditor
{datasource} {datasource}
{query} {query}
schema={queryConfig[query.queryVerb]} schema={queryConfig[query.queryVerb]}
bind:parameters /> bind:parameters />
<Spacer extraLarge />
<hr /> <hr />
<Spacer extraLarge />
<Spacer medium />
<div class="viewer-controls"> <div class="viewer-controls">
<Heading small lh>Query Results</Heading> <Heading small lh>Results</Heading>
<div class="button-container"> <div class="button-container">
<Button <Button
secondary secondary
@ -191,7 +199,8 @@
schema. schema.
</Body> </Body>
<Spacer large /> <Spacer extraLarge />
<Spacer medium />
<section class="viewer"> <section class="viewer">
{#if data} {#if data}
@ -199,13 +208,7 @@
{#if tab === 'JSON'} {#if tab === 'JSON'}
<pre class="preview"> <pre class="preview">
{#if !data[0]} {#if !data[0]}
Please run your query to fetch some data. Please run your query to fetch some data.
{:else} {:else}
{JSON.stringify(data[0], undefined, 2)} {JSON.stringify(data[0], undefined, 2)}
{/if} {/if}
@ -242,6 +245,8 @@
</div> </div>
</section> </section>
{/if} {/if}
<Spacer extraLarge />
<Spacer extraLarge />
<style> <style>
.config-field { .config-field {
@ -263,7 +268,7 @@
hr { hr {
margin-top: var(--layout-m); margin-top: var(--layout-m);
margin-bottom: var(--layout-m); border: 1px solid var(--grey-2);
} }
.config { .config {
@ -275,12 +280,20 @@
cursor: pointer; cursor: pointer;
} }
.viewer {
min-height: 200px;
}
.preview { .preview {
width: 800px;
height: 100%; height: 100%;
min-height: 120px;
overflow-y: auto; overflow-y: auto;
overflow-wrap: break-word; overflow-wrap: break-word;
white-space: pre-wrap; white-space: pre-wrap;
background-color: var(--grey-1);
padding: var(--spacing-m);
border-radius: 8px;
color: var(--grey-6);
} }
.viewer-controls { .viewer-controls {

1
packages/builder/src/pages/[application]/automate/_layout.svelte
View file

@ -36,6 +36,7 @@
justify-content: flex-start; justify-content: flex-start;
align-items: stretch; align-items: stretch;
gap: var(--spacing-l); gap: var(--spacing-l);
border-right: 1px solid var(--grey-2);
} }
.content { .content {

1
packages/builder/src/pages/[application]/data/_layout.svelte
View file

@ -80,6 +80,7 @@
align-items: stretch; align-items: stretch;
gap: var(--spacing-l); gap: var(--spacing-l);
position: relative; position: relative;
border-right: 1px solid var(--grey-2);
} }
i { i {

9
packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/[query]/index.svelte
View file

@ -28,19 +28,24 @@
</script> </script>
<section> <section>
<div class="inner">
{#if $backendUiStore.selectedDatabase._id && selectedQuery} {#if $backendUiStore.selectedDatabase._id && selectedQuery}
<QueryInterface query={selectedQuery} /> <QueryInterface query={selectedQuery} />
{/if} {/if}
</div>
</section> </section>
<style> <style>
section { section {
overflow: scroll; overflow: scroll;
width: 800px;
margin: 0 auto;
} }
::-webkit-scrollbar { ::-webkit-scrollbar {
width: 0px; width: 0px;
background: transparent; /* make scrollbar transparent */ background: transparent; /* make scrollbar transparent */
} }
.inner {
width: 640px;
margin: 0 auto;
}
</style> </style>

23
packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/index.svelte
View file

@ -45,20 +45,22 @@
{#if datasource} {#if datasource}
<section> <section>
<Spacer medium /> <Spacer extraLarge />
<header> <header>
<div class="datasource-icon"> <div class="datasource-icon">
<svelte:component <svelte:component
this={ICONS[datasource.source]} this={ICONS[datasource.source]}
height="30" height="26"
width="30" /> width="26" />
</div> </div>
<h3 class="section-title">{datasource.name}</h3> <h3 class="section-title">{datasource.name}</h3>
</header> </header>
<Body small grey lh>{integration.description}</Body> <Body small grey lh>{integration.description}</Body>
<Spacer extraLarge />
<hr /> <hr />
<Spacer large />
<Spacer extraLarge />
<div class="container"> <div class="container">
<div class="config-header"> <div class="config-header">
@ -70,14 +72,14 @@
Connect your database to Budibase using the config below. Connect your database to Budibase using the config below.
</Body> </Body>
<Spacer medium /> <Spacer extraLarge />
<IntegrationConfigForm <IntegrationConfigForm
integration={datasource.config} integration={datasource.config}
on:change={setUnsaved} /> on:change={setUnsaved} />
<Spacer medium /> <Spacer extraLarge />
<hr /> <hr />
<Spacer large />
<Spacer extraLarge />
<div class="query-header"> <div class="query-header">
<Heading small>Queries</Heading> <Heading small>Queries</Heading>
<Button secondary on:click={() => $goto('../new')}>Add Query</Button> <Button secondary on:click={() => $goto('../new')}>Add Query</Button>
@ -99,15 +101,16 @@
<style> <style>
h3 { h3 {
margin: 0; margin: 0;
font-size: 24px;
} }
section { section {
margin: 0 auto; margin: 0 auto;
width: 800px; width: 640px;
} }
hr { hr {
margin-bottom: var(--layout-m); border: 1px solid var(--grey-2);
} }
header { header {