From 0000e96eec34b6e5fb6ad4e558307039bd43f6c4 Mon Sep 17 00:00:00 2001 From: ilhan Date: Thu, 31 Oct 2019 20:20:58 +0200 Subject: [PATCH 1/4] feat: add animationMode configuration - Add animationMode to configure the degree of components animations. Available options are: 'full' (by default), 'basic', 'minimal', 'none'. - switch on/off the ui5-panel toggle animation based on the 'animationMode' --- packages/base/src/InitialConfiguration.js | 7 +++ packages/base/src/config/AnimationMode.js | 9 ++++ packages/base/src/types/AnimationModes.js | 7 +++ packages/main/bundle.esm.js | 2 + packages/main/src/Panel.hbs | 2 +- packages/main/src/Panel.js | 20 ++++++++ packages/main/src/themes/Panel.css | 2 +- packages/main/test/pages/AnimanitionOff.html | 52 ++++++++++++++++++++ 8 files changed, 99 insertions(+), 2 deletions(-) create mode 100644 packages/base/src/config/AnimationMode.js create mode 100644 packages/base/src/types/AnimationModes.js create mode 100644 packages/main/test/pages/AnimanitionOff.html diff --git a/packages/base/src/InitialConfiguration.js b/packages/base/src/InitialConfiguration.js index d8f5e713357a..bfc6e7dc80f7 100644 --- a/packages/base/src/InitialConfiguration.js +++ b/packages/base/src/InitialConfiguration.js @@ -1,6 +1,7 @@ let initialized = false; const initialConfig = { + animationMode: "full", theme: "sap_fiori_3", rtl: null, language: null, @@ -11,6 +12,11 @@ const initialConfig = { }; /* General settings */ +const getAnimationMode = () => { + initConfiguration(); + return initialConfig.animationMode; +}; + const getTheme = () => { initConfiguration(); return initialConfig.theme; @@ -109,6 +115,7 @@ const initConfiguration = () => { }; export { + getAnimationMode, getTheme, getRTL, getLanguage, diff --git a/packages/base/src/config/AnimationMode.js b/packages/base/src/config/AnimationMode.js new file mode 100644 index 000000000000..18837bf029ce --- /dev/null +++ b/packages/base/src/config/AnimationMode.js @@ -0,0 +1,9 @@ +import { getAnimationMode as getConfiguredAnimationMode } from "../InitialConfiguration.js"; + +const animationMode = getConfiguredAnimationMode(); + +const getAnimationMode = () => { + return animationMode; +}; + +export { getAnimationMode }; // eslint-disable-line diff --git a/packages/base/src/types/AnimationModes.js b/packages/base/src/types/AnimationModes.js new file mode 100644 index 000000000000..75edd847a567 --- /dev/null +++ b/packages/base/src/types/AnimationModes.js @@ -0,0 +1,7 @@ +const AnimationModes = { + Full: "full", + Basic: "basic", + Minimal: "minimal", + None: "none", +}; +export default AnimationModes; diff --git a/packages/main/bundle.esm.js b/packages/main/bundle.esm.js index 19fc4e293189..0bcf08b1ce60 100644 --- a/packages/main/bundle.esm.js +++ b/packages/main/bundle.esm.js @@ -63,6 +63,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 { getTheme, setTheme } from "@ui5/webcomponents-base/dist/config/Theme.js"; import { setNoConflict } from "@ui5/webcomponents-base/dist/config/NoConflict.js"; import { getCompactSize } from "@ui5/webcomponents-base/dist/config/CompactSize.js"; @@ -70,6 +71,7 @@ import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js"; import { getRegisteredNames as getIconNames } from "@ui5/webcomponents-base/dist/SVGIconRegistry.js" window["sap-ui-webcomponents-main-bundle"] = { configuration : { + getAnimationMode, getTheme, setTheme, setNoConflict, diff --git a/packages/main/src/Panel.hbs b/packages/main/src/Panel.hbs index 36f797771c9c..86812b1c4ff3 100644 --- a/packages/main/src/Panel.hbs +++ b/packages/main/src/Panel.hbs @@ -19,7 +19,7 @@ > + + + + + + + Animations off + + + + + + + + + + + + + + This is a demo how to use the "expand" event.
+ Some short text. + + + +
+ Expandable but not expanded +
+ This is a demo how to use the "expand" event.
+ Some short text. +
+ + + + + From bf2f8179ae59c259287f4b95afa99a10780412d5 Mon Sep 17 00:00:00 2001 From: ilhan Date: Mon, 11 Nov 2019 16:25:22 +0200 Subject: [PATCH 2/4] add public doc --- docs/Configuration.md | 12 ++++++++++++ .../types/{AnimationModes.js => AnimationMode.js} | 4 ++-- packages/main/src/Panel.js | 4 ++-- 3 files changed, 16 insertions(+), 4 deletions(-) rename packages/base/src/types/{AnimationModes.js => AnimationMode.js} (55%) diff --git a/docs/Configuration.md b/docs/Configuration.md index f25f2667204f..b0a07092c452 100644 --- a/docs/Configuration.md +++ b/docs/Configuration.md @@ -11,6 +11,7 @@ theme | sap_fiori_3, sap_belize, sap_belize_hcb | sap_fiori_3 | language | en, de, es, etc... | en | Language to be used for translatable texts [RTL](#rtl) | true, false | false | When true, sets global text direction to right-to-left compactSize | true, false | false | When set, enforces compact density (smaller margins/paddings) +[animationMode](#animationMode) | full, basic, minimal, none | false | Defines the animation effects of the web components calendarType | Gregorian, Islamic, Buddhist, Japanese, Persian | Gregorian | Default calendar type for date-related web components [noConflict](#noConflict) | true, false | Object | false | When set to true, all events will be fired with a "ui5-" prefix only [formatSettings](#formatSettings)| See the [Format settings](#formatSettings) section below | Empty object | Allows to override locale-specific configuration @@ -22,6 +23,17 @@ When the `rtl` setting is set to `true`, UI5 Web Components will adjust their st However, you should also set the HTML attribute `dir` to `rtl` on the `body` or `html` or any other relevant region of your application so that the rest of your application is also affected. + +###Animation Mode + +Animation modes allow to specify different animation scenarios or levels. + - When `full` - all animations run unrestricted. + - When `basic` - more light-weight set of animations would run. + - When `minimal` - animations of fundamental functionality are included. + - When `none` - all animations are completely suspended. + +*Please note that each component determines which animations would run for a specific mode.* + ### No conflict diff --git a/packages/base/src/types/AnimationModes.js b/packages/base/src/types/AnimationMode.js similarity index 55% rename from packages/base/src/types/AnimationModes.js rename to packages/base/src/types/AnimationMode.js index 75edd847a567..f3f2fb08c651 100644 --- a/packages/base/src/types/AnimationModes.js +++ b/packages/base/src/types/AnimationMode.js @@ -1,7 +1,7 @@ -const AnimationModes = { +const AnimationMode = { Full: "full", Basic: "basic", Minimal: "minimal", None: "none", }; -export default AnimationModes; +export default AnimationMode; diff --git a/packages/main/src/Panel.js b/packages/main/src/Panel.js index 7942beadc5a4..0674932ec562 100644 --- a/packages/main/src/Panel.js +++ b/packages/main/src/Panel.js @@ -3,7 +3,7 @@ import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js"; import slideDown from "@ui5/webcomponents-base/dist/animations/slideDown.js"; import slideUp from "@ui5/webcomponents-base/dist/animations/slideUp.js"; import { isSpace, isEnter } from "@ui5/webcomponents-base/dist/events/PseudoEvents.js"; -import AnimationModes from "@ui5/webcomponents-base/dist/types/AnimationModes.js"; +import AnimationMode from "@ui5/webcomponents-base/dist/types/AnimationMode.js"; import { getAnimationMode } from "@ui5/webcomponents-base/dist/config/AnimationMode.js"; import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js"; import Button from "./Button.js"; @@ -226,7 +226,7 @@ class Panel extends UI5Element { } shouldAnimate() { - return getAnimationMode() !== AnimationModes.None; + return getAnimationMode() !== AnimationMode.None; } _headerClick(event) { From 733dd2fee07b821b74c91d45a317cbc0c4956659 Mon Sep 17 00:00:00 2001 From: ilhan Date: Mon, 11 Nov 2019 16:35:22 +0200 Subject: [PATCH 3/4] update doc --- docs/Configuration.md | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/docs/Configuration.md b/docs/Configuration.md index b0a07092c452..e9a12fac5d07 100644 --- a/docs/Configuration.md +++ b/docs/Configuration.md @@ -11,7 +11,7 @@ theme | sap_fiori_3, sap_belize, sap_belize_hcb | sap_fiori_3 | language | en, de, es, etc... | en | Language to be used for translatable texts [RTL](#rtl) | true, false | false | When true, sets global text direction to right-to-left compactSize | true, false | false | When set, enforces compact density (smaller margins/paddings) -[animationMode](#animationMode) | full, basic, minimal, none | false | Defines the animation effects of the web components +[animationMode](#animationMode) | full, basic, minimal, none | false | Defines different animation scenarios or levels calendarType | Gregorian, Islamic, Buddhist, Japanese, Persian | Gregorian | Default calendar type for date-related web components [noConflict](#noConflict) | true, false | Object | false | When set to true, all events will be fired with a "ui5-" prefix only [formatSettings](#formatSettings)| See the [Format settings](#formatSettings) section below | Empty object | Allows to override locale-specific configuration @@ -27,10 +27,10 @@ so that the rest of your application is also affected. ###Animation Mode Animation modes allow to specify different animation scenarios or levels. - - When `full` - all animations run unrestricted. - - When `basic` - more light-weight set of animations would run. - - When `minimal` - animations of fundamental functionality are included. - - When `none` - all animations are completely suspended. + - When `full` all animations run unrestricted. + - When `basic` more light-weight set of animations would run. + - When `minimal` animations of fundamental functionality are included. + - When `none` all animations are completely suspended. *Please note that each component determines which animations would run for a specific mode.* @@ -112,6 +112,7 @@ import { getTheme, setTheme } from "@ui5/webcomponents-base/dist/config/Theme.js import { getNoConflict, setNoConflict } from "@ui5/webcomponents-base/dist/config/NoConflict.js"; import { getCompactSize } from "@ui5/webcomponents-base/dist/config/CompactSize.js"; import { getRTL } from "@ui5/webcomponents-base/dist/config/RTL.js"; +import { getCompactSize } from "@ui5/webcomponents-base/dist/config/AnimationMode.js"; import { getLanguage } from "@ui5/webcomponents-base/dist/config/Language.js"; import { getCalendarType } from "@ui5/webcomponents-base/dist/config/CalendarType.js"; import { getFirstDayOfWeek } from "@ui5/webcomponents-base/dist/config/FormatSettings.js"; From 9651e0e00ad24c6a6420135def70a0fd33c348ff Mon Sep 17 00:00:00 2001 From: ilhan Date: Mon, 11 Nov 2019 16:45:23 +0200 Subject: [PATCH 4/4] update doc --- docs/Configuration.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/Configuration.md b/docs/Configuration.md index e9a12fac5d07..c02e5079b319 100644 --- a/docs/Configuration.md +++ b/docs/Configuration.md @@ -11,7 +11,7 @@ theme | sap_fiori_3, sap_belize, sap_belize_hcb | sap_fiori_3 | language | en, de, es, etc... | en | Language to be used for translatable texts [RTL](#rtl) | true, false | false | When true, sets global text direction to right-to-left compactSize | true, false | false | When set, enforces compact density (smaller margins/paddings) -[animationMode](#animationMode) | full, basic, minimal, none | false | Defines different animation scenarios or levels +[animationMode](#animationMode) | full, basic, minimal, none | full | Defines different animation scenarios or levels calendarType | Gregorian, Islamic, Buddhist, Japanese, Persian | Gregorian | Default calendar type for date-related web components [noConflict](#noConflict) | true, false | Object | false | When set to true, all events will be fired with a "ui5-" prefix only [formatSettings](#formatSettings)| See the [Format settings](#formatSettings) section below | Empty object | Allows to override locale-specific configuration