@eclipse-scout/core 22.0.0-beta.5 → 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/Widget.js

@@ -39,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.
      */
@@ -124,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) {
@@ -148,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) {