@openui5/sap.ui.rta 1.94.0 → 1.97.0

package/src/sap/ui/rta/util/changeVisualization/ChangeVisualization.js

@@ -7,9 +7,9 @@
 sap.ui.define([
 	"sap/base/util/restricted/_difference",
 	"sap/base/util/deepEqual",
+	"sap/base/Log",
 	"sap/ui/core/util/reflection/JsControlTreeModifier",
 	"sap/ui/core/Control",
-	"sap/ui/core/Fragment",
 	"sap/ui/dt/OverlayRegistry",
 	"sap/ui/dt/ElementUtil",
 	"sap/ui/events/KeyCodes",
@@ -25,9 +25,9 @@ sap.ui.define([
 ], function(
 	difference,
 	deepEqual,
+	Log,
 	JsControlTreeModifier,
 	Control,
-	Fragment,
 	OverlayRegistry,
 	ElementUtil,
 	KeyCodes,
@@ -66,6 +66,15 @@ sap.ui.define([
 	};
 	var CATEGORY_ALL = "all";
 
+	var CATEGORY_ICONS = {
+		all: "sap-icon://show",
+		add: "sap-icon://add",
+		move: "sap-icon://move",
+		rename: "sap-icon://edit",
+		combinesplit: "sap-icon://combine",
+		remove: "sap-icon://less"
+	};
+
 	/**
 	 * @class
 	 * Root control for RTA change visualization.
@@ -74,9 +83,8 @@ sap.ui.define([
 	 * @alias sap.ui.rta.util.changeVisualization.ChangeVisualization
 	 * @author SAP SE
 	 * @since 1.84.0
-	 * @version 1.94.0
+	 * @version 1.97.0
 	 * @private
-	 * @ui5-restricted
 	 */
 	var ChangeVisualization = Control.extend("sap.ui.rta.util.changeVisualization.ChangeVisualization", {
 		metadata: {
@@ -95,12 +103,6 @@ sap.ui.define([
 					type: "boolean",
 					defaultValue: false
 				}
-			},
-			aggregations: {
-				popover: {
-					type: "sap.m.Popover",
-					multiple: false
-				}
 			}
 		},
 		constructor: function () {
@@ -114,13 +116,10 @@ sap.ui.define([
 				bundle: this._oTextBundle
 			}), "i18n");
 
-			this._oPopoverModel = new JSONModel();
-			this._oPopoverModel.setDefaultBindingMode("OneWay");
-
-			this._oChangeIndicatorModel = new JSONModel({
+			this._oChangeVisualizationModel = new JSONModel({
 				active: this.getIsActive()
 			});
-			this._oChangeIndicatorModel.setDefaultBindingMode("OneWay");
+			this._oChangeVisualizationModel.setDefaultBindingMode("OneWay");
 			this._sSelectedCommandCategory = "all";
 			this._bSetModeChanged = false;
 		}
@@ -143,8 +142,8 @@ sap.ui.define([
 		}
 		this.setProperty("isActive", bActiveState);
 
-		if (this._oChangeIndicatorModel) {
-			this._updateIndicatorModel({
+		if (this._oChangeVisualizationModel) {
+			this._updateVisualizationModel({
 				active: bActiveState
 			});
 		}
@@ -152,28 +151,37 @@ sap.ui.define([
 
 	ChangeVisualization.prototype.exit = function () {
 		this._oChangeIndicatorRegistry.destroy();
+		if (this.oRootOverlay) {
+			this.oRootOverlay.getDomRef().removeEventListener("click", onClick.bind(null, this.oMenuButton), {capture: true});
+		}
 	};
 
 	ChangeVisualization.prototype._reset = function () {
 		this._oChangeIndicatorRegistry.reset();
 	};
 
-	ChangeVisualization.prototype._updatePopoverModel = function () {
+	ChangeVisualization.prototype._updateVisualizationModelMenuData = function () {
 		var aCommandData = Object.keys(VALID_COMMANDS).map(function (sCommandCategoryName) {
+			var sTitle = this._getCommandCategoryLabel(sCommandCategoryName,
+				this._getChangesForCommandCategory(sCommandCategoryName).length);
 			return {
 				key: sCommandCategoryName,
 				count: this._getChangesForCommandCategory(sCommandCategoryName).length,
-				title: this._getCommandCategoryLabel(sCommandCategoryName)
+				title: sTitle,
+				icon: CATEGORY_ICONS[sCommandCategoryName]
 			};
 		}.bind(this));
 
 		aCommandData.unshift({
 			key: CATEGORY_ALL,
 			count: this._getChangesForCommandCategory(CATEGORY_ALL).length,
-			title: this._getCommandCategoryLabel(CATEGORY_ALL)
+			title: this._getCommandCategoryLabel(CATEGORY_ALL, this._getChangesForCommandCategory(CATEGORY_ALL).length),
+			icon: CATEGORY_ICONS[CATEGORY_ALL]
 		});
 
-		this._oPopoverModel.setData(aCommandData);
+		this._updateVisualizationModel({
+			commandCategories: aCommandData
+		});
 	};
 
 	ChangeVisualization.prototype._getChangesForCommandCategory = function (sCommandCategory) {
@@ -185,73 +193,36 @@ sap.ui.define([
 		});
 	};
 
-	ChangeVisualization.prototype._getCommandCategoryLabel = function (sCommandCategoryName) {
+	ChangeVisualization.prototype._getCommandCategoryLabel = function (sCommandCategoryName, iChangesCount) {
 		var sLabelKey = "TXT_CHANGEVISUALIZATION_OVERVIEW_" + sCommandCategoryName.toUpperCase();
-		return this._oTextBundle.getText(sLabelKey);
+		return this._oTextBundle.getText(sLabelKey, [iChangesCount]);
 	};
 
-	/**
-	 * Toggles the Popover containing the Change-List
-	 *
-	 * @param {event} oEvent - Event
-	 */
-	ChangeVisualization.prototype.togglePopover = function (oEvent) {
-		if (!this._oToolbarButton) {
-			// Event bubbled through the toolbar, get original source
-			this._oToolbarButton = sap.ui.getCore().byId(oEvent.getParameter("id"));
-		}
-		var oPopover = this.getPopover();
-		if (!(oPopover && oPopover.isOpen())) {
-			this._updateChangeRegistry().then(this._updatePopoverModel.bind(this));
-		}
-
-		if (!oPopover) {
-			Fragment.load({
-				name: "sap.ui.rta.util.changeVisualization.ChangesListPopover",
-				id: this._getComponent().createId("changeVisualization_changesListPopover"),
-				controller: this
-			})
-				.then(function(oPopover) {
-					this._oToolbarButton.addDependent(oPopover);
-					oPopover.setModel(this._oPopoverModel, "commandModel");
-					oPopover.openBy(this._oToolbarButton);
-					this.setPopover(oPopover);
-				}.bind(this));
-			return;
-		}
-
-		if (oPopover.isOpen()) {
-			oPopover.close();
-		} else {
-			oPopover.openBy(this._oToolbarButton);
-		}
+	ChangeVisualization.prototype._getCommandCategoryButton = function (sCommandCategoryName) {
+		var sButtonKey = "BTN_CHANGEVISUALIZATION_OVERVIEW_" + sCommandCategoryName.toUpperCase();
+		return this._oTextBundle.getText(sButtonKey);
 	};
 
 	/**
 	 * Sets the selected command category and visualizes all changes for the given category
 	 *
 	 * @param {event} oEvent - Event
+	 * @returns {promise} - Promise of category change
 	 */
 	ChangeVisualization.prototype.onCommandCategorySelection = function (oEvent) {
-		var sSelectedCommandCategory = oEvent.getSource().getBindingContext("commandModel").getObject().key;
-		//set the text of the toolbar button
-		var sTextkey = "BTN_CHANGEVISUALIZATION_OVERVIEW_" + sSelectedCommandCategory.toUpperCase();
-		this._oToolbarButton.setText(this._oTextBundle.getText(sTextkey));
-		this._selectCommandCategory(sSelectedCommandCategory);
+		var sSelectedCommandCategory = oEvent.getParameter("item").getKey();
+		return this._selectCommandCategory(sSelectedCommandCategory);
 	};
 
 	ChangeVisualization.prototype._selectCommandCategory = function (sSelectedCommandCategory) {
 		this._sSelectedCommandCategory = sSelectedCommandCategory;
-		var oPopover = this.getPopover();
-		if (oPopover && oPopover.isOpen()) {
-			oPopover.close();
-		}
 
 		var aRelevantChanges = this._getChangesForCommandCategory(sSelectedCommandCategory);
+		var sCommandCategoryText = this._getCommandCategoryButton(sSelectedCommandCategory);
 
-		this._updateIndicatorModel({
-			selectedChange: undefined,
-			commandCategory: sSelectedCommandCategory
+		this._updateVisualizationModel({
+			commandCategory: sSelectedCommandCategory,
+			commandCategoryText: sCommandCategoryText
 		});
 
 		return Promise.all(aRelevantChanges.map(function (oChange) {
@@ -366,6 +337,10 @@ sap.ui.define([
 					return oChangeHandler.getChangeVisualizationInfo(oChange, oAppComponent);
 				}
 				return undefined;
+			})
+			.catch(function(vErr) {
+				Log.error(vErr);
+				return undefined;
 			});
 		}
 
@@ -414,16 +389,21 @@ sap.ui.define([
 	};
 
 	ChangeVisualization.prototype._selectChange = function (sChangeId) {
-		this._updateIndicatorModel({
-			selectedChange: sChangeId
+		var aDependentElements = this._oChangeIndicatorRegistry.getChange(sChangeId).visualizationInfo.dependentElementIds;
+		aDependentElements.forEach(function(sElementId) {
+			var oOverlayDomRef = OverlayRegistry.getOverlay(sElementId).getDomRef();
+			oOverlayDomRef.scrollIntoViewIfNeeded();
+			oOverlayDomRef.classList.add("sapUiRtaChangeIndicatorDependent");
+			oOverlayDomRef.addEventListener("animationend", function () {
+				oOverlayDomRef.classList.remove("sapUiRtaChangeIndicatorDependent");
+			}, {once: true});
 		});
-		this._updateChangeIndicators();
 	};
 
-	ChangeVisualization.prototype._updateIndicatorModel = function (oData) {
-		this._oChangeIndicatorModel.setData(Object.assign(
+	ChangeVisualization.prototype._updateVisualizationModel = function (oData) {
+		this._oChangeVisualizationModel.setData(Object.assign(
 			{},
-			this._oChangeIndicatorModel.getData(),
+			this._oChangeVisualizationModel.getData(),
 			oData
 		));
 	};
@@ -456,10 +436,10 @@ sap.ui.define([
 		if (
 			!deepEqual(
 				oIndicators,
-				this._oChangeIndicatorModel.getData().content
+				this._oChangeVisualizationModel.getData().content
 			)
 		) {
-			this._updateIndicatorModel({
+			this._updateVisualizationModel({
 				content: oIndicators
 			});
 		}
@@ -469,23 +449,14 @@ sap.ui.define([
 		if (!Array.isArray(aChanges)) {
 			return aChanges;
 		}
-		var oRootData = this._oChangeIndicatorModel.getData();
+		var oRootData = this._oChangeVisualizationModel.getData();
 
 		return aChanges.filter(function (oChange) {
 			return (
-				// No change is selected and change is of proper category
-				(
-					!oRootData.selectedChange
-					&& !oChange.dependent
-					&& (
-						oRootData.commandCategory === 'all'
-						|| oRootData.commandCategory === oChange.commandCategory
-					)
-				)
-				// Dependent change for currently selected or currently selected
-				|| (
-					!!oRootData.selectedChange
-					&& oChange.id === oRootData.selectedChange
+				!oChange.dependent
+				&& (
+					oRootData.commandCategory === 'all'
+					|| oRootData.commandCategory === oChange.commandCategory
 				)
 			);
 		});
@@ -494,15 +465,6 @@ sap.ui.define([
 	ChangeVisualization.prototype._createChangeIndicator = function (oOverlay, sSelectorId) {
 		var oChangeIndicator = new ChangeIndicator({
 			changes: "{changes}",
-			mode: {
-				path: "changes",
-				formatter: function (aChanges) {
-					var sSelectedChange = this.getModel().getData().selectedChange;
-					return (sSelectedChange && (aChanges || []).some(function (oChange) {
-						return oChange.dependent;
-					})) ? "dependent" : "change";
-				}
-			},
 			posX: "{posX}",
 			posY: "{posY}",
 			visible: "{= ${/active} && (${changes} || []).length > 0}",
@@ -511,15 +473,13 @@ sap.ui.define([
 			selectChange: this.selectChange.bind(this),
 			keyPress: this._onIndicatorKeyPress.bind(this)
 		});
-
-		oChangeIndicator.setModel(this._oChangeIndicatorModel);
+		oChangeIndicator.setModel(this._oChangeVisualizationModel);
 		oChangeIndicator.bindElement("/content/" + sSelectorId);
 		oChangeIndicator.setModel(this.getModel("i18n"), "i18n");
 
 		// Temporarily place the indicator in the static area
 		// It will move itself to the correct overlay after rendering
 		oChangeIndicator.placeAt(sap.ui.getCore().getStaticAreaRef());
-
 		this._oChangeIndicatorRegistry.registerChangeIndicator(sSelectorId, oChangeIndicator);
 	};
 
@@ -574,23 +534,41 @@ sap.ui.define([
 		aVisibleIndicators[iIndexToSelect].focus();
 	};
 
+	function onClick(oMenuButton) {
+		oMenuButton.getMenu().close();
+	}
+
 	/**
 	 * Triggers the mode switch (on/off).
 	 *
 	 * @param {sap.ui.base.ManagedObject} oRootControl - Root control of the overlays
-	 * @private
+	 * @param {sap.ui.triggerModeChange.Toolbar} oToolbar - Toolbar of RTA
 	 */
-	ChangeVisualization.prototype.triggerModeChange = function(oRootControl) {
+	ChangeVisualization.prototype.triggerModeChange = function(oRootControl, oToolbar) {
+		this.oMenuButton = oToolbar.getControl("toggleChangeVisualizationMenuButton");
+		this.oRootOverlay = OverlayRegistry.getOverlay(oRootControl);
+
 		if (this.getIsActive()) {
 			this.setIsActive(false);
+			if (this.oRootOverlay) {
+				this.oRootOverlay.getDomRef().removeEventListener("click", onClick.bind(null, this.oMenuButton), {capture: true});
+			}
 			return;
 		}
+		if (this.oRootOverlay) {
+			this.oRootOverlay.getDomRef().addEventListener("click", onClick.bind(null, this.oMenuButton), {capture: true});
+		}
 		if (!this.getRootControlId()) {
 			this.setRootControlId(oRootControl);
 		}
 		this.setIsActive(true);
 		// show all change visualizations at startup
-		this._updateChangeRegistry().then(this._selectCommandCategory.bind(this, this._sSelectedCommandCategory));
+		this._updateChangeRegistry()
+			.then(this._selectCommandCategory.bind(this, this._sSelectedCommandCategory))
+			.then(function() {
+				this._updateVisualizationModelMenuData();
+				oToolbar.setModel(this._oChangeVisualizationModel, "visualizationModel");
+			}.bind(this));
 	};
 
 	return ChangeVisualization;

package/src/sap/ui/rta/util/changeVisualization/categories/MoveVisualization.js

@@ -0,0 +1,30 @@
+/*
+ * ! OpenUI5
+ * (c) Copyright 2009-2021 SAP SE or an SAP affiliate company.
+ * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
+ */
+
+sap.ui.define([
+], function(
+) {
+	"use strict";
+
+	var MoveVisualization = {};
+
+	/**
+	 * Creates a localized description and button text for move changes based on the provided
+	 * current element label.
+	 *
+	 * @param {object} mPayload - Change visualization payload from the change handler
+	 * @param {string} sLabel - Change handler label
+	 * @returns {object} Localized description text and button text
+	 */
+	MoveVisualization.getDescription = function (mPayload, sLabel) {
+		var oRtaResourceBundle = sap.ui.getCore().getLibraryResourceBundle("sap.ui.rta");
+		var sDescriptionText = oRtaResourceBundle.getText("TXT_CHANGEVISUALIZATION_CHANGE_MOVE", sLabel);
+		var sButtonText = oRtaResourceBundle.getText("BTN_CHANGEVISUALIZATION_SHOW_DEPENDENT_CONTAINER_MOVE");
+		return { descriptionText: sDescriptionText, buttonText: sButtonText};
+	};
+
+	return MoveVisualization;
+});

package/src/sap/ui/rta/util/changeVisualization/categories/RenameVisualization.js

@@ -19,20 +19,21 @@ sap.ui.define([
 	 * @param {string} [mPayload.originalLabel] - Label before the change was applied
 	 * @param {object} [mPayload.newLabel] - Label after the change was applied
 	 * @param {string} sFallbackLabel - New label as a fallback if change handler provides no info
-	 * @returns {string} Localized description
+	 * @returns {object} Localized description
 	 */
 	RenameVisualization.getDescription = function (mPayload, sFallbackLabel) {
 		var oRtaResourceBundle = sap.ui.getCore().getLibraryResourceBundle("sap.ui.rta");
 		var sKey = mPayload.originalLabel
 			? "TXT_CHANGEVISUALIZATION_CHANGE_RENAME_FROM_TO"
 			: "TXT_CHANGEVISUALIZATION_CHANGE_RENAME_TO";
-		return oRtaResourceBundle.getText(
+		var sDescriptionText = oRtaResourceBundle.getText(
 			sKey,
 			[
 				mPayload.newLabel || sFallbackLabel,
 				mPayload.originalLabel
 			]
 		);
+		return {descriptionText: sDescriptionText};
 	};
 
 	return RenameVisualization;

package/src/sap/ui/rta/util/changeVisualization/categories/SplitVisualization.js

@@ -0,0 +1,30 @@
+/*
+ * ! OpenUI5
+ * (c) Copyright 2009-2021 SAP SE or an SAP affiliate company.
+ * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
+ */
+
+sap.ui.define([
+], function(
+) {
+	"use strict";
+
+	var SplitVisualization = {};
+
+	/**
+	 * Creates a localized description and button text for split changes based on the provided
+	 * current element label
+	 *
+	 * @param {object} mPayload - Change visualization payload from the change handler
+	 * @param {string} sLabel - Change handler label
+	 * @returns {object} Localized description text and button text
+	 */
+	SplitVisualization.getDescription = function (mPayload, sLabel) {
+		var oRtaResourceBundle = sap.ui.getCore().getLibraryResourceBundle("sap.ui.rta");
+		var sDescriptionText = oRtaResourceBundle.getText("TXT_CHANGEVISUALIZATION_CHANGE_SPLIT", sLabel);
+		var sButtonText = oRtaResourceBundle.getText("BTN_CHANGEVISUALIZATION_SHOW_DEPENDENT_CONTAINER_SPLIT");
+		return { descriptionText: sDescriptionText, buttonText: sButtonText};
+	};
+
+	return SplitVisualization;
+});

package/src/sap/ui/rta/util/changeVisualization/categories/getVisualizationCategory.js

@@ -5,14 +5,20 @@
  */
 
 sap.ui.define([
-	"sap/ui/rta/util/changeVisualization/categories/RenameVisualization"
+	"sap/ui/rta/util/changeVisualization/categories/RenameVisualization",
+	"sap/ui/rta/util/changeVisualization/categories/MoveVisualization",
+	"sap/ui/rta/util/changeVisualization/categories/SplitVisualization"
 ], function(
-	RenameVisualization
+	RenameVisualization,
+	MoveVisualization,
+	SplitVisualization
 ) {
 	"use strict";
 
 	var mCategories = {
-		rename: RenameVisualization
+		rename: RenameVisualization,
+		move: MoveVisualization,
+		split: SplitVisualization
 	};
 
 	return function(sCategoryName) {

package/src/sap/ui/rta/util/validateFlexEnabled.js

@@ -25,6 +25,10 @@ sap.ui.define([
 ) {
 	"use strict";
 	return function (oRta) {
+		var mMessageBoxShow = {};
+		var aPendingOverlaysToValidate = [];
+		var oComponent = FlUtils.getAppComponentForControl(oRta.getRootControlInstance());
+
 		function _displayMessage(oRta, oComponent, sText, sIconType, sTitle) {
 			var sComponentId = oComponent.getId();
 			if (!mMessageBoxShow[sComponentId]) {
@@ -104,10 +108,6 @@ sap.ui.define([
 			}
 		}
 
-		var mMessageBoxShow = {};
-		var aPendingOverlaysToValidate = [];
-		var oComponent = FlUtils.getAppComponentForControl(oRta.getRootControlInstance());
-
 		oRta.attachEventOnce("stop", function () {
 			_setMessageBoxShow(oComponent.getId(), false);
 		});

package/ui5.yaml

@@ -1,5 +1,5 @@
 ---
-specVersion: "1.1"
+specVersion: "2.0"
 type: library
 metadata:
   name: sap.ui.rta
@@ -7,3 +7,6 @@ metadata:
    OpenUI5
     * (c) Copyright 2009-${currentYear} SAP SE or an SAP affiliate company.
     * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
+resources:
+  configuration:
+    propertiesFileSourceEncoding: ISO-8859-1

package/src/sap/ui/rta/assets/InPageStyles.css

@@ -1,34 +0,0 @@
-/**
-	Content of this file inserts automatically into the page when RTA starts
- */
-
-.sapUiRta .sapUiDtOverlaySelected.sapUiDtOverlayWithScrollBar.sapUiDtOverlayWithScrollBarVertical:after {
-	right: %scrollWidth%;
-}
-
-.sapUiRta .sapUiDtOverlaySelected.sapUiDtOverlayWithScrollBar.sapUiDtOverlayWithScrollBarHorizontal:after {
-	bottom: %scrollWidth%;
-}
-
-.sapUiRta .sapUiDtOverlaySelected.sapUiDtOverlayFocusable.sapUiDtOverlayWithScrollBar.sapUiDtOverlayWithScrollBarVertical:focus:before {
-	right: calc(%scrollWidth% + 2px);
-}
-.sapUiRta .sapUiDtOverlaySelected.sapUiDtOverlayFocusable.sapUiDtOverlayWithScrollBar.sapUiDtOverlayWithScrollBarHorizontal:focus:before {
-	bottom: calc(%scrollWidth% + 2px);
-}
-
-.sapUiRta .sapUiDtOverlaySelected.sapUiDtOverlayFocusable.sapUiDtOverlayWithScrollBar.sapUiDtOverlayWithScrollBarVertical:focus:before {
-	right: calc(%scrollWidth% + 2px);
-}
-.sapUiRta .sapUiDtOverlaySelected.sapUiDtOverlayFocusable.sapUiDtOverlayWithScrollBar.sapUiDtOverlayWithScrollBarHorizontal:focus:before {
-	bottom: calc(%scrollWidth% + 2px);
-}
-
-.sapUiRta .sapUiDtOverlayFocusable.sapUiDtOverlayWithScrollBar.sapUiDtOverlayWithScrollBarHorizontal:focus:before,
-.sapUiRta .sapUiRtaOverlayHover.sapUiDtOverlayWithScrollBar.sapUiDtOverlayWithScrollBarHorizontal:after {
-	bottom: %scrollWidth%;
-}
-.sapUiRta .sapUiDtOverlayFocusable.sapUiDtOverlayWithScrollBar.sapUiDtOverlayWithScrollBarVertical:focus:before,
-.sapUiRta .sapUiRtaOverlayHover.sapUiDtOverlayWithScrollBar.sapUiDtOverlayWithScrollBarVertical:after {
-	right: %scrollWidth%;
-}

package/src/sap/ui/rta/util/changeVisualization/ChangesListPopover.fragment.xml

@@ -1,23 +0,0 @@
-<core:FragmentDefinition
-	xmlns="sap.m"
-	xmlns:core="sap.ui.core"
->
-	<Popover
-		title="{i18n>TIT_CHANGEVISUALIZATION_CHANGES}"
-		placement="Bottom"
-		class="sapUiRtaPopover"
-	>
-		<List
-			id="sapUiRta_changesList"
-			items="{commandModel>/}"
-			class="sapUiRtaChangesList"
-		>
-			<StandardListItem
-				title="{commandModel>title}"
-				counter="{commandModel>count}"
-				type="{= ${commandModel>count} > 0 ? 'Active' : 'Inactive'}"
-				press=".onCommandCategorySelection"
-			/>
-		</List>
-	</Popover>
-</core:FragmentDefinition>