Issue/5966 toolbox animations

packages/survey-creator-angular/src/toolbox/adaptive-toolbox.component.html

@@ -5,9 +5,9 @@
         <ng-container *ngIf="model.isCompactRendered">
           <svc-toolbox-tool [creator]="creator" [item]="searchItem" [parentModel]="model"
             [isCompact]="model.isCompactRendered"></svc-toolbox-tool>
-          <div class="svc-toolbox__category-separator svc-toolbox__category-separator--search"></div>
         </ng-container>
         <svc-search [model]="model.searchManager"></svc-search>
+        <div class="svc-toolbox__category-separator svc-toolbox__category-separator--search"></div>
       </div>
       <div class="svc-toolbox__scroll-wrapper">
         <div class="svc-toolbox__scroller sv-drag-target-skipped" (scroll)="model.onScroll(model, $event)">

packages/survey-creator-core/creator-themes-import.js

@@ -20,13 +20,13 @@ var themeConstants = {
   "default": {
     "--ctr-toolbox-scrollbar-left": "auto",
     "--ctr-toolbox-scrollbar-right": "0",
-    "--ctr-toolbox-scrollbar-display": "none",
     "--ctr-toolbox-scroller-align-items": "flex-start",
     "--ctr-toolbox-item-submenu-button-right": "8px",
     "--ctr-toolbox-item-align": "stretch",
     "--ctr-toolbox-submenu-offset": "13px",
     "--ctr-toolbox-width-compact": "72px",
-    "--ctr-toolbox-separator-width": "calc(100% + 8px)",
+    "--ctr-toolbox-margin-left-compact": "0px",
+    "--ctr-toolbox-separator-width": "208px",
     "--ctr-toolbox-separator-width-compact": "40px",
     "--ctr-toolbox-item-banner-icon-display": "none",
     "--ctr-toolbox-item-banner-beak-display": "block",

packages/survey-creator-core/src/components/toolbox/toolbox-animation.scss

@@ -0,0 +1,118 @@
+@import "../../variables.scss";
+$svc-toolbox-fade-in-duration: var(--sjs-svc-toolbox-fade-in-duration, 250ms);
+$svc-toolbox-move-in-duration: var(--sjs-svc-toolbox-move-in-duration, 250ms);
+$svc-toolbox-fade-in-delay: var(--sjs-svc-toolbox-fade-in-delay, 100ms);
+$svc-toolbox-fade-out-duration: var(--sjs-svc-toolbox-fade-out-duration, 250ms);
+$svc-toolbox-move-out-duration: var(--sjs-svc-toolbox-move-out-duration, 250ms);
+$svc-toolbox-move-out-delay: var(--sjs-svc-toolbox-move-out-delay, 0ms);
+
+$cubic-ease-out: cubic-bezier(0.33, 1, 0.68, 1);
+$reverse-cubic-ease-out: cubic-bezier(0.32, 0, 0.67, 0);
+
+@keyframes toolboxFadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes toolboxMoveIn {
+  from {
+    width: var(--toolbox-width-compact);
+    overflow: hidden;
+  }
+  to {
+    width: var(--toolbox-width);
+    overflow: hidden;
+  }
+}
+
+@keyframes toolboxSeparatorSearchMoveIn {
+  from {
+    width: var(--ctr-toolbox-separator-width-compact, calcSize(5));
+    overflow: hidden;
+  }
+  to {
+    width: var(--toolbox-width);
+    overflow: hidden;
+  }
+}
+
+@keyframes toolboxSeparatorMoveIn {
+  from {
+    width: var(--ctr-toolbox-separator-width-compact, calcSize(5));
+    overflow: hidden;
+  }
+  to {
+    width: var(--ctr-toolbox-separator-width, calcSize(5));
+    overflow: hidden;
+  }
+}
+
+.svc-toolbox__panel--enter,
+.svc-toolbox__panel--leave
+{
+  animation-fill-mode: forwards;
+  animation-duration: var(--move-animation-duration), var(--animation-duration);
+  animation-delay: var(--move-animation-delay), 0s;
+  animation-direction: var(--animation-direction);
+  animation-timing-function: var(--animation-timing-function);
+  animation-name: toolboxMoveIn, empty;
+  animation-fill-mode: forwards;
+  .svc-toolbox__category-separator {
+    animation-duration: var(--move-animation-duration);
+    animation-delay: var(--move-animation-delay);
+    animation-direction: var(--animation-direction);
+    animation-timing-function: var(--animation-timing-function);
+    animation-name: toolboxSeparatorMoveIn;
+    animation-fill-mode: forwards;
+  }
+  .svc-toolbox__category-separator--search {
+    animation-name: toolboxSeparatorSearchMoveIn;
+  }
+  .svc-toolbox__item-submenu-button,
+  .svc-toolbox__item-title,
+  .spg-search-editor_input {
+    animation-duration: var(--fade-animation-duration);
+    animation-delay: var(--fade-animation-delay);
+    animation-direction: var(--animation-direction);
+    animation-timing-function: var(--animation-timing-function);
+    animation-name: toolboxFadeIn;
+    animation-fill-mode: forwards;
+    opacity: 0;
+  }
+}
+.svc-toolbox__panel--enter {
+  --fade-animation-duration: #{$svc-toolbox-fade-in-duration};
+  --move-animation-duration:  #{$svc-toolbox-move-in-duration};
+  --fade-animation-delay: #{$svc-toolbox-fade-in-delay};
+  --move-animation-delay: 0s;
+  --animation-direction: normal;
+  --animation-duration: calc(var(--fade-animation-delay) + var(--fade-animation-duration));
+  --animation-timing-function: #{$cubic-ease-out};
+}
+.svc-toolbox__panel--leave {
+  --fade-animation-duration: #{$svc-toolbox-fade-out-duration};
+  --move-animation-duration:  #{$svc-toolbox-move-out-duration};
+  --fade-animation-delay: 0s;
+  --move-animation-delay: #{$svc-toolbox-move-out-delay};
+  --animation-direction: reverse;
+  --animation-duration: 0s;
+  --animation-timing-function: #{$reverse-cubic-ease-out};
+}
+
+.svc-toolbox--flyout-to-compact-running {
+  width: var(--toolbox-width-compact);
+  z-index: 200;
+  border-inline-end: var(--ctr-toolbox-border-width-right, 0px) solid transparent;
+}
+
+.svc-creator--disable-animations {
+  .svc-toolbox__panel--enter,
+  .svc-toolbox__panel--leave
+  {
+    animation: none;
+  }
+}

packages/survey-creator-core/src/components/toolbox/toolbox-tool.scss

@@ -367,6 +367,7 @@
   .svc-toolbox__tool {
     padding: 0px var(--ctr-toolbox-item-margin-horizontal-no-text, 0px);
     align-self: flex-start;
+    pointer-events: all;
   }
   .svc-toolbox__search-button {
     padding-inline-start: var(--ctr-toolbox-item-margin-horizontal-no-text, calcSize(0.5));

packages/survey-creator-core/src/components/toolbox/toolbox.scss

@@ -7,10 +7,13 @@ svc-toolbox {
 }
 
 .svc-toolbox {
+  --toolbox-width: var(--ctr-toolbox-min-width, 224.984375px /*calcSize(28)*/);
+  --toolbox-width-compact: var(--ctr-toolbox-width-compact, calc(9 *#{$base-unit}));
+
+  width: auto;
   height: 100%;
   display: flex;
   flex-direction: column;
-  width: var(--ctr-toolbox-min-width, 224.984375px /*calcSize(28)*/);
   .spg-search-editor_container {
     background: var(--ctr-toolbox-background-color, $background-dim);
     padding-top: var(--ctr-toolbox-search-padding-top, calcSize(2.5));
@@ -53,6 +56,7 @@ svc-toolbox {
   flex-direction: column;
   border-inline-end: var(--ctr-toolbox-border-width-right, 0px) solid var(--ctr-toolbox-border-color, transparent);
   background: var(--ctr-toolbox-background-color, $background-dim);
+  width: var(--toolbox-width);
 }
 
 .svc-toolbox__scroll-wrapper {
@@ -93,10 +97,9 @@ svc-toolbox {
   overflow-x: hidden;
   width: calcSize(2);
   margin-inline-start: calcSize(-0.5);
-  display: var(--ctr-toolbox-scrollbar-display, none);
+  display: none;
   z-index: 30;
-  padding: var(--ctr-toolbox-padding-top, calcSize(1)) 0
-  var(--ctr-toolbox-padding-bottom, calcSize(2)) 0;
+  padding: var(--ctr-toolbox-padding-top, calcSize(1)) 0 var(--ctr-toolbox-padding-bottom, calcSize(2)) 0;
   @-moz-document url-prefix() {
     scrollbar-width: thin;
     scrollbar-color: $border transparent;
@@ -113,58 +116,43 @@ svc-toolbox {
     direction: initial;
   }
 }
-
 .svc-toolbox--scrollable {
-  width: var(--ctr-toolbox-min-width, 236.984375px);
+  --toolbox-width: var(--ctr-toolbox-min-width, 236.984375px);
 }
-
 .svc-toolbox--compact {
-  width: var(--ctr-toolbox-width-compact, calcSize(10.5));
+  margin-inline-end: var(--ctr-toolbox-margin-left-compact, calcSize(1.5));
   .svc-toolbox__panel {
     overflow: visible;
+    width: var(--toolbox-width-compact);
   }
   .svc-toolbox__scroller {
     width: 100vw;
     padding: var(--ctr-toolbox-padding-top, calcSize(1.5)) var(--ctr-toolbox-group-padding-right-compact, calcSize(1.5))
       var(--ctr-toolbox-padding-bottom, calcSize(2)) var(--ctr-toolbox-group-padding-left-compact, calcSize(1.5));
+    pointer-events: none;
   }
   .spg-search-editor_container {
     opacity: 0;
     position: absolute;
   }
   .svc-toolbox__search-container {
-    border-bottom: 0;
     padding-top: var(--ctr-toolbox-padding-top, calcSize(1.5));
     padding-inline-start: var(--ctr-toolbox-group-padding-left, calcSize(1.5));
-    padding-inline-end: var(--ctr-toolbox-group-padding-left, calcSize(1));
+    padding-inline-end: var(--ctr-toolbox-group-padding-left, calcSize(1.5));
+    padding-bottom: calc(var(--ctr-toolbox-separator-padding-top, 8px) + var(--ctr-toolbox-gap, 4px));
   }
   .svc-toolbox__category-separator {
     margin-top: calc(var(--ctr-toolbox-separator-padding-top, 8px) + var(--ctr-toolbox-gap, 4px));
     width: var(--ctr-toolbox-separator-width-compact, calcSize(5));
     margin-inline-end: calc(
-      var(--ctr-toolbox-separator-padding-right-compact, 16px) -
-        var(--ctr-toolbox-group-padding-left-compact, 12px) -
+      var(--ctr-toolbox-separator-padding-right-compact, 16px) - var(--ctr-toolbox-group-padding-left-compact, 12px) -
         var(--ctr-toolbox-item-margin-horizontal-no-text, 0px)
     );
-    margin-bottom: var(--ctr-toolbox-separator-padding-bottom, 8px);
     margin-inline-start: calc(
-      var(--ctr-toolbox-separator-padding-left-compact, 16px) -
-        var(--ctr-toolbox-group-padding-left-compact, 12px) -
+      var(--ctr-toolbox-separator-padding-left-compact, 16px) - var(--ctr-toolbox-group-padding-left-compact, 12px) -
         var(--ctr-toolbox-item-margin-horizontal-no-text, 0px)
     );
   }
-  .svc-toolbox__category-separator--search {
-    margin-inline-end: calc(
-      var(--ctr-toolbox-separator-padding-right-compact, 16px) -
-        var(--ctr-toolbox-group-padding-left-compact, 12px)
-    );
-    margin-bottom: 0;
-    margin-inline-start: calc(
-      var(--ctr-toolbox-separator-padding-left-compact, 16px) -
-        var(--ctr-toolbox-group-padding-left-compact, 12px)
-    );
-    min-height: 1px;
-  }
 }
 
 .svc-toolbox__tool.svc-toolbox__search-button {
@@ -175,9 +163,15 @@ svc-toolbox {
 }
 
 .svc-toolbox--flyout {
+  --toolbox-width: var(--ctr-toolbox-min-width, calc(32 *#{$base-unit}));
+  margin-inline-end: var(--ctr-toolbox-margin-left-compact, calcSize(1.5));
+  overflow: visible;
+  max-width: var(--ctr-toolbox-width-compact, calcSize(10.5));
   overflow: visible;
+  width: var(--toolbox-width-compact);
   max-width: var(--ctr-toolbox-width-compact, calcSize(10.5));
   overflow: visible;
+  border-inline-end: var(--ctr-toolbox-border-width-right, 0px) solid transparent;
 
   .spg-search-editor_container {
     opacity: 1;
@@ -188,8 +182,14 @@ svc-toolbox {
     z-index: 200;
     width: var(--ctr-toolbox-min-width, calcSize(32));
     position: relative;
-    box-shadow: var(--ctr-toolbox-shadow-floating-2-offset-x, 0px) var(--ctr-toolbox-shadow-floating-2-offset-y, 8px) var(--ctr-toolbox-shadow-floating-2-blur, 16px) var(--ctr-toolbox-shadow-floating-2-spread, 0px) var(--ctr-toolbox-shadow-floating-2-color, rgba(0, 0, 0, 0.10)), 
-                var(--ctr-toolbox-shadow-floating-1-offset-x, 0px) var(--ctr-toolbox-shadow-floating-1-offset-y, 2px) var(--ctr-toolbox-shadow-floating-1-blur, 6px) var(--ctr-toolbox-shadow-floating-1-spread, 0px) var(--ctr-toolbox-shadow-floating-1-color, rgba(0, 0, 0, 0.10));
+    box-shadow:
+      var(--ctr-toolbox-shadow-floating-2-offset-x, 0px) var(--ctr-toolbox-shadow-floating-2-offset-y, 8px)
+        var(--ctr-toolbox-shadow-floating-2-blur, 16px) var(--ctr-toolbox-shadow-floating-2-spread, 0px)
+        var(--ctr-toolbox-shadow-floating-2-color, rgba(0, 0, 0, 0.1)),
+      var(--ctr-toolbox-shadow-floating-1-offset-x, 0px) var(--ctr-toolbox-shadow-floating-1-offset-y, 2px)
+        var(--ctr-toolbox-shadow-floating-1-blur, 6px) var(--ctr-toolbox-shadow-floating-1-spread, 0px)
+        var(--ctr-toolbox-shadow-floating-1-color, rgba(0, 0, 0, 0.1));
+    transition: box-shadow $creator-transition-duration;
   }
 }
 .svc-toolbox--searchable {
@@ -198,8 +198,6 @@ svc-toolbox {
   }
 }
 
-
-
 .svc-toolbox__container {
   width: 100%;
 }
@@ -212,11 +210,11 @@ svc-toolbox {
   flex-direction: column;
   box-sizing: border-box;
   background: var(--ctr-toolbox-background-color, $background-dim);
-  border-bottom: var(--ctr-toolbox-search-border-width-bottom, 1px) solid var(--ctr-toolbox-search-border-color, $border);
+  border-bottom: var(--ctr-toolbox-search-border-width-bottom, 1px) solid transparent;
 
   svg {
     pointer-events: none;
-  } 
+  }
 }
 
 .svc-toolbox__category {
@@ -232,26 +230,40 @@ svc-toolbox {
   margin: calcSize(1.5) calcSize(0.5) calcSize(1);
 }
 
+.svc-toolbox__category-separator--search {
+  position: absolute;
+  bottom: 0;
+  margin-bottom: -1px;
+  min-height: 1px;
+  width: var(--toolbox-width);
+  align-self: center;
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .svc-toolbox--no-separators {
   .svc-toolbox__category-separator {
     display: none;
   }
+  .svc-toolbox__category-separator--search {
+    display: block;
+  }
 }
 
-
 .svc-toolbox__category-header-wrapper {
-  padding: var(--ctr-toolbox-group-header-margin-top, 0px) var(--ctr-toolbox-group-header-margin-left, 0px) var(--ctr-toolbox-group-header-margin-bottom, 0px) var(--ctr-toolbox-group-header-margin-left, 0px);
+  padding: var(--ctr-toolbox-group-header-margin-top, 0px) var(--ctr-toolbox-group-header-margin-left, 0px)
+    var(--ctr-toolbox-group-header-margin-bottom, 0px) var(--ctr-toolbox-group-header-margin-left, 0px);
   margin-inline-start: calc(0px - var(--ctr-toolbox-group-padding-left, 0px));
   margin-inline-end: calc(0px - var(--ctr-toolbox-group-padding-right, 0px));
   align-self: stretch;
 }
 .svc-toolbox__category-header {
   height: calcSize(5);
-  padding-top: var(--ctr-toolbox-group-header-padding-top, calcSize(1.5)); 
-  padding-inline-end: var(--ctr-toolbox-group-header-padding-right, calcSize(1.5)); 
-  padding-bottom: var(--ctr-toolbox-group-header-padding-bottom, calcSize(1.5)); 
+  padding-top: var(--ctr-toolbox-group-header-padding-top, calcSize(1.5));
+  padding-inline-end: var(--ctr-toolbox-group-header-padding-right, calcSize(1.5));
+  padding-bottom: var(--ctr-toolbox-group-header-padding-bottom, calcSize(1.5));
   padding-inline-start: var(--ctr-toolbox-group-header-padding-left, calcSize(1.5));
-  
+
   // box-shadow: 0px 1px 0px $border;
   border-bottom: 1px solid $border;
   box-sizing: border-box;

packages/survey-creator-core/src/creator-responsivity-manager.ts

@@ -77,6 +77,7 @@ export class CreatorResponsivityManager {
   process(isFirst: boolean = false) {
     if(isFirst) {
       this.creator.sidebar.blockAnimations();
+      this.creator.toolbox.blockAnimations();
     }
     this.currentWidth = this.getScreenWidth();
     if (this.currentWidth === "xl" || this.currentWidth === "xxl") {
@@ -96,6 +97,7 @@ export class CreatorResponsivityManager {
     }
     if (isFirst) {
       this.creator.sidebar.releaseAnimations();
+      this.creator.toolbox.releaseAnimations();
     }
   }
 

packages/survey-creator-core/src/entries/index.ts

@@ -113,6 +113,7 @@ require("../components/toolbox/toolbox-tool.scss");
 require("../components/question-dropdown.scss");
 require("../components/toolbox/toolbox.scss");
 require("../components/toolbox/toolbox-right.scss");
+require("../components/toolbox/toolbox-animation.scss");
 require("../components/side-bar/side-bar.scss");
 require("../components/side-bar/tab-control.scss");
 require("../property-grid-theme/property-grid.scss");