@openui5/sap.m 1.100.0 → 1.102.1

package/src/sap/m/GenericTile.js

@@ -64,7 +64,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.100.0
+	 * @version 1.102.1
 	 * @since 1.34.0
 	 *
 	 * @public
@@ -211,7 +211,12 @@ sap.ui.define([
 				 * @experimental
 				 * @since 1.95
 				 */
-				valueColor: {type: "sap.m.ValueColor", group: "Appearance", defaultValue: "None"}
+				valueColor: {type: "sap.m.ValueColor", group: "Appearance", defaultValue: "None"},
+				/**
+				 * The load state of the tileIcon.
+				 * @experimental
+				 */
+				iconLoaded: {type: "boolean", group: "Misc", defaultValue: true}
 			},
 			defaultAggregation: "tileContent",
 			aggregations: {
@@ -424,13 +429,24 @@ sap.ui.define([
 	 */
 	GenericTile.prototype._initScopeContent = function (sTileClass) {
 		if (!this.getState || this.getState() !== LoadState.Disabled) {
-			this._oMoreIcon = this._oMoreIcon || IconPool.createControlByURI({
-				id: this.getId() + "-action-more",
-				size: "1rem",
-				useIconTooltip: false,
-				src: "sap-icon://overflow"
-			}).addStyleClass("sapMPointer").addStyleClass(sTileClass + "MoreIcon");
-
+			if (this.isA("sap.m.GenericTile") && this._isIconMode() && this.getFrameType() === FrameType.TwoByHalf){
+				// Acts Like an actual Button in Icon mode for TwoByHalf Tile
+				this._oMoreIcon = this._oMoreIcon || new Button({
+					id: this.getId() + "-action-more",
+					icon: "sap-icon://overflow",
+					type: "Transparent"
+				}).addStyleClass("sapMPointer").addStyleClass(sTileClass + "MoreIcon");
+				this._oMoreIcon.ontouchstart = function() {
+					this.removeFocus();
+				}.bind(this);
+			} else {
+				this._oMoreIcon = this._oMoreIcon || new Button({
+					id: this.getId() + "-action-more",
+					icon: "sap-icon://overflow",
+					type: "Unstyled"
+				}).addStyleClass("sapMPointer").addStyleClass(sTileClass + "MoreIcon");
+				this._oMoreIcon._bExcludeFromTabChain = true;
+			}
 			this._oRemoveButton = this._oRemoveButton || new Button({
 				id: this.getId() + "-action-remove",
 				icon: "sap-icon://decline",
@@ -458,6 +474,25 @@ sap.ui.define([
 		}
 	};
 
+	/**
+	Adding the  Classes for Action More Button in IconMode
+	@private
+	*/
+	GenericTile.prototype._addClassesForButton = function() {
+		this._oMoreIcon.getDomRef().classList.add("sapMBtn");
+		this._oMoreIcon.getDomRef("inner").classList.add("sapMBtnInner");
+		this._oMoreIcon.getDomRef("inner").classList.add("sapMBtnTransparent");
+	};
+
+	/**
+	Focus would not be visible while clicking on the tile
+	@private
+	*/
+	GenericTile.prototype.removeFocus = function() {
+		this.getDomRef().classList.add("sapMGTActionButtonPress");
+		this._oMoreIcon._activeButton();
+	};
+
 	GenericTile.prototype._isSmall = function() {
 		return this.getSizeBehavior() === TileSizeBehavior.Small || window.matchMedia("(max-width: 374px)").matches;
 	};
@@ -518,6 +553,11 @@ sap.ui.define([
 			this._sParentResizeListenerId = null;
 		}
 
+		//sets the extra width of 0.5rem when the grid container has 1rem gap for the TwoByxxxx tiles
+		if (this.getParent() && this.getParent().isA("sap.f.GridContainer")){
+			this._applyExtraWidth();
+		}
+
 		Device.media.detachHandler(this._handleMediaChange, this, DEVICE_SET);
 
 		if (this._$RootNode) {
@@ -527,7 +567,10 @@ sap.ui.define([
 		if (this.getFrameType() === FrameType.Auto) {
 			this.setProperty("frameType", FrameType.OneByOne, true);
 		}
-
+		//sets the maxlines for the appshortcut and systeminfo in different tile sizes
+		if (this.getMode() !== GenericTileMode.LineMode && (this.getAppShortcut() || this.getSystemInfo())) {
+			this._setMaxLines();
+		}
 		//Set Navigate Action Button Text - Only in Article Mode
 		if (this._isNavigateActionEnabled()) {
 			var sButtonText = this.getNavigationButtonText() ? this.getNavigationButtonText() : this._oRb.getText("ACTION_READ_MORE");
@@ -559,7 +602,6 @@ sap.ui.define([
 				}
 			}
 		}
-
 		// triggers update of all adjacent GenericTile LineMode siblings
 		// this is needed for their visual update if this tile's properties change causing it to expand or shrink
 		if (sMode === GenericTileMode.LineMode && this._bUpdateLineTileSiblings) {
@@ -577,9 +619,59 @@ sap.ui.define([
 			this._oNavigateAction.attachPress(this._navigateEventHandler, this);
 		}
 
+		//Removes hovering and focusable properties from the action more button in non icon mode tiles
+		if (this._oMoreIcon && this._oMoreIcon.getDomRef() && !this._isIconMode()){
+			this._oMoreIcon.getDomRef().firstChild.classList.remove("sapMBtnHoverable");
+			this._oMoreIcon.getDomRef().firstChild.classList.remove("sapMFocusable");
+		}
+
+		//Adds the classes for the action-more buton in IconMode for TwoByHalf Tile
+		if (this._isIconMode() && this.getFrameType() === FrameType.TwoByHalf && this._oMoreIcon.getDomRef()){
+			this._addClassesForButton();
+		}
+
+		//Adds Extra height to the TileContent when GenericTile is in ActionMode
+		if (this.getFrameType()  === FrameType.TwoByOne && this.getMode() === GenericTileMode.ActionMode) {
+			this._applyExtraHeight();
+		}
+
 		this.onDragComplete();
 	};
+	/**
+	 * Increases the height of the TileContent when the header-text has one line
+	 * @private
+	 */
+	GenericTile.prototype._applyExtraHeight = function(){
+		var iHeight = this.getDomRef("hdr-text").offsetHeight,
+			iLineHeight = parseInt(getComputedStyle(this.getDomRef("title")).lineHeight.slice(0,2)),
+			iHeaderLines = Math.ceil(iHeight / iLineHeight);
+		if (iHeaderLines === 1 && !this.getHeaderImage()) {
+			this.getDomRef("content").classList.add("sapMGTFtrMarginTop");
+		} else {
+			this.getDomRef("content").classList.remove("sapMGTFtrMarginTop");
+		}
+	};
+
+	GenericTile.prototype._setMaxLines = function() {
+		var sFrameType = this.getFrameType(),
+			iLines = sFrameType === FrameType.OneByOne || sFrameType === FrameType.TwoByHalf ? 1 : 2;
 
+		//Default maxLines
+		this._oAppShortcut.setProperty("maxLines", iLines, true);
+		this._oSystemInfo.setProperty("maxLines", iLines, true);
+
+		if (this.getFrameType() === FrameType.TwoByHalf) {
+			var bAppShortcutMore = this.getAppShortcut().length > 11,
+				bSystemInfoMore = this.getSystemInfo().length > 11;
+
+			// Line break to happen after 11 characters, App Shortcut to have more priority in display
+			if ((bAppShortcutMore && bSystemInfoMore) || bAppShortcutMore) {
+				this._oAppShortcut.setProperty("maxLines", 2, true);
+			} else if (bSystemInfoMore) {
+				this._oSystemInfo.setProperty("maxLines", 2, true);
+			}
+		}
+	};
 	/**
 	 * Update Hover Overlay, Generic tile to remove Active Press state of generic Tile.
 	 * @private
@@ -909,7 +1001,10 @@ sap.ui.define([
 	};
 
 	/* --- Event Handling --- */
-	GenericTile.prototype.ontouchstart = function () {
+	GenericTile.prototype.ontouchstart = function (event) {
+		if (event && event.target.id.indexOf("-action-more") === -1 && this.getDomRef()) {
+			this.getDomRef().classList.remove("sapMGTActionButtonPress"); // Sets focus on the tile when clicked other than the action-More Button in Icon mode
+		}
 		this.addStyleClass("sapMGTPressActive");
 		if (this.$("hover-overlay").length > 0) {
 			this.$("hover-overlay").addClass("sapMGTPressActive");
@@ -1582,9 +1677,16 @@ sap.ui.define([
 	 */
 	GenericTile.prototype._isIconMode = function () {
 		if (this.getMode() === GenericTileMode.IconMode
-			&& (this.getFrameType() === FrameType.OneByOne || this.getFrameType() === FrameType.TwoByHalf)
-			&& this.getBackgroundColor() && this.getTileIcon()){
-			return true;
+			&& (this.getFrameType() === FrameType.OneByOne || this.getFrameType() === FrameType.TwoByHalf)){
+				if (this.getTileIcon() && this.getBackgroundColor()) {
+					return true;
+				} else {
+					if (!this.getIconLoaded()) {
+						return true;
+					} else {
+						return false;
+					}
+				}
 		} else {
 			return false;
 		}
@@ -1595,10 +1697,24 @@ sap.ui.define([
 	 * @returns {boolean} - true if Navigate Action Button is enabled
 	 * @private
 	 */
-	GenericTile.prototype._isNavigateActionEnabled = function() {
+GenericTile.prototype._isNavigateActionEnabled = function() {
 		return this.getMode() === GenericTileMode.ArticleMode && this.getUrl() && this.getEnableNavigationButton();
 	};
 
+	/**
+	 * An extra width of 0.5rem would be applied when the gap is 1rem(16px) in the grid container for the TwoByOne and TwoByHalf tiles
+	 * @private
+	 */
+	GenericTile.prototype._applyExtraWidth = function() {
+		var	sGap = this.getParent().getActiveLayoutSettings().getGap(),
+			bisLargeTile = this.getFrameType() === FrameType.TwoByHalf || this.getFrameType() === FrameType.TwoByOne,
+			bisGap16px = sGap === "16px" || sGap === "1rem";
+		if (bisGap16px && bisLargeTile){
+			this.addStyleClass("sapMGTWidthForGridContainer");
+		} else if (!bisGap16px && this.hasStyleClass("sapMGTWidthForGridContainer")){
+			this.removeStyleClass("sapMGTWidthForGridContainer");
+		}
+	};
 	/**
 	 * Returns true if the GenericTile is in ActionMode and frameType is TwoByOne.
 	 * @returns {boolean} - true if the GenericTile is in ActionMode

package/src/sap/m/GenericTileLineModeRenderer.js

@@ -90,7 +90,16 @@ sap.ui.define(["sap/m/library", "sap/base/security/encodeCSS", "sap/ui/thirdpart
 		if (sScope ===  GenericTileScope.ActionMore) {
 				oRm.style("padding-right", "2.25rem");
 		}
+		if (sState !== LoadState.Disabled && sScope === GenericTileScope.ActionRemove) {
+			oRm.class("sapMGTAcionRemove");
+		}
 		oRm.class("sapMGTLineMode");
+		if (oControl.getSystemInfo() || oControl.getAppShortcut()) {
+			oRm.class("sapMGTInfoRendered");
+			if (!bIsScreenLarge){
+				oRm.class("sapMGTLineModeSmall");
+			}
+		}
 		this._writeDirection(oRm);
 		if (sTooltipText) {
 			oRm.attr("title", sTooltipText);
@@ -123,11 +132,21 @@ sap.ui.define(["sap/m/library", "sap/base/security/encodeCSS", "sap/ui/thirdpart
 			oRm.close("div");
 
 			this._renderFailedIcon(oRm, oControl);
+			oRm.openStart("span", oControl.getId() + "-lineWrapper");
+			oRm.class("sapMGTLineWrapper");
+			oRm.openEnd();
+			oRm.openStart("span", oControl.getId() + "-headerWrapper");
+			oRm.class("sapMGTHeaderWrapper");
+			oRm.openEnd();
 			this._renderHeader(oRm, oControl);
 			if (oControl.getSubheader()) {
 				this._renderSubheader(oRm, oControl);
 			}
-
+			oRm.close("span");
+			if (oControl.getSystemInfo() || oControl.getAppShortcut()) {
+				this._renderInfoContainer(oRm,oControl);
+			}
+			oRm.close("span");
 			oRm.openStart("div", oControl.getId() + "-endMarker");
 			oRm.class("sapMGTEndMarker");
 			oRm.openEnd();
@@ -144,6 +163,34 @@ sap.ui.define(["sap/m/library", "sap/base/security/encodeCSS", "sap/ui/thirdpart
 			oRm.openEnd();
 			oRm.close("div");
 
+		} else if (oControl.getSystemInfo() || oControl.getAppShortcut()){
+			oRm.openStart("div", oControl.getId() + "-touchArea");
+			oRm.class("sapMGTTouchArea");
+			oRm.openEnd();
+			this._renderFailedIcon(oRm, oControl);
+
+			oRm.openStart("span",oControl.getId() + "-lineModeHelpContainer");
+			oRm.class("sapMGTLineModeHelpContainer");
+			oRm.openEnd();
+			oRm.openStart("span", oControl.getId() + "-headerWrapper");
+			oRm.class("sapMGTHeaderWrapper");
+			oRm.openEnd();
+			this._renderHeader(oRm, oControl);
+
+			if (oControl.getSubheader()) {
+				this._renderSubheader(oRm, oControl);
+			}
+			oRm.close("span");
+			if (oControl.getSystemInfo() || oControl.getAppShortcut()) {
+				this._renderInfoContainer(oRm,oControl);
+			}
+			oRm.close("span"); //.sapMGTLineModeHelpContainer
+
+			if (oControl._isInActionScope()) {
+				this._renderActionsScope(oRm, oControl, bIsSingleAction);
+			}
+
+			oRm.close("div"); //.sapMGTTouchArea
 		} else {
 			oRm.openStart("div", oControl.getId() + "-touchArea");
 			oRm.class("sapMGTTouchArea");
@@ -175,13 +222,43 @@ sap.ui.define(["sap/m/library", "sap/base/security/encodeCSS", "sap/ui/thirdpart
 			oRm.close("span"); //.sapMGT
 		}
 	};
-
+	GenericTileLineModeRenderer._renderInfoContainer = function(oRm,oControl){
+				oRm.openStart("span",oControl.getId() + "-sapMGTTInfoWrapper");
+				oRm.class("sapMGTTInfoWrapper").openEnd();
+				oRm.openStart("span",oControl.getId() + "-sapMGTTInfo");
+				oRm.class("sapMGTTInfo");
+				if (!(oControl.getSystemInfo() && oControl.getAppShortcut())){
+					oRm.class("sapMGTInfoNotContainsSeperator");
+				}
+				oRm.openEnd();
+				if (oControl.getAppShortcut()) {
+					oRm.openStart("span", oControl.getId() + "-appShortcut");
+					oRm.class("sapMGTAppShortcutText").openEnd();
+					oRm.renderControl(oControl._oAppShortcut);
+					oRm.close("span");
+				}
+				if (oControl.getSystemInfo()) {
+					this._renderSystemInfo(oRm,oControl);
+				}
+				oRm.close("span");
+				oRm.close("span");
+	};
 	GenericTileLineModeRenderer._writeDirection = function(oRm) {
 		if (this._bRTL) {
 			oRm.attr("dir", "rtl");
 		}
 	};
-
+	GenericTileLineModeRenderer._renderSystemInfo = function(oRm,oControl){
+		oRm.openStart("span",oControl.getId() + "-systemInfoText");
+		this._writeDirection(oRm);
+		oRm.class("sapMGTSystemInfoText");
+		if (oControl.getSystemInfo() && oControl.getAppShortcut()){
+			oRm.class("sapMGTSeperatorPresent");
+		}
+		oRm.openEnd();
+		oRm.text(oControl._oSystemInfo.getText());
+		oRm.close("span");
+	};
 	GenericTileLineModeRenderer._renderFailedIcon = function(oRm, oControl) {
 		if (oControl.getState() === LoadState.Failed) {
 			if (oControl._isCompact()) {