Merge branch 'develop' of github.com:Budibase/budibase into user-active-and-bugs

5 years ago · f9249fe99d
5 changed files with 52 additions and 35 deletions
--- a/packages/builder/src/components/integration/QueryViewer.svelte
+++ b/packages/builder/src/components/integration/QueryViewer.svelte
@ -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,19 +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}
@ -248,6 +245,8 @@
    </div>
  </section>
 {/if}
+<Spacer extraLarge />
+<Spacer extraLarge />

 <style>
  .config-field {
@ -269,7 +268,7 @@

  hr {
    margin-top: var(--layout-m);
-    margin-bottom: var(--layout-m);
+    border: 1px solid var(--grey-2);
  }

  .config {
@ -281,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 {
--- a/packages/builder/src/pages/[application]/automate/_layout.svelte
+++ b/packages/builder/src/pages/[application]/automate/_layout.svelte
@ -36,6 +36,7 @@
    justify-content: flex-start;
    align-items: stretch;
    gap: var(--spacing-l);
+    border-right: 1px solid var(--grey-2);
  }

  .content {
--- a/packages/builder/src/pages/[application]/data/_layout.svelte
+++ b/packages/builder/src/pages/[application]/data/_layout.svelte
@ -80,6 +80,7 @@
    align-items: stretch;
    gap: var(--spacing-l);
    position: relative;
+    border-right: 1px solid var(--grey-2);
  }

  i {
--- a/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/[query]/index.svelte
+++ b/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/[query]/index.svelte
@ -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>
--- a/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/index.svelte
+++ b/packages/builder/src/pages/[application]/data/datasource/[selectedDatasource]/index.svelte
@ -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 {