@eclipse-scout/core 22.0.0-beta.1 → 22.0.0

package/src/menu/ComboMenu.less

@@ -18,25 +18,32 @@
     background-color: transparent;
   }
 
-  & > .menu-item:not(:first-child) {
-    margin-left: 3px;
-
-    &::before {
-      content: '';
-      position: absolute;
-      left: -1px;
-      top: 7px;
-      height: calc(100% - 14px);
-      width: 1px;
-      background-color: @border-color;
+  & > .menu-item {
+    &:not(.first) {
+      margin-left: 3px;
+
+      &::before {
+        content: '';
+        position: absolute;
+        left: -1px;
+        top: 7px;
+        height: calc(100% - 14px);
+        width: 1px;
+        background-color: @border-color;
+      }
     }
-  }
 
-  &:not(.disabled).child-selected,
-  &:not(.disabled):hover {
-    & > .menu-item:not(:first-child)::before {
+    &:focus::before {
       display: none;
     }
+
+    &:not(.disabled):hover,
+    &.selected {
+      &::before,
+      & ~ .menu-item::before {
+        display: none;
+      }
+    }
   }
 }
 
@@ -45,14 +52,19 @@
 
   & > .menu-item {
     border: 1px solid @button-border-color;
+    flex-grow: 1;
 
-    &:not(:last-child) {
+    &.menu-icononly:not(.first.last) { // Rule must not be applied if combo menu contains only one item
+      flex-grow: 0;
+    }
+
+    &:not(.last) {
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
       border-right: 0;
     }
 
-    &:not(:first-child) {
+    &:not(.first) {
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
       border-left: 0;
@@ -62,31 +74,64 @@
     .disabled& {
       border-color: @button-disabled-color;
     }
+
+    &:focus {
+      z-index: 1; // Allows box-shadow to draw over the right menu-item
+    }
   }
 
   &.default {
     & > .menu-item {
       .button.default();
 
+      &::before {
+        background-color: @default-combo-menu-separator-color;
+      }
+
       &.selected {
         background-color: @default-button-selected-background-color;
         border-color: @default-button-selected-background-color;
       }
+
+      &.disabled {
+        color: @disabled-inverted-color;
+
+        &:hover, &.active, &:active, &.selected {
+          background-color: @default-button-background-color;
+          border-color: @default-button-background-color;
+        }
+      }
     }
   }
 }
 
-.context-menu {
-  & > .combo-menu {
-    padding: 0;
+.context-menu > .combo-menu {
+  padding: 0;
 
-    & > .menu-item {
-      color: @context-menu-item-color;
-      padding-top: @context-menu-item-padding-y;
-      padding-bottom: @context-menu-item-padding-y;
+  & > .menu-item {
+    color: @context-menu-item-color;
+    padding: @context-menu-item-padding-y @context-menu-item-padding-right @context-menu-item-padding-y @context-menu-item-padding-left;
+    flex-grow: 1;
+    justify-content: start;
+    border-radius: 0;
+
+    & > .font-icon {
+      color: @context-menu-item-icon-color;
+    }
+
+    &.menu-textandicon > .icon {
+      margin-right: @context-menu-item-icon-margin-right;
+    }
+
+    &.menu-icononly:not(.first.last) { // Rule must not be applied if combo menu contains only one item
+      flex-grow: 0;
+    }
+
+    &.disabled {
+      color: @menu-item-disabled-color;
 
-      &:first-child {
-        margin-left: @context-menu-item-padding-left - @menu-item-padding-x;
+      & > .font-icon {
+        color: @menu-item-disabled-color;
       }
     }
   }

package/src/menu/ContextMenuPopup.js

@@ -367,8 +367,9 @@ export default class ContextMenuPopup extends Popup {
 
       // prevent loosing original parent
       let originalParent = menu.parent;
-      if (this.cloneMenuItems && !menu.cloneOf) {
-        // clone will recursively also clone all child actions.
+      // Clone menu items but only clone once unless it is for a different context menu (e.g. a context menu of a combo menu inside a context menu)
+      // Clone will recursively also clone all child actions.
+      if (this.cloneMenuItems && !menu.cloneOf || !this.has(menu)) {
         menu = menu.clone({
           parent: this,
           textPosition: Action.TextPosition.DEFAULT

package/src/menu/ContextMenuPopup.less

@@ -47,7 +47,7 @@
     }
 
     &.menu-textandicon > .icon {
-      margin-right: 14px;
+      margin-right: @context-menu-item-icon-margin-right;
     }
 
     &.selected {

package/src/menu/EllipsisMenu.js

@@ -57,4 +57,8 @@ export default class EllipsisMenu extends Menu {
   isTabTarget() {
     return super.isTabTarget() && !this.hidden;
   }
+
+  _childrenForEnabledComputed() {
+    return this.childActions;
+  }
 }

package/src/menu/Menu.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
@@ -343,7 +343,8 @@ export default class Menu extends Action {
   }
 
   isTabTarget() {
-    return this.enabledComputed && this.visible && !this.overflown && (this.isButton() || !this.separator);
+    return this.enabledComputed && this.visible && !this.overflown && (this.isButton() || !this.separator)
+      && (!this.parentMenu || this.parentMenu.visible && !this.parentMenu.overflown); // Necessary for ComboMenu -> must return false if ComboMenu (parentMenu) is not shown
   }
 
   /**
@@ -591,9 +592,9 @@ export default class Menu extends Action {
    * @override Widget.js
    */
   _setInheritAccessibility(inheritAccessibility) {
-    this._setProperty('inheritAccessibility', inheritAccessibility);
-    if (this.initialized) {
-      this._findRootMenu().recomputeEnabled();
+    let changed = this._setProperty('inheritAccessibility', inheritAccessibility);
+    if (changed) {
+      this._recomputeEnabledInMenuHierarchy();
     }
   }
 
@@ -601,16 +602,28 @@ export default class Menu extends Action {
    * @override Widget.js
    */
   _setEnabled(enabled) {
-    this._setProperty('enabled', enabled);
-    if (this.initialized) {
-      this._findRootMenu().recomputeEnabled();
+    let changed = this._setProperty('enabled', enabled);
+    if (changed) {
+      this._recomputeEnabledInMenuHierarchy();
     }
   }
 
   _setVisible(visible) {
-    this._setProperty('visible', visible);
-    if (this.initialized) {
-      this._findRootMenu().recomputeEnabled();
+    let changed = this._setProperty('visible', visible);
+    if (changed) {
+      this._recomputeEnabledInMenuHierarchy();
+    }
+  }
+
+  _recomputeEnabledInMenuHierarchy() {
+    if (!this.initialized) {
+      return;
+    }
+    let rootMenu = this._findRootMenu();
+    rootMenu.recomputeEnabled();
+    if (rootMenu !== this) {
+      // necessary in case this menu or a parent menu has inheritAccessibility=false. Because then this menu and its children are skipped in the line above!
+      this.recomputeEnabled();
     }
   }
 

package/src/menu/menubar/MenuBar.js

@@ -8,22 +8,7 @@
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
  */
-import {
-  arrays,
-  GroupBoxMenuItemsOrder,
-  HtmlComponent,
-  keys,
-  KeyStrokeContext,
-  Menu,
-  MenuBarLayout,
-  MenuBarLeftKeyStroke,
-  MenuBarRightKeyStroke,
-  MenuDestinations,
-  menus,
-  scout,
-  Widget,
-  widgets
-} from '../../index';
+import {arrays, GroupBoxMenuItemsOrder, HtmlComponent, keys, KeyStrokeContext, Menu, MenuBarLayout, MenuBarLeftKeyStroke, MenuBarRightKeyStroke, MenuDestinations, menus, scout, Widget, widgets} from '../../index';
 import ComboMenu from '../ComboMenu';
 
 export default class MenuBar extends Widget {
@@ -302,9 +287,7 @@ export default class MenuBar extends Widget {
       if (this.defaultMenu && this.defaultMenu.isTabTarget()) {
         this.setTabbableMenu(this.defaultMenu);
       } else {
-        this.setTabbableMenu(arrays.find(this.orderedMenuItems.all, item => {
-          return item.isTabTarget();
-        }));
+        this.setTabbableMenu(arrays.find(this.orderedMenuItems.all, item => item.isTabTarget()));
       }
     }
   }

package/src/menu/menubar/MenuBarBox.js

@@ -17,12 +17,6 @@ export default class MenuBarBox extends Widget {
     this.menuItems = [];
     this.tooltipPosition = MenuBar.Position.TOP;
     this._addWidgetProperties('menuItems');
-    this._menuItemPropertyChangeHandler = this._onMenuItemPropertyChange.bind(this);
-  }
-
-  _destroy() {
-    super._destroy();
-    this._removeMenuHandlers();
   }
 
   _render() {
@@ -53,21 +47,12 @@ export default class MenuBarBox extends Widget {
   }
 
   _setMenuItems(menuItems) {
-    // remove property listeners of old menu items.
-    this._removeMenuHandlers();
-
     this._setProperty('menuItems', menuItems);
-    // add property listener of new menus
-    this._addMenuHandlers();
     this._updateTooltipPosition();
   }
 
   _removeMenuItems() {
-    this._removeMenuHandlers();
-    this.menuItems.forEach(item => {
-      item.overflow = false;
-      item.remove();
-    });
+    this.menuItems.forEach(item => item.remove());
   }
 
   _renderMenuItems() {
@@ -81,18 +66,6 @@ export default class MenuBarBox extends Widget {
     }
   }
 
-  _addMenuHandlers() {
-    this.menuItems.forEach(function(item) {
-      item.off('propertyChange', this._menuItemPropertyChangeHandler);
-    }, this);
-  }
-
-  _removeMenuHandlers() {
-    this.menuItems.forEach(function(item) {
-      item.off('propertyChange', this._menuItemPropertyChangeHandler);
-    }, this);
-  }
-
   _renderVisible() {
     super._renderVisible();
     this.revalidateLayout();
@@ -100,9 +73,7 @@ export default class MenuBarBox extends Widget {
 
   _onMenuItemPropertyChange(event) {
     if (event.propertyName === 'visible') {
-      this.setVisible(this.menuItems.some(m => {
-        return m.visible && !m.ellipsis;
-      }));
+      this.setVisible(this.menuItems.some(m => m.visible && !m.ellipsis));
     }
   }
 
@@ -116,8 +87,6 @@ export default class MenuBarBox extends Widget {
   }
 
   _updateTooltipPosition() {
-    this.menuItems.forEach(function(item) {
-      item.setTooltipPosition(this.tooltipPosition);
-    }, this);
+    this.menuItems.forEach(item => item.setTooltipPosition(this.tooltipPosition));
   }
 }

package/src/menu/menubar/MenuBarLayout.js

@@ -25,10 +25,7 @@ export default class MenuBarLayout extends AbstractLayout {
     let menuItems = this._menuBar.orderedMenuItems.left.concat(this._menuBar.orderedMenuItems.right);
     let visibleMenuItems = this.visibleMenuItems();
     let htmlContainer = HtmlComponent.get($container);
-
-    let ellipsis = arrays.find(menuItems, menuItem => {
-      return menuItem.ellipsis;
-    });
+    let ellipsis = arrays.find(menuItems, menuItem => menuItem.ellipsis);
 
     this._setFirstLastMenuMarker(visibleMenuItems); // is required to determine available size correctly
     this.preferredLayoutSize($container, {
@@ -40,31 +37,21 @@ export default class MenuBarLayout extends AbstractLayout {
     if (ellipsis && this._overflowMenuItems.length > 0) {
       ellipsis.setHidden(false);
     }
-    visibleMenuItems.forEach(menuItem => {
-      menuItem._setOverflown(false);
-    }, this);
-
-    this._overflowMenuItems.forEach(menuItem => {
-      menuItem._setOverflown(true);
-    });
+    visibleMenuItems.forEach(menuItem => menuItem._setOverflown(false));
+    this._overflowMenuItems.forEach(menuItem => menuItem._setOverflown(true));
     if (ellipsis && this._overflowMenuItems.length === 0) {
       ellipsis.setHidden(true);
     }
     // remove all separators
-    this._overflowMenuItems = this._overflowMenuItems.filter(menuItem => {
-      return !menuItem.separator;
-    });
+    this._overflowMenuItems = this._overflowMenuItems.filter(menuItem => !menuItem.separator);
 
-    // set childActions to empty array to prevent the menuItems from calling remove.
     if (ellipsis) {
       ellipsis._closePopup();
       ellipsis.setChildActions(this._overflowMenuItems);
     }
 
     // trigger menu items layout
-    visibleMenuItems.forEach(menuItem => {
-      menuItem.validateLayout();
-    });
+    visibleMenuItems.forEach(menuItem => menuItem.validateLayout());
 
     visibleMenuItems.forEach(menuItem => {
       // Make sure open popups are at the correct position after layouting
@@ -123,7 +110,7 @@ export default class MenuBarLayout extends AbstractLayout {
   /**
    * Moves menu items into _overflowMenuItems until prefSize.width is smaller than prefWidth.
    * The moved menu items will be removed from the given visibleMenuItems parameter.
-   * @returns {number} the calculated preferred size
+   * @returns {Dimension} the calculated preferred size
    */
   _prefSizeWithOverflow(visibleMenuItems, prefWidth) {
     let overflowableIndexes = [];

package/src/menu/menubox/MenuBoxLayout.js

@@ -204,7 +204,7 @@ export default class MenuBoxLayout extends AbstractLayout {
   _createAndRenderEllipsis($container) {
     let ellipsis = menuUtil.createEllipsisMenu({
       parent: this.menuBox,
-      horizontalAlignment: 1,
+      hidden: false,
       compact: this.menuBox.compact
     });
     ellipsis.uiCssClass = this.menuBox.uiMenuCssClass;

package/src/menu/menus.js

@@ -8,8 +8,7 @@
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
  */
-import {arrays, icons, MenuDestinations, scout} from '../index';
-import $ from 'jquery';
+import {arrays, MenuDestinations, scout} from '../index';
 
 export function filterAccordingToSelection(prefix, selectionLength, menus, destination, onlyVisible, enableDisableKeyStroke, notAllowedTypes) {
   let allowedTypes = [];
@@ -163,17 +162,12 @@ export function _checkType(menu, types) {
 }
 
 export function createEllipsisMenu(options) {
-  let defaults = {
-    iconId: icons.ELLIPSIS_V,
-    tabbable: false
-  };
-  options = $.extend({}, defaults, options);
-  return scout.create('Menu', options);
+  return scout.create('EllipsisMenu', options);
 }
 
 export function moveMenuIntoEllipsis(menu, ellipsis) {
   menu.remove();
-  menu.overflow = true;
+  menu._setOverflown(true);
   menu.overflowMenu = ellipsis;
 
   let menusInEllipsis = ellipsis.childActions.slice();
@@ -182,7 +176,7 @@ export function moveMenuIntoEllipsis(menu, ellipsis) {
 }
 
 export function removeMenuFromEllipsis(menu, $parent) {
-  menu.overflow = false;
+  menu._setOverflown(false);
   menu.overflowMenu = null;
   if (!menu.rendered) {
     menu.render($parent);

package/src/messagebox/MessageBox.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,26 +8,7 @@
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
  */
-import {
-  AbortKeyStroke,
-  BoxButtons,
-  ClickActiveElementKeyStroke,
-  clipboard,
-  CopyKeyStroke,
-  FocusAdjacentElementKeyStroke,
-  FocusRule,
-  Form,
-  GlassPaneRenderer,
-  HtmlComponent,
-  keys,
-  KeyStrokeContext,
-  MessageBoxLayout,
-  objects,
-  scout,
-  Status,
-  strings,
-  Widget
-} from '../index';
+import {AbortKeyStroke, BoxButtons, ClickActiveElementKeyStroke, clipboard, CopyKeyStroke, FocusAdjacentElementKeyStroke, FocusRule, Form, GlassPaneRenderer, HtmlComponent, keys, KeyStrokeContext, MessageBoxLayout, objects, scout, Status, strings, Widget} from '../index';
 
 export default class MessageBox extends Widget {
 
@@ -51,7 +32,7 @@ export default class MessageBox extends Widget {
     this.noButton = null;
     this.cancelButton = null;
     this.abortButton = null; // button to be executed when abort() is called, e.g. when ESCAPE is pressed. points to the last (most right) button in the list (one of yes, no or cancel)
-
+    this.inheritAccessibility = false; // do not inherit enabled-state by default. Otherwise the MessageBox cannot be closed anymore
     this.$content = null;
     this.$header = null;
     this.$body = null;

package/src/modeselector/ModeSelectorLayout.js

@@ -38,12 +38,17 @@ export default class ModeSelectorLayout extends AbstractLayout {
     });
 
     let maxWidth = 0;
-    this.modeSelector.modes.forEach(mode => {
-      let modeWidth = mode.htmlComp.prefSize().width;
-      if (modeWidth > maxWidth) {
-        maxWidth = modeWidth;
-      }
-    });
+    this.modeSelector.modes
+      .filter(mode => mode.rendered)
+      .forEach(mode => {
+        let oldModeStyle = mode.$container.attr('style');
+        mode.$container.css('flex', 'none');
+        let modeWidth = mode.htmlComp.prefSize().width;
+        if (modeWidth > maxWidth) {
+          maxWidth = modeWidth;
+        }
+        mode.$container.attrOrRemove('style', oldModeStyle);
+      });
 
     this.modeSelector.$container.attrOrRemove('style', oldStyle);
 

package/src/notification/Notification.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
@@ -18,7 +18,6 @@ export default class Notification extends Widget {
     this.status = Status.info();
     this.closable = false;
     this.htmlEnabled = false;
-    this.iconId = null;
     this._icon = null;
   }
 
@@ -28,15 +27,15 @@ export default class Notification extends Widget {
     // this allows to set the properties severity and message directly on the model object
     // without having a status object. because it's more convenient when you must create
     // a notification programmatically.
-    if (model.severity || model.message) {
+    if (model.severity || model.message || model.iconId) {
       this.status = new Status({
         severity: scout.nvl(model.severity, this.status.severity),
-        message: scout.nvl(model.message, this.status.message)
+        message: scout.nvl(model.message, this.status.message),
+        iconId: scout.nvl(model.iconId, this.status.iconId)
       });
     }
     texts.resolveTextProperty(this.status, 'message', this.session);
     this._setStatus(this.status);
-    this._setIconId(this.iconId);
   }
 
   _render() {
@@ -55,7 +54,6 @@ export default class Notification extends Widget {
   _renderProperties() {
     super._renderProperties();
     this._renderStatus();
-    this._renderIconId();
     this._renderClosable();
   }
 
@@ -80,6 +78,7 @@ export default class Notification extends Widget {
   _renderStatus() {
     if (this.status) {
       this.$container.addClass(this.status.cssClass());
+      this._renderIconId();
     }
     this._renderMessage();
   }
@@ -98,15 +97,17 @@ export default class Notification extends Widget {
   }
 
   setIconId(iconId) {
-    this.setProperty('iconId', iconId);
-  }
-
-  _setIconId(iconId) {
-    this._setProperty('iconId', iconId);
+    if (!this.status) {
+      this.status = Status.info();
+    }
+    this.status.iconId = iconId;
+    if (this.rendered) {
+      this._renderStatus();
+    }
   }
 
   _renderIconId() {
-    let hasIcon = !!this.iconId;
+    let hasIcon = this.status && !!this.status.iconId;
     this.$container.toggleClass('has-icon', hasIcon);
     this.$container.toggleClass('no-icon', !hasIcon);
     if (hasIcon) {
@@ -118,13 +119,13 @@ export default class Notification extends Widget {
 
   _renderIcon() {
     if (this._icon) {
-      this._icon.setIconDesc(this.iconId);
+      this._icon.setIconDesc(this.status.iconId);
       return;
     }
 
     this._icon = scout.create('Icon', {
       parent: this,
-      iconDesc: this.iconId,
+      iconDesc: this.status.iconId,
       prepend: true
     });
     this._icon.one('destroy', () => {

package/src/popup/Popup.js

@@ -8,25 +8,7 @@
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
  */
-import {
-  CloseKeyStroke,
-  DialogLayout,
-  Dimension,
-  Event,
-  FocusRule,
-  GlassPaneRenderer,
-  graphics,
-  HtmlComponent,
-  Insets,
-  KeyStrokeContext,
-  Point,
-  PopupLayout,
-  Rectangle,
-  scout,
-  scrollbars,
-  strings,
-  Widget
-} from '../index';
+import {CloseKeyStroke, DialogLayout, Dimension, Event, FocusRule, GlassPaneRenderer, graphics, HtmlComponent, Insets, KeyStrokeContext, Point, PopupLayout, Rectangle, scout, scrollbars, strings, Widget} from '../index';
 import $ from 'jquery';
 
 export default class Popup extends Widget {
@@ -547,7 +529,8 @@ export default class Popup extends Widget {
     // processing the mousedown event, it's too late to detach the event and we must
     // deal with that situation by checking the rendered flag. Otherwise we would
     // run into an error later, since the $container is not available anymore.
-    if (!this.rendered) {
+    // Use the internal flag because popup should be closed even if the parent removal is pending due to a remove animation
+    if (!this._rendered) {
       return;
     }
     if (this._isMouseDownOutside(event)) {

package/src/session/BusyIndicator.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
@@ -20,6 +20,7 @@ export default class BusyIndicator extends Widget {
     this.details = null;
     this.cancelButton = null;
     this.boxButtons = null;
+    this.inheritAccessibility = false; // do not inherit enabled-state. BusyIndicator must always be enabled even if parent is disabled
 
     this.$content = null;
     this.$buttons = null;