fixes to transitions and adds default fade to screens

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 }
 

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>

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 })
 }

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: [
       {