@eclipse-scout/core 22.0.1 → 22.0.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eclipse-scout/core",
-  "version": "22.0.1",
+  "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.1",
+    "@eclipse-scout/cli": "22.0.2",
     "@eclipse-scout/releng": "^22.0.0",
     "jasmine-core": "3.10.1",
     "jasmine-ajax": "4.0.0",

package/src/action/Button.less

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

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,6 +80,7 @@
   &:hover,
   &:active {
     background-color: @desktop-tab-hover-background-color;
+    border-color: transparent;
 
     & > .title-line > .title {
       color: inherit;
@@ -109,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/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.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
@@ -70,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;
         }
       }
     }
@@ -132,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/ViewMenuTab.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
@@ -19,11 +19,11 @@
     align-items: center;
     justify-content: center;
     background-color: transparent;
+    cursor: pointer;
 
     &:hover {
       background-color: @view-menu-tab-hover-background-color;
       color: inherit;
-      cursor: pointer;
     }
 
     &.disabled {
@@ -158,6 +158,7 @@
       & > .view-button {
         padding-left: @view-tab-margin;
         width: @view-tab-selected-width;
+        cursor: default;
       }
 
       .selected-button-invisible& > .view-menu {

package/src/filechooser/FileChooser.less

@@ -51,7 +51,7 @@
   text-align: center;
   word-wrap: break-word;
   #scout.font-text-large(@font-weight-bold);
-  color: @active-color;
+  color: @info-color;
 }
 
 .file-chooser-label {

package/src/form/Form.less

@@ -125,6 +125,7 @@
     #scout.overflow-ellipsis-nowrap();
     font-size: @font-size-large;
     color: @title-color;
+    margin-top: @text-margin-top;
   }
 
   & > .sub-title {

package/src/form/fields/LookupBox.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2014-2017 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
@@ -19,6 +19,7 @@ export default class LookupBox extends ValueField {
     this.gridDataHints.weightY = 1.0;
     this.gridDataHints.h = 2;
     this.value = [];
+    this.clearable = ValueField.Clearable.NEVER;
 
     this.lookupCall = null;
     this._pendingLookup = null;

package/src/form/fields/breadcrumbbarfield/BreadcrumbBarField.less

@@ -0,0 +1,14 @@
+/*
+ * 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
+ * http://www.eclipse.org/legal/epl-v10.html
+ *
+ * Contributors:
+ *     BSI Business Systems Integration AG - initial API and implementation
+ */
+.breadcrumb-bar-field > .field {
+  padding-top: @borderless-field-padding-y;
+  padding-bottom: @borderless-field-padding-y + 1px; // BreadCrumbItem uses 14px instead of 13px font size
+}

package/src/form/fields/groupbox/GroupBox.js

@@ -162,12 +162,12 @@ export default class GroupBox extends CompositeField {
       render: () => true,
       offset: 0,
       hAlign: HAlign.RIGHT,
-      $drawingArea: function($drawingArea, event) {
-        if (this.labelVisible) {
+      $drawingArea: ($drawingArea, event) => {
+        if (this.$header && this.$header.isVisible()) {
           return this.$header;
         }
         return this.$body;
-      }.bind(this)
+      }
     };
 
     keyStrokes
@@ -360,14 +360,11 @@ export default class GroupBox extends CompositeField {
     this.$container.toggleClass('has-scroll-shadow-bottom', hasScrollShadowBottom);
     if ((headerVisible || hasMenubarTop) && oldHasScrollShadowTop !== hasScrollShadowTop
       || hasMenubarBottom && oldHasScrollShadowBottom !== hasScrollShadowBottom) {
-      this.invalidateLayout();
+      this.invalidateLayoutTree(false);
     }
 
     // Enlarge header line if there is a shadow, but don't do it if there is a menubar on top
     fields.adjustStatusPositionForScrollShadow(this, () => hasScrollShadowTop && headerVisible && !hasMenubarTop);
-
-    // Prevent flickering of status icon
-    this.validateLayout();
   }
 
   setMainBox(mainBox) {
@@ -782,9 +779,16 @@ export default class GroupBox extends CompositeField {
   }
 
   _onControlClick(event) {
-    if (this.expandable) {
-      this.setExpanded(!this.expanded);
+    if (!this.expandable) {
+      return;
     }
+    const target = scout.widget(event.target);
+    if (this.menuBarPosition === GroupBox.MenuBarPosition.TITLE && this.menuBar.has(target)) {
+      // If the position of the menubar is set to title and a menu has been clicked, then the event must not be handled
+      return;
+    }
+
+    this.setExpanded(!this.expanded);
     $.suppressEvent(event); // otherwise, the event would be triggered twice sometimes (by group-box-control and group-box-title)
   }
 

package/src/form/fields/groupbox/GroupBox.less

@@ -120,6 +120,7 @@
     vertical-align: middle;
     padding: @group-box-title-padding-top 0 @group-box-title-padding-bottom 0;
     max-width: 100%;
+    margin-top: @text-margin-top;
 
     .group-box.has-sub-label > & {
       padding-bottom: @group-box-title-with-sub-label-padding-bottom;

package/src/form/fields/htmlfield/HtmlField.less

@@ -19,7 +19,6 @@
 
   & > .field {
     margin-left: @mandatory-indicator-width;
-    overflow: hidden;
 
     &:focus {
       outline: none;

package/src/form/fields/listbox/ListBox.js

@@ -1,5 +1,5 @@
 /*
- * Copyright (c) 2014-2017 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 {arrays, ListBoxLayout, LookupBox, scout, Table, ValueField} from '../../../index';
+import {arrays, ListBoxLayout, LookupBox, scout, Table} from '../../../index';
 
 export default class ListBox extends LookupBox {
 
@@ -17,7 +17,6 @@ export default class ListBox extends LookupBox {
 
     this.table = null;
     this.lookupStatus = null;
-    this.clearable = ValueField.Clearable.NEVER;
 
     this._addWidgetProperties(['table', 'filterBox']);
   }
@@ -32,6 +31,12 @@ export default class ListBox extends LookupBox {
     if (!this.table) {
       this.table = this._createDefaultListBoxTable();
     }
+
+    // align checkableColumn in table with checkboxes of tree fields
+    if (this.table.checkableColumn) { // may be null if a non-default list-box-table with checkable=false is used
+      this.table.checkableColumn.minWidth = 28;
+      this.table.checkableColumn.width = this.table.checkableColumn.minWidth; // do not use setWidth here
+    }
   }
 
   _render() {