ufkc7e3d
/
budibase
forked from tsai/budibase
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Some final tweaks.

master
mike12345567 5 years ago
parent
cd1f48b920
commit
123dc581f0
2 changed files with 26 additions and 4 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 9
      packages/builder/src/components/common/CodeMirrorEditor.svelte
  2. 21
      packages/builder/src/components/integration/QueryViewer.svelte

9
packages/builder/src/components/common/CodeMirrorEditor.svelte
View File

@ -28,6 +28,7 @@
export let mode = EditorModes.JS export let mode = EditorModes.JS
export let value = "" export let value = ""
export let height = 300 export let height = 300
export let resize = "none"
export let readonly = false export let readonly = false
export let hints = [] export let hints = []
export let label export let label
@ -118,19 +119,23 @@
<Label small>{label}</Label> <Label small>{label}</Label>
</div> </div>
{/if} {/if}
<div style={`--code-mirror-height: ${height}px`}> <div
style={`--code-mirror-height: ${height}px; --code-mirror-resize: ${resize}`}
>
<textarea tabindex="0" bind:this={textarea} readonly {value} /> <textarea tabindex="0" bind:this={textarea} readonly {value} />
</div> </div>
<style> <style>
div :global(.CodeMirror) { div :global(.CodeMirror) {
height: var(--code-mirror-height); height: var(--code-mirror-height);
min-height: var(--code-mirror-height);
font-family: monospace; font-family: monospace;
line-height: 1.3; line-height: 1.3;
border: var(--spectrum-alias-border-size-thin) solid; border: var(--spectrum-alias-border-size-thin) solid;
border-color: var(--spectrum-alias-border-color); border-color: var(--spectrum-alias-border-color);
overflow: hidden;
border-radius: var(--border-radius-s); border-radius: var(--border-radius-s);
resize: var(--code-mirror-resize);
overflow: hidden;
} }
/* Override default active line highlight colour in dark theme */ /* Override default active line highlight colour in dark theme */

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

@ -28,6 +28,8 @@
let parameters let parameters
let data = [] let data = []
const transformerDocs =
"https://docs.budibase.com/building-apps/data/transformers"
const typeOptions = [ const typeOptions = [
{ label: "Text", value: "STRING" }, { label: "Text", value: "STRING" },
{ label: "Number", value: "NUMBER" }, { label: "Number", value: "NUMBER" },
@ -174,14 +176,23 @@
<Divider /> <Divider />
</div> </div>
<div class="config"> <div class="config">
<Heading size="S">Transformer</Heading> <div class="help-heading">
<Heading size="S">Transformer</Heading>
<Icon
on:click={() => window.open(transformerDocs)}
hoverable
name="Help"
size="L"
/>
</div>
<Body size="S" <Body size="S"
>Add a Javascript function to transform the query result.</Body >Add a JavaScript function to transform the query result.</Body
> >
<CodeMirrorEditor <CodeMirrorEditor
height={200} height={200}
label="Transformer" label="Transformer"
value={query.transformer} value={query.transformer}
resize="vertical"
on:change={e => (query.transformer = e.detail)} on:change={e => (query.transformer = e.detail)}
/> />
<Divider /> <Divider />
@ -240,6 +251,7 @@
display: grid; display: grid;
grid-gap: var(--spacing-s); grid-gap: var(--spacing-s);
} }
.config-field { .config-field {
display: grid; display: grid;
grid-template-columns: 20% 1fr; grid-template-columns: 20% 1fr;
@ -247,6 +259,11 @@
align-items: center; align-items: center;
} }
.help-heading {
display: flex;
justify-content: space-between;
}
.field { .field {
display: grid; display: grid;
grid-template-columns: 1fr 1fr 5%; grid-template-columns: 1fr 1fr 5%;

Write Preview
Loading…
Cancel
Save