@openui5/sap.ui.rta 1.98.0 → 1.99.0

package/src/sap/ui/rta/themes/base/ChangeVisualization.less

@@ -1,50 +1,59 @@
 /******************************************************************
 	Style of the RTA Change Visualization - base theme
 *******************************************************************/
-@_sap_ui_rta_ChangeVisualization_ChangeIndicatorColor: rgba(131, 201, 233, 0.75);
-@_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorFocus: #1c678a;
-@_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorHover: rgba(14, 138, 195, 0.75);
-@_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorSolid: rgb(131, 201, 233);
-@_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorSolidBG: white;
-@_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorSolidHover: #0f648b;
-@_sap_ui_rta_ChangeVisualization_DependentIndicatorColor: rgba(219,149,51,0.75);
-@_sap_ui_rta_ChangeVisualization_DependentIndicatorColorTransparent: rgba(219,149,51,0);
-@_sap_ui_rta_ChangeVisualization_DependentIndicatorColorFocus: #a67026;
-@_sap_ui_rta_ChangeVisualization_DependentIndicatorColorSolid: rgb(219, 149, 51);
-@_sap_ui_rta_ChangeVisualization_DependentIndicatorColorSolidHover: #b67a26;
-@_sap_ui_rta_ChangeVisualization_ChangeIndicatorTextColor: #1c678a;
+@_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorLight: @sapUiChartPaletteSequentialHue1Light1;
+@_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorMedium: @sapUiChartPaletteSequentialHue1Dark1;
+@_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorDark: @sapUiChartPaletteSequentialHue11Dark2;
+@_sap_ui_rta_ChangeVisualization_DependentIndicatorColorTransparent: @sapUiGroupTitleBackground;
 
 .sapUiRtaChangeIndicator{
-	border-radius: 25px;
-	z-index: 1000;
+	height: 0.8rem;
+	width: 0.8rem;
 	position: relative;
+	border-radius: 50%;
+	margin-top: 0.25rem;
+	margin-left: 0.25rem;
+	transition: width 0.3s, height 0.3s, box-shadow 0.3s;
 	cursor: pointer;
 }
 
