Fix massive widths on remaining button actions

6 years ago · 2a6e05efff
6 changed files with 60 additions and 33 deletions
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ExecuteQuery.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ExecuteQuery.svelte
@ -24,36 +24,45 @@
  }
 </script>
-<Label small>Datasource</Label>
+<div class="root">
-<Select thin secondary bind:value={parameters.datasourceId}>
+  <Label small>Datasource</Label>
-  <option value="" />
+  <Select thin secondary bind:value={parameters.datasourceId}>
  {#each $backendUiStore.datasources as datasource}
    <option value={datasource._id}>{datasource.name}</option>
  {/each}
 </Select>
 <Spacer medium />
 {#if parameters.datasourceId}
  <Label small>Query</Label>
  <Select thin secondary bind:value={parameters.queryId}>
    <option value="" />
-    {#each $backendUiStore.queries.filter(query => query.datasourceId === datasource._id) as query}
+    {#each $backendUiStore.datasources as datasource}
-      <option value={query._id}>{query.name}</option>
+      <option value={datasource._id}>{datasource.name}</option>
    {/each}
  </Select>
-{/if}
+
-
+  <Spacer medium />
-<Spacer medium />
+
-
+  {#if parameters.datasourceId}
-{#if query?.parameters?.length > 0}
+    <Label small>Query</Label>
-  <ParameterBuilder
+    <Select thin secondary bind:value={parameters.queryId}>
-    bind:customParams={parameters.queryParams}
+      <option value="" />
-    parameters={query.parameters}
+      {#each $backendUiStore.queries.filter(query => query.datasourceId === datasource._id) as query}
-    bindings={bindableProperties} />
+        <option value={query._id}>{query.name}</option>
-  <IntegrationQueryEditor
+      {/each}
-    height={200}
+    </Select>
-    {query}
+  {/if}
-    schema={fetchQueryDefinition(query)}
+
-    editable={false} />
+  <Spacer medium />
-{/if}
+
  {#if query?.parameters?.length > 0}
    <ParameterBuilder
      bind:customParams={parameters.queryParams}
      parameters={query.parameters}
      bindings={bindableProperties} />
    <IntegrationQueryEditor
      height={200}
      {query}
      schema={fetchQueryDefinition(query)}
      editable={false} />
  {/if}
 </div>
 <style>
  .root {
    max-width: 800px;
    margin: 0 auto;
  }
 </style>
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/LogIn.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/LogIn.svelte
@ -30,7 +30,9 @@
    display: grid;
    column-gap: var(--spacing-l);
    row-gap: var(--spacing-s);
-    grid-template-columns: auto 1fr auto 1fr;
+    grid-template-columns: auto 1fr;
    align-items: baseline;
    max-width: 800px;
    margin: 0 auto;
  }
 </style>
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/LogOut.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/LogOut.svelte
@ -1,7 +1,14 @@
-<div class="root">This action doesn't require any additional settings.</div>
+<script>
  import { Body } from "@budibase/bbui"
 </script>
 <div class="root">
  <Body small grey>This action doesn't require any additional settings.</Body>
 </div>
 <style>
  .root {
-    font-size: var(--font-size-s);
+    max-width: 800px;
    margin: 0 auto;
  }
 </style>
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/NavigateTo.svelte
@ -27,6 +27,8 @@
    display: flex;
    flex-direction: row;
    align-items: baseline;
    max-width: 800px;
    margin: 0 auto;
  }
  .root :global(> div) {
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/TriggerAutomation.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/TriggerAutomation.svelte
@ -101,6 +101,11 @@
 </div>
 <style>
  .root {
    max-width: 800px;
    margin: 0 auto;
  }
  .fields {
    display: grid;
    column-gap: var(--spacing-l);
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ValidateForm.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/ValidateForm.svelte
@ -29,6 +29,8 @@
    display: flex;
    flex-direction: row;
    align-items: baseline;
    max-width: 800px;
    margin: 0 auto;
  }
  .root :global(> div) {