@eclipse-scout/core 22.0.0-beta.5 → 22.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eclipse-scout/core",
-  "version": "22.0.0-beta.5",
+  "version": "22.0.2",
   "description": "Eclipse Scout runtime",
   "author": "BSI Business Systems Integration AG",
   "homepage": "https://www.eclipse.org/scout",
@@ -26,7 +26,7 @@
     "src"
   ],
   "devDependencies": {
-    "@eclipse-scout/cli": "22.0.0-beta.5",
+    "@eclipse-scout/cli": "22.0.2",
     "@eclipse-scout/releng": "^22.0.0",
     "jasmine-core": "3.10.1",
     "jasmine-ajax": "4.0.0",

package/src/App.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2010-2021 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
@@ -196,7 +196,7 @@ export default class App {
    */
   _init(options) {
     options = options || {};
-    this.setLoading(true)
+    this.setLoading(true);
     let compatibilityPromise = this._checkBrowserCompatibility(options);
     if (compatibilityPromise) {
       this.setLoading(false);
@@ -224,7 +224,6 @@ export default class App {
 
   _checkBrowserCompatibility(options) {
     let device = Device.get();
-    let app = this;
     $.log.isInfoEnabled() && $.log.info('Detected browser ' + device.browser + ' version ' + device.browserVersion);
     if (!scout.nvl(options.checkBrowserCompatibility, true) || device.isSupportedBrowser()) {
       // No check requested or browser is supported
@@ -292,7 +291,7 @@ export default class App {
     $loadingRoot.css('opacity', $loadingRoot.css('opacity'));
     // Add animation listener before adding the classes to ensure the listener will always be triggered even while debugging
     $loadingRoot.oneAnimationEnd(() => $loadingRoot.remove());
-    if ($loadingRoot.css('opacity') == 1) {
+    if ($loadingRoot.css('opacity') === '1') {
       $loadingRoot.addClass('fadeout and-more');
     } else {
       $loadingRoot.addClass('fadeout');
@@ -400,9 +399,7 @@ export default class App {
 
     // TODO [7.0] cgu improve this, start must not be executed because it currently does a server request
     let desktop = this._createDesktop(session.root);
-    this.trigger('desktopReady', {
-      desktop: desktop
-    });
+    this._triggerDesktopReady(desktop);
     session.render(() => {
       session._renderDesktop();
 
@@ -411,14 +408,24 @@ export default class App {
       session.focusManager.validateFocus();
 
       session.ready = true;
-      this.trigger('sessionReady', {
-        session: session
-      });
+      this._triggerSessionReady(session);
       $.log.isInfoEnabled() && $.log.info('Session initialized. Detected ' + Device.get());
     });
     return $.resolvedPromise();
   }
 
+  _triggerDesktopReady(desktop) {
+    this.trigger('desktopReady', {
+      desktop: desktop
+    });
+  }
+
+  _triggerSessionReady(session) {
+    this.trigger('sessionReady', {
+      session: session
+    });
+  }
+
   _createSession(options) {
     return scout.create('Session', options, {
       ensureUniqueId: false

package/src/action/Button.less

@@ -33,6 +33,7 @@
 
   & > .text {
     #scout.overflow-ellipsis-nowrap();
+    margin-top: @text-margin-top;
   }
 
   & > .icon {

package/src/box/Box.less

@@ -26,9 +26,9 @@
 }
 
 .box-content {
-  border: 1px solid @border-color;
+  border: @popup-border-width solid @popup-border-color;
   border-radius: @border-radius-large;
-  background-color: @background-color;
+  background-color: @popup-background-color;
   max-width: @box-width;
   margin: 0 auto;
   padding: 45px 95px 50px 95px;

package/src/breadcrumbbar/BreadcrumbBarLayout.js

@@ -44,7 +44,7 @@ export default class BreadcrumbBarLayout extends AbstractLayout {
     this._collapse(breadcrumbItems, containerSize);
   }
 
-  _collapse = function($container, containerSize) {
+  _collapse($container, containerSize) {
     let currentIndex = 1;
     const visibleBreadcrumbItems = this._visibleBreadcrumbItems();
     let prefSize = this._actualPrefSize(visibleBreadcrumbItems, true);
@@ -116,7 +116,7 @@ export default class BreadcrumbBarLayout extends AbstractLayout {
   /**
    * @return {number} the preferred width of all breadcrumbItems (plus ellipsis breadcrumb)
    */
-  _breadcrumbItemsWidth = function(breadcrumbItems, considerEllipsis) {
+  _breadcrumbItemsWidth(breadcrumbItems, considerEllipsis) {
     let breadcrumbsWidth = 0;
     breadcrumbItems = breadcrumbItems || this._visibleBreadcrumbItems();
     breadcrumbItems.forEach(breadcrumbItem => {

package/src/calendar/Calendar.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2010-2020 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
@@ -8,27 +8,7 @@
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
  */
-import {
-  CalendarComponent,
-  CalendarLayout,
-  CalendarListComponent,
-  DateRange,
-  dates,
-  Device,
-  events,
-  GroupBox,
-  HtmlComponent,
-  KeyStrokeContext,
-  menus,
-  numbers,
-  objects,
-  Point,
-  Range,
-  scout,
-  scrollbars,
-  strings,
-  Widget
-} from '../index';
+import {CalendarComponent, CalendarLayout, CalendarListComponent, DateRange, dates, Device, events, GroupBox, HtmlComponent, KeyStrokeContext, menus, numbers, objects, Point, Range, scout, scrollbars, strings, Widget} from '../index';
 import $ from 'jquery';
 
 export default class Calendar extends Widget {
@@ -759,11 +739,9 @@ export default class Calendar extends Widget {
       this.$topGrid.find('.calendar-day-name').data('new-width', 0);
       this.$grids.find('.calendar-day').data('new-width', 0);
       let newWidthWorkWeek = Math.round(contentW / this.workDayIndices.length);
-      $('.calendar-day-name:nth-child(-n+6), ' +
-        '.calendar-day:nth-child(-n+6)', this.$topGrid)
-        .data('new-width', newWidthWorkWeek);
-      $('.calendar-day:nth-child(-n+6)', this.$grid)
-        .data('new-width', newWidthWorkWeek);
+      this.$topGrid.find('.calendar-day-name').slice(0, 5).data('new-width', newWidthWorkWeek);
+      this.$topGrid.find('.calendar-day').slice(0, 5).data('new-width', newWidthWorkWeek);
+      $('.calendar-day:nth-child(-n+6)', this.$grid).data('new-width', newWidthWorkWeek);
       this.widthPerDivision = newWidthWorkWeek;
     } else if (this._isMonth() || this._isWeek()) {
       let newWidthMonthOrWeek = Math.round(contentW / 7);
@@ -781,21 +759,26 @@ export default class Calendar extends Widget {
       });
     }
 
-    let afterLayoutCallback = this._afterLayout.bind(this);
-
     // animate old to new sizes
-    $('div', this.$container).each(function() {
-      let $e = $(this),
-        w = $e.data('new-width'),
-        h = $e.data('new-height');
+    $('div', this.$container).each((i, elem) => {
+      let $e = $(elem);
+      let w = $e.data('new-width');
+      let h = $e.data('new-height');
       $e.stop(false, true);
 
       if (w !== undefined && w !== $e.outerWidth()) {
         if (animate) {
-          $e.animateAVCSD('width', w, afterLayoutCallback.bind(this, $e, animate));
+          let opts = {
+            complete: () => this._afterLayout($e, animate)
+          };
+          if ($e[0] === this.$grids[0]) {
+            // Grid contains scroll shadows that should be updated during animation (don't due it always for performance reasons)
+            opts.progress = () => this._afterLayout($e, animate);
+          }
+          $e.animate({width: w}, opts);
         } else {
           $e.css('width', w);
-          afterLayoutCallback($e, animate);
+          this._afterLayout($e, animate);
         }
       }
       if (h !== undefined && h !== $e.outerHeight()) {
@@ -807,14 +790,14 @@ export default class Calendar extends Widget {
             if (h === 0) {
               $e.addClass('hidden');
             }
-            afterLayoutCallback($e, animate);
+            this._afterLayout($e, animate);
           });
         } else {
           $e.css('height', h);
           if (h === 0) {
             $e.addClass('hidden');
           }
-          afterLayoutCallback($e, animate);
+          this._afterLayout($e, animate);
         }
       }
     });
@@ -853,13 +836,18 @@ export default class Calendar extends Widget {
 
   _updateScrollbars($parent, animate) {
     let $scrollables = $('.calendar-scrollable-components', $parent);
-    $scrollables.each(function() {
-      let $scrollable = $(this);
-      scrollbars.update($scrollable, true);
+    $scrollables.each((i, elem) => {
+      scrollbars.update($(elem), true);
     });
     this.updateScrollPosition(animate);
   }
 
+  _uninstallComponentScrollbars($parent) {
+    $parent.find('.calendar-scrollable-components').each((i, elem) => {
+      scrollbars.uninstall($(elem), this.session);
+    });
+  }
+
   _updateTopGrid() {
     $('.calendar-component', this.$topGrid).each((index, part) => {
       let component = $(part).data('component');
@@ -1037,18 +1025,8 @@ export default class Calendar extends Widget {
   }
 
   _remove() {
-    let $days = $('.calendar-day', this.$grid);
-
-    // Ensure that scrollbars are unregistered
-    for (let k = 0; k < $days.length; k++) {
-      let $day = $days.eq(k);
-      let $scrollableContainer = $day.children('.calendar-scrollable-components');
-
-      if ($scrollableContainer.length > 0) {
-        scrollbars.uninstall($scrollableContainer, this.session);
-        $scrollableContainer.remove();
-      }
-    }
+    this._uninstallComponentScrollbars(this.$grid);
+    this._uninstallComponentScrollbars(this.$topGrid);
 
     this.$window
       .off('mousemove touchmove', this._mouseMoveHandler)
@@ -1179,6 +1157,7 @@ export default class Calendar extends Widget {
 
     if (this._isMonth()) {
       this._uninstallScrollbars();
+      this._uninstallComponentScrollbars(this.$topGrid);
       this.$grid.removeClass('calendar-scrollable-components');
     } else {
       this.$grid.addClass('calendar-scrollable-components');
@@ -1188,16 +1167,19 @@ export default class Calendar extends Widget {
         session: this.session,
         axis: 'y'
       });
-
-      let $topDays = $('.calendar-scrollable-components', this.$topGrid);
-      for (k = 0; k < $topDays.length; k++) {
-        let $topDay = $topDays.eq(k);
+      this.$topGrid.find('.calendar-scrollable-components').each((i, elem) => {
+        let $topDay = $(elem);
+        if ($topDay.data('scrollable')) {
+          scrollbars.update($topDay);
+          return;
+        }
         scrollbars.install($topDay, {
           parent: this,
           session: this.session,
-          axis: 'y'
+          axis: 'y',
+          scrollShadow: 'none'
         });
-      }
+      });
     }
   }
 

package/src/calendar/Calendar.less

@@ -28,15 +28,6 @@
   height: 100%;
 }
 
-.calendar-week-scrollable {
-  overflow: visible;
-}
-
-.calendar-scrollable-components-week {
-  top: calc(@calendar-day-selected-circle-size ~'+ 5px');
-  height: calc(~'15% - (' @calendar-day-selected-circle-size ~' + 5px)');
-}
-
 .calendar-header {
   position: relative;
   display: block;
@@ -147,7 +138,8 @@
 }
 
 .calendar-mode {
-  width: 65px;
+  padding: 0 8px;
+  min-width: 65px;
 
   border-top: 1px solid @control-border-color;
   border-bottom: 1px solid @control-border-color;
@@ -362,8 +354,16 @@
   height: calc(~'100% - 25px');
   padding-right: @root-group-box-padding-right;
 
+  & + .scroll-shadow {
+    --scroll-shadow-inset-right: @root-group-box-padding-right;
+  }
+
   &.mobile {
     padding-right: @calendar-padding-right-mobile;
+
+    & + .scroll-shadow {
+      --scroll-shadow-inset-right: @calendar-padding-right-mobile;
+    }
   }
 }
 

package/src/calendar/CalendarLayout.js

@@ -17,6 +17,7 @@ export default class CalendarLayout extends AbstractLayout {
     this.calendar = calendar;
     this.stacked = false;
     this.compacted = false;
+    this.compactWidth = 550;
   }
 
   layout($container) {
@@ -34,7 +35,8 @@ export default class CalendarLayout extends AbstractLayout {
     if ($header[0].scrollWidth > $container.width()) {
       this.stack();
     }
-    if ($header[0].scrollWidth > $container.width()) {
+    if ($container.width() < this.compactWidth || $header[0].scrollWidth > $container.width()) {
+      // Title may take a lot of space, make it always compact for small devices so it won't toggle when changing display mode or view range
       this.compact();
     }
 

package/src/datepicker/DatePicker.less

@@ -142,6 +142,7 @@
   cursor: default;
   font-size: 18px;
   line-height: 30px;
+  margin-top: @text-margin-top;
   #scout.overflow-ellipsis-nowrap();
 }
 

package/src/desktop/desktoptab/DesktopTab.less

@@ -10,11 +10,12 @@
  */
 .desktop-tab.simple-tab {
   width: @desktop-tab-width;
-  min-width: @desktop-tab-min-width ;
+  min-width: @desktop-tab-min-width;
   margin: @desktop-tab-margin-top @desktop-tab-margin-right 0 0;
   padding: @desktop-tab-padding @desktop-tab-padding 0 @desktop-tab-padding-left;
   border-radius: @desktop-tab-border-radius @desktop-tab-border-radius 0 0;
-  border-right-width: 0;
+  border: @desktop-tab-border-width solid @desktop-tab-border-color;
+  border-bottom-width: 0;
   background-color: @desktop-tab-background-color;
 
   & > .title-line {
@@ -79,12 +80,27 @@
   &:hover,
   &:active {
     background-color: @desktop-tab-hover-background-color;
+    border-color: transparent;
 
     & > .title-line > .title {
       color: inherit;
     }
   }
 
+  &.glasspane-parent {
+    // Modality highlight does not work with pointer-events: none because mouse down is ignored on the glass pane completely by the browser
+    // -> we need to disable the hover effect manually
+    pointer-events: unset;
+
+    &:not(.disabled):not(.selected):hover {
+      background-color: @desktop-tab-background-color;
+    }
+
+    &:not(.selected):hover > .closer {
+      display: none;
+    }
+  }
+
   &.disabled {
     background-color: transparent;
 
@@ -95,6 +111,7 @@
 
   &.selected {
     background-color: @simple-tab-selected-background-color;
+    border-color: transparent;
 
     & > .title-line {
       & > .icon-container {

package/src/desktop/desktoptab/DesktopTabArea.less

@@ -11,17 +11,21 @@
 .desktop-tab-area {
 
   & > .simple-overflow-tab-item {
-    border-radius: @desktop-tab-border-radius;
-    margin: @desktop-tab-margin-top @desktop-tab-margin-right @desktop-tab-margin-right * 2;
+    @desktop-overflow-tab-margin-bottom: @desktop-tab-margin-right * 2;
+
+    border-radius: @view-tab-border-radius; // Use smaller border radius, so it fits nicely into the inverted border radius of the last tab if it is selected
+    margin: @desktop-tab-margin-top + @desktop-overflow-tab-margin-bottom @desktop-tab-margin-right @desktop-overflow-tab-margin-bottom;
     background-color: @desktop-tab-background-color;
-    border: 0;
+    border: @desktop-tab-border-width solid @desktop-tab-border-color;
 
     &:hover {
       background-color: @desktop-tab-hover-background-color;
+      border-color: transparent;
     }
 
     &.selected {
       background-color: @desktop-tab-hover-background-color;
+      border-color: transparent;
     }
   }
 }

package/src/desktop/desktoptab/DesktopTabAreaLayout.js

@@ -19,4 +19,4 @@ export default class DesktopTabAreaLayout extends SimpleTabAreaLayout {
     super.layout($container);
     this.tabArea.updateFirstTabSelected();
   }
-}
+}

package/src/desktop/navigation/DesktopNavigation.less

@@ -47,5 +47,9 @@
     & > .font-icon {
       font-size: @view-tab-icon-font-size;
     }
+
+    &.ellipsis > .font-icon {
+      font-size: @view-tab-icon-font-size + 2px;
+    }
   }
 }

package/src/desktop/notification/DesktopNotification.js

@@ -160,18 +160,17 @@ export default class DesktopNotification extends ScoutNotification {
       return;
     }
     if (this.nativeNotificationVisibility === DesktopNotification.NativeNotificationVisibility.NONE) {
+      this._hideLaterIfNativeOnly();
       return;
     }
 
     if (this.nativeNotificationVisibility === DesktopNotification.NativeNotificationVisibility.BACKGROUND && !this._isDocumentHidden()) {
+      this._hideLaterIfNativeOnly();
       return;
     }
 
     if (window.Notification && Notification.permission === 'denied') {
-      if (this.nativeOnly) {
-        // If native notifications are not allowed, there is no need to keep the (invisible) desktop notification open
-        this.hide();
-      }
+      this._hideLaterIfNativeOnly();
       return;
     }
     if (this._checkNotificationPromise()) {
@@ -182,6 +181,14 @@ export default class DesktopNotification extends ScoutNotification {
     }
   }
 
+  _hideLaterIfNativeOnly() {
+    if (!this.nativeOnly) {
+      return;
+    }
+    // If native notifications are not shown, there is no need to keep the (invisible) desktop notification open (prevent dom-leak)
+    setTimeout(() => this.hide()); // async because this method is called in render and removing the notification within render throws exception
+  }
+
   /**
    * Checks if browser supports the promise-based version of the method requestPermission. Safari only supports the older callback version.
    */

package/src/desktop/notification/DesktopNotification.less

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2010-2021 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
@@ -12,12 +12,14 @@
 @desktop-notification-margin-bottom: 10px;
 
 .desktop-notifications {
+  @desktop-notifications-margin-top: @desktop-header-height + 8px;
+
   position: fixed;
   right: 10px;
   top: 0;
-  height: 100%;
+  height: calc(~'100% - ' @desktop-notifications-margin-top);
   width: @desktop-notification-width;
-  margin-top: @desktop-header-height + 8px;
+  margin-top: @desktop-notifications-margin-top;
   pointer-events: none; /* Don't block access to the elements in the background */
 }
 

package/src/desktop/outline/Outline.js

@@ -1076,42 +1076,12 @@ export default class Outline extends Tree {
     if (desktop.navigation) {
       $elements.push(desktop.navigation.$body);
     }
-    if (desktop.bench && element instanceof Form && element.displayHint === Form.DisplayHint.VIEW) {
-      arrays.pushAll($elements, this._getBenchGlassPaneTargetsForView(element));
-    }
     if (desktop.bench && desktop.bench.outlineContent) {
       arrays.pushAll($elements, desktop.bench.outlineContent.glassPaneTargets(element));
     }
     return $elements;
   }
 
-  _getBenchGlassPaneTargetsForView(view) {
-    let $glassPanes = [];
-    $glassPanes = $glassPanes.concat(this._getTabGlassPaneTargetsForView(view, this.session.desktop.header));
-    this.session.desktop.bench.visibleTabBoxes().forEach(function(tabBox) {
-      if (tabBox.hasView(view)) {
-        arrays.pushAll($glassPanes, this._getTabGlassPaneTargetsForView(view, tabBox));
-      } else if (tabBox.$container) {
-        $glassPanes.push(tabBox.$container);
-      }
-    }, this);
-    return $glassPanes;
-  }
-
-  _getTabGlassPaneTargetsForView(view, tabBox) {
-    let $glassPanes = [];
-    tabBox.tabArea.tabs.forEach(tab => {
-      if (tab.view !== view && tab.view.displayParent === this) {
-        $glassPanes.push(tab.$container);
-        // Workaround for javascript not being able to prevent hover event propagation:
-        // In case of tabs, the hover selector is defined on the element that is the direct parent
-        // of the glass pane. Under these circumstances, the hover style isn't be prevented by the glass pane.
-        tab.$container.addClass('glasspane-parent');
-      }
-    });
-    return $glassPanes;
-  }
-
   _onGlassPaneMouseDown(glassPaneOwner, $glassPane) {
     let desktop = this.session.desktop;
     if (desktop.navigation) {

package/src/desktop/outline/Outline.less

@@ -58,10 +58,6 @@
         line-height: @outline-node-control-line-height;
         color: @outline-node-control-color;
 
-        &::before {
-          font-size: @outline-node-control-size;
-        }
-
         &:hover {
           color: @highlight-color;
         }
@@ -77,6 +73,10 @@
 
         & > .tree-node-control {
           color: @outline-node-selected-control-color;
+
+          &:hover {
+            color: @highlight-color;
+          }
         }
 
         & > .font-icon {

package/src/desktop/viewbutton/ViewButton.less

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2014-2018 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
@@ -35,6 +35,11 @@
     border-radius: @view-tab-selected-border-radius;
   }
 
+  & > .edge {
+    // Ensure GlassPane.js does not set position: relative if glass pane is added before view tab is selected
+    position: absolute;
+  }
+
   &.selected:not(.in-background) {
     margin: @view-tab-selected-margin-top 0 0;
     border-radius: @view-tab-selected-border-radius @view-tab-selected-border-radius 0 0;
@@ -65,14 +70,12 @@
 
         &.left {
           visibility: hidden;
-          left: 0;
-          animation: show-view-tab-left-edge @view-tab-transition-duration ease-out 0s forwards;
+          animation: show-view-tab-left-edge 40ms ease-out 160ms forwards;
         }
 
         &.right {
           visibility: hidden;
-          right: 0;
-          animation: show-view-tab-right-edge @view-tab-transition-duration ease-out 0s forwards;
+          animation: show-view-tab-right-edge 40ms ease-out 160ms forwards;
         }
       }
     }
@@ -127,15 +130,21 @@
 }
 
 @keyframes show-view-tab-left-edge {
-  to {
+  0% {
     visibility: visible;
-    transform: translateX(-24px);
+    left: -5px;
+  }
+  100% {
+    left: -12px;
   }
 }
 
 @keyframes show-view-tab-right-edge {
-  to {
+  0% {
     visibility: visible;
-    transform: translateX(24px);
+    right: -5px;
+  }
+  100% {
+    right: -12px;
   }
 }

package/src/desktop/viewbutton/ViewButtonBox.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2014-2018 BSI Business Systems Integration AG.
+ * Copyright (c) 2010-2022 BSI Business Systems Integration AG.
  * All rights reserved. This program and the accompanying materials
  * are made available under the terms of the Eclipse Public License v1.0
  * which accompanies this distribution, and is available at
@@ -8,7 +8,7 @@
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
  */
-import {Desktop, HtmlComponent, OutlineViewButton, scout, Widget, widgets} from '../../index';
+import {HtmlComponent, OutlineViewButton, scout, Widget, widgets} from '../../index';
 
 export default class ViewButtonBox extends Widget {