neo.mjs 6.21.0 → 6.22.0

package/resources/scss/src/apps/portal/learn/PageContainer.scss

@@ -8,6 +8,12 @@
         margin-top           : 3rem;
         padding              : 0 3rem;
 
+        @media (max-width: 600px) {
+            margin-bottom: 1rem;
+            margin-top   : 1rem;
+            padding      : 0 1rem;
+        }
+
         .neo-button {
             flex           : 1 !important;
             height         : 75px;

package/resources/scss/src/layout/Cube.scss

@@ -18,9 +18,9 @@
     --rot-y: 0deg;
     --rot-z: 0deg;
 
-    --side-x: 300px;
-    --side-y: 300px;
-    --side-z: 300px;
+    --side-x: 0;
+    --side-y: 0;
+    --side-z: 0;
 
     background-color  : transparent;
     height            : var(--side-y);

package/resources/scss/src/plugin/Resizable.scss

@@ -1,7 +1,3 @@
-// font awesome does not have grip handles for corners.
-// using the th icon with a clip-path.
-// similar to: https://github.com/FortAwesome/Font-Awesome/issues/645#issuecomment-361663544
-
 .neo-resizable {
     align-items    : center;
     color          : #bbb;
@@ -42,13 +38,12 @@
         cursor: sw-resize;
         left  : 0;
         height: 1em;
-        width : 1.05em;
+        width : 1em;
 
         &::after {
-            clip-path: polygon(100% 0,70% 0,70% 35%,35% 35%,35% 66%,0 66%,0 100%,100% 100%);
-            content  : "\f00a";
+            content  : "\f101";
             font-size: 1em;
-            transform: rotate(90deg);
+            transform: rotate(135deg);
         }
     }
 
@@ -57,12 +52,12 @@
         cursor: se-resize;
         right : 0;
         height: 1em;
-        width : 1.05em;
+        width : 1em;
 
         &::after {
-            clip-path: polygon(100% 0,70% 0,70% 35%,35% 35%,35% 66%,0 66%,0 100%,100% 100%);
-            content  : "\f00a";
+            content  : "\f101";
             font-size: 1em;
+            transform: rotate(45deg);
         }
     }
 
@@ -86,13 +81,12 @@
         left  : 0;
         top   : 0;
         height: 1em;
-        width : 1.05em;
+        width : 1em;
 
         &::after {
-            clip-path: polygon(100% 0,70% 0,70% 35%,35% 35%,35% 66%,0 66%,0 100%,100% 100%);
-            content  : "\f00a";
+            content  : "\f101";
             font-size: 1em;
-            transform: rotate(180deg);
+            transform: rotate(-135deg);
         }
     }
 
@@ -101,13 +95,12 @@
         right : 0;
         top   : 0;
         height: 1em;
-        width : 1.05em;
+        width : 1em;
 
         &::after {
-            clip-path: polygon(100% 0,70% 0,70% 35%,35% 35%,35% 66%,0 66%,0 100%,100% 100%);
-            content  : "\f00a";
+            content  : "\f101";
             font-size: 1em;
-            transform: rotate(270deg);
+            transform: rotate(-45deg);
         }
     }
 }

package/resources/scss/theme-neo-light/dialog/Base.scss

@@ -1,6 +1,16 @@
 :root .neo-theme-neo-light { // .neo-dialog
     --dialog-border-color: #ddd;
     --dialog-box-shadow  : 0 5px 10px rgba(0,0,0,.4);
-    --dialog-header-color: #1c60a0;
-    --dialog-icon-color  : #1c60a0;
+    --dialog-header-color: var(--purple-500);
+    --dialog-icon-color  : var(--purple-500);
+
+    .neo-dialog {
+        .neo-header-toolbar {
+            .neo-button {
+                background-color: transparent;
+                height          : unset;
+                min-width       : unset;
+            }
+        }
+    }
 }

package/src/DefaultConfig.mjs

