diff --git a/packages/survey-creator-core/creator-themes-import.js b/packages/survey-creator-core/creator-themes-import.js
index d8ba76a127..c2846b3a52 100644
--- a/packages/survey-creator-core/creator-themes-import.js
+++ b/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",
diff --git a/packages/survey-creator-core/src/components/toolbox/toolbox-animation.scss b/packages/survey-creator-core/src/components/toolbox/toolbox-animation.scss
new file mode 100644
index 0000000000..0d54886bf2
--- /dev/null
+++ b/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;
+ }
+}
diff --git a/packages/survey-creator-core/src/components/toolbox/toolbox-tool.scss b/packages/survey-creator-core/src/components/toolbox/toolbox-tool.scss
index 8c98f73590..46fcb065af 100644
--- a/packages/survey-creator-core/src/components/toolbox/toolbox-tool.scss
+++ b/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));
diff --git a/packages/survey-creator-core/src/components/toolbox/toolbox.scss b/packages/survey-creator-core/src/components/toolbox/toolbox.scss
index ecec409c67..c52a525c50 100644
--- a/packages/survey-creator-core/src/components/toolbox/toolbox.scss
+++ b/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;
diff --git a/packages/survey-creator-core/src/creator-responsivity-manager.ts b/packages/survey-creator-core/src/creator-responsivity-manager.ts
index eac0a9e717..12e2d71430 100644
--- a/packages/survey-creator-core/src/creator-responsivity-manager.ts
+++ b/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();
}
}
diff --git a/packages/survey-creator-core/src/entries/index.ts b/packages/survey-creator-core/src/entries/index.ts
index d07d2765f3..840ed46672 100644
--- a/packages/survey-creator-core/src/entries/index.ts
+++ b/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");
diff --git a/packages/survey-creator-core/src/themes/default.ts b/packages/survey-creator-core/src/themes/default.ts
index f17bb7920f..cc9f90f616 100644
--- a/packages/survey-creator-core/src/themes/default.ts
+++ b/packages/survey-creator-core/src/themes/default.ts
@@ -3,13 +3,13 @@ const Theme = {
"cssVariables": {
"--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",
@@ -352,7 +352,6 @@ const Theme = {
"--ctr-toolbox-separator-color": "var(--sjs-border-25)",
"--ctr-toolbox-separator-padding-top": "var(--sjs-spacing-x1)",
"--ctr-toolbox-separator-max-width": "var(--sjs-size-max)",
- "--ctr-toolbox-separator-padding-bottom": "var(--sjs-spacing-x1)",
"--ctr-toolbox-gap": "var(--sjs-spacing-x05)",
"--ctr-toolbox-padding-top": "var(--sjs-spacing-x150)",
"--ctr-toolbox-padding-bottom": "var(--sjs-spacing-x2)",
@@ -423,7 +422,6 @@ const Theme = {
"--ctr-toolbox-search-padding-top": "var(--sjs-spacing-x250)",
"--ctr-toolbox-search-icon-color-placeholder": "var(--sjs-layer-1-foreground-50)",
"--ctr-toolbox-search-padding-bottom": "var(--sjs-spacing-x250)",
- "--ctr-toolbox-search-border-color": "var(--sjs-border-25)",
"--ctr-toolbox-search-text-color": "var(--sjs-layer-1-foreground-100)",
"--ctr-toolbox-search-border-width-bottom": "var(--sjs-stroke-x1)",
"--ctr-toolbox-search-text-color-placeholder": "var(--sjs-layer-1-foreground-50)",
@@ -436,16 +434,12 @@ const Theme = {
"--ctr-toolbox-group-header-margin-bottom": "var(--sjs-spacing-x1)",
"--ctr-toolbox-separator-padding-left-compact": "var(--sjs-spacing-x2)",
"--ctr-toolbox-separator-padding-right-compact": "var(--sjs-spacing-x2)",
- "--ctr-font-large-size": "var(--sjs-font-size-x4)",
- "--ctr-font-large-line-height": "var(--sjs-line-height-x5)",
"--ctr-font-medium-size": "var(--sjs-font-size-x3)",
"--ctr-font-medium-line-height": "var(--sjs-line-height-x4)",
"--ctr-font-default-size": "var(--sjs-font-size-x2)",
"--ctr-font-default-line-height": "var(--sjs-line-height-x3)",
"--ctr-font-small-size": "var(--sjs-font-size-x150)",
"--ctr-font-small-line-height": "var(--sjs-line-height-x2)",
- "--ctr-font-code-size": "var(--sjs-font-size-x2)",
- "--ctr-font-code-line-height": "var(--sjs-line-height-x3)",
"--ctr-survey-checkboxes-item-corner-radius-floating": "var(--sjs-corner-radius-x1)",
"--ctr-survey-radio-button-group-item-corner-radius-floating": "var(--sjs-corner-radius-x1)",
"--ctr-survey-radio-button-group-item-background-color-floating": "var(--sjs-layer-1-background-500)",
@@ -505,7 +499,6 @@ const Theme = {
"--ctr-toolbox-item-background-color-submenu": "var(--sjs-layer-1-background-500)",
"--ctr-toolbox-item-text-color-submenu": "var(--sjs-layer-2-foreground-100)",
"--ctr-toolbox-min-width": "var(--sjs-size-x32)",
- "--ctr-font-default-line-height-all-caps": "var(--sjs-line-height-x2)",
"--ctr-page-banner-background-color": "var(--sjs-secondary-background-500)",
"--ctr-page-banner-text-color": "var(--sjs-secondary-foreground-100)",
"--ctr-toolbox-group-padding-left-compact": "var(--sjs-spacing-x150)",
diff --git a/packages/survey-creator-core/src/toolbox.ts b/packages/survey-creator-core/src/toolbox.ts
index 2fefb6aecc..e93c13b8eb 100644
--- a/packages/survey-creator-core/src/toolbox.ts
+++ b/packages/survey-creator-core/src/toolbox.ts
@@ -17,7 +17,9 @@ import {
CssClassBuilder,
HashTable,
surveyLocalization,
- ComputedUpdater
+ ComputedUpdater,
+ AnimationBoolean,
+ IAnimationConsumer
} from "survey-core";
import { SurveyCreatorModel, toolboxLocationType } from "./creator-base";
import { editorLocalization, getLocString } from "./editorLocalization";
@@ -446,11 +448,44 @@ export class QuestionToolbox
defaultValue: false,
onSet: (val: boolean, target: QuestionToolbox) => {
target.updateResponsiveness(val, target.overflowBehavior);
+ target.compactAnimation.sync(!(val && !target.isFocused));
}
}) isCompact: boolean;
+ @property({ defaultValue: false }) isCompactRendered: boolean;
+ @property({ defaultValue: false }) isFlyoutToCompactRunning: boolean;
+
+ private getAnimationOptions(): IAnimationConsumer {
+ return {
+ getAnimatedElement: () => {
+ return this.rootElement?.querySelector(".svc-toolbox__panel");
+ },
+ isAnimationEnabled: () => this.animationAllowed,
+ getRerenderEvent: () => this.onElementRerendered,
+ getLeaveOptions: () => {
+ return {
+ cssClass: "svc-toolbox__panel--leave",
+ onAfterRunAnimation: () => { this.isFlyoutToCompactRunning = false; }
+ };
+ },
+ getEnterOptions: () => {
+ return {
+ cssClass: "svc-toolbox__panel--enter"
+ };
+ }
+ };
+ }
+
+ public compactAnimation = new AnimationBoolean(this.getAnimationOptions(), (val: boolean) => {
+ this.isCompactRendered = !val;
+ }, () => !this.isCompactRendered);
+
@property({
defaultValue: false,
+ onSet: (val: boolean, target: QuestionToolbox) => {
+ if (target.animationAllowed) target.isFlyoutToCompactRunning = target.isCompact && !val;
+ target.compactAnimation.sync(!(target.isCompact && !val));
+ }
}) isFocused: boolean;
/**
* Specifies how the Toolbox behaves when it contains more items than can fit on the screen.
@@ -582,10 +617,6 @@ export class QuestionToolbox
//}
}
- public get isCompactRendered() {
- return this.isCompact && !this.isFocused;
- }
-
public get showSearch() {
return this.searchEnabled && this.items.length > QuestionToolbox.MINELEMENTCOUNT;
}
@@ -638,6 +669,7 @@ export class QuestionToolbox
.append("svc-toolbox")
.append("svc-toolbox--searchable", this.searchEnabled)
.append("svc-toolbox--no-separators", !this.showSeparators)
+ .append("svc-toolbox--flyout-to-compact-running", this.isFlyoutToCompactRunning)
.append("svc-toolbox--compact", this.isCompactRendered)
.append("svc-toolbox--flyout", this.isCompact && this.isFocused)
.append("svc-toolbox--scrollable", this.overflowBehavior == "scroll").toString();
@@ -1318,12 +1350,12 @@ export class QuestionToolbox
return this.getOrCreateToolboxItem(item);
}
private getTitleFromJsonTitle(title: any, name: string): string {
- if(!title) return title;
- if(typeof title === "string") return title;
- if(typeof title !== "object") return title;
- for(let key in title) {
+ if (!title) return title;
+ if (typeof title === "string") return title;
+ if (typeof title !== "object") return title;
+ for (let key in title) {
const loc = editorLocalization.locales[key];
- if(title[key] && loc && loc.qt) {
+ if (title[key] && loc && loc.qt) {
loc.qt[name] = title[key];
}
}
diff --git a/packages/survey-creator-core/tests/toolbox.tests.ts b/packages/survey-creator-core/tests/toolbox.tests.ts
index 10dbdec882..4fa52c2b21 100644
--- a/packages/survey-creator-core/tests/toolbox.tests.ts
+++ b/packages/survey-creator-core/tests/toolbox.tests.ts
@@ -8,7 +8,8 @@ import {
CustomWidgetCollection,
Question,
QuestionButtonGroupModel,
- DragOrClickHelper
+ DragOrClickHelper,
+ settings as surveySettings
} from "survey-core";
import { QuestionLinkValueModel } from "../src/components/link-value";
import { settings } from "../src/creator-settings";
@@ -830,4 +831,49 @@ test("ICustomQuestionTypeConfiguration.title should support a localizable, Bug#5
creator.locale = "de";
expect(item.title).toBe("New Question de");
ComponentCollection.Instance.clear();
+});
+
+test("Check toolbox getAnimatedElement methods", (): any => {
+ const creator = new CreatorTester();
+
+ const toolbox = creator.toolbox;
+ const animationOptions = toolbox["getAnimationOptions"]();
+ const rootElement = document.createElement("div");
+ const panelElement = document.createElement("div");
+ panelElement.className = "svc-toolbox__panel";
+ rootElement.appendChild(panelElement);
+ toolbox["_rootElementValue"] = rootElement;
+
+ expect(animationOptions.getAnimatedElement()).toBe(panelElement);
+
+ const leaveClass = "svc-toolbox__panel--leave";
+ const enterClass = "svc-toolbox__panel--enter";
+ const isFlyoutToCompactRunningClass = "svc-toolbox--flyout-to-compact-running";
+ surveySettings.animationEnabled = true;
+ toolbox.enableOnElementRerenderedEvent();
+ expect(animationOptions.isAnimationEnabled()).toBeTruthy();
+ toolbox.blockAnimations();
+ expect(animationOptions.isAnimationEnabled()).toBeFalsy();
+ toolbox.releaseAnimations();
+ expect(animationOptions.isAnimationEnabled()).toBeTruthy();
+ surveySettings.animationEnabled = false;
+ expect(animationOptions.isAnimationEnabled()).toBeFalsy();
+
+ const enterOptions = animationOptions.getEnterOptions && animationOptions.getEnterOptions();
+ expect(enterOptions?.cssClass).toBe(enterClass);
+ const leaveOptions = animationOptions.getLeaveOptions && animationOptions.getLeaveOptions();
+ expect(leaveOptions?.cssClass).toBe(leaveClass);
+
+ surveySettings.animationEnabled = true;
+ toolbox.isCompact = true;
+ toolbox.isFocused = true;
+ expect(toolbox.isFlyoutToCompactRunning).toBeFalsy();
+ expect(toolbox.classNames.indexOf(isFlyoutToCompactRunningClass) >= 0).toBeFalsy();
+ toolbox.isFocused = false;
+ expect(toolbox.isFlyoutToCompactRunning).toBeTruthy();
+ expect(toolbox.classNames.indexOf(isFlyoutToCompactRunningClass) >= 0).toBeTruthy();
+ leaveOptions?.onAfterRunAnimation && leaveOptions?.onAfterRunAnimation(panelElement);
+ expect(toolbox.isFlyoutToCompactRunning).toBeFalsy();
+ expect(toolbox.classNames.indexOf(isFlyoutToCompactRunningClass) >= 0).toBeFalsy();
+ surveySettings.animationEnabled = false;
});
\ No newline at end of file
diff --git a/packages/survey-creator-knockout/src/toolbox/adaptive-toolbox.html b/packages/survey-creator-knockout/src/toolbox/adaptive-toolbox.html
index 0e1244b46f..7530f9deb1 100644
--- a/packages/survey-creator-knockout/src/toolbox/adaptive-toolbox.html
+++ b/packages/survey-creator-knockout/src/toolbox/adaptive-toolbox.html
@@ -5,10 +5,10 @@
-
+