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

Some final tweaks.

This commit is contained in:
mike12345567 2021-10-13 16:42:07 +01:00
parent cd1f48b920
commit 123dc581f0
2 changed files with 26 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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%;