neo.mjs 6.18.0 → 6.18.2

package/resources/scss/src/apps/portal/HeaderToolbar.scss

@@ -1,55 +1,54 @@
 .learnneo-header-toolbar {
-  border-bottom: 1px solid #f2f2f2;
+    border-bottom: 1px solid #f2f2f2;
 
-  .logo {
-    margin-left: 1em;
-  }
-
-  .neo-button {
-    margin-left: 10px;
-
-    &.no-text {
-      margin-left: 0;
-      width: 1.2em;
-
-      &.github-button {
-        margin-left: 5em;
-      }
-
-      .neo-button-glyph {
-        font-size: 24px;
-      }
+    .logo {
+        margin-left: 1em;
     }
 
-    .neo-button-glyph {
-      &.neo-logo-blue {
-        background-image: url("../../../../../../../resources/images/logo/neo_logo_primary.svg");
-        height: 24px;
-        width: 24px;
-      }
+    .neo-button {
+        margin-left: 10px;
+
+        &.no-text {
+            margin-left: 0;
+            width      : 1.2em;
+
+            &.github-button {
+                margin-left: 5em;
+            }
+
+            .neo-button-glyph {
+                font-size: 24px;
+            }
+        }
+
+        .neo-button-glyph {
+            &.neo-logo-blue {
+                background-image: url("../../../../../../resources/images/logo/neo_logo_primary.svg");
+                height          : 24px;
+                width           : 24px;
+            }
+        }
     }
-  }
 
-  .separate-bar {
-    position: absolute;
-    right: 20px;
-    top: 60px;
-    width: 40px;
-
-    z-index: 9;
-    transform: rotate(0);
-    animation: fade-in-animation 200ms linear;
-  }
+    .separate-bar {
+        animation: fade-in-animation 200ms linear;
+        position: absolute;
+        right   : 20px;
+        top     : 60px;
+        transform: rotate(0);
+        width   : 40px;
+        z-index  : 9;
+    }
 
-  // find parallel class hide-sidebar
-  &:has(+div .hide-sidebar) .separate-bar {
-    animation: fade-animation 200ms linear forwards;
-  }
+    // find parallel class hide-sidebar
+    &:has(+div .hide-sidebar) .separate-bar {
+        animation: fade-animation 200ms linear forwards;
+    }
 }
 
 .vector {
-  animation: fade-and-scale-animation auto linear;
-  animation-timeline: --page-scroll;
+    animation: fade-and-scale-animation auto linear;
+    animation-timeline: --page-scroll;
 }
 
 //@scroll-timeline --page-scroll {
@@ -60,71 +59,72 @@
 
 
 /* Style and position the progress bar */
-#progress {
-  position: fixed;
-  z-index: 1000;
-  top: 0;
-  height: 2px;
-  width: 100%;
-  background: var(--button-background-color);
-  background: var(--sem-color-surface-primary-background);
+.portal-home-progress {
+    position: fixed;
+    z-index: 1000;
+    top: 0;
+    height: 2px;
+    width: 100%;
+    background: var(--button-background-color);
+    background: var(--sem-color-surface-primary-background);
 
-  scale: 0 1;
-  transform-origin: left;
+    scale: 0 1;
+    transform-origin: left;
 
-  /* Attach the animation using an anonymous Scroll Progress Timeline */
-  animation: grow-progress linear;
-  animation-timeline: --page-scroll;
+    /* Attach the animation using an anonymous Scroll Progress Timeline */
+    animation: grow-progress linear;
+    animation-timeline: --page-scroll;
 }
 
 @keyframes grow-progress {
-  to { scale: 1 1; }
+    to {
+        scale: 1 1;
+    }
 }
 
 .hello-world {
-  animation-timeline: view(block 100% -500%);
+    animation-timeline: view(block 100% -500%);
 
-  animation-name: appear-animation;
-  animation-fill-mode: both;
-  animation-duration: 1ms; /* Firefox requires this to apply the animation */
-  animation-timing-function: linear;
+    animation-name: appear-animation;
+    animation-fill-mode: both;
+    animation-duration: 1ms; /* Firefox requires this to apply the animation */
+    animation-timing-function: linear;
 }
 
 @keyframes appear-animation {
-  0% {
-    transform: translateX(-400%);
-    opacity: 0;
-  }
-  90% {
-    opacity: .3;
-  }
-  100% {
-    transform: translateX(0);
-    opacity: 1;
-  }
+    0% {
+        transform: translateX(-400%);
+        opacity  : 0;
+    }
+    90% {
+        opacity: .3;
+    }
+    100% {
+        transform: translateX(0);
+        opacity  : 1;
+    }
 }
 
 .cool-stuff {
-  animation-timeline: view(block 100% -500%);
-
-  animation-name: appear-cool-stuff;
-  animation-fill-mode: both;
-  animation-duration: 1ms; /* Firefox requires this to apply the animation */
-  animation-timing-function: linear;
+    animation-timeline       : view(block 100% -500%);
+    animation-name           : appear-cool-stuff;
+    animation-fill-mode      : both;
+    animation-duration       : 1ms; /* Firefox requires this to apply the animation */
+    animation-timing-function: linear;
 }
 
 @keyframes appear-cool-stuff {
-  0% {
-    transform: translateX(400%);
-    opacity: 0;
-  }
-  90% {
-    opacity: .3;
-  }
-  100% {
-    transform: translateX(0);
-    opacity: 1;
-  }
+    0% {
+        transform: translateX(400%);
+        opacity  : 0;
+    }
+    90% {
+        opacity: .3;
+    }
+    100% {
+        transform: translateX(0);
+        opacity  : 1;
+    }
 }
 
 
@@ -133,65 +133,83 @@
 //}
 
 .portal-home-maincontainer {
-  scroll-timeline: --page-scroll block;
+    scroll-timeline: --page-scroll block;
 }
 
 @keyframes rotateAnimation {
-  from { transform: rotate(0deg); }
-  to   { transform: rotate(360deg); }
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
 }
 
 @keyframes fade-and-scale-animation {
-  0% {
-    opacity: 1;
-    transform: scale(1);
-  }
-  12%, 100% {
-    opacity: 0;
-    transform: scale(1.5);
-  }
+    0% {
+        opacity  : 1;
+        transform: scale(1);
+    }
+    12%, 100% {
+        opacity  : 0;
+        transform: scale(1.5);
+    }
 }
 
 @keyframes fade-in-animation {
-  from { opacity: 0; right: -10px}
-  to   { opacity: 1; right: 20px;}
+    from {
+        opacity: 0;
+        right  : -10px
+    }
+    to {
+        opacity: 1;
+        right  : 20px;
+    }
 }
+
 @keyframes fade-animation {
-  from { opacity: 1; right: 20px;}
-  to   { opacity: 0; right: -10px}
+    from {
+        opacity: 1;
+        right  : 20px;
+    }
+    to {
+        opacity: 0;
+        right  : -10px
+    }
 }
 
 .button-group {
-  overflow: visible;
+    overflow: visible;
 }
 
 .get-started-button {
-  opacity: 0;
-  animation: show-get-started-button 400ms 1300ms linear forwards;
+    opacity  : 0;
+    animation: show-get-started-button 400ms 1300ms linear forwards;
 }
 
 .neo-github {
-  opacity: 0;
-  animation: show-github-button 600ms 1150ms linear forwards;
+    opacity  : 0;
+    animation: show-github-button 600ms 1150ms linear forwards;
 }
 
 @keyframes show-get-started-button {
-  from {
-    opacity: 0;
-    transform: translate(70px, 30px);
-  }
-  to {
-    opacity: 1;
-    transform: translate(0, 0);
-  }
+    from {
+        opacity  : 0;
+        transform: translate(70px, 30px);
+    }
+    to {
+        opacity  : 1;
+        transform: translate(0, 0);
+    }
 }
+
 @keyframes show-github-button {
-  from {
-    opacity: 0;
-    transform: translate(-70px, 50px);
-  }
-  to {
-    opacity: 1;
-    transform: translate(0, 0);
-  }
+    from {
+        opacity  : 0;
+        transform: translate(-70px, 50px);
+    }
+    to {
+        opacity  : 1;
+        transform: translate(0, 0);
+    }
 }

package/resources/scss/src/apps/portal/home/MainContainer.scss

@@ -2,49 +2,4 @@
     overflow-x      : hidden!important;
     scroll-behavior : smooth;
     scroll-snap-type: y mandatory;
-
-    .page {
-        min-height       : 100%;
-        scroll-snap-align: center;
-
-        .neo-h1 {
-            font-size: min(max(5.5vw, 30px), 64px);
-        }
-
-        .neo-h2 {
-            font-size: min(max(3.5vw, 24px), 44px);
-        }
-
-        .neo-content {
-            font-size: min(max(2.3vw, 16px), 30px);
-        }
-
-        .page-live-preview {
-            margin: 0;
-        }
-    }
-
-    .button-group {
-        display       : flex !important;
-        flex-direction: row-reverse !important;
-        gap           : 8px !important;
-    }
-
-    .neo-h1 {
-        font-size    : 32px;
-        font-weight  : 600;
-        text-align   : center;
-        margin-bottom: 1.25em;
-    }
-
-    .vector {
-        background-image   : url("../../../../../../../resources/images/logo/neo_logo_text_primary.svg");
-        background-position: center center;
-        background-repeat  : no-repeat;
-        background-size    : contain;
-        height             : 10vW;
-        margin             : 0 0 3rem 0;
-        max-height         : 130px;
-        width              : 100%;
-    }
 }

package/resources/scss/src/apps/portal/home/parts/BaseContainer.scss

@@ -0,0 +1,27 @@
+.portal-home-content-view {
+    min-height       : 100%;
+    scroll-snap-align: center;
+
+    .neo-h1 {
+        font-size  : min(max(5.5vw, 30px), 64px);
+        text-align : center;
+        margin     : 0;
+        line-height: 1em;
+    }
+
+    .neo-h2 {
+        font-size  : min(max(3.5vw, 24px), 44px);
+        font-weight: 600;
+        text-align : center;
+        margin     : 0;
+        line-height: 1em;
+    }
+
+    .neo-content {
+        font-size: min(max(2.3vw, 16px), 30px);
+    }
+
+    .page-live-preview {
+        margin: 0;
+    }
+}

package/resources/scss/src/apps/portal/home/parts/MainNeo.scss

@@ -0,0 +1,24 @@
+.portal-home-main-neo.portal-home-content-view {
+    padding: 3em;
+
+    .button-group {
+        display       : flex !important;
+        flex-direction: row-reverse !important;
+        gap           : 8px !important;
+    }
+
+    .neo-h1 {
+        margin-bottom: 1.25em;
+    }
+
+    .vector {
+        background-image   : url("../../../../../../../../resources/images/logo/neo_logo_text_primary.svg");
+        background-position: center center;
+        background-repeat  : no-repeat;
+        background-size    : contain;
+        height             : 10vW;
+        margin             : 0 0 3rem 0;
+        max-height         : 130px;
+        width              : 100%;
+    }
+}

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

@@ -7,7 +7,7 @@
     padding         : 8px 2px 8px 8px;
 
     .neo-list-container {
-        padding: 0 3px 3px 3px;
+        padding: 3px;
     }
 
     .neo-list-container>.neo-list-item {

package/resources/scss/src/calendar/view/EditEventContainer.scss

@@ -5,7 +5,7 @@
     padding         : .7em;
     position        : absolute;
     top             : 0;
-    z-index         : 10000;
+    z-index         : 900;
 
     &:before {
         border-bottom: 12px solid transparent;

package/resources/scss/src/calendar/view/calendars/List.scss

@@ -1,4 +1,4 @@
-.neo-calendars-list {
+.neo-calendars-list.neo-list {
     .neo-checkboxfield {
         align-items: center;
         display    : flex;

package/resources/scss/src/dialog/Base.scss

@@ -30,6 +30,7 @@
 
 .neo-dialog {
     border        : 1px solid var(--dialog-border-color);
+    box-shadow    : var(--dialog-box-shadow);
     display       : flex;
     flex-direction: column;
 
@@ -61,12 +62,6 @@
         }
     }
 
-    &.neo-centered {
-        left      : 50%;
-        top       : 50%;
-        transform : translate(-50%, -50%);
-    }
-
     &.neo-panel {
         .neo-footer-toolbar {
             border    : none;

package/resources/scss/theme-dark/dialog/Base.scss

@@ -1,5 +1,6 @@
 :root .neo-theme-dark { // .neo-dialog
     --dialog-border-color: #3c3f41;
+    --dialog-box-shadow  : 0 5px 10px rgba(0,0,0,.4);
     --dialog-header-color: floralwhite;
     --dialog-icon-color  : floralwhite;
 }

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

@@ -1,5 +1,6 @@
 :root .neo-theme-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;
 }

package/resources/scss/theme-neo-light/Global.scss

@@ -46,17 +46,19 @@
         font-style: italic;
     }
 
-    code &:not(.hljs) {
-        background-color: #F0F2F0;
-        border          : 1px solid var(--sem-color-border-subtle);
-        border-radius   : 4px;
-        color           : var(--sem-color-fg-neutral-contrast);
-        font-family     : var(--core-fontfamily-mono);
-        font-size       : var(--core-fontsize-body);
-        font-weight     : var(--core-fontweight-regular);
-        line-height     : var(--core-lineheight-headline);
-        padding         : 2px 0.3em;
-        font-size       : 16px;
+    code {
+        &:not(.hljs) {
+            background-color: #F0F2F0;
+            border          : 1px solid var(--sem-color-border-subtle);
+            border-radius   : 4px;
+            color           : var(--sem-color-fg-neutral-contrast);
+            font-family     : var(--core-fontfamily-mono);
+            font-size       : var(--core-fontsize-body);
+            font-weight     : var(--core-fontweight-regular);
+            line-height     : var(--core-lineheight-headline);
+            padding         : 2px 0.3em;
+            font-size       : 16px;
+        }
     }
 
     mark {

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

@@ -1,5 +1,6 @@
 :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;
 }

package/src/DefaultConfig.mjs

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

package/src/button/Base.mjs

@@ -440,12 +440,13 @@ class Base extends Component {
      * @protected
      */
     changeRoute() {
-        let me = this;
+        let me         = this,
+            {windowId} = me;
 
         if (me.editRoute) {
             Neo.Main.editRoute(me.route)
         } else {
-            Neo.Main.setRoute({value: me.route})
+            Neo.Main.setRoute({value: me.route, windowId})
         }
     }
 

package/src/calendar/view/EditEventContainer.mjs

@@ -239,7 +239,7 @@ class EditEventContainer extends FormContainer {
      */
     onCalendarFieldChange(data) {
         if (!Neo.isEmpty(data.value)) {
-            this.record.calendarId = data.record[data.component.store.keyProperty]
+            this.record.calendarId = data.value[data.component.store.keyProperty]
         }
     }