From 856e80fce2999d205fcececc5731f1c29ba64969 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= Date: Mon, 1 Mar 2021 12:59:27 +0100 Subject: [PATCH 01/11] adds transition utility to the client sdk --- packages/client/src/sdk.js | 2 ++ packages/client/src/utils/transition.js | 14 ++++++++++++++ packages/standard-components/manifest.json | 7 +++++++ packages/standard-components/src/Image.svelte | 6 ++++-- 4 files changed, 27 insertions(+), 2 deletions(-) create mode 100644 packages/client/src/utils/transition.js diff --git a/packages/client/src/sdk.js b/packages/client/src/sdk.js index 1a3a4177a8..7eef69441d 100644 --- a/packages/client/src/sdk.js +++ b/packages/client/src/sdk.js @@ -7,6 +7,7 @@ import { builderStore, } from "./store" import { styleable } from "./utils/styleable" +import transition from "./utils/transition" import { linkable } from "./utils/linkable" import Provider from "./components/Provider.svelte" import { ActionTypes } from "./constants" @@ -19,6 +20,7 @@ export default { screenStore, builderStore, styleable, + transition, linkable, Provider, ActionTypes, diff --git a/packages/client/src/utils/transition.js b/packages/client/src/utils/transition.js new file mode 100644 index 0000000000..14470ddea2 --- /dev/null +++ b/packages/client/src/utils/transition.js @@ -0,0 +1,14 @@ +import { fade, blur, slide, fly } from 'svelte/transition' + +// Default options +const transitions = new Map([ + ["fade", { tn: fade, opt: {} }], + ["blur", { tn: blur, opt: {} }], + ["slide", { tn: slide, opt: {} }], + ["fly", { tn: fly, opt: { y: 30 } }], +]) + +export default function transition(node, {type, options = {}}) { + const { tn, opt } = transitions.get(type) || {} + return tn ? tn(node, {...opt, ...options}) : fade(node, { duration: 0}) +} \ No newline at end of file diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json index cb321f1bb9..f3a045a062 100644 --- a/packages/standard-components/manifest.json +++ b/packages/standard-components/manifest.json @@ -291,6 +291,13 @@ "type": "text", "label": "URL", "key": "url" + }, + { + "type": "select", + "key": "transitionType", + "label": "Transition", + "options": ["fade", "blur", "slide", "fly"], + "defaultValue": "" } ] }, diff --git a/packages/standard-components/src/Image.svelte b/packages/standard-components/src/Image.svelte index b54c84e691..97df5d642f 100644 --- a/packages/standard-components/src/Image.svelte +++ b/packages/standard-components/src/Image.svelte @@ -1,7 +1,7 @@ {description} + use:styleable={$component.styles} + in:transition={{type: transitionType}} /> From e4a29047359c5dddd3af0a1feb2781a31f6b80b1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= Date: Mon, 1 Mar 2021 13:24:57 +0100 Subject: [PATCH 02/11] minor changes to options --- packages/client/src/utils/transition.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/client/src/utils/transition.js b/packages/client/src/utils/transition.js index 14470ddea2..82fd5c03c8 100644 --- a/packages/client/src/utils/transition.js +++ b/packages/client/src/utils/transition.js @@ -5,7 +5,7 @@ const transitions = new Map([ ["fade", { tn: fade, opt: {} }], ["blur", { tn: blur, opt: {} }], ["slide", { tn: slide, opt: {} }], - ["fly", { tn: fly, opt: { y: 30 } }], + ["fly", { tn: fly, opt: { y: 80 } }], ]) export default function transition(node, {type, options = {}}) { From d386de02822b53f8ede9c793f23f8181856e4c5e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= Date: Mon, 1 Mar 2021 16:46:05 +0100 Subject: [PATCH 03/11] moves the transition setting to the design panel --- .../src/builderStore/store/frontend.js | 10 ++++++ .../store/screenTemplates/utils/Component.js | 6 ++++ .../design/PropertiesPanel/DesignView.svelte | 31 +++++++++++++++---- .../PropertiesPanel/PropertiesPanel.svelte | 27 ++-------------- .../client/src/components/Component.svelte | 2 ++ packages/client/src/utils/transition.js | 1 + packages/standard-components/manifest.json | 8 +---- packages/standard-components/src/Image.svelte | 5 ++- 8 files changed, 49 insertions(+), 41 deletions(-) diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js index 19987764e5..f195ea4d99 100644 --- a/packages/builder/src/builderStore/store/frontend.js +++ b/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) { diff --git a/packages/builder/src/builderStore/store/screenTemplates/utils/Component.js b/packages/builder/src/builderStore/store/screenTemplates/utils/Component.js index 182736a1d5..c4085e483c 100644 --- a/packages/builder/src/builderStore/store/screenTemplates/utils/Component.js +++ b/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 diff --git a/packages/builder/src/components/design/PropertiesPanel/DesignView.svelte b/packages/builder/src/components/design/PropertiesPanel/DesignView.svelte index dee6595ed5..d40fe7c8e7 100644 --- a/packages/builder/src/components/design/PropertiesPanel/DesignView.svelte +++ b/packages/builder/src/components/design/PropertiesPanel/DesignView.svelte @@ -1,5 +1,5 @@ -
-
+
+
-
+
{#if groups.length > 0} {#each groups as groupName}
+ {#if componentDefinition?.transitionable} +
+ +
+ {/if}
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte index 6291917cd0..9980b6712a 100644 --- a/packages/builder/src/components/design/PropertiesPanel/PropertiesPanel.svelte +++ b/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]) - } {:else if selectedCategory.value === 'settings'} 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 = "" {description} + in:transition={{type: $component.transition}} /> From f711b7c075440b8eae15652bcc818db573003ae2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= Date: Mon, 1 Mar 2021 16:53:37 +0100 Subject: [PATCH 04/11] screens can now select a transition rather than only use fade --- packages/client/src/components/Screen.svelte | 2 -- packages/standard-components/manifest.json | 2 +- .../standard-components/src/Container.svelte | 28 +++++++++---------- packages/standard-components/src/Image.svelte | 3 +- 4 files changed, 16 insertions(+), 19 deletions(-) diff --git a/packages/client/src/components/Screen.svelte b/packages/client/src/components/Screen.svelte index eaa88ceee2..d4a8712a9d 100644 --- a/packages/client/src/components/Screen.svelte +++ b/packages/client/src/components/Screen.svelte @@ -18,9 +18,7 @@ {#key screenDefinition?._id} -
-
{/key} diff --git a/packages/standard-components/manifest.json b/packages/standard-components/manifest.json index 0a2b9512ea..6e675b7f1d 100644 --- a/packages/standard-components/manifest.json +++ b/packages/standard-components/manifest.json @@ -5,6 +5,7 @@ "icon": "ri-layout-column-line", "hasChildren": true, "styleable": true, + "transitionable": true, "settings": [ { "type": "select", @@ -286,7 +287,6 @@ "description": "A basic component for displaying images", "icon": "ri-image-line", "styleable": true, - "transitionable": true, "settings": [ { "type": "text", diff --git a/packages/standard-components/src/Container.svelte b/packages/standard-components/src/Container.svelte index 22139d7d7e..8f49ba0ca9 100644 --- a/packages/standard-components/src/Container.svelte +++ b/packages/standard-components/src/Container.svelte @@ -1,62 +1,62 @@ {#if type === 'div'} -
+
{:else if type === 'header'} -
+
{:else if type === 'main'} -
+
{:else if type === 'footer'} -
+
{:else if type === 'aside'} -
{#if componentDefinition?.transitionable}
- onUpdateTransition(event.target.value)} name="transition" label="Transition" secondary thin> {#each transitions as transition} - + {/each}
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: [ { From aeed22b71193cecefc703ef22dc9055ce5c3a7ee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= Date: Tue, 2 Mar 2021 14:19:44 +0100 Subject: [PATCH 10/11] fix notification store timers --- packages/client/src/store/notification.js | 60 ++++++++++------------- 1 file changed, 27 insertions(+), 33 deletions(-) diff --git a/packages/client/src/store/notification.js b/packages/client/src/store/notification.js index 64757569ed..b3a8ffefc3 100644 --- a/packages/client/src/store/notification.js +++ b/packages/client/src/store/notification.js @@ -1,42 +1,33 @@ -import { writable, derived } from "svelte/store" -import { generate } from "shortid" +import { writable } from "svelte/store" const NOTIFICATION_TIMEOUT = 3000 const createNotificationStore = () => { - const _notifications = writable([]) - let block = false + const timeoutIds = new Set(); + const _notifications = writable([], () => { + return () => { + // clear all the timers + timeoutIds.forEach(timeoutId => { + clearTimeout(timeoutId); + }); + _notifications.set([]); + } + }); const send = (message, type = "default") => { - if (block) { - return - } + let _id = id(); _notifications.update(state => { - return [...state, { id: generate(), type, message }] - }) - } + return [...state, { id: _id, type, message }] + }); + const timeoutId = setTimeout(() => { + _notifications.update(state => { + return state.filter(({ id }) => id !== _id); + }); + }, NOTIFICATION_TIMEOUT); + timeoutIds.add(timeoutId); + } - const blockNotifications = (timeout = 1000) => { - block = true - setTimeout(() => (block = false), timeout) - } - - const notifications = derived(_notifications, ($_notifications, set) => { - set($_notifications) - if ($_notifications.length > 0) { - const timeout = setTimeout(() => { - _notifications.update(state => { - state.shift() - return state - }) - set($_notifications) - }, NOTIFICATION_TIMEOUT) - return () => { - clearTimeout(timeout) - } - } - }) - const { subscribe } = notifications + const { subscribe } = _notifications return { subscribe, @@ -45,8 +36,11 @@ const createNotificationStore = () => { warning: msg => send(msg, "warning"), info: msg => send(msg, "info"), success: msg => send(msg, "success"), - blockNotifications, } } -export const notificationStore = createNotificationStore() +function id() { + return '_' + Math.random().toString(36).substr(2, 9); +}; + +export const notificationStore = createNotificationStore() \ No newline at end of file From d99ff6653d05db9e632b267251bb8e66916e1de7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Keviin=20=C3=85berg=20Kultalahti?= Date: Tue, 2 Mar 2021 14:26:37 +0100 Subject: [PATCH 11/11] lint fix --- packages/client/src/store/notification.js | 47 +++++++++++++---------- packages/client/src/utils/transition.js | 4 +- 2 files changed, 28 insertions(+), 23 deletions(-) diff --git a/packages/client/src/store/notification.js b/packages/client/src/store/notification.js index b3a8ffefc3..d69a39080e 100644 --- a/packages/client/src/store/notification.js +++ b/packages/client/src/store/notification.js @@ -3,29 +3,29 @@ import { writable } from "svelte/store" const NOTIFICATION_TIMEOUT = 3000 const createNotificationStore = () => { - const timeoutIds = new Set(); + const timeoutIds = new Set() const _notifications = writable([], () => { - return () => { - // clear all the timers - timeoutIds.forEach(timeoutId => { - clearTimeout(timeoutId); - }); - _notifications.set([]); - } - }); + return () => { + // clear all the timers + timeoutIds.forEach(timeoutId => { + clearTimeout(timeoutId) + }) + _notifications.set([]) + } + }) const send = (message, type = "default") => { - let _id = id(); + let _id = id() _notifications.update(state => { return [...state, { id: _id, type, message }] - }); - const timeoutId = setTimeout(() => { - _notifications.update(state => { - return state.filter(({ id }) => id !== _id); - }); - }, NOTIFICATION_TIMEOUT); - timeoutIds.add(timeoutId); - } + }) + const timeoutId = setTimeout(() => { + _notifications.update(state => { + return state.filter(({ id }) => id !== _id) + }) + }, NOTIFICATION_TIMEOUT) + timeoutIds.add(timeoutId) + } const { subscribe } = _notifications @@ -40,7 +40,12 @@ const createNotificationStore = () => { } function id() { - return '_' + Math.random().toString(36).substr(2, 9); -}; + return ( + "_" + + Math.random() + .toString(36) + .substr(2, 9) + ) +} -export const notificationStore = createNotificationStore() \ No newline at end of file +export const notificationStore = createNotificationStore() diff --git a/packages/client/src/utils/transition.js b/packages/client/src/utils/transition.js index d0e1489c96..3814c1fc65 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) || { tn: () => {}, opt: {}} + const { tn, opt } = transitions.get(type) || { tn: () => {}, opt: {} } return tn(node, { ...opt, ...options }) -} \ No newline at end of file +}