@@ -260,12 +260,12 @@ const DefaultConfig = {
     useVdomWorker: true,
     /**
      * buildScripts/injectPackageVersion.mjs will update this value
-     * @default '6.21.0'
+     * @default '6.22.0'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '6.21.0'
+    version: '6.22.0'
 };
 
 Object.assign(DefaultConfig, {

package/src/calendar/view/MainContainer.mjs

@@ -235,9 +235,9 @@ class MainContainer extends Container {
                 } else {
                     me.createSettingsContainer(true).then(() => {
                         // short delay to ensure the vnode already exists
-                        setTimeout(() => {
+                        me.timeout(50).then(() => {
                             me.items[1].items[2].expand()
-                        }, 50)
+                        })
                     })
                 }
             } else {
@@ -264,10 +264,10 @@ class MainContainer extends Container {
                 me.promiseUpdate().then(() => {
                     sideBar.mounted = true;
 
-                    setTimeout(() => {
+                    me.timeout(50).then(() => {
                         style.marginLeft = '0px';
-                        sideBar.style = style;
-                    }, 50)
+                        sideBar.style = style
+                    })
                 })
             } else {
                 style.marginLeft    = `-${me.sideBarWidth}px`;
@@ -275,13 +275,13 @@ class MainContainer extends Container {
                 sideBar._vdom.style = style; // silent update
 
                 me.promiseUpdate().then(() => {
-                    setTimeout(() => {
+                    me.timeout(400).then(() => {
                         sideBar.vdom.removeDom = true;
                         sideBar.update();
 
                         sideBar.mounted = false
-                    }, 400)
-                });
+                    })
+                })
             }
         }
     }
@@ -299,13 +299,13 @@ class MainContainer extends Container {
             me.settingsExpanded && me.createSettingsContainer(false);
 
             // we need a short delay to ensure the items already got created
-            setTimeout(() => {
+            me.timeout(10).then(() => {
                 me.items[0].items[1].add({
                     handler: me.toggleSettings.bind(me),
                     iconCls: 'fa fa-cog',
                     style  : {marginLeft: '10px'}
                 })
-            }, 10)
+            })
         } else if (!value && oldValue) {
             // we only need this logic in case we dynamically change the config from true to false
             me.items[1]         .removeLast();

package/src/calendar/view/SettingsContainer.mjs

@@ -54,18 +54,18 @@ class SettingsContainer extends Container {
             style = me.style || {};
 
         style.marginRight = `-${width}px`;
-        me._style      = style; // silent update
-        me._vdom.style = style; // silent update
+        me._style         = style; // silent update
+        me._vdom.style    = style; // silent update
 
         me.parent.promiseUpdate().then(() => {
-            setTimeout(() => {
+            me.timeout(400).then(() => {
                 me.collapsed = true;
 
                 me.vdom.removeDom = true;
                 me.update();
 
-                me.mounted = false;
-            }, 400)
+                me.mounted = false
+            })
         })
     }
 
@@ -149,11 +149,11 @@ class SettingsContainer extends Container {
             me.collapsed = false;
             me.mounted   = true;
 
-            setTimeout(() => {
+            me.timeout(50).then(() => {
                 style = me.style || {}
                 style.marginRight = '0px';
-                me.style = style;
-            }, 50)
+                me.style = style
+            })
         })
     }
 
@@ -178,10 +178,10 @@ class SettingsContainer extends Container {
                 if (Neo.typeOf(mainContainer[`${container.flag}Component`]) !== 'NeoInstance') {
                     listenerId = mainContainer.on('cardLoaded', () => {
                         mainContainer.un('cardLoaded', listenerId);
-                        setTimeout(() => {container.createContent();}, 30)
+                        me.timeout(30).then(() => {container.createContent()})
                     })
                 } else {
-                    setTimeout(() => {container.createContent();}, 30)
+                    me.timeout(30).then(() => {container.createContent()})
                 }
             }
 

package/src/calendar/view/YearComponent.mjs

@@ -517,10 +517,10 @@ class YearComponent extends Component {
                         vdom.cn[0].cn[0].style.transform = `translateY(${y}px)`;
                         me.update();
 
-                        setTimeout(() => {
+                        me.timeout(300).then(() => {
                             vdom.cn[0] = vdom.cn[0].cn[0].cn[scrollFromTop ? 1 : 0];
                             me.triggerVdomUpdate()
-                        }, 300)
+                        })
                     })
                 })
             }

package/src/calendar/view/calendars/List.mjs

@@ -97,9 +97,9 @@ class List extends ComponentList {
     onClick(data) {
         // The click even arrives before the CheckBox onInputValueChange() gets triggered.
         // We need a short delay to ensure the vdom of the list item contains the new checked state
-        setTimeout(() => {
+        this.timeout(20).then(() => {
             super.onClick(data)
-        }, 20);
+        });
 
         if (data.path[0].cls.includes('neo-edit-icon')) {
             let me                    = this,

package/src/calendar/view/month/Component.mjs

@@ -309,10 +309,10 @@ class Component extends BaseComponent {
         if (value) {
             if (me.needsEventUpdate) {
                 me.createContent();
-                me.needsEventUpdate = false;
+                me.needsEventUpdate = false
             }
 
-            setTimeout(() => {
+            me.timeout(100).then(() => {
                 me.getDomRect([me.vdom.cn[1].id, me.vdom.cn[0].id]).then(data => {
                     me.headerHeight = data[1].height;
 
@@ -320,9 +320,9 @@ class Component extends BaseComponent {
                         direction: 'top',
                         id       : me.vdom.cn[1].id,
                         value    : data[0].height - data[1].height
-                    });
+                    })
                 })
-            }, 100)
+            })
         }
     }
 

package/src/calendar/view/week/Component.mjs

@@ -769,7 +769,7 @@ class Component extends BaseComponent {
 
                 // we need a short delay to move the event rendering into the next animation frame.
                 // Details: https://github.com/neomjs/neo/issues/2216
-                setTimeout(() => {me.updateEvents(false, columnsBuffer + columnsVisible, me.totalColumns)}, 50);
+                me.timeout(50).then(() => {me.updateEvents(false, columnsBuffer + columnsVisible, me.totalColumns)});
 
                 scrollValue = -width
             }
@@ -793,7 +793,7 @@ class Component extends BaseComponent {
 
                 // we need a short delay to move the event rendering into the next animation frame.
                 // Details: https://github.com/neomjs/neo/issues/2216
-                setTimeout(() => {me.updateEvents(false, 0, columnsBuffer)}, 50);
+                me.timeout(50).then(() => {me.updateEvents(false, 0, columnsBuffer)});
 
                 scrollValue = width
             }

package/src/calendar/view/week/plugin/DragDrop.mjs

@@ -213,7 +213,7 @@ class DragDrop extends Base {
             me[newRecordSymbol] = record;
 
             // wait until the new event got mounted
-            setTimeout(() => {
+            me.timeout(50).then(() => {
                 eventId     = owner.getEventId(record.id);
                 dragElement = VDomUtil.findVdomChild(owner.vdom, eventId).vdom;
 
@@ -227,13 +227,13 @@ class DragDrop extends Base {
                 owner.getPlugin(me.resizablePluginType).onDragStart(data);
                 eventDragZone.dragStart(data);
 
-                setTimeout(() => {
+                me.timeout(50).then(() => {
                     me.isDragging && Neo.applyDeltas(me.appName, {
                         id   : eventId,
                         style: {opacity: 0}
                     })
-                }, 50)
-            }, 50)
+                })
+            })
         }
     }
 

package/src/code/LivePreview.mjs

@@ -141,8 +141,6 @@ class LivePreview extends Container {
             {vdom}   = me,
             rect;
 
-        button.iconCls = collapse ? 'fas fa-expand' : 'fas fa-compress';
-
         if (collapse) {
             button.iconCls = 'fas fa-expand';
 
@@ -168,7 +166,7 @@ class LivePreview extends Container {
         } else {
             button.iconCls = 'fas fa-compress';
 
-            rect = await me.getDomRect(me.id);
+            rect = await me.getDomRect();
 
             me.collapseRect = rect;
 
@@ -340,18 +338,13 @@ class LivePreview extends Container {
      * @param {Number} data.value
      */
     onActiveIndexChange(data) {
-        let me                   = this,
-            collapseExpandButton = me.getReference('collapse-expand-button'),
-            hidden               = data.value !== 1;
+        let me     = this,
+            hidden = data.value !== 1;
 
         if (data.item.reference === 'preview') {
             me.doRunSource()
         }
 
-        if (collapseExpandButton) {
-            collapseExpandButton.hidden = hidden
-        }
-
         me.getReference('popout-window-button').hidden = hidden
         me.disableRunSource = false;
     }
@@ -368,11 +361,9 @@ class LivePreview extends Container {
 
         if (me.enableFullscreen) {
             items.push({
-                handler  : me.collapseExpand.bind(me),
-                hidden   : tabContainer.activeIndex !== 1,
-                iconCls  : 'fas fa-expand',
-                reference: 'collapse-expand-button',
-                ui       : 'ghost'
+                handler: me.collapseExpand.bind(me),
+                iconCls: 'fas fa-expand',
+                ui     : 'ghost'
             })
         }
 

package/src/component/Base.mjs

@@ -816,9 +816,9 @@ class Base extends CoreBase {
 
                 if (me.domListeners?.length > 0) {
                     // todo: the main thread reply of mount arrives after pushing the task into the queue which does not ensure the dom is mounted
-                    setTimeout(() => {
+                    me.timeout(150).then(() => {
                         DomEventManager.mountDomListeners(me)
-                    }, 150)
+                    })
                 }
 
                 me.doResolveUpdateCache();
@@ -1798,7 +1798,7 @@ class Base extends CoreBase {
             }
 
             if (timeout) {
-                setTimeout(removeFn, timeout)
+                me.timeout(timeout).then(removeFn)
             } else {
                 removeFn()
             }

package/src/component/Circle.mjs

@@ -244,10 +244,10 @@ class Circle extends Component {
                 } else {
                     me.updateItemOpacity(0, true, value);
 
-                    setTimeout(() => {
+                    me.timeout(300).then(() => {
                         frontEl.cn.splice(value + 2);
                         me.update()
-                    }, 300);
+                    })
                 }
 
                 me.updateItemPositions(true);
@@ -596,13 +596,13 @@ class Circle extends Component {
         }).then(data => {
             me.store.items = data.json.data;
 
-            setTimeout(() => {
+            me.timeout(100).then(() => {
                 me.updateTitle();
                 me.createItems()
-            }, 100)
+            })
         }).catch(err => {
             console.log('Error for Neo.Xhr.request', err, me.id)
-        });
+        })
     }
 
     /**

package/src/component/DateSelector.mjs

@@ -454,11 +454,11 @@ class DateSelector extends Component {
                         me.updateHeaderMonthTransitionCallback(headerMonthOpts);
                         me.update();
 
-                        setTimeout(() => {
+                        me.timeout(300).then(() => {
                             me.changeMonthWrapperCallback(slideDirection);
                             me.updateHeaderMonthWrapperCallback(headerMonthOpts);
                             me.triggerVdomUpdate()
-                        }, 300)
+                        })
                     })
                 })
             } else {
@@ -538,10 +538,10 @@ class DateSelector extends Component {
                         vdom.cn[1].cn[0].style.transform = `translateY(${y}px)`;
                         me.update();
 
-                        setTimeout(() => {
+                        me.timeout(300).then(() => {
                             vdom.cn[1] = vdom.cn[1].cn[0].cn[scrollFromTop ? 1 : 0];
                             me.triggerVdomUpdate()
-                        }, 300)
+                        })
                     })
                 })
             } else {

package/src/component/Gallery.mjs

@@ -256,7 +256,7 @@ class Gallery extends Component {
         if (value) {
             me.focusOnMount && me.focus(me.id);
 
-            setTimeout(() => {
+            me.timeout(300).then(() => {
                 Neo.currentWorker.promiseMessage('main', {
                     action    : 'readDom',
                     appName   : me.appName,
@@ -280,7 +280,7 @@ class Gallery extends Component {
                         selectionModel.select(key)
                     }
                 })
-            }, 300)
+            })
         } else {
             selectionModel.items = []
         }
@@ -302,19 +302,19 @@ class Gallery extends Component {
             if (me.rendered) {
                 me.refreshImageReflection();
 
-                setTimeout(() => {
+                me.timeout(50).then(() => {
                     for (; i < len; i++) {
                         view.cn[i].style.transform = me.getItemTransform(i)
                     }
 
                     me.update();
 
-                    setTimeout(() => {
+                    me.timeout(500).then(() => {
                         let sm = me.selectionModel;
 
                         sm.hasSelection() && me.onSelectionChange(sm.items)
-                    }, 500)
-                }, 50)
+                    })
+                })
             }
         }
     }
@@ -695,9 +695,9 @@ class Gallery extends Component {
                     view.cn = newCn;
                     me.update();
 
-                    setTimeout(() => {
+                    me.timeout(50).then(() => {
                         me.afterSetOrderByRow(me.orderByRow, !me.orderByRow)
-                    }, 50)
+                    })
                 }
             }
         }

package/src/component/Helix.mjs

@@ -548,9 +548,9 @@ class Helix extends Component {
         if (!me.mounted) {
             const listenerId = me.on('mounted', () => {
                 me.un('mounted', listenerId);
-                setTimeout(() => {
-                    me.createItems(startIndex);
-                }, 100)
+                me.timeout(100).then(() => {
+                    me.createItems(startIndex)
+                })
             })
         } else {
             for (; i < len; i++) {
@@ -601,9 +601,9 @@ class Helix extends Component {
                 me[itemsMounted] = true;
                 me.fire('itemsMounted');
 
-                setTimeout(() => {
+                me.timeout(200).then(() => {
                     me[lockWheel] = false
-                }, 200)
+                })
             })
         }
     }
@@ -642,9 +642,9 @@ class Helix extends Component {
             me.clonedItems = [];
 
             Neo.applyDeltas(me.appName, deltas).then(data => {
-                setTimeout(() => {
+                me.timeout(650).then(() => {
                     Neo.applyDeltas(me.appName, removeDeltas)
-                }, 650)
+                })
             })
         }
     }
@@ -701,7 +701,7 @@ class Helix extends Component {
             }).then(data => {
                 me.clonedItems.push(itemVdom);
 
-                setTimeout(() => {
+                me.timeout(50).then(() => {
                     Neo.applyDeltas(appName, {
                         id   : itemVdom.id,
                         style: {
@@ -709,7 +709,7 @@ class Helix extends Component {
                             transform: me.getCloneTransform()
                         }
                     })
-                }, 50)
+                })
             })
         }
     }
@@ -756,7 +756,7 @@ class Helix extends Component {
     getOffsetValues(delay=100) {
         let me = this;
 
-        setTimeout(() => {
+        me.timeout(delay).then(() => {
             Neo.currentWorker.promiseMessage('main', {
                 action    : 'readDom',
                 appName   : me.appName,
@@ -764,9 +764,9 @@ class Helix extends Component {
                 vnodeId   : me.id
             }).then(data => {
                 me.offsetHeight = data.attributes.offsetHeight;
-                me.offsetWidth  = data.attributes.offsetWidth;
+                me.offsetWidth  = data.attributes.offsetWidth
             })
-        }, delay)
+        })
     }
 
     /**

package/src/component/Toast.mjs

@@ -124,7 +124,7 @@ class Toast extends Base {
      * Timeout in ms after which the toast is removed
      * @member {Number} timeout=3000
      */
