From 4575285d5fb74ba172078501785bc83fa42366a2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= <kevin.aberg@gmail.com>
Date: Tue, 2 Mar 2021 13:37:54 +0100
Subject: [PATCH] fixes to transitions and adds default fade to screens

---
 .../design/NavigationPanel/NewScreenModal.svelte         | 8 +-------
 .../components/design/PropertiesPanel/DesignView.svelte  | 9 +++++----
 packages/client/src/utils/transition.js                  | 6 +++---
 packages/server/src/constants/screens.js                 | 2 ++
 4 files changed, 11 insertions(+), 14 deletions(-)

diff --git a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
index c33d12c1a1..b924aa4b32 100644
--- a/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
+++ b/packages/builder/src/components/design/NavigationPanel/NewScreenModal.svelte
@@ -1,11 +1,8 @@
 <script>
-  import { goto } from "@sveltech/routify"
   import { store, backendUiStore, allScreens } from "builderStore"
   import { Input, Select, ModalContent, Toggle } from "@budibase/bbui"
   import getTemplates from "builderStore/store/screenTemplates"
   import analytics from "analytics"
-  import { onMount } from "svelte"
-  import api from "builderStore/api"
 
   const CONTAINER = "@budibase/standard-components/container"
 
@@ -19,9 +16,6 @@
 
   $: templates = getTemplates($store, $backendUiStore.tables)
   $: route = !route && $allScreens.length === 0 ? "*" : route
-  $: baseComponents = Object.values($store.components)
-    .filter(componentDefinition => componentDefinition.baseComponent)
-    .map(c => c._component)
   $: {
     if (templates && templateIndex === undefined) {
       templateIndex = 0
@@ -31,7 +25,6 @@
 
   const templateChanged = newTemplateIndex => {
     if (newTemplateIndex === undefined) return
-    const template = templates[newTemplateIndex]
     draftScreen = templates[newTemplateIndex].create()
     if (draftScreen.props._instanceName) {
       name = draftScreen.props._instanceName
@@ -60,6 +53,7 @@
     if (routeError) return false
 
     draftScreen.props._instanceName = name
+    draftScreen.props._transition = "fade"
     draftScreen.props._component = baseComponent
     draftScreen.routing = { route, roleId }
 
diff --git a/packages/builder/src/components/design/PropertiesPanel/DesignView.svelte b/packages/builder/src/components/design/PropertiesPanel/DesignView.svelte
index 11f66387df..2a30d45eb3 100644
--- a/packages/builder/src/components/design/PropertiesPanel/DesignView.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/DesignView.svelte
@@ -25,9 +25,11 @@
   ]
 
   const transitions = [
-    'fade', 'blur', 'fly', 'scale' // slide is hidden because it does not seem to result in any effect
+    'none', 'fade', 'blur', 'fly', 'scale' // slide is hidden because it does not seem to result in any effect
   ]
 
+  const capitalize = ([first,...rest]) => first.toUpperCase() + rest.join('');
+
   $: groups = componentDefinition?.styleable ? Object.keys(allStyles) : []
 </script>
 
@@ -71,10 +73,9 @@
   </div>
   {#if componentDefinition?.transitionable}
      <div class="transitions">
-       <Select value={componentInstance._transition || ""} on:change={event => onUpdateTransition(event.target.value)} name="transition" label="Transition" secondary thin>
-         <option value="">Choose a transition</option>
+       <Select value={componentInstance._transition} on:change={event => onUpdateTransition(event.target.value)} name="transition" label="Transition" secondary thin>
          {#each transitions as transition}
-           <option value={transition}>{transition}</option>
+           <option value={transition}>{capitalize(transition)}</option>
          {/each}
        </Select>
      </div>
diff --git a/packages/client/src/utils/transition.js b/packages/client/src/utils/transition.js
index d97898060d..d0e1489c96 100644
--- a/packages/client/src/utils/transition.js
+++ b/packages/client/src/utils/transition.js
@@ -11,6 +11,6 @@ const transitions = new Map([
 ])
 
 export default function transition(node, { type, options = {} }) {
-  const { tn, opt } = transitions.get(type) || {}
-  return tn ? tn(node, { ...opt, ...options }) : fade(node, { duration: 0 })
-}
+  const { tn, opt } = transitions.get(type) || { tn: () => {}, opt: {}}
+  return tn(node, { ...opt, ...options })
+}
\ No newline at end of file
diff --git a/packages/server/src/constants/screens.js b/packages/server/src/constants/screens.js
index 54c1271efc..54dcc2551d 100644
--- a/packages/server/src/constants/screens.js
+++ b/packages/server/src/constants/screens.js
@@ -21,6 +21,7 @@ exports.createHomeScreen = () => ({
       active: {},
       selected: {},
     },
+    _transition: "fade",
     type: "div",
     _children: [
       {
@@ -69,6 +70,7 @@ exports.createLoginScreen = app => ({
       active: {},
       selected: {},
     },
+    _transition: "fade",
     type: "div",
     _children: [
       {