@eclipse-scout/core 22.0.1 → 22.0.2

package/src/scrollbar/Scrollbar.less

@@ -133,7 +133,7 @@
   transition: box-shadow 250ms;
   position: absolute;
   pointer-events: none;
-  z-index: 1; // ensure shadow layout over elements having a z-index
+  z-index: 1; // ensure shadow lays over elements having a z-index
 
   #scout.scroll-shadow();
 
@@ -157,6 +157,13 @@
     --scroll-shadow-size: @scroll-shadow-size;
     --scroll-shadow-blur: @scroll-shadow-blur;
     --scroll-shadow-spread: @scroll-shadow-spread;
+
+    // Allow a widget to adjust the size of the shadow container
+    --scroll-shadow-inset-top: 0;
+    --scroll-shadow-inset-right: 0;
+    --scroll-shadow-inset-bottom: 0;
+    --scroll-shadow-inset-left: 0;
+
     @scroll-shadow-blur-spread-color: var(--scroll-shadow-blur) calc(-1 * var(--scroll-shadow-spread)) var(--scroll-shadow-color);
     @scroll-shadow-top: inset 0 var(--scroll-shadow-size) @scroll-shadow-blur-spread-color;
     @scroll-shadow-bottom: inset 0 calc(-1 * var(--scroll-shadow-size)) @scroll-shadow-blur-spread-color;

package/src/scrollbar/scrollbars.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
@@ -8,7 +8,7 @@
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
  */