-.sapUiRtaChangeIndicatorChange{
-	border: 1px solid @_sap_ui_rta_ChangeVisualization_ChangeIndicatorColor;
-	background: white;
-	background: radial-gradient(circle, transparent 41%, @_sap_ui_rta_ChangeVisualization_ChangeIndicatorColor 72%, @_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorSolid 100%);
+.sapUiRtaChangeIndicator:focus{
+	outline: 0;
+}
 
-	&:focus{
-		border: 1px solid @_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorFocus;
-		outline: none;
-	}
+.sapUiRtaChangeIndicatorColorLight{
+	background-color: @_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorLight;
+	opacity: 0.6;
+}
 
-	&:hover{
-		background: radial-gradient(circle, transparent 41%, @_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorHover 62%, @_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorSolidHover 100%);
+.sapUiRtaChangeIndicatorColorMedium{
+	background-color: @_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorMedium;
+	opacity: 0.75;
+}
 
-		.sapUiRtaChangeIndicatorText{
-			color:white;
-		}
-	}
+.sapUiRtaChangeIndicatorColorDark{
+	background-color: @_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorDark;
+	opacity: 0.75;
+}
+
+.sapUiRtaChangeIndicatorVerticallyCentered{
+	top: 50%;
+	transform: translateY(-50%);
+	margin-top: 0;
+}
+
+.sapUiRtaHover{
+	height: 0.9rem;
+	width: 0.9rem;
+	box-shadow: 0 0 0.25rem @_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorDark;
 }
 
 .sapUiRtaChangeIndicatorDependent{
 	height: 100%;
-	width: 100%;
+	width: auto;
+	display: block;
 	position: absolute;
-	outline: 3px solid @_sap_ui_rta_ChangeVisualization_DependentIndicatorColor;
+	outline: 3px solid @_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorDark;
 	outline-offset: -3px;
 	box-shadow: @_sap_ui_rta_Overlay_BoxShadow;
 	animation: fadeOut linear 1.5s;
@@ -52,11 +61,11 @@
 
 	@keyframes fadeOut {
 		0% {
-			outline: 3px solid @_sap_ui_rta_ChangeVisualization_DependentIndicatorColor;
+			outline: 3px solid @_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorDark;
 			outline-offset: -3px;
 		}
 		66%{
-			outline: 3px solid @_sap_ui_rta_ChangeVisualization_DependentIndicatorColor;
+			outline: 3px solid @_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorDark;
 			outline-offset: -3px;
 		}
 		100% {
@@ -67,28 +76,8 @@
 	}
 }
 
-.sapUiRtaChangeIndicatorText{
-	top: 0;
-	left: 0;
-	position: absolute;
-	width: 50%;
-	height: 50%;
-	border-radius: 50%;
-	background: @_sap_ui_rta_ChangeVisualization_ChangeIndicatorColorSolid;
-	color: black;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	opacity: 0.8;
-	cursor: pointer;
-}
-
 .sapUiRtaChangeIndicatorHovered {
-	-webkit-transition: background 0.1s cubic-bezier(1,.01,1,0);
-	-moz-transition: background 0.1s cubic-bezier(1,.01,1,0);
-	-o-transition: background 0.1s cubic-bezier(1,.01,1,0);
-	transition: background 0.1s cubic-bezier(1,.01,1,0);
-
+	cursor: pointer!important;
 	&:after {
 		content: " ";
 		border: 0.0625rem solid @_sap_ui_rta_Overlay_HoverBorder!important; //1px

package/src/sap/ui/rta/toolbar/Adaptation.js

@@ -39,7 +39,7 @@ function(
 	 * @extends sap.ui.rta.toolbar.Base
 	 *
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.99.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/rta/toolbar/Base.js

@@ -25,7 +25,7 @@ sap.ui.define([
 	 * @extends sap.m.HBox
 	 *
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.99.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/rta/toolbar/Fiori.js

@@ -32,7 +32,7 @@ function(
 	 * @extends sap.ui.rta.toolbar.Adaptation
 	 *
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.99.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/rta/toolbar/FioriLike.js

@@ -20,7 +20,7 @@ function(
 	 * @extends sap.ui.rta.toolbar.Adaptation
 	 *
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.99.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/rta/toolbar/OverflowToolbarButton.js

@@ -23,7 +23,7 @@ sap.ui.define([
 	 * @extends sap.m.OverflowToolbarButton
 	 *
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.99.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/rta/toolbar/Personalization.js

@@ -22,7 +22,7 @@ function(
 	 * @extends sap.ui.rta.toolbar.Base
 	 *
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.99.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/rta/toolbar/Standalone.js

@@ -20,7 +20,7 @@ function(
 	 * @extends sap.ui.rta.toolbar.Adaptation
 	 *
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.99.0
 	 *
 	 * @constructor
 	 * @private

package/src/sap/ui/rta/toolbar/translation/Translation.js

@@ -4,6 +4,8 @@
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
  */
 
+/* global FormData */
+
 sap.ui.define([
 	"sap/ui/base/ManagedObject",
 	"sap/ui/core/Fragment",
@@ -15,8 +17,7 @@ sap.ui.define([
 	"sap/ui/fl/write/api/TranslationAPI",
 	"sap/ui/fl/Layer",
 	"sap/ui/core/util/File"
-],
-function(
+], function(
 	ManagedObject,
 	Fragment,
 	Utils,
@@ -30,6 +31,34 @@ function(
 ) {
 	"use strict";
 
+	/**
+	 * Controller for the <code>sap.ui.rta.toolbar.translation.Translation</code> controls.
+	 * Contains implementation of translation functionality.
+	 *
+	 * @class
+	 *
+	 * @author SAP SE
+	 * @version 1.99.0
+	 *
+	 * @constructor
+	 * @private
+	 * @since 1.93
+	 * @alias sap.ui.rta.toolbar.translation.Translation
+	 */
+	var Translation = ManagedObject.extend("sap.ui.rta.toolbar.translation.Translation", {
+		metadata: {
+			properties: {
+				toolbar: {
+					type: "sap.ui.rta.toolbar.Base"
+				}
+			}
+		},
+		constructor: function () {
+			ManagedObject.prototype.constructor.apply(this, arguments);
+			this._oTranslationModel = new JSONModel(getTranslationModelData());
+		}
+	});
+
 	function saveFiles(oEvent) {
 		this._oTranslationModel.setProperty("/file", oEvent.getParameter("files")[0]);
 	}
@@ -82,7 +111,8 @@ function(
 				onCancelUploadDialog: function () {
 					this._oDialogUpload.close();
 				}.bind(this),
-				saveFiles: saveFiles.bind(this)
+				saveFiles: saveFiles.bind(this),
+				handleUploadPress: handleUploadPress.bind(this, sUploadId)
 			}
 		}).then(function (oTranslationDialog) {
 			this._oDialogUpload = oTranslationDialog;
@@ -92,6 +122,25 @@ function(
 		}.bind(this));
 	}
 
+
+	function handleUploadPress(sUploadId) {
+		var oFileUploader = sap.ui.getCore().byId(sUploadId + "--fileUploader");
+		oFileUploader.checkFileReadable().then(function() {
+			if (this._oTranslationModel.getProperty("/file")) {
+				var mPropertyBag = {
+					layer: Layer.CUSTOMER,
+					payload: new FormData()
+				};
+				mPropertyBag.payload.append("file", this._oTranslationModel.getProperty("/file"), oFileUploader.getValue());
+				TranslationAPI.postTranslationTexts(mPropertyBag).then(function () {
+					MessageToast.show("Translation texts import successful");
+				}).catch(function (sError) {
+					MessageBox.error("Translation texts import failed: " + sError);
+				}).finally(oFileUploader.clear.bind(oFileUploader));
+			}
+		}.bind(this));
+	}
+
 	function getTranslationModelData() {
 		return Object.assign({}, {
 			sourceLanguage: "",
@@ -101,34 +150,6 @@ function(
 		});
 	}
 
-	/**
-	 * Controller for the <code>sap.ui.rta.toolbar.translation.Translation</code> controls.
-	 * Contains implementation of translation functionality.
-	 *
-	 * @class
-	 *
-	 * @author SAP SE
-	 * @version 1.98.0
-	 *
-	 * @constructor
-	 * @private
-	 * @since 1.93
-	 * @alias sap.ui.rta.toolbar.translation.Translation
-	 */
-	var Translation = ManagedObject.extend("sap.ui.rta.toolbar.translation.Translation", {
-		metadata: {
-			properties: {
-				toolbar: {
-					type: "sap.ui.rta.toolbar.Base"
-				}
-			}
-		},
-		constructor: function () {
-			ManagedObject.prototype.constructor.apply(this, arguments);
-			this._oTranslationModel = new JSONModel(getTranslationModelData());
-		}
-	});
-
 	Translation.prototype.showTranslationPopover = function (oEvent) {
 		var oTranslationButton = oEvent.getSource();
 

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

@@ -66,7 +66,7 @@ sap.ui.define([
 	 * Constructor for a new sap.ui.rta.util.PluginManager
 	 * @extends sap.ui.base.ManagedObject
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.99.0
 	 * @constructor
 	 * @private
 	 * @since 1.86

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

@@ -40,7 +40,7 @@ sap.ui.define([
 	 * Constructor for a new sap.ui.rta.util.PopupManager
 	 * @extends sap.ui.base.ManagedObject
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.99.0
 	 * @constructor
 	 * @private
 	 * @since 1.48

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

@@ -19,7 +19,7 @@ function(
 	 *
 	 * @extends sap.ui.core.EventBus
 	 * @author SAP SE
-	 * @version 1.98.0
+	 * @version 1.99.0
 	 * @private
 	 * @since 1.56.0
 	 * @alias sap.ui.rta.util.ServiceEventBus

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

@@ -13,7 +13,9 @@ sap.ui.define([
 	"sap/ui/events/KeyCodes",
 	"sap/ui/rta/util/changeVisualization/categories/getVisualizationCategory",
 	"sap/ui/fl/Utils",
-	"sap/ui/fl/util/resolveBinding"
+	"sap/ui/fl/util/resolveBinding",
+	"sap/ui/rta/util/changeVisualization/ChangeVisualizationUtils",
+	"sap/ui/core/Core"
 ], function(
 	Fragment,
 	JSONModel,
@@ -23,9 +25,20 @@ sap.ui.define([
 	KeyCodes,
 	getVisualizationCategory,
 	FlUtils,
-	resolveBinding
+	resolveBinding,
+	ChangeVisualizationUtils,
+	Core
 ) {
 	"use strict";
+
+	var CATEGORY_ICONS = {
+		add: "sap-icon://add",
+		move: "sap-icon://move",
+		rename: "sap-icon://edit",
+		combinesplit: "sap-icon://combine",
+		remove: "sap-icon://less"
+	};
+
 	/**
 	 * @class
 	 * Constructor for a new <code>sap.ui.rta.util.changeVisualization.ChangeIndicator</code> class.
@@ -35,7 +48,7 @@ sap.ui.define([
 	 * @alias sap.ui.rta.util.changeVisualization.ChangeIndicator
 	 * @author SAP SE
 	 * @since 1.84.0
-	 * @version 1.98.0
+	 * @version 1.99.0
 	 * @private
 	 */
 	var ChangeIndicator = Control.extend("sap.ui.rta.util.changeVisualization.ChangeIndicator", {
@@ -79,11 +92,6 @@ sap.ui.define([
 					type: "sap.m.Popover",
 					multiple: false,
 					visibility: "hidden"
-				},
-				_text: {
-					type: "sap.m.Text",
-					multiple: false,
-					visibility: "hidden"
 				}
 			},
 			events: {
@@ -115,59 +123,87 @@ sap.ui.define([
 				oRm.openStart("div", oControl);
 				oRm.class("sapUiRtaChangeIndicator");
 				oRm.class("sapUiRtaChangeIndicatorChange");
-				oRm.style("width", oControl._getSize() + "px");
-				oRm.style("height", oControl._getSize() + "px");
-				oRm.openEnd();
-				oRm.openStart("div");
+				if (oControl.getChanges().length > 4) {
+					oRm.class("sapUiRtaChangeIndicatorColorDark");
+				} else if (oControl.getChanges().length > 1) {
+					oRm.class("sapUiRtaChangeIndicatorColorMedium");
+				} else {
+					oRm.class("sapUiRtaChangeIndicatorColorLight");
+				}
 				oRm.openEnd();
-				oRm.renderControl(oControl.getAggregation("_text"));
-				oRm.close("div");
 				oRm.close("div");
 			}
 		},
-		constructor: function () {
+		constructor: function() {
 			this._oDetailModel = new JSONModel();
 			this._oDetailModel.setDefaultBindingMode("OneWay");
 
 			Control.prototype.constructor.apply(this, arguments);
+
+			this._fnHoverTrue = this._toggleHoverStyleClasses.bind(this, true);
+			this._fnHoverFalse = this._toggleHoverStyleClasses.bind(this, false);
 		}
 	});
 
-	ChangeIndicator.prototype.init = function () {
+	function handleBrowserEventsOnElement(oElement, sEventHandler) {
+		oElement[sEventHandler]("click", this._onSelect, this);
+		oElement[sEventHandler]("tap", this._onSelect, this);
+		oElement[sEventHandler]("keydown", this._onKeyDown, this);
+		oElement[sEventHandler]("mouseout", this._fnHoverFalse);
+		oElement[sEventHandler]("focusout", this._fnHoverFalse);
+		oElement[sEventHandler]("mouseover", this._fnHoverTrue);
+		oElement[sEventHandler]("focusin", this._fnHoverTrue);
+	}
+
+	function centerVertically(oIndicator) {
+		var oIndicatorDomRef = oIndicator.getDomRef();
+		var iOverlayHeight = document.getElementById(oIndicator.getOverlayId()).offsetHeight;
+		var iIndicatorHeight = oIndicatorDomRef.offsetHeight;
+		// the indicator should be centered only if the element has a small enough height to improve the design and visibility
+		if (iOverlayHeight < iIndicatorHeight * 5) {
+			oIndicator.addStyleClass("sapUiRtaChangeIndicatorVerticallyCentered");
+		}
+	}
+
+	ChangeIndicator.prototype.init = function() {
 		this._iOldTabIndex = 0;
-		this.setAggregation("_text", new Text({
-			text: "{= (${changes} || []).length}",
-			visible: "{= (${changes} || []).length > 1}"
-		}).addStyleClass("sapUiRtaChangeIndicatorText"));
+		handleBrowserEventsOnElement.call(this, this, "attachBrowserEvent");
+	};
 
-		this.attachBrowserEvent("click", this._onSelect, this);
-		this.attachBrowserEvent("tap", this._onSelect, this);
-		this.attachBrowserEvent("keydown", this._onKeyDown, this);
-		this.attachBrowserEvent("mouseleave", function() {this._toggleHoverStyleClasses(false); }, this);
-		this.attachBrowserEvent("focusout", function() {this._toggleHoverStyleClasses(false); }, this);
-		this.attachBrowserEvent("mouseover", function() {this._toggleHoverStyleClasses(true); }, this);
-		this.attachBrowserEvent("focusin", function() {this._toggleHoverStyleClasses(true); }, this);
+	ChangeIndicator.prototype.setVisible = function(bVisible) {
+		Control.prototype.setVisible.apply(this, arguments);
+		var oOverlay = Core.byId(this.getOverlayId());
+		// needed because the change indicator cleanup is only triggered on save and exit
+		if (oOverlay) {
+			if (bVisible) {
+				handleBrowserEventsOnElement.call(this, oOverlay, "attachBrowserEvent");
+			} else {
+				handleBrowserEventsOnElement.call(this, oOverlay, "detachBrowserEvent");
+				if (this.getAggregation("_popover")) {
+					this.getAggregation("_popover").destroy();
+				}
+			}
+		}
+		return this;
 	};
 
-	ChangeIndicator.prototype.focus = function () {
+	ChangeIndicator.prototype.focus = function() {
 		if (this.getDomRef()) {
 			// Element is rendered, focus immediately
 			Control.prototype.focus.apply(this, arguments);
 			this._bScheduledForFocus = false;
+			return;
 		}
 		this._bScheduledForFocus = true;
 	};
 
-	ChangeIndicator.prototype._getSize = function () {
-		var oOverlay = document.getElementById(this.getOverlayId());
-		var iSize = oOverlay.offsetHeight;
-		return (iSize > 50 ? 50 : iSize) - 2;
-	};
-
-	ChangeIndicator.prototype.onAfterRendering = function () {
-		// Attach to the overlay
+	ChangeIndicator.prototype.onAfterRendering = function() {
 		var oOverlay = document.getElementById(this.getOverlayId());
-		oOverlay.appendChild(this.getDomRef());
+		if (oOverlay) {
+			// Attach to the overlay
+			oOverlay.appendChild(this.getDomRef());
+			centerVertically(this);
+		}
 		// Restore the Tabindex if stored before; set to 0 as default
 		this.getDomRef().tabIndex = this._iOldTabIndex;
 
@@ -178,21 +214,27 @@ sap.ui.define([
 		}
 	};
 
-	ChangeIndicator.prototype.exit = function () {
+	ChangeIndicator.prototype.exit = function() {
 		var oDomRef = this.getDomRef();
+		var oOverlay = Core.byId(this.getOverlayId());
 		if (oDomRef) {
 			oDomRef.parentNode.removeChild(oDomRef);
 		}
-		this.detachBrowserEvent("click", this._onSelect, this);
-		this.detachBrowserEvent("keydown", this._onKeyDown, this);
+		if (oOverlay) {
+			if (this.getAggregation("_popover")) {
+				this.getAggregation("_popover").destroy();
+			}
+			handleBrowserEventsOnElement.call(this, oOverlay, "detachBrowserEvent");
+		}
+		handleBrowserEventsOnElement.call(this, this, "detachBrowserEvent");
 	};
 
-	ChangeIndicator.prototype.setChanges = function (aChanges) {
+	ChangeIndicator.prototype.setChanges = function(aChanges) {
 		this.setProperty("changes", aChanges);
-		this._oDetailModel.setData((aChanges || []).map(this._formatChangesModelItem.bind(this)));
+		this._oDetailModel.setData((aChanges || []).reverse().map(this._formatChangesModelItem.bind(this)));
 	};
 
-	ChangeIndicator.prototype._onSelect = function (oEvent) {
+	ChangeIndicator.prototype._onSelect = function(oEvent) {
 		this.focus();
 		oEvent.stopPropagation();
 		this._openDetailPopover();
@@ -208,19 +250,23 @@ sap.ui.define([
 		});
 	};
 
-	ChangeIndicator.prototype._toggleHoverStyleClasses = function(bAdd) {
-		var oOverlay = sap.ui.getCore().byId(this.getOverlayId());
+	ChangeIndicator.prototype._toggleHoverStyleClasses = function(bAdd, oEvent) {
+		if (oEvent) {
+			oEvent.stopPropagation();
+			oEvent.preventDefault();
+		}
+		var oOverlay = Core.byId(this.getOverlayId());
 		if (oOverlay.getMetadata().getName() !== "sap.ui.dt.ElementOverlay") {
 			return;
 		}
 		var sFunctionName = bAdd ? "addStyleClass" : "removeStyleClass";
-		oOverlay[sFunctionName]("sapUiRtaOverlayHover");
 		oOverlay[sFunctionName]("sapUiRtaChangeIndicatorHovered");
+		this[sFunctionName]("sapUiRtaHover");
 	};
 
-	ChangeIndicator.prototype._formatChangesModelItem = function (mChangeInformation) {
-		var oAffectedElement = sap.ui.getCore().byId(mChangeInformation.affectedElementId);
-		var mPayload = Object.keys(mChangeInformation.payload || {}).reduce(function (mPayload, sKey) {
+	ChangeIndicator.prototype._formatChangesModelItem = function(mChangeInformation) {
+		var oAffectedElement = Core.byId(mChangeInformation.affectedElementId);
+		var mPayload = Object.keys(mChangeInformation.payload || {}).reduce(function(mPayload, sKey) {
 			var vOriginalValue = mChangeInformation.payload[sKey];
 			var bIsBinding = FlUtils.isBinding(vOriginalValue);
 			var vValue = bIsBinding
@@ -230,36 +276,38 @@ sap.ui.define([
 			return mPayload;
 		}, {});
 
-		var oOverlay = sap.ui.getCore().byId(this.getOverlayId());
+		var oOverlay = Core.byId(this.getOverlayId());
 		var sElementLabel = oOverlay.getDesignTimeMetadata().getLabel(oAffectedElement);
 		var oVisualizationUtil = getVisualizationCategory(mChangeInformation.commandName);
 		var oDescription = oVisualizationUtil && oVisualizationUtil.getDescription(mPayload, sElementLabel);
-		var oRtaResourceBundle = sap.ui.getCore().getLibraryResourceBundle("sap.ui.rta");
-		var sChangeTitle = mChangeInformation.commandName.charAt(0).toUpperCase() + mChangeInformation.commandName.slice(1);
+		var oRtaResourceBundle = Core.getLibraryResourceBundle("sap.ui.rta");
 		sElementLabel = sElementLabel && "'" + sElementLabel + "'";
+		var sShortenedElementLabel = ChangeVisualizationUtils.shortenString(sElementLabel);
 		var sChangeTextKey = (
 			"TXT_CHANGEVISUALIZATION_CHANGE_"
 			+ mChangeInformation.commandName.toUpperCase()
 		);
-		var sChangeText = oDescription ? oDescription.descriptionText : oRtaResourceBundle.getText(sChangeTextKey, sElementLabel);
+		var sDescriptionText = oDescription ? oDescription.descriptionText : oRtaResourceBundle.getText(sChangeTextKey, sShortenedElementLabel);
+		var sDescriptionTooltip = oDescription ? oDescription.descriptionTooltip : oRtaResourceBundle.getText(sChangeTextKey, sElementLabel);
 		var sCreationDate = mChangeInformation.change.getCreation();
 		var oDate = new Date(sCreationDate);
 		var sFallbackDate = oRtaResourceBundle.getText("TXT_CHANGEVISUALIZATION_CREATED_IN_SESSION_DATE");
 		var sFullDate = sCreationDate ? DateFormat.getDateTimeInstance().format(oDate) : sFallbackDate;
-		var sRelativeDate = sCreationDate ? DateFormat.getDateTimeInstance({relative: "true"}).format(oDate) : sFallbackDate;
+		var sRelativeDate = sCreationDate ? DateFormat.getDateTimeInstance({ relative: "true" }).format(oDate) : sFallbackDate;
 		var sDetailButtonText = oDescription && oDescription.buttonText;
 		return {
 			id: mChangeInformation.id,
 			change: mChangeInformation,
-			changeTitle: sChangeTitle,
-			description: sChangeText,
+			description: sDescriptionText,
+			descriptionTooltip: sDescriptionTooltip && sDescriptionText.length < sDescriptionTooltip.length ? sDescriptionTooltip : null,
 			fullDate: sFullDate,
 			relativeDate: sRelativeDate,
-			detailButtonText: sDetailButtonText
+			detailButtonText: sDetailButtonText,
+			icon: CATEGORY_ICONS[mChangeInformation.commandCategory]
 		};
 	};
 
-	ChangeIndicator.prototype._openDetailPopover = function () {
+	ChangeIndicator.prototype._openDetailPopover = function() {
 		if (!this.getAggregation("_popover")) {
 			//store the tabindex (tabindex will be removed on opening the popover)
 			this._iOldTabIndex = this.getDomRef().getAttribute("tabindex");
@@ -280,7 +328,7 @@ sap.ui.define([
 		}
 	};
 
-	ChangeIndicator.prototype._showDependentElements = function (oEvent) {
+	ChangeIndicator.prototype._showDependentElements = function(oEvent) {
 		this.getAggregation("_popover").close();
 		var sChangeId = this.getChanges().length > 1
 			? oEvent.getSource().getBindingContext("details").getObject().id