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

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

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

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

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

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

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

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

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