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

package/src/widget/FilterSupport.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
@@ -10,11 +10,12 @@
  */
 .filter-field {
   position: absolute;
+  --filter-field-height: @filter-field-height;
   --filter-field-bottom: @filter-field-bottom;
-  --filter-field-max-bottom: calc(~'50% - ' @filter-field-height / 2);
+  --filter-field-max-bottom: calc(~'50% - ' var(--filter-field-height) / 2);
   bottom: min(var(--filter-field-bottom), var(--filter-field-max-bottom));
   right: @filter-field-right;
-  height: @filter-field-height;
+  height: var(--filter-field-height);
   width: @filter-field-width;
   min-width: @filter-field-min-width;
   max-width: @filter-field-max-width;
@@ -25,6 +26,13 @@
   #scout.drop-shadow();
   background-color: var(--filter-field-background-color);
   opacity: 1;
+  visibility: visible;
+
+  // delay the "fade in" transition
+  --filter-field-opacity-transition-delay: 100ms;
+  // the visibility transition is not a smooth transition but allows to set the value visibility delayed
+  // set visibility to visible right before the "fade in" transition starts
+  --filter-field-visibility-transition-delay: var(--filter-field-opacity-transition-delay);
 
   transition: bottom @filter-field-transition-duration ease-in-out,
   right @filter-field-transition-duration ease-in-out,
@@ -33,10 +41,17 @@
   min-width @filter-field-transition-duration ease-in-out,
   max-width @filter-field-transition-duration ease-in-out,
   box-shadow @filter-field-transition-duration ease-in-out,
-  opacity @filter-field-transition-duration ease-in-out;
+  opacity @filter-field-transition-duration ease-in-out var(--filter-field-opacity-transition-delay),
+  visibility 0s var(--filter-field-visibility-transition-delay);
 
   :not(:hover) > &:not(.focused):not(.focus-inside-widget).empty {
     opacity: 0;
+    visibility: hidden;
+
+    // start the "fade out" transition right away
+    --filter-field-opacity-transition-delay: 0s;
+    // set visibility to hidden right after the "fade out" transition ends
+    --filter-field-visibility-transition-delay: calc(@filter-field-transition-duration + var(--filter-field-opacity-transition-delay));
   }
 
   &::before {
@@ -46,7 +61,7 @@
     justify-content: center;
     align-items: center;
     position: absolute;
-    bottom: (@filter-field-height - @filter-field-icon-size) / 2;
+    bottom: calc((var(--filter-field-height) - @filter-field-icon-size) / 2);
     right: @text-field-icon-margin-x + 1px;
     height: @filter-field-icon-size;
     width: @filter-field-icon-size;
@@ -93,7 +108,7 @@
   }
 
   &:not(.focused).empty {
-    --filter-field-bottom: @filter-field-bottom + ((@filter-field-height - @filter-field-icon-size) / 2);
+    --filter-field-bottom: @filter-field-bottom + ((var(--filter-field-height) - @filter-field-icon-size) / 2);
     --filter-field-max-bottom: calc(~'50% - ' @filter-field-icon-size / 2);
     right: @filter-field-right + @text-field-icon-margin-x + 1px;
     height: @filter-field-icon-size;
@@ -101,7 +116,7 @@
     min-width: @filter-field-icon-size;
     max-width: @filter-field-icon-size;
     box-shadow: none;
-    #scout.backdrop-filter(@background-color: var(--filter-field-transparent-background-color), @backdrop-filter: blur(2px), @fallback-background-color: var(--filter-field-background-color));
+    #scout.backdrop-filter(@background-color: var(--filter-field-transparent-50-background-color), @backdrop-filter: blur(2px), @fallback-background-color: var(--filter-field-transparent-80-background-color));
 
     &::before {
       bottom: 0;
@@ -130,8 +145,9 @@
 
 .filter-field-container {
   position: sticky;
+  --filter-field-height: @filter-field-height;
   --filter-field-container-top: calc(~'100% - ' @filter-field-bottom);
-  --filter-field-container-min-top: calc(~'50% + ' @filter-field-height / 2);
+  --filter-field-container-min-top: calc(~'50% + ' var(--filter-field-height) / 2);
   top: max(var(--filter-field-container-top), var(--filter-field-container-min-top));
   left: calc(~'100% - ' @filter-field-right);
   width: 0;
@@ -143,6 +159,10 @@
 
   &:not(:hover) > .filter-field:not(.focused):not(.focus-inside-widget).empty {
     opacity: 1;
+    visibility: visible;
+
+    --filter-field-opacity-transition-delay: 100ms;
+    --filter-field-visibility-transition-delay: var(--filter-field-opacity-transition-delay);
   }
 
   & > .filter-field {
@@ -152,10 +172,14 @@
 
     :not(:hover) > &:not(.focused):not(.focus-inside-widget).empty {
       opacity: 0;
+      visibility: hidden;
+
+      --filter-field-opacity-transition-delay: 0s;
+      --filter-field-visibility-transition-delay: calc(@filter-field-transition-duration + var(--filter-field-opacity-transition-delay));
     }
 
     &:not(.focused).empty {
-      bottom: ((@filter-field-height - @filter-field-icon-size) / 2);
+      bottom: calc((var(--filter-field-height) - @filter-field-icon-size) / 2);
       right: @text-field-icon-margin-x + 1px;
     }
   }
@@ -166,4 +190,9 @@
   .filter-field {
     .hidden();
   }
+}
+
+.dense .filter-field,
+.dense .filter-field-container {
+  --filter-field-height: @filter-field-height-dense;
 }

package/src/widget/LoadingSupport.js

@@ -15,7 +15,7 @@ export default class LoadingSupport extends WidgetSupport {
 
   /**
    * @typedef {WidgetSupportOptions} LoadingSupportOptions
-   * @property {number} loadingIndicatorDelay if not set: 250 ms
+   * @property {number} [loadingIndicatorDelay] if not set: 250 ms
    */
 
   /**

package/src/widget/Widget.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,27 +8,7 @@
  * Contributors:
  *     BSI Business Systems Integration AG - initial API and implementation
  */
-import {
-  arrays,
-  DeferredGlassPaneTarget,
-  Desktop,
-  Device,
-  Event,
-  EventDelegator,
-  EventSupport,
-  filters,
-  focusUtils,
-  Form,
-  graphics,
-  icons,
-  inspector,
-  objects,
-  scout,
-  scrollbars,
-  strings,
-  texts,
-  TreeVisitResult
-} from '../index';
+import {arrays, DeferredGlassPaneTarget, Desktop, Device, Event, EventDelegator, EventSupport, filters, focusUtils, Form, graphics, icons, inspector, objects, scout, scrollbars, strings, texts, TreeVisitResult} from '../index';
 import $ from 'jquery';
 
 export default class Widget {
@@ -59,7 +39,7 @@ export default class Widget {
     this.cloneOf = null;
 
     /**
-     * The 'rendering' flag is set the true while the _inital_ rendering is performed.
+     * The 'rendering' flag is set the true while the _initial_ rendering is performed.
      * It is used to to something different in a _render* method when the method is
      * called for the first time.
      */
@@ -144,6 +124,12 @@ export default class Widget {
     READ_ONLY: 1
   };
 
+  /**
+   * Initializes the widget instance. All properties of the model parameter (object) are set as properties on the widget instance.
+   * Calls {@link Widget#_init} and triggers an <em>init</em> event when initialization has been completed.
+   *
+   * @param {object} model
+   */
   init(model) {
     let staticModel = this._jsonModel();
     if (staticModel) {
@@ -168,9 +154,12 @@ export default class Widget {
   }
 
   /**
-   * @param {object} options
-   * - parent (required): The parent widget
-   * - session (optional): If not specified the session of the parent is used
+   * Initializes the widget instance. All properties of the model parameter (object) are set as properties on the widget instance.
+   * Override this function to initialize widget specific properties in sub-classes.
+   *
+   * @param {object} model Properties:<ul>
+   *   <li>parent (required): parent widget</li>
+   *   <li>session (optional): If not specified, session of parent widget is used</li></ul>
    */
   _init(model) {
     if (!model.parent) {
@@ -541,8 +530,9 @@ export default class Widget {
       return;
     }
 
-    // Destroy open popups first, they are not animated
-    this.session.desktop.destroyPopupsFor(this);
+    // Remove open popups first, they would be positioned wrongly during the animation
+    // Normally they would be closed automatically by a user interaction (click),
+    this.session.desktop.removePopupsFor(this);
 
     this.removalPending = true;
     // Don't execute immediately to make sure nothing interferes with the animation (e.g. layouting) which could make it laggy
@@ -806,13 +796,17 @@ export default class Widget {
     }
 
     let computedStateForChildren = scout.nvl(enabledComputedForChildren, enabledComputed);
-    this.children.forEach(child => {
+    this._childrenForEnabledComputed().forEach(child => {
       if (child.inheritAccessibility) {
         child.recomputeEnabled(computedStateForChildren);
       }
     });
   }
 
+  _childrenForEnabledComputed() {
+    return this.children;
+  }
+
   _computeEnabled(inheritAccessibility, parentEnabled) {
     return this.enabled && (inheritAccessibility ? parentEnabled : true);
   }
@@ -1415,19 +1409,22 @@ export default class Widget {
 
   /**
    * Sets the value of the property 'propertyName' to 'newValue' and then fires a propertyChange event for that property.
+   * @return {boolean} true if the property was changed, false if not.
    */
   _setProperty(propertyName, newValue) {
     scout.assertParameter('propertyName', propertyName);
     let oldValue = this[propertyName];
     if (objects.equals(oldValue, newValue)) {
-      return;
+      return false;
     }
     this[propertyName] = newValue;
     let event = this.triggerPropertyChange(propertyName, oldValue, newValue);
     if (event.defaultPrevented) {
       // Revert to old value if property change should be prevented
       this[propertyName] = oldValue;
+      return false; // not changed
     }
+    return true;
   }
 
   /**
@@ -1439,10 +1436,11 @@ export default class Widget {
    *    If there is a custom remove function (e.g. _removeXY where XY is the property name), it will be called instead of removing the widgets directly.
    * 3. Model update: If there is a custom set function (e.g. _setXY where XY is the property name), it will be called. Otherwise the default set function _setProperty is called.
    * 4. DOM rendering: If the widget is rendered and there is a custom render function (e.g. _renderXY where XY is the property name), it will be called. Otherwise nothing happens.
+   * @return {boolean} true if the property was changed, false if not.
    */
   setProperty(propertyName, value) {
     if (objects.equals(this[propertyName], value)) {
-      return;
+      return false;
     }
 
     value = this._prepareProperty(propertyName, value);
@@ -1453,6 +1451,7 @@ export default class Widget {
     if (this.rendered) {
       this._callRenderProperty(propertyName);
     }
+    return true;
   }
 
   _prepareProperty(propertyName, value) {
@@ -1556,9 +1555,11 @@ export default class Widget {
    * Returns the DOM elements to paint a glassPanes over, once a modal Form, message-box or file-chooser is shown with this widget as its 'displayParent'.<br>
    * If the widget is not rendered yet, a scout.DeferredGlassPaneTarget is returned.<br>
    * In both cases the method _glassPaneTargets is called which may be overridden by the actual widget.
+   * @param {Widget} element widget that requested a glass pane
+   * @returns [$]|[DeferredGlassPaneTarget]
    */
   glassPaneTargets(element) {
-    let resolveGlassPanes = function(element) {
+    let resolveGlassPanes = element => {
       // contributions
       let targets = arrays.flatMap(this._glassPaneContributions, cont => {
         let $elements = cont(element);
@@ -1568,7 +1569,7 @@ export default class Widget {
         return [];
       });
       return targets.concat(this._glassPaneTargets(element));
-    }.bind(this);
+    };
     if (this.rendered) {
       return resolveGlassPanes(element);
     }
@@ -1576,13 +1577,17 @@ export default class Widget {
     return DeferredGlassPaneTarget.createFor(this, resolveGlassPanes.bind(this, element));
   }
 
+  /**
+   *
+   * @param {Widget} element widget that requested a glass pane
+   * @returns [$]
+   */
   _glassPaneTargets(element) {
     // since popups are rendered outside the DOM of the widget parent-child hierarchy, get glassPaneTargets of popups belonging to this widget separately.
     return [this.$container].concat(
       this.session.desktop.getPopupsFor(this)
-        .reduce((acc, popup) => {
-          return acc.concat(popup.glassPaneTargets());
-        }, []));
+        .filter(popup => !element.has(popup))
+        .reduce((acc, popup) => acc.concat(popup.glassPaneTargets()), []));
   }
 
   addGlassPaneContribution(contribution) {

package/src/widget/WidgetSupport.js

@@ -15,7 +15,7 @@ export default class WidgetSupport {
   /**
    * @typedef WidgetSupportOptions
    * @property {Widget} widget Widget that created the support
-   * @property {$|function} $container jQuery element that will be used for the visualization.
+   * @property {$|function} [$container] jQuery element that will be used for the visualization.
    *  It may be a function to resolve the container later.
    *  If this property is not set the $container of the widget is used by default.
    */