From 610fc041454cb2cce34bdbffbbb8c73fbd2a032f Mon Sep 17 00:00:00 2001
From: Peter Clement <peter@budibase.com>
Date: Fri, 3 Dec 2021 14:27:38 +0000
Subject: [PATCH] some css fixes for autoscreen ui work

---
 .../modals/CreateTableModal.svelte            | 37 -------------------
 .../NavigationPanel/NewScreenModal.svelte     |  2 +-
 .../design/[assetType]/_layout.svelte         | 11 ++----
 3 files changed, 5 insertions(+), 45 deletions(-)
diff --git a/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte b/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
index dd8876be27..997864e165 100644
--- a/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
+++ b/packages/builder/src/components/backend/TableNavigator/modals/CreateTableModal.svelte
@@ -1,6 +1,5 @@
 <script>
   import { goto, url } from "@roxi/routify"
-  import { store } from "builderStore"
   import { tables } from "stores/backend"
   import { notifications } from "@budibase/bbui"
   import {
@@ -13,24 +12,13 @@
   } from "@budibase/bbui"
   import TableDataImport from "../TableDataImport.svelte"
   import analytics, { Events } from "analytics"
-  import screenTemplates from "builderStore/store/screenTemplates"
   import { buildAutoColumn, getAutoColumnInformation } from "builderStore/utils"
-  import { NEW_ROW_TEMPLATE } from "builderStore/store/screenTemplates/newRowScreen"
-  import { ROW_DETAIL_TEMPLATE } from "builderStore/store/screenTemplates/rowDetailScreen"
-  import { ROW_LIST_TEMPLATE } from "builderStore/store/screenTemplates/rowListScreen"
-
-  const defaultScreens = [
-    NEW_ROW_TEMPLATE,
-    ROW_DETAIL_TEMPLATE,
-    ROW_LIST_TEMPLATE,
-  ]
 
   $: tableNames = $tables.list.map(table => table.name)
 
   export let name
   let dataImport
   let error = ""
-  let createAutoscreens = true
   let autoColumns = getAutoColumnInformation()
 
   function addAutoColumns(tableName, schema) {
@@ -69,27 +57,6 @@
     notifications.success(`Table ${name} created successfully.`)
     analytics.captureEvent(Events.TABLE.CREATED, { name })
 
-    // Create auto screens
-    if (createAutoscreens) {
-      const screens = screenTemplates($store, [table])
-        .filter(template => defaultScreens.includes(template.id))
-        .map(template => template.create())
-      for (let screen of screens) {
-        // Record the table that created this screen so we can link it later
-        screen.autoTableId = table._id
-        await store.actions.screens.create(screen)
-      }
-
-      // Create autolink to newly created list screen
-      const listScreen = screens.find(screen =>
-        screen.props._instanceName.endsWith("List")
-      )
-      await store.actions.components.links.save(
-        listScreen.routing.route,
-        table.name
-      )
-    }
-
     // Navigate to new table
     const currentUrl = $url()
     const path = currentUrl.endsWith("data")
@@ -128,10 +95,6 @@
     </div>
     <Divider />
   </div>
-  <Toggle
-    text="Generate screens in Design section"
-    bind:value={createAutoscreens}
-  />
   <div>
     <Layout gap="XS" noPadding>
       <Label grey extraSmall>Create Table from CSV (Optional)</Label>
diff --git a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
index 67dbf581f2..c48ba33efa 100644
--- a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
@@ -70,7 +70,7 @@
     disabled={!selectedScreens.length}
     size="L"
   >
-    <Body size="XS"
+    <Body size="S"
       >Please select the screens you would like to add to your application.
       Autogenerated screens come with CRUD functionality.</Body
     >
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte
index 7844357288..ec79c16b85 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte
@@ -179,7 +179,7 @@
           <Layout gap="S" justifyItems="center">
             <img class="img-size" alt="logo" src={Logo} />
             <div class="new-screen-text">
-              <Detail size="M">Let's add some life to this screen</Detail>
+              <Detail size="M">LET’S BRING THIS APP TO LIFE</Detail>
             </div>
             <Button on:click={() => showModal()} size="M" cta>
               <div class="new-screen-button">
@@ -290,12 +290,9 @@
   }
 
   .centered {
-    top: 0;
-    bottom: 0;
-    left: 10%;
-    right: 0;
-    width: 100%;
-    height: 100%;
+    width: calc(100% - 350px);
+    height: calc(100% - 100px);
+    position: absolute;
     display: flex;
     flex-direction: column;
     justify-content: center;