-import {arrays, Device, graphics, HtmlComponent, objects, scout} from '../index';
+import {arrays, Device, graphics, HtmlComponent, Insets, objects, scout} from '../index';
 import $ from 'jquery';
 
 /**
@@ -159,6 +159,17 @@ export function installScrollShadow($container, session, options) {
   _installMutationObserver(session);
   _installIntersectionObserver();
   intersectionObserver.observe($container[0]);
+
+  // this is required in addition to the intersection observer because the observer events are handled asynchronously later after all the setTimeout calls.
+  // Then the shadow might stay visible too long which has an impact on layout updates.
+  let containerElement = $container[0];
+  let visibleListener = e => {
+    if (e.target === containerElement) {
+      _onScrollableVisibleChange(containerElement, e.type === 'show');
+    }
+  };
+  $container.data('scroll-shadow-visible-listener', visibleListener);
+  $container.on('hide show', visibleListener);
 }
 
 export function uninstallScrollShadow($container, session) {
@@ -177,6 +188,10 @@ export function uninstallScrollShadow($container, session) {
   if (intersectionObserver) {
     intersectionObserver.unobserve($container[0]);
   }
+  let visibleListener = $container.data('scroll-shadow-visible-listener');
+  if (visibleListener) {
+    $container.off('hide show', visibleListener);
+  }
   let $scrollables = _$scrollables[session];
   if (!$scrollables || !$scrollables.some($scrollable => $scrollable.data('scroll-shadow'))) {
     _uninstallMutationObserver();
@@ -237,7 +252,7 @@ export function updateScrollShadow($container) {
   $shadow.toggleClass('bottom', !atBottom && style.indexOf('bottom') > -1);
   $shadow.toggleClass('left', !atLeft && style.indexOf('left') > -1);
   $shadow.toggleClass('right', !atRight && style.indexOf('right') > -1);
-  graphics.setBounds($shadow, graphics.bounds($container, {exact: true}));
+  graphics.setBounds($shadow, graphics.bounds($container, {exact: true}).subtract(insets($shadow)));
   graphics.setMargins($shadow, graphics.margins($container));
   $shadow.css('border-radius', $container.css('border-radius'));
 
@@ -253,6 +268,13 @@ export function updateScrollShadow($container) {
   function atEnd(scrollPos, scrollSize, offsetSize) {
     return scrollPos + 1 >= scrollSize - offsetSize;
   }
+
+  function insets($shadow) {
+    return new Insets($shadow.cssPxValue('--scroll-shadow-inset-top'),
+      $shadow.cssPxValue('--scroll-shadow-inset-right'),
+      $shadow.cssPxValue('--scroll-shadow-inset-bottom'),
+      $shadow.cssPxValue('--scroll-shadow-inset-left'));
+  }
 }
 
 /**
@@ -726,7 +748,7 @@ export function scrollToBottom($scrollable, options) {
 /**
  * @param location object with x and y properties
  * @param $scrollables one or more scrollables to check against
- * @eturns {boolean} true if the location is visible in the current viewport of all the $scrollables, or if $scrollables is null
+ * @returns {boolean} true if the location is visible in the current viewport of all the $scrollables, or if $scrollables is null
  */
 export function isLocationInView(location, $scrollables) {
   if (!$scrollables || $scrollables.length === 0) {

package/src/style/colors-dark.less

@@ -19,13 +19,13 @@
 @palette-gray-3: #BFC2C3;
 @palette-gray-4: #A7ACAD;
 @palette-gray-5: #7E8588;
-@palette-gray-5-1: #445155;
-@palette-gray-6: #344146;
-@palette-gray-6-1: #283438;
-@palette-gray-7: #252e31;
-@palette-gray-8: #1F272B;
-@palette-gray-9: #181C1F;
-@palette-gray-10: #0C1013;
+@palette-gray-5-1: #4B595E;
+@palette-gray-6: #3B494F;
+@palette-gray-6-1: #2E3C41;
+@palette-gray-7: #2C363A;
+@palette-gray-8: #252F34;
+@palette-gray-9: #1F2428;
+@palette-gray-10: #0E1316;
 
 @fade-white-0: fade(@palette-white, 25%);
 @fade-white-1: fade(@palette-white, 18%);
@@ -136,9 +136,11 @@
 @carousel-current-item-color: @palette-gray-1;
 @check-box-border-color: @palette-gray-5;
 @mode-color: @text-color;
-@mode-alternative-background-color: @palette-gray-10;
+@mode-alternative-background-color: fade(@palette-black, 60%);
 @mode-alternative-selected-background-color: @palette-gray-7;
 @mode-alternative-selected-background-disabled-color: @palette-gray-8;
+@mode-alternative-hover-background-color: @palette-gray-9;
+@mode-alternative-active-background-color: @palette-gray-6;
 @closer-action-color: @text-color;
 @closer-color: @palette-gray-3;
 @closer-hover-color: @text-color;
@@ -157,13 +159,15 @@
 @date-picker-separator-color: @palette-gray-4;
 @date-picker-day-preselected-background-color: fade(@palette-white, 8%);
 @dashboard-tile-border-color: @border-color;
-@dashboard-tile-alternative-selected-border-color: @dashboard-tile-selected-border-color;
-@dashboard-tile-default-selected-border-color: @dashboard-tile-selected-border-color;
+@dashboard-tile-default-inverted-selected-border-color: @item-selection-border-color;
+@dashboard-tile-alternative-selected-border-color: @dashboard-tile-default-selected-border-color;
+@dashboard-tile-alternative-inverted-selected-border-color: @item-selection-border-color;
 @desktop-bench-drop-shadow-color: fade(@palette-black, 35%);
 @desktop-header-background-color: @palette-gray-10;
 @desktop-header-border-color: @palette-gray-8;
 @desktop-header-color: @title-color;
 @desktop-logo-background-color: transparent;
+@desktop-tab-border-color: @border-color;
 @desktop-tab-closer-hover-background-color: @hover-background-color;
 @desktop-tab-closer-active-background-color: @active-background-color;
 @desktop-tab-status-color: @save-needer-color;
@@ -186,6 +190,7 @@
 @planner-large-scale-item-line-color: fade(@palette-white, 20%);
 @planner-resource-title-color: @text-color;
 @planner-small-scale-item-line-color: fade(@palette-white, 7%);
+@scroll-shadow-alpha: 0;
 @scrollbar-thumb-main-color: @palette-white;
 @scrollbar-thumb-color: fade(@scrollbar-thumb-main-color, 20%);
 @scrollbar-thumb-hover-color: fade(@scrollbar-thumb-main-color, 30%);
@@ -242,6 +247,8 @@
 @tile-default-inverted-link-hover-color: @link-hover-color;
 @tile-default-inverted-status-hover-background-color: @hover-background-color;
 @tile-default-inverted-status-active-background-color: @active-background-color;
+@tile-default-inverted-error-status-color: @status-error-color;
+@tile-default-inverted-error-status-hover-color: @status-error-hover-color;
 @tile-default-label-color: @text-color-1;
 @tile-default-link-active-color: @link-active-color;
 @tile-table-default-inverted-selection-background-color: @item-selection-background-color;

package/src/style/colors.less

@@ -227,9 +227,12 @@
 @context-menu-item-color: @text-color;
 @context-menu-item-icon-color: @link-color;
 @dashboard-tile-border-color: darken(@palette-gray-3, 5%);
-@dashboard-tile-selected-border-color: @item-selection-border-color;
+@dashboard-tile-default-inverted-background-color: mix(@tile-default-inverted-background-color, @tile-default-inverted-selection-background-color, 65%);
+@dashboard-tile-alternative-inverted-background-color: mix(@tile-alternative-inverted-background-color, @tile-alternative-inverted-selection-background-color, 65%);
+@dashboard-tile-default-selected-border-color: @item-selection-border-color;
+@dashboard-tile-default-inverted-selected-border-color: @dashboard-tile-default-inverted-background-color;
 @dashboard-tile-alternative-selected-border-color: @tile-alternative-inverted-background-color;
-@dashboard-tile-default-selected-border-color: @tile-default-inverted-background-color;
+@dashboard-tile-alternative-inverted-selected-border-color: @dashboard-tile-alternative-inverted-background-color;
 @date-picker-day-hover-background-color: @hover-background-color;
 @date-picker-day-selected-color: @selected-color;
 @date-picker-day-selected-background-color: @selected-background-color;
@@ -266,6 +269,7 @@
 @desktop-header-background-color: @accent-color-3;
 @desktop-header-border-color: @border-color;
 @desktop-tab-background-color: fade(@palette-black, 10%);
+@desktop-tab-border-color: transparent;
 @desktop-tab-flash-background-color: fade(@palette-black, 40%);
 @desktop-tab-closer-hover-background-color: fade(@palette-black, 14%);
 @desktop-tab-closer-active-background-color: fade(@palette-black, 20%);
@@ -298,6 +302,8 @@
 @mode-alternative-selected-background-color: @palette-white;
 @mode-alternative-selected-background-disabled-color: @palette-gray-4;
 @mode-alternative-background-color: rgba(0, 0, 0, 0.08);
+@mode-alternative-hover-background-color: rgba(0, 0, 0, 0.05);
+@mode-alternative-active-background-color: rgba(0, 0, 0, 0.1);
 @navigate-up-button-border-color: @button-border-color;
 @navigate-up-button-color: @button-color;
 @desktop-navigation-background-color: @desktop-header-background-color;
@@ -480,6 +486,8 @@
 @tile-default-inverted-link-active-color: fade(@tile-default-inverted-color, 75%);
 @tile-default-inverted-status-hover-background-color: fade(@palette-black, 15%);
 @tile-default-inverted-status-active-background-color: fade(@palette-black, 20%);
+@tile-default-inverted-error-status-color: @palette-red-3;
+@tile-default-inverted-error-status-hover-color: @tile-default-inverted-error-status-color;
 @tile-placeholder-background-color: @palette-gray-3;
 @tile-scrollbar-thumb-inverted-main-color: @palette-gray-4;
 @tile-scrollbar-thumb-inverted-color: fade(@tile-scrollbar-thumb-inverted-main-color, 30%);
@@ -515,7 +523,7 @@
 @top-label-disabled-color: @label-disabled-color;
 @tree-node-active-background-color: @item-active-background-color;
 @tree-node-control-color: inherit;
-@view-tab-selected-color: @active-color;
+@view-tab-selected-color: @outline-title-color;
 @view-tab-selected-background-color: @desktop-navigation-body-background-color;
 @view-tab-in-background-selected-background-color: @desktop-navigation-body-in-background-background-color;
 @view-tab-hover-background-color: fade(@palette-black, 20%);

package/src/style/fonts.less

@@ -38,6 +38,11 @@ Try these to switch between fonts:
 
 @letter-spacing: 0.2px;
 
+// Arial font is hard to vertically align, especially with icons
+// This variable can be used to fix the alignment for specific widgets that can have an icon
+// or are often placed to the side of widgets with icons
+@text-margin-top: 1px;
+
 @icon-font-weight-light: 300;
 
 @tooltip-font-weight: @font-weight-normal;

package/src/style/mixins.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
@@ -70,26 +70,30 @@
     padding-bottom: 0;
   }
 
-  .inverted-bottom-round-edge(@border-radius: 12px, @width: 24px, @color: #ffffff) {
+  .inverted-bottom-round-edge(@border-radius: 12px, @color: #ffffff) {
+    @border-width: 5px;
+
     --color: @color; // Allows to change color only
     position: absolute;
     pointer-events: none;
     background-color: transparent;
-    bottom: 0;
-    height: 2 * @width;
-    width: @width;
-    box-shadow: 0 @width 0 0 var(--color);
-    // Cut the leftover on the bottom to only get the edge. Use 110%/-10% because with 100%/0% there are drawing issues, at least with Chrome (a very thin line won't be colored)
-    clip-path: polygon(-10% 0, 110% 0, 110% 100%, -10% 100%);
+    bottom: -@border-width;
+    height: @border-radius;
+    width: @border-radius;
+    box-sizing: content-box;
+    border: @border-width solid var(--color);
+    border-top: none;
 
     &.left {
-      left: -@width;
-      border-bottom-right-radius: @border-radius;
+      left: -@border-radius;
+      border-bottom-right-radius: @border-radius+@border-width;
+      border-left: none;
     }
 
     &.right {
-      right: -@width;
-      border-bottom-left-radius: @border-radius;
+      right: -@border-radius;
+      border-bottom-left-radius: @border-radius+@border-width;
+      border-right: none;
     }
   }
 

package/src/style/sizes-dark.less

@@ -8,5 +8,8 @@
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
  */
+@desktop-tab-border-width: 1px;
 @popup-border-width: 1px;
-@tooltip-border-width: 1px;
+@tooltip-border-width: 1px;
+@scroll-shadow-size-large: 14px;
+@scroll-shadow-size: @scroll-shadow-size-large;

package/src/style/sizes.less

@@ -55,7 +55,7 @@
 @focus-box-shadow-size: 3px;
 @text-field-padding-x: 10px;
 @text-field-padding-y: 7px;
-@text-field-padding-top-compensation: 1px;
+@text-field-padding-top-compensation: 1px + @text-margin-top;
 @text-field-alternative-padding-left: 0;
 @text-field-alternative-padding-right: 0;
 @text-field-icon-size: 24px;
@@ -162,6 +162,7 @@
 @desktop-navigation-width: 290px;
 @desktop-notification-no-icon-padding-y: 16px;
 @desktop-tab-border-radius: @view-tab-border-radius;
+@desktop-tab-border-width: 0;
 @desktop-tab-key-box-bottom: @view-tab-key-box-bottom;
 @desktop-tab-margin-top: @view-tab-margin-top;
 @desktop-tab-margin-right: 3px;
@@ -223,17 +224,15 @@
 @mobile-popup-title-margin-top: 10px;
 @mode-padding-x: 12px;
 @mode-padding-y: 6px;
-@mode-padding-dense: @mode-padding-dense-y @mode-padding-dense-x;
 @mode-padding-dense-x: 5px;
 @mode-padding-dense-y: 3px;
 @mode-border-width: 1px;
-@mode-alternative-border-width: 3px;
+@mode-selector-alternative-border-width: 3px;
 @notification-no-icon-padding-y: 13px;
 @outline-breadcrumb-node-padding-x: @outline-title-padding-left;
 @outline-breadcrumb-node-padding-y: 12px;
 @outline-data-padding-top: 16px;
 @outline-font-size: @font-size-normal;
-@outline-node-control-size: 18px;
 @outline-node-control-padding-left: @outline-title-padding-left;
 @outline-node-control-padding-y: @outline-node-padding-y;
 @outline-node-control-line-height: @tree-node-control-line-height;

package/src/table/Table.js

@@ -23,6 +23,7 @@ export default class Table extends Widget {
     this.contextColumn = null;
     this.checkable = false;
     this.checkableStyle = Table.CheckableStyle.CHECKBOX;
+    this.cellEditorPopup = null;
     this.compact = false;
     this.compactHandler = scout.create('TableCompactHandler', {table: this});
     this.compactColumn = null;
@@ -100,6 +101,7 @@ export default class Table extends Widget {
     this._popupOpenHandler = this._onDesktopPopupOpen.bind(this);
     this._rerenderViewPortAfterAttach = false;
     this._renderViewPortAfterAttach = false;
+    this._postAttachActions = [];
     this._desktopPropertyChangeHandler = this._onDesktopPropertyChange.bind(this);
     this._addWidgetProperties(['tableControls', 'menus', 'keyStrokes', 'staticMenus', 'tileTableHeader', 'tableTileGridMediator']);
 
@@ -475,7 +477,6 @@ export default class Table extends Widget {
   }
 
   _removeData() {
-    this._destroyCellEditorPopup();
     this._removeAggregateRows();
     this._uninstallImageListeners();
     this._uninstallCellTooltipSupport();
@@ -633,11 +634,11 @@ export default class Table extends Widget {
       // Don't start cell editor or trigger click if row control was clicked (expansion itself is handled by the mouse down handler)
       return;
     }
+    let row = $row.data('row'); // read row before the $row potentially could be replaced by the column specific logic on mouse up
     if (mouseButton === 1) {
       column.onMouseUp(event, $row);
       $appLink = this._find$AppLink(event);
     }
-    let row = $row.data('row');
     if ($appLink) {
       this._triggerAppLinkAction(column, row, $appLink.data('ref'), $appLink);
     } else {
@@ -2068,8 +2069,24 @@ export default class Table extends Widget {
   }
 
   /**
-   * This functions starts the cell editor for the given row and column. Prepare must wait until
-   * a pending completeCellEdit operation is resolved.
+   * Starts cell editing for the cell at the given column and row, but only if editing is allowed.
+   * @see prepareCellEdit
+   */
+  focusCell(column, row) {
+    let cell = this.cell(column, row);
+    if (this.enabledComputed && row.enabled && cell.editable) {
+      this.prepareCellEdit(column, row);
+    }
+  }
+
+  /**
+   * Creates a cell editor for the cell at the given column and row, ensures the row is selected and passes the editor
+   * to {@link #startCellEdit} which starts the editing by rendering the editor in a {@link CellEditorPopup}.<br>
+   * If the completion of a previous cell edit is still in progress, the preparation is delayed until the completion is finished.
+   *
+   * @param {boolean} [openFieldPopupOnCellEdit] true to instruct the editor to open its control popup when the editor is rendered.
+   *    This only has an effect if the editor has a popup (e.g. SmartField or DateField).
+   * @returns Promise the promise will be resolved when the preparation has been finished.
    */
   prepareCellEdit(column, row, openFieldPopupOnCellEdit) {
     let promise = $.resolvedPromise();
@@ -2080,10 +2097,10 @@ export default class Table extends Widget {
   }
 
   /**
-   * @param openFieldPopupOnCellEdit when this parameter is set to true, the CellEditorPopup sets an
+   * @param {boolean} [openFieldPopupOnCellEdit] when this parameter is set to true, the CellEditorPopup sets an
    *    additional property 'cellEditor' on the editor-field. The field instance may use this property
    *    to decide whether or not it should open a popup immediately after it is rendered. This is used
-   *    for Smart- and DateFields.
+   *    for Smart- and DateFields. Default is false.
    */
   prepareCellEditInternal(column, row, openFieldPopupOnCellEdit) {
     let event = new Event({
@@ -3043,10 +3060,18 @@ export default class Table extends Widget {
   }
 
   startCellEdit(column, row, field) {
-    if (!this._isDataRendered() || !this.isAttachedAndRendered()) {
+    if (field.destroyed) {
+      // May happen if the action was postponed and the field destroyed in the meantime using endCellEdit.
+      return;
+    }
+    if (!this._isDataRendered()) {
       this._postRenderActions.push(this.startCellEdit.bind(this, column, row, field));
       return;
     }
+    if (!this.$container.isAttached()) {
+      this._postAttachActions.push(this.startCellEdit.bind(this, column, row, field));
+      return;
+    }
 
     this.trigger('startCellEdit', {
       column: column,
@@ -3066,11 +3091,6 @@ export default class Table extends Widget {
    *    value is updated by an updateRow event instead.
    */
   endCellEdit(field, saveEditorValue) {
-    if (!this._isDataRendered() || !this.isAttachedAndRendered()) {
-      this._postRenderActions.push(this.endCellEdit.bind(this, field, saveEditorValue));
-      return;
-    }
-
     if (!this.cellEditorPopup) {
       // the cellEditorPopup could already be removed by scrolling (out of view range) or be removed by update rows
       field.destroy();
@@ -4656,7 +4676,9 @@ export default class Table extends Widget {
     this.$container.toggleClass('checkable', scout.isOneOf(this.checkableStyle, Table.CheckableStyle.TABLE_ROW, Table.CheckableStyle.CHECKBOX_TABLE_ROW));
     this.$container.toggleClass('table-row-check', this.checkableStyle === Table.CheckableStyle.TABLE_ROW);
     if (this._isDataRendered()) {
+      this._updateRowWidth();
       this._redraw();
+      this.invalidateLayoutTree();
     }
   }
 
@@ -5302,18 +5324,6 @@ export default class Table extends Widget {
     }
   }
 
-  focusCell(column, row) {
-    if (!this._isDataRendered() || !this.isAttachedAndRendered()) {
-      this._postRenderActions.push(this.focusCell.bind(this, column, row));
-      return;
-    }
-
-    let cell = this.cell(column, row);
-    if (this.enabledComputed && row.enabled && cell.editable) {
-      this.prepareCellEdit(column, row, false);
-    }
-  }
-
   _attach() {
     this.$parent.append(this.$container);
     super._attach();
@@ -5337,6 +5347,9 @@ export default class Table extends Widget {
     super._renderOnAttach();
     this._rerenderViewportAfterAttach();
     this._renderViewportAfterAttach();
+    let actions = this._postAttachActions;
+    this._postAttachActions = [];
+    actions.forEach(action => action());
   }
 
   _rerenderViewportAfterAttach() {
@@ -5365,11 +5378,6 @@ export default class Table extends Widget {
     super._detach();
   }
 
-  _onDetach() {
-    super._onDetach();
-    this._destroyCellEditorPopup();
-  }
-
   /**
    * @param {function} [callback] function to be called right after the popup is destroyed
    */

package/src/table/Table.less

@@ -49,25 +49,48 @@
   /* Used for scout.Table.CheckableStyle.TABLE_ROW */
 
   &.table-row-check {
+    & > .table-data {
+      & > .table-row {
+        &.selected {
+          /* Don't draw selection */
+          background-color: transparent;
 
-    & > .table-data > .table-row {
+          &::after {
+            display: none;
+          }
+        }
 
-      &.selected {
-        /* Don't draw selection */
+        &:hover {
+          background-color: @hover-background-color;
+        }
+      }
+
+      & > .table-row.disabled,
+      &.disabled > .table-row {
         background-color: transparent;
+      }
 
-        &::after {
-          display: none;
+      & > .table-row {
+        &.checked,
+        &.checked.selected {
+          /* Mark checked rows with a background color */
+          background-color: @table-row-checked-background-color;
+
+          & > .table-cell {
+            color: @table-row-checked-color;
+          }
+
+          &:hover {
+            background-color: @selected-hover-background-color;
+          }
         }
       }
 
-      &.checked,
-      &.checked.selected {
-        /* Mark checked rows with a background color */
-        background-color: @table-row-checked-background-color;
-
-        & > .table-cell {
-          color: @table-row-checked-color;
+      & > .table-row.disabled,
+      &.disabled > .table-row {
+        &.checked,
+        &.checked.selected {
+          background-color: @selected-disabled-background-color;
         }
       }
     }
@@ -622,4 +645,4 @@
 
 .organize-columns-behind-scrollbar-column.table-cell.last {
   padding: 0;
-}
+}

package/src/table/TableHeader.js

@@ -8,7 +8,7 @@
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
  */
-import {arrays, Column, ColumnUserFilter, Device, graphics, GroupBoxMenuItemsOrder, inspector, MenuBar, MenuDestinations, scout, scrollbars, strings, styles, Table, tooltips, Widget} from '../index';
+import {arrays, Column, ColumnUserFilter, Device, graphics, GroupBoxMenuItemsOrder, inspector, MenuBar, MenuDestinations, objects, scout, scrollbars, strings, styles, Table, tooltips, Widget} from '../index';
 import $ from 'jquery';
 
 export default class TableHeader extends Widget {
@@ -459,21 +459,23 @@ export default class TableHeader extends Widget {
     let filtered = this.table.getFilter(column.id);
     if (column.sortActive || column.grouped || filtered) {
       if (column.minWidth < Column.DEFAULT_MIN_WIDTH) {
-        column.prefMinWidth = column.minWidth;
+        column.__minWidthWithoutState = column.minWidth;
+        column.__widthWithoutState = column.width;
         column.minWidth = Column.DEFAULT_MIN_WIDTH;
       }
       if (column.width < column.minWidth) {
         this.table.resizeColumn(column, column.minWidth);
       }
     } else {
-      // Reset to preferred min width if no state is visible
-      if (column.prefMinWidth !== null) {
-        column.minWidth = column.prefMinWidth;
-        column.prefMinWidth = null;
-        // Resize to old min width, assuming user has not manually changed the size because column is still as width as default_min_width
+      // Reset to previous min width if no state is visible
+      if (!objects.isNullOrUndefined(column.__minWidthWithoutState)) {
+        column.minWidth = column.__minWidthWithoutState;
+        // Resize to previous min width, assuming user has not manually changed the size because column is still as width as default_min_width
         if (column.width === Column.DEFAULT_MIN_WIDTH) {
-          this.table.resizeColumn(column, column.minWidth);
+          this.table.resizeColumn(column, column.__widthWithoutState);
         }
+        column.__minWidthWithoutState = null;
+        column.__widthWithoutState = null;
       }
     }
   }

package/src/table/TableHeader.less

@@ -180,6 +180,7 @@
 
 .table-header-item-text {
   #scout.overflow-ellipsis-nowrap();
+  margin-top: @text-margin-top;
 }
 
 .table-header-item-state {

package/src/table/TableHeaderMenu.js

@@ -241,7 +241,9 @@ export default class TableHeaderMenu extends Popup {
     if (this.filterTable) {
       this.filterTable.off('rowsChecked', this._filterTableRowsCheckedHandler);
     }
-    this.tableHeader.$container.off('scroll', this._tableHeaderScrollHandler);
+    if (this.tableHeader.rendered) {
+      this.tableHeader.$container.off('scroll', this._tableHeaderScrollHandler);
+    }
     this.$headerItem.select(false);
     this.table.off('columnMoved', this._onColumnMovedHandler);
     this.table.off('filterAdded', this._tableFilterHandler);

package/src/table/TableHeaderMenu.less

@@ -33,6 +33,11 @@
   display: inline-block;
   vertical-align: top;
   padding: @table-header-menu-padding;
+
+  & > .table-header-menu-group > .table-header-menu-group-text {
+    // Increase size a little to ensure every text is fully visible, at least for german and english (currently necessary for additional sorting group)
+    width: calc(100% + 12px);
+  }
 }
 
 .table-header-menu-filters {
@@ -252,11 +257,11 @@
 
   & > .table-data {
     margin-top: 0;
-    padding: 3px 4px;
+    padding: 3px;
 
     & > .table-row {
       border-radius: @border-radius;
-      margin-bottom: 1px;
+      margin-bottom: 2px;
 
       &.last {
         margin-bottom: 0;

package/src/table/columns/BooleanColumn.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
@@ -21,7 +21,7 @@ export default class BooleanColumn extends Column {
     this.comparator = comparators.NUMERIC;
     this.filterType = 'ColumnUserFilter';
     this.horizontalAlignment = 0;
-    this.minWidth = Column.NARROW_MIN_WIDTH;
+    this.minWidth = Column.SMALL_MIN_WIDTH;
     this.triStateEnabled = false;
     this.textBased = false;
   }