moves the transition setting to the design panel

packages/builder/src/builderStore/store/frontend.js

@@ -285,6 +285,7 @@ export const getFrontendStore = () => {
           _id: uuid(),
           _component: definition.component,
           _styles: { normal: {}, hover: {}, active: {} },
+          _transition: "",
           _instanceName: `New ${definition.name}`,
           ...cloneDeep(props),
           ...extras,
@@ -487,6 +488,15 @@ export const getFrontendStore = () => {
         selected._styles = { normal: {}, hover: {}, active: {} }
         await store.actions.preview.saveSelected()
       },
+      updateTransition: async (transition) => {
+        const selected = get(selectedComponent)
+        if (transition == null || transition === "") {
+          selected = ""
+        } else {
+          selected._transition = transition
+        }
+        await store.actions.preview.saveSelected()
+      },
       updateProp: async (name, value) => {
         let component = get(selectedComponent)
         if (!name || !component) {

packages/builder/src/builderStore/store/screenTemplates/utils/Component.js

@@ -14,6 +14,7 @@ export class Component extends BaseStructure {
         active: {},
         selected: {},
       },
+      _transition: "",
       _instanceName: "",
       _children: [],
     }
@@ -39,6 +40,11 @@ export class Component extends BaseStructure {
     return this
   }
 
+  transition(transition) {
+    this._json._transition = transition
+    return this
+  }
+
   // Shorthand for custom props "type"
   type(type) {
     this._json.type = type

packages/builder/src/components/design/PropertiesPanel/DesignView.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { TextArea, DetailSummary, Button } from "@budibase/bbui"
+  import { TextArea, DetailSummary, Button, Select } from "@budibase/bbui"
   import PropertyGroup from "./PropertyControls/PropertyGroup.svelte"
   import FlatButtonGroup from "./PropertyControls/FlatButtonGroup"
   import { allStyles } from "./componentStyles"
@@ -8,6 +8,7 @@
   export let componentInstance = {}
   export let onStyleChanged = () => {}
   export let onCustomStyleChanged = () => {}
+  export let onUpdateTransition = () => {}
   export let onResetStyles = () => {}
 
   let selectedCategory = "normal"
@@ -23,16 +24,20 @@
     { value: "active", text: "Active" },
   ]
 
+  const transitions = [
+    'fade', 'blur', 'slide', 'fly', 'scale'
+  ]
+
   $: groups = componentDefinition?.styleable ? Object.keys(allStyles) : []
 </script>
 
-<div class="design-view-container">
+<div class="container">
-  <div class="design-view-state-categories">
+  <div class="state-categories">
     <FlatButtonGroup value={selectedCategory} {buttonProps} {onChange} />
   </div>
 
   <div class="positioned-wrapper">
-    <div class="design-view-property-groups">
+    <div class="property-groups">
       {#if groups.length > 0}
         {#each groups as groupName}
           <PropertyGroup
@@ -64,10 +69,20 @@
       {/if}
     </div>
   </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>
+         {#each transitions as transition}
+           <option value={transition}>{transition}</option>
+         {/each}
+       </Select>
+     </div>
+  {/if}
 </div>
 
 <style>
-  .design-view-container {
+  .container {
     display: flex;
     flex-direction: column;
     width: 100%;
@@ -81,7 +96,7 @@
     min-height: 0;
   }
 
-  .design-view-property-groups {
+  .property-groups {
     flex: 1;
     overflow-y: auto;
     min-height: 0;
@@ -104,4 +119,8 @@
     min-height: 120px;
     font-size: var(--font-size-xs);
   }
+
+  option {
+    text-transform: capitalize;
+  }
 </style>

packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte

@@ -24,29 +24,9 @@
 
   const onStyleChanged = store.actions.components.updateStyle
   const onCustomStyleChanged = store.actions.components.updateCustomStyle
+  const onUpdateTransition = store.actions.components.updateTransition
   const onResetStyles = store.actions.components.resetStyles
 
-  function walkProps(component, action) {
-    action(component)
-    if (component.children) {
-      for (let child of component.children) {
-        walkProps(child, action)
-      }
-    }
-  }
-
-  function flattenComponents(props) {
-    const components = []
-    props.forEach(comp =>
-      walkProps(comp, c => {
-        if ("_component" in c) {
-          components.push(c)
-        }
-      })
-    )
-    return components
-  }
-
   function setAssetProps(name, value) {
     const selectedAsset = get(currentAsset)
     store.update(state => {
@@ -62,10 +42,6 @@
     })
     store.actions.preview.saveSelected()
   }
-
-  function getProps(obj, keys) {
-    return keys.map((key, i) => [key, obj[key], obj.props._id + i])
-  }
 </script>
 
 <CategoryTab
@@ -84,6 +60,7 @@
       componentDefinition={definition}
       {onStyleChanged}
       {onCustomStyleChanged}
+      {onUpdateTransition}
       {onResetStyles} />
   {:else if selectedCategory.value === 'settings'}
     <SettingsView

packages/client/src/components/Component.svelte

@@ -34,12 +34,14 @@
   $: id = definition._id
   $: updateComponentProps(definition, $context)
   $: styles = definition._styles
+  $: transition = definition._transition
 
   // Update component context
   $: componentStore.set({
     id,
     children: children.length,
     styles: { ...styles, id },
+    transition
   })
 
   // Gets the component constructor for the specified component

packages/client/src/utils/transition.js

@@ -5,6 +5,7 @@ const transitions = new Map([
   ["fade", { tn: fade, opt: {} }],
   ["blur", { tn: blur, opt: {} }],
   ["slide", { tn: slide, opt: {} }],
+  ["scale", { tn: slide, opt: {} }],
   ["fly", { tn: fly, opt: { y: 80 } }],
 ])
 	

packages/standard-components/manifest.json

@@ -286,18 +286,12 @@
     "description": "A basic component for displaying images",
     "icon": "ri-image-line",
     "styleable": true,
+    "transitionable": true,
     "settings": [
       {
         "type": "text",
         "label": "URL",
         "key": "url"
-      },
-      {
-        "type": "select",
-        "key": "transitionType",
-        "label": "Transition",
-        "options": ["fade", "blur", "slide", "fly"],
-        "defaultValue": ""
       }
     ]
   },

packages/standard-components/src/Image.svelte

@@ -1,7 +1,7 @@
 <script>
   import { getContext } from "svelte"
 
-  const { styleable, transition } = getContext("sdk")
+  const { styleable } = getContext("sdk")
   const component = getContext("component")
 
   export let className = ""
@@ -9,7 +9,6 @@
   export let description = ""
   export let height
   export let width
-  export let transitionType = ""
 </script>
 
 <img
@@ -19,4 +18,4 @@
   src={url}
   alt={description}
   use:styleable={$component.styles}
-  in:transition={{type: transitionType}} />
+  in:transition={{type: $component.transition}} />