Merge "[FEATURE] sap.m.IBadgeEnabler: Implement animations"

SAP · Jul 20, 2020 · 7daa6bc · 7daa6bc
2 parents e24a43b + b567436
commit 7daa6bc
Show file tree

Hide file tree

Showing 5 changed files with 166 additions and 34 deletions.
diff --git a/src/sap.m/src/sap/m/BadgeEnabler.js b/src/sap.m/src/sap/m/BadgeEnabler.js
@@ -48,18 +48,14 @@ sap.ui.define(
 		 */
 		var BadgeEnabler = function () {
 
-			// Ensure only Controls are enhanced
-			if (typeof this.isA !== "function" || !this.isA("sap.ui.core.Control")) {
-				Log.error("Badge enablement could be applied over controls only");
-				return;
-			}
-
 			// Attaching configuration and eventDelegate
-			this.initBadgeEnablement = function (oConfig) {
-				this._oBadgeConfig = oConfig;
-				this.addEventDelegate({
+			this.initBadgeEnablement = function (oConfig, customControl) {
+				var oDelegator = customControl ? customControl : this;
+				this._oBadgeConfig = oConfig || {};
+				oDelegator.addEventDelegate({
 					onAfterRendering: _renderBadgeDom
 				}, this);
+
 			};
 
 			//Selects specific DOM element, for the badge to be applied in
@@ -81,18 +77,9 @@ sap.ui.define(
 					return false;
 				}
 
-				this._oBadgeContainer = this._oBadgeConfig && this._oBadgeConfig.selector ?
-					_getContainerDomElement(this._oBadgeConfig.selector, this) :
-					this.$();
-				var _oNode = jQuery('<div></div>').addClass(IBADGE_CSS_CLASS + "Indicator");
-				_oNode.attr("id", this.getId() + IBADGE_CSS_CLASS);
-				_oNode.attr("data-badge", this._oBadgeCustomData.getValue());
-				_oNode.appendTo(this._oBadgeContainer);
-				this._oBadgeContainer.addClass(IBADGE_CSS_CLASS);
-
-				this._isBadgeAttached = true;
+				_createBadgeDom.call(this);
 
-				if (!this._oBadgeConfig) {
+				if (!Object.keys(this._oBadgeConfig).length) {
 					return this;
 				}
 
@@ -109,20 +96,49 @@ sap.ui.define(
 
 			//removing badge DOM element
 			function _removeBadgeDom() {
-				this._oBadgeContainer.removeClass(IBADGE_CSS_CLASS);
-				jQuery("#" + this.getId() + IBADGE_CSS_CLASS).remove();
+				var oBadgeElement = jQuery("#" + this.getId() + IBADGE_CSS_CLASS);
+
 				this._isBadgeAttached = false;
 
+				oBadgeElement.removeClass("sapMBadgeAnimationAdd");
+				oBadgeElement.width();
+				oBadgeElement.addClass("sapMBadgeAnimationRemove");
+				oBadgeElement.attr("data-badge", "");
 				return this;
 			}
 
+			//removing badge DOM element
+			function _createBadgeDom() {
+				var _oNode,
+					oBadgeElement = jQuery('#' + this.getId() + IBADGE_CSS_CLASS);
+				this._oBadgeContainer = this._oBadgeConfig && this._oBadgeConfig.selector ?
+					_getContainerDomElement(this._oBadgeConfig.selector, this) :
+					this.$();
+				if (oBadgeElement.length) {
+					oBadgeElement.remove();
+				}
+
+				_oNode = jQuery('<div></div>').addClass(IBADGE_CSS_CLASS + "Indicator");
+				_oNode.attr("id", this.getId() + IBADGE_CSS_CLASS);
+				_oNode.attr("data-badge", this._oBadgeCustomData.getValue());
+				_oNode.appendTo(this._oBadgeContainer);
+				_oNode.addClass("sapMBadgeAnimationAdd");
+
+				this._isBadgeAttached = true;
+				this._oBadgeContainer.addClass(IBADGE_CSS_CLASS);
+			}
+
 			//Manually updating the 'span', containing badge
 			this.updateBadge = function (sValue) {
+				var oBadgeElement = jQuery('#' + this.getId() + IBADGE_CSS_CLASS);
+				oBadgeElement.removeClass("sapMBadgeAnimationUpdate");
 				if (isValidValue(sValue)) {
 					if (this._isBadgeAttached) {
-						jQuery('#' + this.getId() + IBADGE_CSS_CLASS).attr("data-badge", sValue);
+						oBadgeElement.attr("data-badge", sValue);
+						oBadgeElement.width();
+						oBadgeElement.addClass("sapMBadgeAnimationUpdate");
 					} else {
-						_renderBadgeDom.call(this);
+						_createBadgeDom.call(this);
 
 					}
 				} else if (this._isBadgeAttached) {
@@ -175,10 +191,27 @@ sap.ui.define(
 				var oBadgeCustomData;
 				oBadgeCustomData = this._oBadgeCustomData;
 				this._oBadgeCustomData = null;
-				this.updateBadge();
+				this.updateBadge("");
 				return this.removeAggregation("customData", oBadgeCustomData, true);
 			};
 
+			this.setBadgeAccentColor = function (sValue) {
+				if (!this._oBadgeContainer) { return false; }
+
+				this._oBadgeContainer.removeClass(IBADGE_CSS_CLASS + this._oBadgeConfig.accentColor);
+
+				this._oBadgeContainer.addClass(IBADGE_CSS_CLASS + sValue);
+				this._oBadgeConfig.accentColor = sValue;
+			};
+
+			this.setBadgePosition = function (sValue) {
+				if (!this._oBadgeContainer) { return false; }
+
+				this._oBadgeContainer.removeClass(IBADGE_CSS_CLASS + this._oBadgeConfig.position);
+
+				this._oBadgeContainer.addClass(IBADGE_POSITION_CLASSES[sValue]);
+				this._oBadgeConfig.position = sValue;
+			};
 		};
 	return BadgeEnabler;
 });
diff --git a/src/sap.m/src/sap/m/themes/base/shared.less b/src/sap.m/src/sap/m/themes/base/shared.less
@@ -88,6 +88,30 @@
 
 /* Enables sap.m.IBadge implementations where possible */
 
+@keyframes sapMBadgeAppearPulse {
+	0% {transform: scale(.9); opacity:1;}
+	100% {transform: scale(2);opacity: 0;}
+}
+
+@keyframes sapMBadgeAppearBounce {
+	0% {transform: scale(1);}
+	50% {transform: scale(1.4); }
+	100% {transform: scale(1);}
+}
+
+@keyframes sapMBadgeDisappear {
+	0% {transform: scale(1);}
+	100% {transform: scale(0);}
+}
+
+@keyframes sapMBadgeUpdate {
+	0% {transform: scale(1);}
+
+	50% {transform: scale(1.2);}
+
+	100% {transform: scale(1);}
+}
+
 .sapMBadge {
 	overflow: visible;
 	position: relative;
@@ -101,24 +125,51 @@
 		padding-right: 0.125rem;
 		box-sizing: border-box;
 		height: 100%;
+		transform-origin: center center;
 		&:after {
-			content:  attr(data-badge);
-			padding: 0 0.3125rem;
 			border-radius: 1.125rem;
-			height: 1.125rem;
 			display: block;
 
+			padding: 0 0.25rem;
+			min-width: 0.5rem;
+			height: 1.125rem;
 			line-height: 1.125rem;
 			font-size: 0.6875rem;
 			font-family: @sapUiFontFamily;
+			text-align: center;
 
-			background-color: @sapAccentColor2;
-			border-color: @sapUiContentBadgeBackground;
-			color: @sapUiShellTextColor;
+			background-color: @sapUiContentBadgeBackground;
+			border: 0.0625rem solid @sapUiContentBadgeBackground;
+			color: @sapUiContentBadgeTextColor;
 
 			text-overflow: ellipsis;
 			white-space: nowrap;
 			overflow: hidden;
+
+			.badgeAccentColorMixin(10);
+		}
+		//We need one more pseudo-element, attached to the badge indicator, in order
+		//to show the pulse animation simultaneously with the bounce one.
+		&:before {
+			position: absolute;
+			border-radius: 1.125rem;
+			display: block;
+
+			padding: 0 0.3125rem;
+			min-width: 0.5rem;
+			height: 1.125rem;
+			line-height: 1.125rem;
+			font-size: 0.6875rem;
+			font-family: @sapUiFontFamily;
+
+			background-color: @sapUiContentBadgeBackground;
+			border: 0.0625rem solid @sapUiContentBadgeBackground;
+			color: @sapUiContentBadgeTextColor;
+
+			text-overflow: ellipsis;
+			overflow: hidden;
+			opacity:0;
+
 			.badgeAccentColorMixin(10);
 		}
 		.sapMBadgeTopLeft& {
@@ -138,6 +189,28 @@
 	}
 }
 
+ .sapMBadgeIndicator:not(.sapMBadgeAnimationRemove):after {
+	content: attr(data-badge);
+}
+
+.sapMBadgeAnimationAdd:after {
+	animation: sapMBadgeAppearBounce .1s;
+}
+.sapMBadgeAnimationAdd:before {
+	content: attr(data-badge);
+	animation: sapMBadgeAppearPulse .2s;
+}
+.sapMBadgeAnimationRemove:after {
+	animation: sapMBadgeDisappear .5s;
+	animation-fill-mode: forwards;
+}
+
+.sapMBadgeAnimationUpdate:after {
+	animation: sapMBadgeUpdate .1s;
+	animation-fill-mode: forwards;
+}
+
+
 .badgeAccentColorMixin(@n, @i: 1) when (@i =< @n) {
 	@value: 'sapAccentColor@{i}';
 

diff --git a/src/sap.m/test/sap/m/qunit/BadgeEnabler.qunit.js b/src/sap.m/test/sap/m/qunit/BadgeEnabler.qunit.js
@@ -40,9 +40,10 @@ sap.ui.define([
 
 	QUnit.module("API", {
 		beforeEach: function() {
-			this.oCustomControl = new MyCustomControl();
+			this.oCustomControl = new MyCustomControl({id: "CustomControl"});
 			this.oCustomControl.addCustomData(new BadgeCustomData({value: "10"}));
 			this.oCustomControl.placeAt('qunit-fixture');
+			Core.applyChanges();
 		},
 		afterEach: function () {
 			this.oCustomControl.destroy();
@@ -87,5 +88,14 @@ sap.ui.define([
 		//Assert
 		assert.equal(this.oCustomControl._isBadgeAttached, false, "Badge Disappears when badgeCustomData is detached");
 
+		this.oCustomControl.setBadgeAccentColor("AccentColor6");
+
+		assert.equal(this.oCustomControl._oBadgeConfig.accentColor, "AccentColor6", "API for configuration change works correctly - color");
+		assert.equal(this.oCustomControl._oBadgeContainer.hasClass("sapMBadgeAccentColor6"), true, "API for configuration change works correctly - color");
+
+		this.oCustomControl.setBadgePosition("topRight");
+
+		assert.equal(this.oCustomControl._oBadgeConfig.position, "topRight", "API for configuration change works correctly - position");
+		assert.equal(this.oCustomControl._oBadgeContainer.hasClass("sapMBadgeTopRight"), true, "API for configuration change works correctly - position");
 	});
 });
diff --git a/src/themelib_sap_fiori_3/src/sap/m/themes/sap_fiori_3_hcb/shared.less b/src/themelib_sap_fiori_3/src/sap/m/themes/sap_fiori_3_hcb/shared.less
@@ -1,3 +1,11 @@
 /* ============================================ */
 /* Shared CSS Quartz High Contrast Black theme  */
-/* ============================================ */
+/* ============================================ */
+
+.sapMBadge,
+.sapMBadge[class*=sapMBadgeAccentColor] {
+	.sapMBadgeIndicator:after {
+		background-color: @sapUiContentBadgeBackground ;
+		border-color: @sapUiGroupContentBorderColor;
+	}
+}
diff --git a/src/themelib_sap_fiori_3/src/sap/m/themes/sap_fiori_3_hcw/shared.less b/src/themelib_sap_fiori_3/src/sap/m/themes/sap_fiori_3_hcw/shared.less
@@ -1,3 +1,11 @@
 /* ============================================ */
 /* Shared CSS Quartz High Contrast White theme  */
-/* ============================================ */
+/* ============================================ */
+
+.sapMBadge,
+.sapMBadge[class*=sapMBadgeAccentColor] {
+	.sapMBadgeIndicator:after {
+		background-color: @sapUiContentBadgeBackground ;
+		border-color: @sapUiGroupContentBorderColor;
+	}
+}