Tidy up new screen workflow and integrate with new UI

4 years ago · 03249d9869
4 changed files with 26 additions and 17 deletions
--- a/packages/builder/src/pages/builder/app/[application]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/_layout.svelte
@ -195,7 +195,7 @@
          size="M"
          name="ArrowLeft"
          hoverable
-          on:click={() => $goto("../")}
+          on:click={() => $goto("../../portal/apps")}
        />
        <Heading size="S">{$store.name || "App"}</Heading>
      </div>
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/DatasourceModal.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/DatasourceModal.svelte
@ -1,6 +1,12 @@
 <script>
  import { store } from "builderStore"
-  import { ModalContent, Layout, notifications, Icon } from "@budibase/bbui"
+  import {
+    ModalContent,
+    Layout,
+    notifications,
+    Icon,
+    Body,
+  } from "@budibase/bbui"
  import { tables, datasources } from "stores/backend"
  import getTemplates from "builderStore/store/screenTemplates"
  import ICONS from "components/backend/DatasourceNavigator/icons"
@ -70,17 +76,18 @@
    disabled={!selectedScreens.length}
    size="L"
  >
+    <Body size="S">
+      Select which data source you would like to use to create your screens
+    </Body>
    <Layout noPadding gap="S">
      {#each filteredSources as datasource}
        <div class="data-source-wrap">
          <div class="data-source-header">
-            <div class="datasource-icon">
-              <svelte:component
-                this={ICONS[datasource.source]}
-                height="24"
-                width="24"
-              />
-            </div>
+            <svelte:component
+              this={ICONS[datasource.source]}
+              height="24"
+              width="24"
+            />
            <div class="data-source-name">{datasource.name}</div>
          </div>
          {#if Array.isArray(datasource.entities)}
@ -153,19 +160,21 @@
  .data-source-wrap {
    padding-bottom: var(--spectrum-alias-item-padding-s);
    display: grid;
-    grid-gap: var(--spacing-xs);
+    grid-gap: var(--spacing-s);
  }

  .data-source-header {
    display: flex;
    align-items: center;
+    gap: var(--spacing-m);
+    padding-bottom: var(--spacing-xs);
  }

  .data-source-entry {
    cursor: pointer;
    grid-gap: var(--spectrum-alias-grid-margin-xsmall);
    padding: var(--spectrum-alias-item-padding-s);
-    background: var(--spectrum-alias-background-color-primary);
+    background: var(--spectrum-alias-background-color-secondary);
    transition: 0.3s all;
    border: 1px solid var(--spectrum-global-color-gray-300);
    border-radius: 4px;
@ -179,11 +188,6 @@
    background: var(--spectrum-alias-background-color-tertiary);
  }

-  .data-source-name {
-    padding: var(--spectrum-alias-item-padding-s);
-    min-height: var(--spectrum-icon-size-s);
-  }
-
  .data-source-entry .data-source-check {
    margin-left: auto;
  }
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/NewScreenModal.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/NewScreenModal.svelte
@ -107,7 +107,7 @@
    cursor: pointer;
    grid-gap: var(--spectrum-alias-grid-margin-xsmall);
    padding: var(--spectrum-alias-item-padding-s);
-    background: var(--spectrum-alias-background-color-primary);
+    background: var(--spectrum-alias-background-color-secondary);
    transition: 0.3s all;
    border: 1px solid var(--spectrum-global-color-gray-300);
    border-radius: 4px;
@ -123,6 +123,9 @@
  .screen-type-wrap .screen-type-text {
    padding-left: var(--spectrum-alias-item-padding-xl);
  }
+  .screen-type-wrap .screen-type-text :global(h1) {
+    padding-bottom: var(--spacing-xs);
+  }
  .screen-type-wrap :global(.spectrum-Icon) {
    min-width: var(--spectrum-icon-size-m);
  }
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDetailsModal.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenDetailsModal.svelte
@ -7,6 +7,7 @@
  export let onConfirm
  export let onCancel
  export let screenUrl
+  export let screenName
  export let confirmText = "Continue"

  let routeError
@ -44,6 +45,7 @@
  const confirmScreenDetails = async () => {
    await onConfirm({
      screenUrl,
+      screenName,
    })
  }
 </script>