-
Notifications
You must be signed in to change notification settings - Fork 386
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Issue/5966 toolbox animations (#5972)
* Toolbox redesign. surveyjs/private-tasks#379 Fixes surveyjs/private-tasks#379 * fixed tests surveyjs/private-tasks#379 * fixed compact surveyjs/private-tasks#379 * fixed some rtl styles surveyjs/private-tasks#379 * fixed some rtl styles surveyjs/private-tasks#379 * fics compact item paddings surveyjs/private-tasks#379 * Toolbox redesign. surveyjs/private-tasks#379 Fixes surveyjs/private-tasks#379 * item with subitems alignment Fixes surveyjs/private-tasks#379 * item with subitems alignment Fixes surveyjs/private-tasks#379 * #5849 Toolbox. Shows a submenu on the button hover. Fixes #5849 * Toolbox. Shows a submenu on the button hover. #5849 * #5849 Toolbox. Shows a submenu on the button hover. Fixes #5849 * #5849 - fixed knockout * #5849 Toolbox. Shows a submenu on the button hover. Fixes #5849 * #5849 - fixed f-test * #5849 - try to fix v-test * #5849 - fixed right and sidebar styles Fixes #5849 * #5849 remove css hack Fixes #5849 * #5849 update some screenshots Fixes #5849 * #5849 remove css Fixes #5849 * #5849 update more screenshots Fixes #5849 * #5849 update more screenshots Fixes #5849 * #5849 update more screenshots Fixes #5849 * #5849 fix compact toolbox paddings Fixes #5849 * #5849 fixed right toolbox popup Fixes #5849 * simplified some styles Fixes surveyjs/private-tasks#379 * implement overlayed scrollbars surveyjs/private-tasks#379 * continue fixing styles surveyjs/private-tasks#379 * new left toolbox Fixes surveyjs/private-tasks#379 * fixed compact mode Fixes surveyjs/private-tasks#379 * continue fixing styles surveyjs/private-tasks#379 * fixed some rtl surveyjs/private-tasks#379 * rtl Fixes surveyjs/private-tasks#379 * toolbox-right Fixes surveyjs/private-tasks#379 * dots item Fixes surveyjs/private-tasks#379 * fixed categories Fixes surveyjs/private-tasks#379 * fixed pressed state Fixes surveyjs/private-tasks#379 * fixed old theme left toolbox - full mode Fixes surveyjs/private-tasks#379 * fixed subtypes surveyjs/private-tasks#379 * fixed compact toolbox surveyjs/private-tasks#379 * updated right screenshots surveyjs/private-tasks#379 * fixed compact toolbox width surveyjs/private-tasks#379 * remove old test surveyjs/private-tasks#379 * fix banner padding surveyjs/private-tasks#379 * fixed compact hovers surveyjs/private-tasks#379 * fixed flyout mode surveyjs/private-tasks#379 * fixed some tests surveyjs/private-tasks#379 * try to fix many tests with custom toolbox width surveyjs/private-tasks#379 * fixed padding and box-shadows surveyjs/private-tasks#379 * repair postcss tests Fixes surveyjs/private-tasks#379 * scrollbar on hover Fixes surveyjs/private-tasks#379 * fix keyboard interaction Fixes surveyjs/private-tasks#379 * add animations to hover Fixes surveyjs/private-tasks#379 * set toolbox width for tests Fixes surveyjs/private-tasks#379 * fix some visual tests Fixes surveyjs/private-tasks#379 * fix f-tests Fixes surveyjs/private-tasks#379 * fixed some visual tests surveyjs/private-tasks#379 * fixed f-test surveyjs/private-tasks#379 * fix some tests and update screenshots surveyjs/private-tasks#379 * update toolbox screenshots surveyjs/private-tasks#379 * update non-toolbox screenshots surveyjs/private-tasks#379 * remove mask of wrong size surveyjs/private-tasks#379 * fix v-tests Fixes surveyjs/private-tasks#379 * fix v-tests Fixes surveyjs/private-tasks#379 * angular Fixes surveyjs/private-tasks#379 * angular fix scrollbar markup Fixes surveyjs/private-tasks#379 * vue Fixes surveyjs/private-tasks#379 * angular tool classes Fixes surveyjs/private-tasks#379 * fix vue build Fixes surveyjs/private-tasks#379 * vue build surveyjs/private-tasks#379 * angular fix surveyjs/private-tasks#379 * fix vue styles Fixes surveyjs/private-tasks#379 * fix angular markup Fixes surveyjs/private-tasks#379 * fix css Fixes surveyjs/private-tasks#379 * remove delay for submenu show Fixes surveyjs/private-tasks#379 * knockout Fixes surveyjs/private-tasks#379 * fix compact toolbox click - angular, vue, ko Fixes surveyjs/private-tasks#379 * fix toolbox right test Fixes surveyjs/private-tasks#379 * fix toolbox hide separators on search Fixes surveyjs/private-tasks#379 * beak with a shadow Fixes surveyjs/private-tasks#379 * update screenshots Fixes surveyjs/private-tasks#379 * fixed ko category header Fixes surveyjs/private-tasks#379 * try to fix angular ResizeObserver error Fixes surveyjs/private-tasks#379 * disconnect ResizeObserver - fix angular tests Fixes surveyjs/private-tasks#379 * #5966 Toolbox animations Fixes #5966 * #5966 Toolbox animations Fixes #5966 * toolbox and separators #5966 * fixes to deafult theme #5966 * fixes to deafult theme flyout #5966 * animated separators #5966 * fixed toolbox search separator position in default theme #5966 * #5966 Toolbox animations -reneme classes Fixes #5966 * fix css build warning #5966 * #5966 switch off animations Fixes #5966 * fix toolbox width #5966 * change timing #5966 * fixed separators #5966 * add test and fix flyout class #5966 * #5966 Toolbox animations - add margin to compact toolbox Fixes #5966 * #5966 Toolbox animations - fix timings * #5966 Toolbox animations - fix rtl compact search * #5966 Toolbox animations - ko f-test * #5966 Toolbox animations - fixed f-tests Fixes #5966
- Loading branch information
Showing
13 changed files
with
272 additions
and
67 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
118 changes: 118 additions & 0 deletions
118
packages/survey-creator-core/src/components/toolbox/toolbox-animation.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.