@openui5/sap.m 1.99.1 → 1.102.0

package/src/sap/m/NotificationListBase.js

@@ -9,6 +9,7 @@ sap.ui.define([
 		'sap/ui/core/Core',
 		'sap/ui/core/Element',
 		'sap/ui/Device',
+		'sap/ui/core/ResizeHandler',
 		'./ListItemBase',
 		'./Button',
 		'./ToolbarSeparator',
@@ -21,6 +22,7 @@ sap.ui.define([
 			  Core,
 			  Element,
 			  Device,
+			  ResizeHandler,
 			  ListItemBase,
 			  Button,
 			  ToolbarSeparator,
@@ -31,12 +33,18 @@ sap.ui.define([
 			  coreLibrary) {
 		'use strict';
 
+		var NLI_RANGE_SET = "NLIRangeSet";
+		Device.media.initRangeSet(NLI_RANGE_SET, [600], "px", ["S", "M"], true);
+
 		// shortcut for sap.ui.core.Priority
 		var Priority = coreLibrary.Priority;
 
 		// shortcut for sap.m.ButtonType
 		var ButtonType = library.ButtonType;
 
+		// shortcut for sap.m.ToolbarStyle
+		var ToolbarStyle = library.ToolbarStyle;
+
 		// shortcut for sap.m.OverflowToolbarPriority
 		var OverflowToolbarPriority = library.OverflowToolbarPriority;
 
@@ -78,7 +86,7 @@ sap.ui.define([
 		 * @extends sap.m.ListItemBase
 		 *
 		 * @author SAP SE
-		 * @version 1.99.1
+		 * @version 1.102.0
 		 *
 		 * @constructor
 		 * @public
@@ -183,8 +191,16 @@ sap.ui.define([
 			return '';
 		};
 
-		NotificationListBase.prototype.getButtons = function () {
+		/**
+		 * @override
+		 */
+		NotificationListBase.prototype.setProperty = function () {
+			this._resetButtonsOverflow();
 
+			return ListItemBase.prototype.setProperty.apply(this, arguments);
+		};
+
+		NotificationListBase.prototype.getButtons = function () {
 			var closeButton = this._getCloseButton(),
 				toolbarSeparator = this._getToolbarSeparator();
 
@@ -194,25 +210,25 @@ sap.ui.define([
 		};
 
 		NotificationListBase.prototype.addButton = function (oButton) {
-
 			var overflowToolbar = this._getOverflowToolbar(),
 				index = overflowToolbar.getContent().length;
 
-			if (Device.system.phone) {
+			if (this._getToolbarSeparator()) {
 				index -= 2;
 			}
 
 			overflowToolbar.insertContent(oButton, index);
 
+			this._resetButtonsOverflow();
 			this.invalidate();
 
 			return this;
 		};
 
 		NotificationListBase.prototype.insertButton = function (oButton, index) {
-
 			this._getOverflowToolbar().insertContent(oButton, index);
 
+			this._resetButtonsOverflow();
 			this.invalidate();
 
 			return this;
@@ -221,6 +237,7 @@ sap.ui.define([
 		NotificationListBase.prototype.removeButton = function (oButton) {
 			var result = this._getOverflowToolbar().removeContent(oButton.getId());
 
+			this._resetButtonsOverflow();
 			this.invalidate();
 
 			return result;
@@ -231,9 +248,10 @@ sap.ui.define([
 				buttons = this.getButtons();
 
 			buttons.forEach(function (button) {
-				overflowToolbar.removeContent(button.getId());
+				overflowToolbar.removeContent(button);
 			});
 
+			this._resetButtonsOverflow();
 			this.invalidate();
 
 			return this;
@@ -246,6 +264,7 @@ sap.ui.define([
 				button.destroy();
 			});
 
+			this._resetButtonsOverflow();
 			this.invalidate();
 
 			return this;
@@ -270,30 +289,13 @@ sap.ui.define([
 		};
 
 		NotificationListBase.prototype._getOverflowToolbar = function () {
-			var overflowToolbar = this.getAggregation('_overflowToolbar'),
-				toolbarSeparator,
-				oCloseButton;
+			var overflowToolbar = this.getAggregation('_overflowToolbar');
 
 			if (!overflowToolbar) {
-				overflowToolbar = new OverflowToolbar(this.getId() + '-overflowToolbar', {});
-
+				overflowToolbar = new OverflowToolbar(this.getId() + '-overflowToolbar', {
+					style: ToolbarStyle.Clear
+				});
 				this.setAggregation("_overflowToolbar", overflowToolbar, true);
-
-				if (Device.system.phone) {
-
-					oCloseButton = this._getCloseButton();
-					oCloseButton.setLayoutData(new OverflowToolbarLayoutData({
-						priority: OverflowToolbarPriority.AlwaysOverflow
-					}));
-
-					toolbarSeparator = new ToolbarSeparator();
-					toolbarSeparator.setLayoutData(new OverflowToolbarLayoutData({
-						priority: OverflowToolbarPriority.AlwaysOverflow
-					}));
-
-					overflowToolbar.addContent(toolbarSeparator);
-					overflowToolbar.addContent(oCloseButton);
-				}
 			}
 
 			return overflowToolbar;
@@ -306,67 +308,70 @@ sap.ui.define([
 				overflowToolbarContent,
 				closeButtonIndex;
 
-			if (Device.system.phone) {
-
-				overflowToolbar = this._getOverflowToolbar();
-				overflowToolbarContent = overflowToolbar.getContent();
+			overflowToolbar = this._getOverflowToolbar();
+			overflowToolbarContent = overflowToolbar.getContent();
 
-				if (overflowToolbar && overflowToolbarContent.length) {
-					closeButtonIndex = overflowToolbarContent.length - 1;
+			if (overflowToolbarContent.length) {
+				closeButtonIndex = overflowToolbarContent.length - 1;
+				closeButton = overflowToolbarContent[closeButtonIndex];
 
-					closeButton = overflowToolbarContent[closeButtonIndex];
+				if (closeButton.getId() !== this.getId() + "-closeButtonX") {
+					closeButton = null;
 				}
-			} else {
-				closeButton = this.getAggregation("_closeButton");
 			}
 
 			if (!closeButton) {
-				if (Device.system.phone) {
-					closeButton = new Button(this.getId() + '-closeButtonOverflow', {
-						text: this.isA("sap.m.NotificationListItem") ? closeText : closeAllText,
-						type: ButtonType.Default,
-						press: function () {
-							this.close();
-						}.bind(this)
-					});
-				} else {
-					closeButton = new Button(this.getId() + '-closeButtonX', {
-						icon: IconPool.getIconURI('decline'),
-						type: ButtonType.Transparent,
-						tooltip: this.isA("sap.m.NotificationListItem") ? closeText : closeAllText,
-						press: function () {
-							this.close();
-						}.bind(this)
-					});
-
-					this.setAggregation("_closeButton", closeButton);
-				}
+				closeButton = this.getAggregation("_closeButton");
 			}
 
 			return closeButton;
 		};
 
-		NotificationListBase.prototype._getToolbarSeparator = function () {
+		NotificationListBase.prototype._createCloseButton = function () {
+			var closeButton,
+				isNotificationListGroup = this.isA("sap.m.NotificationListGroup"),
+				isCollapsed = isNotificationListGroup && this.getCollapsed();
+
+			if (this._isSmallSize() && !isCollapsed) {
+				closeButton = new Button(this.getId() + '-closeButtonX', {
+					text: this.isA("sap.m.NotificationListItem") ? closeText : closeAllText,
+					type: ButtonType.Default,
+					press: function () {
+						this.close();
+					}.bind(this)
+				});
+			} else {
+				closeButton = new Button(this.getId() + '-closeButtonX', {
+					icon: IconPool.getIconURI('decline'),
+					type: ButtonType.Transparent,
+					tooltip: this.isA("sap.m.NotificationListItem") ? closeText : closeAllText,
+					press: function () {
+						this.close();
+					}.bind(this)
+				});
 
-			if (!Device.system.phone) {
-				return null;
+				this.setAggregation("_closeButton", closeButton);
 			}
 
+			return closeButton;
+		};
+
+		NotificationListBase.prototype._getToolbarSeparator = function () {
 			var toolbarSeparator,
 				overflowToolbar = this._getOverflowToolbar(),
 				overflowToolbarContent = overflowToolbar.getContent(),
 				toolbarSeparatorIndex;
 
-			if (overflowToolbar && overflowToolbarContent.length) {
+			if (overflowToolbarContent.length) {
 				toolbarSeparatorIndex = overflowToolbarContent.length - 2;
 				toolbarSeparator = overflowToolbarContent[toolbarSeparatorIndex];
 			}
 
-			return toolbarSeparator;
-		};
-
-		NotificationListBase.prototype.exit = function () {
+			if (toolbarSeparator && toolbarSeparator.isA("sap.m.ToolbarSeparator")) {
+				return toolbarSeparator;
+			}
 
+			return null;
 		};
 
 		NotificationListBase.prototype._hasActionButtons = function () {
@@ -374,14 +379,13 @@ sap.ui.define([
 		};
 
 		NotificationListBase.prototype._shouldRenderCloseButton = function () {
-			return !Device.system.phone && this.getShowCloseButton();
+			return !this._isSmallSize() && this.getShowCloseButton();
 		};
 
 		NotificationListBase.prototype._shouldRenderOverflowToolbar = function () {
-
 			var hasActionButtons = this._hasActionButtons();
 
-			if (Device.system.phone) {
+			if (this._isSmallSize()) {
 				return hasActionButtons || this.getShowCloseButton();
 			}
 
@@ -389,36 +393,108 @@ sap.ui.define([
 		};
 
 		NotificationListBase.prototype.onBeforeRendering = function () {
+			if (this._resizeListenerId) {
+				ResizeHandler.deregister(this._resizeListenerId);
+				this._resizeListenerId = null;
+			}
 
-			var buttons = this.getButtons(),
-				firstButtonOverflow,
-				button;
+			if (!this._sCurrentLayoutClassName) {
+				this._destroyCloseBtnAndSeparator();
+			}
+		};
+
+		NotificationListBase.prototype.onAfterRendering = function() {
+			if (this.getDomRef()) {
+				this._resizeListenerId = ResizeHandler.register(this.getDomRef(),  this._onResize.bind(this));
+			}
 
-			if (Device.system.phone) {
-				this._updatePhoneButtons();
+			this._onResize();
+		};
+
+		NotificationListBase.prototype.exit = function () {
+			if (this._resizeListenerId) {
+				ResizeHandler.deregister(this._resizeListenerId);
+				this._resizeListenerId = null;
+			}
+
+			this._sCurrentLayoutClassName = null;
+		};
+
+		NotificationListBase.prototype._onResize = function () {
+			var oDomRef = this.getDomRef(),
+				oMediaRange,
+				sClassName;
+
+			if (!oDomRef) {
+				return;
+			}
+
+			oMediaRange = Device.media.getCurrentRange(NLI_RANGE_SET, oDomRef.offsetWidth);
+			sClassName = "sapMNLIB-Layout" + oMediaRange.name;
+
+			if (this._sCurrentLayoutClassName === sClassName) {
 				return;
 			}
 
-			firstButtonOverflow = buttons.length > 1 ? OverflowToolbarPriority.AlwaysOverflow : OverflowToolbarPriority.NeverOverflow;
+			if (this._sCurrentLayoutClassName) {
+				this.removeStyleClass(this._sCurrentLayoutClassName);
+			}
+
+			this.addStyleClass(sClassName);
+
+			this._sCurrentLayoutClassName = sClassName;
+
+			this._arrangeButtons();
+		};
+
+		NotificationListBase.prototype._destroyCloseBtnAndSeparator = function () {
+			var closeButton = this._getCloseButton(),
+				toolbarSeparator = this._getToolbarSeparator();
+
+			if (closeButton) {
+				closeButton.destroy();
+			}
+
+			if (toolbarSeparator) {
+				toolbarSeparator.destroy();
+			}
+		};
+
+		NotificationListBase.prototype._arrangeButtons = function () {
+			this._destroyCloseBtnAndSeparator();
+
+			if (this._isSmallSize()) {
+				this._arrangeSSizeButtons();
+			} else {
+				this._arrangeMSizeButtons();
+			}
+		};
+
+		NotificationListBase.prototype._arrangeMSizeButtons = function () {
+			var button,
+				buttons = this.getButtons(),
+				buttonOverflowPriorityType = buttons.length > 1 ? OverflowToolbarPriority.AlwaysOverflow : OverflowToolbarPriority.NeverOverflow;
+
+			this._createCloseButton();
 
 			for (var i = 0; i < buttons.length; i++) {
 				button = buttons[i];
 
 				button.setLayoutData(new OverflowToolbarLayoutData({
-					priority: i === 0 ? firstButtonOverflow : OverflowToolbarPriority.AlwaysOverflow
+					priority: buttonOverflowPriorityType
 				}));
 			}
 		};
 
-		NotificationListBase.prototype._updatePhoneButtons = function () {
-
-			var closeButton = this._getCloseButton(),
+		NotificationListBase.prototype._arrangeSSizeButtons = function () {
+			var overflowToolbar = this._getOverflowToolbar(),
+				closeButton = this._createCloseButton(),
 				isNotificationListGroup = this.isA("sap.m.NotificationListGroup"),
 				buttonText = isNotificationListGroup ? closeAllText : closeText,
 				isCollapsed = isNotificationListGroup && this.getCollapsed(),
 				hasActionButtons = !isCollapsed && this._hasActionButtons(),
 				showCloseButton = this.getShowCloseButton(),
-				toolbarSeparator = this._getToolbarSeparator(),
+				toolbarSeparator = new ToolbarSeparator(),
 				priority;
 
 			this.getButtons().forEach(function (button) {
@@ -435,6 +511,17 @@ sap.ui.define([
 				}));
 			});
 
+			closeButton.setLayoutData(new OverflowToolbarLayoutData({
+				priority: OverflowToolbarPriority.AlwaysOverflow
+			}));
+
+			toolbarSeparator.setLayoutData(new OverflowToolbarLayoutData({
+				priority: OverflowToolbarPriority.AlwaysOverflow
+			}));
+
+			overflowToolbar.addContent(toolbarSeparator);
+			overflowToolbar.addContent(closeButton);
+
 			if (!showCloseButton) {
 				closeButton.setVisible(false);
 				toolbarSeparator.setVisible(false);
@@ -453,7 +540,6 @@ sap.ui.define([
 				}));
 
 				toolbarSeparator.setVisible(true);
-
 			} else {
 				closeButton.setText('');
 				closeButton.setTooltip(buttonText);
@@ -503,5 +589,15 @@ sap.ui.define([
 			return priorityIcon;
 		};
 
+		NotificationListBase.prototype._isSmallSize = function () {
+			return this._sCurrentLayoutClassName === "sapMNLIB-LayoutS";
+		};
+
+		NotificationListBase.prototype._resetButtonsOverflow = function () {
+			// with this line, the actions buttons will be re-arranged
+			// next time when the "_onResize" is called
+			this._sCurrentLayoutClassName = null;
+		};
+
 		return NotificationListBase;
 	});

package/src/sap/m/NotificationListGroup.js

@@ -66,7 +66,7 @@ function(
 	 * @extends sap.m.NotificationListBase
 	 *
 	 * @author SAP SE
-	 * @version 1.99.1
+	 * @version 1.102.0
 	 *
 	 * @constructor
 	 * @public
@@ -320,7 +320,6 @@ function(
 	 * @private
 	 */
 	NotificationListGroup.prototype.onBeforeRendering = function () {
-
 		NotificationListBase.prototype.onBeforeRendering.apply(this, arguments);
 
 		this._getCollapseButton().setVisible(this.getEnableCollapseButtonWhenEmpty() || this._getVisibleItemsCount() > 0);

package/src/sap/m/NotificationListGroupRenderer.js

@@ -105,30 +105,18 @@ sap.ui.define(["sap/ui/core/library", "sap/ui/core/InvisibleRenderer", "sap/ui/D
 			.openEnd();
 
 		rm.text(control.getTitle());
-		rm.close('div');
-
 		if (bShowItemsCounter) {
-			rm.openStart('div')
-				.class('sapMNLGroupCount')
-				.openEnd();
-
-			rm.text('(' + visibleItemsCount + ')');
-			rm.close('div');
+			rm.text(' (' + visibleItemsCount + ')');
 		}
-
-		// group header spacer
-		rm.openStart('div')
-			.class('sapMNLGroupHeaderSpacer')
-			.openEnd()
-			.close('div');
+		rm.close('div');
 
 		// actions
 		rm.openStart('div')
 			.class('sapMNLIItem')
 			.class('sapMNLIActions');
 
-		if (!control._shouldRenderOverflowToolbar() || (isCollapsed && !Device.system.phone)) {
-			rm.style('display', 'none');
+		if (!control._shouldRenderOverflowToolbar() || (isCollapsed && !control._isSmallSize())) {
+			rm.class("sapMNLIActionsHidden");
 		}
 
 		rm.openEnd();

package/src/sap/m/NotificationListItem.js

@@ -9,7 +9,6 @@ sap.ui.define([
 	'sap/ui/core/Core',
 	'./NotificationListBase',
 	'sap/ui/core/InvisibleText',
-	'sap/ui/core/ResizeHandler',
 	'sap/ui/core/library',
 	'sap/m/Link',
 	'sap/m/Avatar',
@@ -21,7 +20,6 @@ function(
 	Core,
 	NotificationListBase,
 	InvisibleText,
-	ResizeHandler,
 	coreLibrary,
 	Link,
 	Avatar,
@@ -66,7 +64,7 @@ function(
 	 * @extends sap.m.NotificationListBase
 	 *
 	 * @author SAP SE
-	 * @version 1.99.1
+	 * @version 1.102.0
 	 *
 	 * @constructor
 	 * @public
@@ -155,23 +153,16 @@ function(
 	 */
 	NotificationListItem.prototype.onBeforeRendering = function() {
 		NotificationListBase.prototype.onBeforeRendering.call(this);
-
-		if (this._resizeListenerId) {
-			ResizeHandler.deregister(this._resizeListenerId);
-			this._resizeListenerId = null;
-		}
 	};
 
 	NotificationListItem.prototype.onAfterRendering = function() {
+		NotificationListBase.prototype.onAfterRendering.call(this);
+
 		if (this.getHideShowMoreButton()) {
 			return;
 		}
 
 		this._updateShowMoreButtonVisibility();
-
-		if (this.getDomRef()) {
-			this._resizeListenerId = ResizeHandler.register(this.getDomRef(),  this._onResize.bind(this));
-		}
 	};
 
 	NotificationListItem.prototype.onkeydown = function(event) {
@@ -213,10 +204,6 @@ function(
 
 	NotificationListItem.prototype.exit = function() {
 		NotificationListBase.prototype.exit.apply(this, arguments);
-		if (this._resizeListenerId) {
-			ResizeHandler.deregister(this._resizeListenerId);
-			this._resizeListenerId = null;
-		}
 
 		if (this._footerIvisibleText) {
 			this._footerIvisibleText.destroy();
@@ -230,6 +217,8 @@ function(
 	};
 
 	NotificationListItem.prototype._onResize = function () {
+		NotificationListBase.prototype._onResize.apply(this, arguments);
+
 		this._updateShowMoreButtonVisibility();
 	};
 

package/src/sap/m/NotificationListItemRenderer.js

@@ -104,7 +104,6 @@ sap.ui.define(["sap/ui/core/library", "sap/ui/core/InvisibleRenderer"], function
 
 		// close button
 		if (control._shouldRenderCloseButton()) {
-
 			rm.openStart('div')
 				.class('sapMNLIItem')
 				.class('sapMNLICloseBtn')