neo.mjs 6.20.1 → 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/code/LivePreview.scss

@@ -1,5 +1,8 @@
 .neo-code-live-preview {
-    margin-bottom: 2em;
+    margin-bottom             : 2em;
+    transition-duration       : .3s;
+    transition-property       : height, left, top, width;
+    transition-timing-function: ease-out;
 
     .live-preview-container {
         border-radius: calc(var(--cmp-tab-strip-height) + var(--cmp-button-borderradius));

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.20.1'
+     * @default '6.22.0'
      * @memberOf! module:Neo
      * @name config.version
      * @type String
      */
-    version: '6.20.1'
+    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

@@ -44,6 +44,10 @@ class LivePreview extends Container {
          * @member {Boolean} disableRunSource=false
          */
         disableRunSource: false,
+        /**
+         * @member {Boolean} enableFullscreen=true
+         */
+        enableFullscreen: true,
         /**
          * @member {Number} height=400
          */
@@ -127,6 +131,71 @@ class LivePreview extends Container {
         return this.beforeSetEnumValue(value, oldValue, 'activeView')
     }
 
+    /**
+     * @param {Object} data
+     */
+    async collapseExpand(data) {
+        let me       = this,
+            button   = data.component,
+            collapse = button.iconCls === 'fas fa-compress',
+            {vdom}   = me,
+            rect;
+
+        if (collapse) {
+            button.iconCls = 'fas fa-expand';
+
+            rect = me.collapseRect;
+
+            delete me.collapseRect;
+
+            Object.assign(vdom.style, {
+                height  : rect.height + 'px',
+                left    : rect.x      + 'px',
+                top     : rect.y      + 'px',
+                width   : rect.width  + 'px'
+            });
+
+            me.update();
+
+            await me.timeout(300);
+
+            Object.assign(vdom.style, {
+                position: null,
+                zIndex  : null
+            })
+        } else {
+            button.iconCls = 'fas fa-compress';
+
+            rect = await me.getDomRect();
+
+            me.collapseRect = rect;
+
+            vdom.style = vdom.style || {};
+
+            Object.assign(vdom.style, {
+                height  : rect.height + 'px',
+                left    : rect.x      + 'px',
+                position: 'fixed',
+                top     : rect.y      + 'px',
+                width   : rect.width  + 'px',
+                zIndex  : 100
+            });
+
+            me.update();
+
+            await me.timeout(50);
+
+            Object.assign(vdom.style, {
+                height: '100%',
+                left  : 0,
+                top   : 0,
+                width : '100%'
+            })
+        }
+
+        me.update()
+    }
+
     /**
      *
      */
@@ -269,12 +338,15 @@ class LivePreview extends Container {
      * @param {Number} data.value
      */
     onActiveIndexChange(data) {
+        let me     = this,
+            hidden = data.value !== 1;
+
         if (data.item.reference === 'preview') {
-            this.doRunSource()
+            me.doRunSource()
         }
 
-        this.getReference('popout-window-button').hidden = data.value !== 1
-        this.disableRunSource = false;
+        me.getReference('popout-window-button').hidden = hidden
+        me.disableRunSource = false;
     }
 
     /**
@@ -284,18 +356,32 @@ class LivePreview extends Container {
         super.onConstructed();
 
         let me             = this,
+            items          = [],
             {tabContainer} = me;
 
-        // we want to add a normal (non-header) button
-        tabContainer.getTabBar().add({
+        if (me.enableFullscreen) {
+            items.push({
+                handler: me.collapseExpand.bind(me),
+                iconCls: 'fas fa-expand',
+                ui     : 'ghost'
+            })
+        }
+
+        items.push({
             handler  : me.popoutPreview.bind(me),
             hidden   : tabContainer.activeIndex !== 1,
             iconCls  : 'far fa-window-maximize',
             reference: 'popout-window-button',
-            style    : {marginLeft: 'auto'},
             ui       : 'ghost'
         });
 
+        items[0].style = {marginLeft: 'auto'};
+
+        // we want to add a normal (non-header) button
+        tabContainer.getTabBar().add(items);
+
+        tabContainer.getTabBar().update();
+
         tabContainer.on('activeIndexChange', me.onActiveIndexChange, me);
 
         // changing the activeView initially will not trigger our onActiveIndexChange() logic

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