-    timeout = 3000
+    timeout = 3000 // todo: conflicting class field name => timeout()
 
     /**
      * @param {Object} config

package/src/component/wrapper/AmChart.mjs

@@ -114,9 +114,9 @@ class AmChart extends Component {
                 opts.dataPath = me.dataPath;
             }
 
-            setTimeout(() => {
+            me.timeout(50).then(() => {
                 Neo.main.addon.AmCharts.create(opts).then(me.onChartMounted)
-            }, 50)
+            })
         }
     }
 

package/src/component/wrapper/CesiumJS.mjs

@@ -50,11 +50,11 @@ class CesiumJS extends Component {
         if (value) {
             let opts = {appName, createOsmBuildings, id, windowId};
 
-            setTimeout(() => {
+            me.timeout(50).then(() => {
                 Neo.main.addon.CesiumJS.create(opts).then(() => {
                     me.onComponentMounted()
                 })
-            }, 50)
+            })
         }
     }
 

package/src/component/wrapper/GoogleMaps.mjs

@@ -193,12 +193,12 @@ class GoogleMaps extends Base {
                 zoomControl      : me.zoomControl
             };
 
-            setTimeout(() => {
+            me.timeout(50).then(() => {
                 Neo.main.addon.GoogleMaps.create(opts).then(() => {
                     me.mapCreated = true;
                     me.onComponentMounted()
                 })
-            }, 50)
+            })
         }
     }