feat(ui5-flexible-column-layout): animations can be disabled (#2027)

SAP · Jul 29, 2020 · 03d439b · 03d439b
1 parent 45de0f2
commit 03d439b
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 7 deletions.
diff --git a/packages/base/src/config/AnimationMode.js b/packages/base/src/config/AnimationMode.js
@@ -1,4 +1,5 @@
 import { getAnimationMode as getConfiguredAnimationMode } from "../InitialConfiguration.js";
+import AnimationMode from "../types/AnimationMode.js";
 
 let animationMode;
 
@@ -10,4 +11,13 @@ const getAnimationMode = () => {
 	return animationMode;
 };
 
-export { getAnimationMode }; // eslint-disable-line
+const setAnimationMode = newAnimationMode => {
+	if (Object.values(AnimationMode).includes(newAnimationMode)) {
+		animationMode = newAnimationMode;
+	}
+};
+
+export {
+	getAnimationMode,
+	setAnimationMode,
+};
diff --git a/packages/fiori/src/FlexibleColumnLayout.js b/packages/fiori/src/FlexibleColumnLayout.js
@@ -4,6 +4,8 @@ import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.j
 import Float from "@ui5/webcomponents-base/dist/types/Float.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
+import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js";
+import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
 import Button from "@ui5/webcomponents/dist/Button.js";
 import "@ui5/webcomponents-icons/dist/icons/slim-arrow-left.js";
 import "@ui5/webcomponents-icons/dist/icons/slim-arrow-right.js";
@@ -265,7 +267,7 @@ class FlexibleColumnLayout extends UI5Element {
 	}
 
 	static get ANIMATION_DURATION() {
-		return 560;
+		return getAnimationMode() !== AnimationMode.None ? 560 : 0;
 	}
 
 	onEnterDOM() {
@@ -485,18 +487,23 @@ class FlexibleColumnLayout extends UI5Element {
 	}
 
 	get classes() {
+		const hasAnimation = getAnimationMode() !== AnimationMode.None;
+
 		return {
 			columns: {
 				start: {
 					"ui5-fcl-column": true,
+					"ui5-fcl-column-animation": hasAnimation,
 					"ui5-fcl-column--start": true,
 				},
 				middle: {
 					"ui5-fcl-column": true,
+					"ui5-fcl-column-animation": hasAnimation,
 					"ui5-fcl-column--middle": true,
 				},
 				end: {
 					"ui5-fcl-column": true,
+					"ui5-fcl-column-animation": hasAnimation,
 					"ui5-fcl-column--end": true,
 				},
 			},

diff --git a/packages/fiori/src/themes/FlexibleColumnLayout.css b/packages/fiori/src/themes/FlexibleColumnLayout.css
@@ -15,11 +15,14 @@
 .ui5-fcl-column {
 	background: inherit;
 	box-sizing: border-box;
-	transition: width 560ms cubic-bezier(0.1, 0, 0.05, 1), visibility 560ms ease-in;
 	will-change: width;
 	overflow-y: auto;
 }
 
+.ui5-fcl-column-animation {
+    transition: width 560ms cubic-bezier(0.1, 0, 0.05, 1), visibility 560ms ease-in;
+}
+
 :host([_visible-columns="2"]) .ui5-fcl-column--start {
 	border-right: var(--_ui5_fcl_column_border);
 }
@@ -96,4 +99,4 @@
 .ui5-fcl-arrow:hover:before,
 .ui5-fcl-arrow:hover:after {
 	height: 7rem;
-}
+}
diff --git a/packages/fiori/test/specs/FCL.spec.js b/packages/fiori/test/specs/FCL.spec.js
@@ -3,7 +3,7 @@ const assert = require("chai").assert;
 
 
 describe("FlexibleColumnLayout Behavior", () => {
-	browser.url("http://localhost:8081/test-resources/pages/FCL.html");
+	browser.url("http://localhost:8081/test-resources/pages/FCL.html?sap-ui-animationMode=none");
 
 	it("tests Desktop size 1400px", () => {
 		// act

diff --git a/packages/main/bundle.es5.js b/packages/main/bundle.es5.js
@@ -3,7 +3,7 @@ import "@ui5/webcomponents-base/dist/features/browsersupport/IE11.js";
 
 import "./bundle.esm.js";
 
-import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
+import { getAnimationMode, setAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
 import { getTheme, setTheme } from "@ui5/webcomponents-base/dist/config/Theme.js";
 import { getLanguage, setLanguage } from "@ui5/webcomponents-base/dist/config/Language.js";
 import { setNoConflict } from "@ui5/webcomponents-base/dist/config/NoConflict.js";
@@ -14,6 +14,7 @@ import applyDirection from "@ui5/webcomponents-base/dist/locale/applyDirection.j
 import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 const configuration = {
 	getAnimationMode,
+	setAnimationMode,
 	getTheme,
 	setTheme,
 	getLanguage,

diff --git a/packages/main/bundle.esm.js b/packages/main/bundle.esm.js
@@ -88,7 +88,7 @@ window.isIE = isIE; // attached to the window object for testing purposes
 
 
 // Note: keep in sync with rollup.config value for IIFE
-import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
+import { getAnimationMode, setAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js";
 import { getTheme, setTheme } from "@ui5/webcomponents-base/dist/config/Theme.js";
 import { getLanguage, setLanguage } from "@ui5/webcomponents-base/dist/config/Language.js";
 import { setNoConflict } from "@ui5/webcomponents-base/dist/config/NoConflict.js";
@@ -100,6 +100,7 @@ import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.j
 window["sap-ui-webcomponents-bundle"] = {
 	configuration : {
 		getAnimationMode,
+		setAnimationMode,
 		getTheme,
 		setTheme,
 		getLanguage,

diff --git a/packages/theme-base/css-vars-usage.json b/packages/theme-base/css-vars-usage.json
@@ -126,6 +126,7 @@
   "--sapInformationBackground",
   "--sapInformationBorderColor",
   "--sapInformativeElementColor",
+  "--sapInformativeTextColor",
   "--sapLegend_CurrentDateTime",
   "--sapLegend_NonWorkingBackground",
   "--sapLegend_WorkingBackground",