Some final tweaks.

5 years ago · 123dc581f0
2 changed files with 26 additions and 4 deletions
--- a/packages/builder/src/components/common/CodeMirrorEditor.svelte
+++ b/packages/builder/src/components/common/CodeMirrorEditor.svelte
@ -28,6 +28,7 @@
  export let mode = EditorModes.JS
  export let value = ""
  export let height = 300
+  export let resize = "none"
  export let readonly = false
  export let hints = []
  export let label
@ -118,19 +119,23 @@
    <Label small>{label}</Label>
  </div>
 {/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} />
 </div>

 <style>
  div :global(.CodeMirror) {
    height: var(--code-mirror-height);
+    min-height: var(--code-mirror-height);
    font-family: monospace;
    line-height: 1.3;
    border: var(--spectrum-alias-border-size-thin) solid;
    border-color: var(--spectrum-alias-border-color);
-    overflow: hidden;
    border-radius: var(--border-radius-s);
+    resize: var(--code-mirror-resize);
+    overflow: hidden;
  }

  /* Override default active line highlight colour in dark theme */
--- a/packages/builder/src/components/integration/QueryViewer.svelte
+++ b/packages/builder/src/components/integration/QueryViewer.svelte
@ -28,6 +28,8 @@

  let parameters
  let data = []
+  const transformerDocs =
+    "https://docs.budibase.com/building-apps/data/transformers"
  const typeOptions = [
    { label: "Text", value: "STRING" },
    { label: "Number", value: "NUMBER" },
@ -174,14 +176,23 @@
      <Divider />
    </div>
    <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"
-        >Add a Javascript function to transform the query result.</Body
+        >Add a JavaScript function to transform the query result.</Body
      >
      <CodeMirrorEditor
        height={200}
        label="Transformer"
        value={query.transformer}
+        resize="vertical"
        on:change={e => (query.transformer = e.detail)}
      />
      <Divider />
@ -240,6 +251,7 @@
    display: grid;
    grid-gap: var(--spacing-s);
  }
+
  .config-field {
    display: grid;
    grid-template-columns: 20% 1fr;
@ -247,6 +259,11 @@
    align-items: center;
  }

+  .help-heading {
+    display: flex;
+    justify-content: space-between;
+  }
+
  .field {
    display: grid;
    grid-template-columns: 1fr 1fr 5%;