@openui5/sap.f 1.139.0 → 1.141.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/THIRDPARTY.txt +2 -2
- package/package.json +4 -4
- package/src/sap/f/.library +1 -1
- package/src/sap/f/Avatar.js +1 -1
- package/src/sap/f/AvatarGroup.js +1 -1
- package/src/sap/f/AvatarGroupItem.js +1 -1
- package/src/sap/f/CalendarAppointmentInCard.js +1 -1
- package/src/sap/f/CalendarInCard.js +1 -1
- package/src/sap/f/Card.js +1 -1
- package/src/sap/f/CardBase.js +14 -2
- package/src/sap/f/CardRenderer.js +16 -4
- package/src/sap/f/DynamicPage.js +22 -6
- package/src/sap/f/DynamicPageAccessibleLandmarkInfo.js +1 -1
- package/src/sap/f/DynamicPageHeader.js +1 -1
- package/src/sap/f/DynamicPageTitle.js +1 -1
- package/src/sap/f/FlexibleColumnLayout.js +6 -5
- package/src/sap/f/FlexibleColumnLayoutAccessibleLandmarkInfo.js +1 -1
- package/src/sap/f/FlexibleColumnLayoutData.js +1 -1
- package/src/sap/f/FlexibleColumnLayoutDataForDesktop.js +1 -1
- package/src/sap/f/FlexibleColumnLayoutDataForTablet.js +1 -1
- package/src/sap/f/FlexibleColumnLayoutSemanticHelper.js +1 -1
- package/src/sap/f/GridContainer.js +1 -1
- package/src/sap/f/GridContainerItemLayoutData.js +1 -1
- package/src/sap/f/GridContainerSettings.js +2 -2
- package/src/sap/f/GridList.js +1 -1
- package/src/sap/f/GridListItem.js +1 -1
- package/src/sap/f/IllustratedMessage.js +1 -1
- package/src/sap/f/Illustration.js +1 -1
- package/src/sap/f/PlanningCalendarInCardLegend.js +1 -1
- package/src/sap/f/ProductSwitch.js +1 -1
- package/src/sap/f/ProductSwitchItem.js +43 -1
- package/src/sap/f/ProductSwitchItemRenderer.js +12 -8
- package/src/sap/f/SearchManager.js +1 -1
- package/src/sap/f/ShellBar.js +1 -1
- package/src/sap/f/SidePanel.js +1 -1
- package/src/sap/f/SidePanelItem.js +1 -1
- package/src/sap/f/cards/BaseHeader.js +16 -23
- package/src/sap/f/cards/BaseHeaderRenderer.js +116 -46
- package/src/sap/f/cards/Header.js +61 -13
- package/src/sap/f/cards/NumericHeader.js +4 -2
- package/src/sap/f/cards/NumericHeaderRenderer.js +35 -13
- package/src/sap/f/cards/NumericIndicators.js +1 -1
- package/src/sap/f/cards/NumericSideIndicator.js +1 -1
- package/src/sap/f/cards/loading/AnalyticalPlaceholder.js +1 -1
- package/src/sap/f/cards/loading/CalendarPlaceholder.js +1 -1
- package/src/sap/f/cards/loading/GenericPlaceholder.js +1 -1
- package/src/sap/f/cards/loading/ListPlaceholder.js +1 -1
- package/src/sap/f/cards/loading/ObjectPlaceholder.js +1 -1
- package/src/sap/f/cards/loading/PlaceholderBase.js +1 -1
- package/src/sap/f/cards/loading/TablePlaceholder.js +1 -1
- package/src/sap/f/cards/loading/TimelinePlaceholder.js +1 -1
- package/src/sap/f/changeHandler/MoveDynamicPageTitleActions.js +1 -1
- package/src/sap/f/delegate/GridContainerItemNavigation.js +1 -1
- package/src/sap/f/delegate/GridItemNavigation.js +1 -1
- package/src/sap/f/dnd/GridDragOver.js +1 -1
- package/src/sap/f/dnd/GridDropInfo.js +1 -1
- package/src/sap/f/library.js +3 -3
- package/src/sap/f/messagebundle_da.properties +2 -2
- package/src/sap/f/messagebundle_pt.properties +1 -1
- package/src/sap/f/routing/Router.js +20 -15
- package/src/sap/f/semantic/AddAction.js +1 -1
- package/src/sap/f/semantic/CloseAction.js +1 -1
- package/src/sap/f/semantic/CopyAction.js +1 -1
- package/src/sap/f/semantic/DeleteAction.js +1 -1
- package/src/sap/f/semantic/DiscussInJamAction.js +1 -1
- package/src/sap/f/semantic/EditAction.js +1 -1
- package/src/sap/f/semantic/ExitFullScreenAction.js +1 -1
- package/src/sap/f/semantic/FavoriteAction.js +1 -1
- package/src/sap/f/semantic/FlagAction.js +1 -1
- package/src/sap/f/semantic/FooterMainAction.js +1 -1
- package/src/sap/f/semantic/FullScreenAction.js +1 -1
- package/src/sap/f/semantic/MainAction.js +1 -1
- package/src/sap/f/semantic/MessagesIndicator.js +1 -1
- package/src/sap/f/semantic/NegativeAction.js +1 -1
- package/src/sap/f/semantic/PositiveAction.js +1 -1
- package/src/sap/f/semantic/PrintAction.js +1 -1
- package/src/sap/f/semantic/SemanticButton.js +1 -1
- package/src/sap/f/semantic/SemanticConfiguration.js +1 -1
- package/src/sap/f/semantic/SemanticControl.js +1 -1
- package/src/sap/f/semantic/SemanticPage.js +1 -1
- package/src/sap/f/semantic/SemanticToggleButton.js +1 -1
- package/src/sap/f/semantic/SendEmailAction.js +1 -1
- package/src/sap/f/semantic/SendMessageAction.js +1 -1
- package/src/sap/f/semantic/ShareInJamAction.js +1 -1
- package/src/sap/f/semantic/TitleMainAction.js +1 -1
- package/src/sap/f/shellBar/AdditionalContentSupport.js +1 -1
- package/src/sap/f/shellBar/CoPilot.js +1 -1
- package/src/sap/f/shellBar/ControlSpacer.js +1 -1
- package/src/sap/f/shellBar/Search.js +1 -1
- package/src/sap/f/themes/base/Card.less +9 -5
- package/src/sap/f/themes/base/CardHeaders.less +92 -19
|
@@ -55,7 +55,7 @@ sap.ui.define([
|
|
|
55
55
|
* @abstract
|
|
56
56
|
*
|
|
57
57
|
* @author SAP SE
|
|
58
|
-
* @version 1.
|
|
58
|
+
* @version 1.141.0
|
|
59
59
|
*
|
|
60
60
|
* @constructor
|
|
61
61
|
* @public
|
|
@@ -197,8 +197,7 @@ sap.ui.define([
|
|
|
197
197
|
|
|
198
198
|
this._oToolbarDelegate = {
|
|
199
199
|
onfocusin: this._onToolbarFocusin,
|
|
200
|
-
onfocusout: this._onToolbarFocusout
|
|
201
|
-
onAfterRendering: this._addMarginToHeaderText
|
|
200
|
+
onfocusout: this._onToolbarFocusout
|
|
202
201
|
};
|
|
203
202
|
};
|
|
204
203
|
|
|
@@ -238,8 +237,6 @@ sap.ui.define([
|
|
|
238
237
|
oToolbar.addEventDelegate(this._oToolbarDelegate, this);
|
|
239
238
|
}
|
|
240
239
|
|
|
241
|
-
this._addMarginToHeaderText();
|
|
242
|
-
|
|
243
240
|
this.getBannerLines()?.forEach((oText) => {
|
|
244
241
|
this._enhanceText(oText);
|
|
245
242
|
});
|
|
@@ -266,6 +263,14 @@ sap.ui.define([
|
|
|
266
263
|
return !!this.getHref();
|
|
267
264
|
};
|
|
268
265
|
|
|
266
|
+
/**
|
|
267
|
+
* If the header must have tile accessibility.
|
|
268
|
+
* @returns {boolean} True if card related attributes should not be rendered.
|
|
269
|
+
*/
|
|
270
|
+
BaseHeader.prototype.isTile = function () {
|
|
271
|
+
return !!this.getProperty("useTileLayout");
|
|
272
|
+
};
|
|
273
|
+
|
|
269
274
|
BaseHeader.prototype.onkeydown = function (oEvent) {
|
|
270
275
|
|
|
271
276
|
if ((oEvent.which === KeyCodes.SPACE || oEvent.which === KeyCodes.ENTER || oEvent.which === KeyCodes.ESCAPE || oEvent.which === KeyCodes.SHIFT)
|
|
@@ -300,7 +305,7 @@ sap.ui.define([
|
|
|
300
305
|
|
|
301
306
|
BaseHeader.prototype.ontap = function (oEvent) {
|
|
302
307
|
if (this.isLink() && oEvent.ctrlKey) {
|
|
303
|
-
//
|
|
308
|
+
//Ctrl + click opens the link in a new tab.
|
|
304
309
|
return;
|
|
305
310
|
}
|
|
306
311
|
|
|
@@ -337,23 +342,6 @@ sap.ui.define([
|
|
|
337
342
|
this.removeStyleClass("sapFCardHeaderToolbarFocused");
|
|
338
343
|
};
|
|
339
344
|
|
|
340
|
-
/**
|
|
341
|
-
* Adds margin to the header text, which ensures the text will be visible under the toolbar.
|
|
342
|
-
* @private
|
|
343
|
-
*/
|
|
344
|
-
BaseHeader.prototype._addMarginToHeaderText = function () {
|
|
345
|
-
const oToolbar = this.getToolbar();
|
|
346
|
-
const oHeaderText = this.getDomRef().getElementsByClassName("sapFCardHeaderText")[0];
|
|
347
|
-
|
|
348
|
-
if (oHeaderText && oToolbar) {
|
|
349
|
-
if (oToolbar.getVisible()) {
|
|
350
|
-
oHeaderText.style.marginInlineEnd = oToolbar.getDomRef().offsetWidth + "px";
|
|
351
|
-
} else {
|
|
352
|
-
oHeaderText.style.marginInlineEnd = 0;
|
|
353
|
-
}
|
|
354
|
-
}
|
|
355
|
-
};
|
|
356
|
-
|
|
357
345
|
/*
|
|
358
346
|
* @override
|
|
359
347
|
*/
|
|
@@ -509,6 +497,11 @@ sap.ui.define([
|
|
|
509
497
|
* @ui5-restricted
|
|
510
498
|
*/
|
|
511
499
|
BaseHeader.prototype.getAriaRoleDescription = function () {
|
|
500
|
+
if (this.isTile()) {
|
|
501
|
+
|
|
502
|
+
return null;
|
|
503
|
+
}
|
|
504
|
+
|
|
512
505
|
return this.hasListeners("press") ? this._oRb.getText("ARIA_ROLEDESCRIPTION_INTERACTIVE_CARD_HEADER") : this._oRb.getText("ARIA_ROLEDESCRIPTION_CARD_HEADER");
|
|
513
506
|
};
|
|
514
507
|
|
|
@@ -5,17 +5,27 @@
|
|
|
5
5
|
*/
|
|
6
6
|
|
|
7
7
|
// Provides renderer helper for sap.f.cards.BaseHeader
|
|
8
|
-
sap.ui.define([], function () {
|
|
8
|
+
sap.ui.define(["sap/ui/core/library"], function (coreLibrary) {
|
|
9
9
|
"use strict";
|
|
10
10
|
|
|
11
11
|
const BaseHeaderRenderer = {
|
|
12
12
|
apiVersion: 2
|
|
13
13
|
};
|
|
14
|
+
const ValueState = coreLibrary.ValueState;
|
|
14
15
|
|
|
15
16
|
BaseHeaderRenderer.render = function (oRm, oHeader) {
|
|
16
17
|
const oToolbar = oHeader.getToolbar();
|
|
17
|
-
const
|
|
18
|
+
const oBindingInfos = oHeader.mBindingInfos;
|
|
19
|
+
const bHasStatus = oHeader.getStatusVisible();
|
|
20
|
+
const bHasDataTimestamp = oHeader.getDataTimestamp() || oBindingInfos.dataTimestamp;
|
|
18
21
|
const bHasNumericPart = this.hasNumericPart(oHeader);
|
|
22
|
+
const bIconVisible = oHeader.getIconVisible();
|
|
23
|
+
const bHasIconSrc = oHeader.getIconSrc();
|
|
24
|
+
|
|
25
|
+
let oIconState;
|
|
26
|
+
if (typeof oHeader.getIconState === "function") {
|
|
27
|
+
oIconState = oHeader.getIconState();
|
|
28
|
+
}
|
|
19
29
|
|
|
20
30
|
oRm.openStart("div", oHeader)
|
|
21
31
|
.class("sapFCardHeader");
|
|
@@ -26,7 +36,8 @@ sap.ui.define([], function () {
|
|
|
26
36
|
oRm.class("sapFCardHeaderLoading");
|
|
27
37
|
}
|
|
28
38
|
|
|
29
|
-
|
|
39
|
+
const bHasIconState = oIconState && oIconState !== ValueState.None;
|
|
40
|
+
if (bIconVisible && (bHasIconSrc || bHasIconState)) {
|
|
30
41
|
oRm.class("sapFCardHeaderHasIcon");
|
|
31
42
|
}
|
|
32
43
|
|
|
@@ -34,14 +45,48 @@ sap.ui.define([], function () {
|
|
|
34
45
|
oRm.class("sapFCardHeaderHasToolbar");
|
|
35
46
|
}
|
|
36
47
|
|
|
48
|
+
if (bHasStatus || bHasDataTimestamp) {
|
|
49
|
+
oRm.class("sapFCardHeaderHasStatusTimeStamp");
|
|
50
|
+
}
|
|
51
|
+
|
|
37
52
|
if (!bHasNumericPart && !oHeader.getInfoSection().length) {
|
|
38
53
|
oRm.class("sapFCardHeaderMainPartOnly");
|
|
39
54
|
}
|
|
40
55
|
|
|
41
56
|
oRm.openEnd();
|
|
42
57
|
|
|
58
|
+
oRm.openStart("div", oHeader.getId() + "-mainWrapper")
|
|
59
|
+
.class("sapFCardHeaderMainWrapper")
|
|
60
|
+
.class("sapFCardHeaderFocusable")
|
|
61
|
+
.openEnd();
|
|
62
|
+
|
|
63
|
+
this.renderMainWrapperContent(oRm, oHeader);
|
|
64
|
+
|
|
65
|
+
oRm.close("div");
|
|
66
|
+
|
|
67
|
+
oRm.close("div");
|
|
68
|
+
};
|
|
69
|
+
|
|
70
|
+
BaseHeaderRenderer.renderHeaderAttributes = function (oRm, oHeader) { };
|
|
71
|
+
|
|
72
|
+
BaseHeaderRenderer.renderMainWrapperContent = function (oRm, oHeader) {
|
|
73
|
+
const oError = oHeader.getAggregation("_error");
|
|
74
|
+
const oToolbar = oHeader.getToolbar();
|
|
75
|
+
const bHasNumericPart = this.hasNumericPart(oHeader);
|
|
76
|
+
const oBindingInfos = oHeader.mBindingInfos;
|
|
77
|
+
const bHasToolbar = oToolbar && oToolbar.getVisible();
|
|
78
|
+
const bHasStatus = oHeader.getStatusVisible() && oHeader.getStatusText();
|
|
79
|
+
const bHasDataTimestamp = oHeader.getDataTimestamp() || oBindingInfos.dataTimestamp;
|
|
80
|
+
|
|
81
|
+
oRm.openStart("div").class("sapFCardHeaderTopRow").openEnd();
|
|
43
82
|
this.renderMainPart(oRm, oHeader);
|
|
44
83
|
|
|
84
|
+
if (!oError && (bHasToolbar || bHasStatus || bHasDataTimestamp)) {
|
|
85
|
+
this._renderToolbar(oRm, oToolbar, oHeader);
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
oRm.close("div"); // .sapFCardHeaderTopRow
|
|
89
|
+
|
|
45
90
|
if (!oError) {
|
|
46
91
|
this._renderInfoSections(oRm, oHeader);
|
|
47
92
|
}
|
|
@@ -49,16 +94,8 @@ sap.ui.define([], function () {
|
|
|
49
94
|
if (bHasNumericPart && !oError) {
|
|
50
95
|
this.renderNumericPart(oRm, oHeader);
|
|
51
96
|
}
|
|
52
|
-
|
|
53
|
-
if (oToolbar && !oError) {
|
|
54
|
-
this._renderToolbar(oRm, oToolbar);
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
oRm.close("div");
|
|
58
97
|
};
|
|
59
98
|
|
|
60
|
-
BaseHeaderRenderer.renderHeaderAttributes = function (oRm, oHeader) { };
|
|
61
|
-
|
|
62
99
|
BaseHeaderRenderer.renderMainPart = function (oRm, oHeader) {
|
|
63
100
|
const bUseTileLayout = oHeader.getProperty("useTileLayout");
|
|
64
101
|
const bRenderAsLink = oHeader.isLink();
|
|
@@ -71,8 +108,7 @@ sap.ui.define([], function () {
|
|
|
71
108
|
oRm.openStart("div", oHeader.getId() + "-focusable");
|
|
72
109
|
}
|
|
73
110
|
|
|
74
|
-
oRm.class("sapFCardHeaderMainPart")
|
|
75
|
-
.class("sapFCardHeaderFocusable");
|
|
111
|
+
oRm.class("sapFCardHeaderMainPart");
|
|
76
112
|
|
|
77
113
|
if (oHeader.isFocusable()) {
|
|
78
114
|
oRm.attr("tabindex", "0");
|
|
@@ -143,15 +179,13 @@ sap.ui.define([], function () {
|
|
|
143
179
|
this.renderMainPartSecondLine(oRm, oHeader);
|
|
144
180
|
|
|
145
181
|
oRm.close("div");
|
|
146
|
-
|
|
182
|
+
this._renderStatusWrapper(oRm, oHeader);
|
|
147
183
|
this.renderAvatar(oRm, oHeader);
|
|
148
184
|
};
|
|
149
185
|
|
|
150
186
|
BaseHeaderRenderer.renderMainPartFirstLine = function (oRm, oHeader) {
|
|
151
187
|
const oTitle = oHeader.getAggregation("_title");
|
|
152
188
|
const oBindingInfos = oHeader.mBindingInfos;
|
|
153
|
-
const sStatus = oHeader.getStatusText();
|
|
154
|
-
const sId = oHeader.getId();
|
|
155
189
|
|
|
156
190
|
if (oTitle || oBindingInfos.title) {
|
|
157
191
|
oRm.openStart("div")
|
|
@@ -164,19 +198,6 @@ sap.ui.define([], function () {
|
|
|
164
198
|
|
|
165
199
|
oRm.renderControl(oTitle);
|
|
166
200
|
|
|
167
|
-
if (sStatus && oHeader.getStatusVisible()) {
|
|
168
|
-
oRm.openStart("span", sId + "-status")
|
|
169
|
-
.class("sapFCardStatus");
|
|
170
|
-
|
|
171
|
-
if (oBindingInfos.statusText) {
|
|
172
|
-
oRm.class("sapFCardHeaderItemBinded");
|
|
173
|
-
}
|
|
174
|
-
|
|
175
|
-
oRm.openEnd()
|
|
176
|
-
.text(sStatus)
|
|
177
|
-
.close("span");
|
|
178
|
-
}
|
|
179
|
-
|
|
180
201
|
oRm.close("div"); // sapFCardHeaderTextFirstLine
|
|
181
202
|
}
|
|
182
203
|
};
|
|
@@ -184,18 +205,12 @@ sap.ui.define([], function () {
|
|
|
184
205
|
BaseHeaderRenderer.renderMainPartSecondLine = function (oRm, oHeader) {
|
|
185
206
|
const oBindingInfos = oHeader.mBindingInfos;
|
|
186
207
|
const bHasSubtitle = oHeader.getSubtitle() || oBindingInfos.subtitle;
|
|
187
|
-
const oDataTimestamp = oHeader.getAggregation("_dataTimestamp");
|
|
188
|
-
const bHasDataTimestamp = oHeader.getDataTimestamp() || oBindingInfos.dataTimestamp;
|
|
189
208
|
const oSubtitle = oHeader.getAggregation("_subtitle");
|
|
190
209
|
|
|
191
|
-
if (bHasSubtitle
|
|
210
|
+
if (bHasSubtitle ) {
|
|
192
211
|
oRm.openStart("div")
|
|
193
212
|
.class("sapFCardHeaderTextSecondLine");
|
|
194
213
|
|
|
195
|
-
if (bHasDataTimestamp) {
|
|
196
|
-
oRm.class("sapFCardHeaderLineIncludesDataTimestamp");
|
|
197
|
-
}
|
|
198
|
-
|
|
199
214
|
oRm.openEnd();
|
|
200
215
|
|
|
201
216
|
if (bHasSubtitle) {
|
|
@@ -207,10 +222,6 @@ sap.ui.define([], function () {
|
|
|
207
222
|
oRm.renderControl(oSubtitle);
|
|
208
223
|
}
|
|
209
224
|
|
|
210
|
-
if (bHasDataTimestamp) {
|
|
211
|
-
oRm.renderControl(oDataTimestamp);
|
|
212
|
-
}
|
|
213
|
-
|
|
214
225
|
oRm.close("div"); //closes sapFCardHeaderTextSecondLine
|
|
215
226
|
}
|
|
216
227
|
};
|
|
@@ -218,9 +229,17 @@ sap.ui.define([], function () {
|
|
|
218
229
|
BaseHeaderRenderer.renderAvatar = function (oRm, oHeader) {
|
|
219
230
|
var oAvatar = oHeader.getAggregation("_avatar"),
|
|
220
231
|
oBindingInfos = oHeader.mBindingInfos,
|
|
221
|
-
bIconVisible = oHeader.shouldShowIcon()
|
|
232
|
+
bIconVisible = oHeader.shouldShowIcon(),
|
|
233
|
+
bHasIconPropertySet = !oHeader.isPropertyInitial("iconSrc") || !oHeader.isPropertyInitial("iconInitials"),
|
|
234
|
+
oIconState;
|
|
235
|
+
|
|
236
|
+
if (typeof oHeader.getIconState === "function") {
|
|
237
|
+
oIconState = oHeader.getIconState();
|
|
238
|
+
}
|
|
222
239
|
|
|
223
|
-
|
|
240
|
+
const bHasIconState = oIconState && oIconState !== ValueState.None;
|
|
241
|
+
|
|
242
|
+
if (bIconVisible && (bHasIconPropertySet || bHasIconState)) {
|
|
224
243
|
oRm.openStart("div")
|
|
225
244
|
.class("sapFCardHeaderImage")
|
|
226
245
|
.openEnd();
|
|
@@ -228,6 +247,11 @@ sap.ui.define([], function () {
|
|
|
228
247
|
if (oBindingInfos.iconSrc && oBindingInfos.iconSrc.binding && !oBindingInfos.iconSrc.binding.getValue()) {
|
|
229
248
|
oAvatar.addStyleClass("sapFCardHeaderItemBinded");
|
|
230
249
|
}
|
|
250
|
+
|
|
251
|
+
if (oIconState != ValueState.None) {
|
|
252
|
+
oAvatar.addStyleClass("sapFCardHeaderImageState" + oIconState);
|
|
253
|
+
}
|
|
254
|
+
|
|
231
255
|
oRm.renderControl(oAvatar);
|
|
232
256
|
oRm.renderControl(oHeader._oAriaAvatarText);
|
|
233
257
|
oRm.close("div");
|
|
@@ -285,16 +309,62 @@ sap.ui.define([], function () {
|
|
|
285
309
|
oRm.attr("draggable", "false");
|
|
286
310
|
};
|
|
287
311
|
|
|
288
|
-
BaseHeaderRenderer._renderToolbar = function (oRm, oToolbar) {
|
|
289
|
-
oRm.openStart("div")
|
|
290
|
-
|
|
291
|
-
|
|
312
|
+
BaseHeaderRenderer._renderToolbar = function (oRm, oToolbar, oHeader) {
|
|
313
|
+
oRm.openStart("div");
|
|
314
|
+
oRm.class("sapFCardHeaderToolbarCont");
|
|
315
|
+
|
|
316
|
+
if (oHeader.isInteractive()) {
|
|
317
|
+
oRm.class("sapFCardSectionClickable");
|
|
318
|
+
}
|
|
319
|
+
|
|
320
|
+
oRm.openEnd();
|
|
292
321
|
|
|
293
322
|
oRm.renderControl(oToolbar);
|
|
323
|
+
this._renderStatusWrapper(oRm, oHeader);
|
|
294
324
|
|
|
295
325
|
oRm.close("div");
|
|
296
326
|
};
|
|
297
327
|
|
|
328
|
+
BaseHeaderRenderer._renderStatusWrapper = function (oRm, oHeader) {
|
|
329
|
+
const oBindingInfos = oHeader.mBindingInfos;
|
|
330
|
+
const sStatus = oHeader.getStatusText();
|
|
331
|
+
const sId = oHeader.getId();
|
|
332
|
+
const oDataTimestamp = oHeader.getAggregation("_dataTimestamp");
|
|
333
|
+
const bHasDataTimestamp = oHeader.getDataTimestamp() || oBindingInfos.dataTimestamp;
|
|
334
|
+
|
|
335
|
+
if (!bHasDataTimestamp && !sStatus) {
|
|
336
|
+
return;
|
|
337
|
+
}
|
|
338
|
+
|
|
339
|
+
oRm.openStart("div", sId + "-wrapper-status")
|
|
340
|
+
.class("sapFCardStatusWrapper");
|
|
341
|
+
|
|
342
|
+
if (bHasDataTimestamp) {
|
|
343
|
+
oRm.class("sapFCardHeaderLineIncludesDataTimestamp");
|
|
344
|
+
}
|
|
345
|
+
|
|
346
|
+
oRm.openEnd();
|
|
347
|
+
|
|
348
|
+
if (sStatus && oHeader.getStatusVisible()) {
|
|
349
|
+
oRm.openStart("span", sId + "-status")
|
|
350
|
+
.class("sapFCardStatus");
|
|
351
|
+
|
|
352
|
+
if (oBindingInfos.statusText) {
|
|
353
|
+
oRm.class("sapFCardHeaderItemBinded");
|
|
354
|
+
}
|
|
355
|
+
|
|
356
|
+
oRm.openEnd()
|
|
357
|
+
.text(sStatus)
|
|
358
|
+
.close("span");
|
|
359
|
+
}
|
|
360
|
+
|
|
361
|
+
if (bHasDataTimestamp) {
|
|
362
|
+
oRm.renderControl(oDataTimestamp);
|
|
363
|
+
}
|
|
364
|
+
|
|
365
|
+
oRm.close("div"); //sapFCardStatusWrapper
|
|
366
|
+
};
|
|
367
|
+
|
|
298
368
|
BaseHeaderRenderer._renderInfoSections = function (oRm, oHeader) {
|
|
299
369
|
const aInfoSections = oHeader.getInfoSection();
|
|
300
370
|
if (!aInfoSections.length) {
|
|
@@ -7,18 +7,22 @@ sap.ui.define([
|
|
|
7
7
|
"./BaseHeader",
|
|
8
8
|
"sap/m/library",
|
|
9
9
|
"sap/f/library",
|
|
10
|
+
"sap/ui/core/library",
|
|
10
11
|
"sap/m/Text",
|
|
11
12
|
"sap/m/Avatar",
|
|
12
13
|
"sap/f/cards/HeaderRenderer",
|
|
13
|
-
"sap/ui/core/InvisibleText"
|
|
14
|
+
"sap/ui/core/InvisibleText",
|
|
15
|
+
"sap/base/Log"
|
|
14
16
|
], function (
|
|
15
17
|
BaseHeader,
|
|
16
18
|
mLibrary,
|
|
17
19
|
library,
|
|
20
|
+
coreLibrary,
|
|
18
21
|
Text,
|
|
19
22
|
Avatar,
|
|
20
23
|
HeaderRenderer,
|
|
21
|
-
InvisibleText
|
|
24
|
+
InvisibleText,
|
|
25
|
+
Log
|
|
22
26
|
) {
|
|
23
27
|
"use strict";
|
|
24
28
|
|
|
@@ -26,6 +30,7 @@ sap.ui.define([
|
|
|
26
30
|
const AvatarColor = mLibrary.AvatarColor;
|
|
27
31
|
const AvatarImageFitType = mLibrary.AvatarImageFitType;
|
|
28
32
|
const AvatarSize = mLibrary.AvatarSize;
|
|
33
|
+
const ValueState = coreLibrary.ValueState;
|
|
29
34
|
|
|
30
35
|
/**
|
|
31
36
|
* Constructor for a new <code>Header</code>.
|
|
@@ -48,7 +53,7 @@ sap.ui.define([
|
|
|
48
53
|
* @implements sap.f.cards.IHeader
|
|
49
54
|
*
|
|
50
55
|
* @author SAP SE
|
|
51
|
-
* @version 1.
|
|
56
|
+
* @version 1.141.0
|
|
52
57
|
*
|
|
53
58
|
* @constructor
|
|
54
59
|
* @public
|
|
@@ -136,7 +141,14 @@ sap.ui.define([
|
|
|
136
141
|
*
|
|
137
142
|
* @since 1.130
|
|
138
143
|
*/
|
|
139
|
-
iconFitType: { type: "sap.m.AvatarImageFitType", defaultValue: AvatarImageFitType.Cover }
|
|
144
|
+
iconFitType: { type: "sap.m.AvatarImageFitType", defaultValue: AvatarImageFitType.Cover },
|
|
145
|
+
|
|
146
|
+
/**
|
|
147
|
+
* Defines a status-colored, non-interactive message icon in the icon area.
|
|
148
|
+
*
|
|
149
|
+
* @since 1.141
|
|
150
|
+
*/
|
|
151
|
+
iconState: { type: "sap.ui.core.ValueState", defaultValue: ValueState.None }
|
|
140
152
|
},
|
|
141
153
|
aggregations: {
|
|
142
154
|
|
|
@@ -236,14 +248,50 @@ sap.ui.define([
|
|
|
236
248
|
|
|
237
249
|
this._enhanceText(this._getSubtitle());
|
|
238
250
|
|
|
239
|
-
this.
|
|
240
|
-
|
|
241
|
-
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
|
|
245
|
-
|
|
246
|
-
|
|
251
|
+
if (this.getIconState() != ValueState.None) {
|
|
252
|
+
const icon = this._getIconForState();
|
|
253
|
+
this._getAvatar()
|
|
254
|
+
.setSrc(icon)
|
|
255
|
+
.setTooltip(this.getIconAlt());
|
|
256
|
+
} else {
|
|
257
|
+
this._getAvatar()
|
|
258
|
+
.setDisplayShape(this.getIconDisplayShape())
|
|
259
|
+
.setSrc(this.getIconSrc())
|
|
260
|
+
.setInitials(this.getIconInitials())
|
|
261
|
+
.setTooltip(this.getIconAlt())
|
|
262
|
+
.setBackgroundColor(this.getIconBackgroundColor())
|
|
263
|
+
.setDisplaySize(this.getIconSize())
|
|
264
|
+
.setImageFitType(this.getIconFitType());
|
|
265
|
+
}
|
|
266
|
+
|
|
267
|
+
this._validateIconProperties();
|
|
268
|
+
};
|
|
269
|
+
|
|
270
|
+
/**
|
|
271
|
+
* Helper function used to get the appropriate icon for the state.
|
|
272
|
+
*
|
|
273
|
+
* @private
|
|
274
|
+
* @returns {string} The URI of the icon corresponding to the state.
|
|
275
|
+
*/
|
|
276
|
+
Header.prototype._getIconForState = function () {
|
|
277
|
+
switch (this.getIconState()) {
|
|
278
|
+
case ValueState.Success:
|
|
279
|
+
return "sap-icon://sys-enter-2";
|
|
280
|
+
case ValueState.Error:
|
|
281
|
+
return "sap-icon://error";
|
|
282
|
+
case ValueState.Warning:
|
|
283
|
+
return "sap-icon://warning";
|
|
284
|
+
case ValueState.Information:
|
|
285
|
+
return "sap-icon://information";
|
|
286
|
+
default:
|
|
287
|
+
return "";
|
|
288
|
+
}
|
|
289
|
+
};
|
|
290
|
+
|
|
291
|
+
Header.prototype._validateIconProperties = function () {
|
|
292
|
+
if ((this.getIconSrc() || this.getIconInitials()) && this.getIconState() != ValueState.None) {
|
|
293
|
+
Log.warning("Invalid Icon configuration: You cannot set an icon with both src/initials and a state simultaneously. The Icon supports only one at a time. Remove either the src/initials or the state.");
|
|
294
|
+
}
|
|
247
295
|
};
|
|
248
296
|
|
|
249
297
|
/**
|
|
@@ -300,7 +348,7 @@ sap.ui.define([
|
|
|
300
348
|
aIds.push(this.getId() + "-dataTimestamp");
|
|
301
349
|
}
|
|
302
350
|
|
|
303
|
-
if (this.getIconSrc() || this.getIconInitials()) {
|
|
351
|
+
if (this.getIconSrc() || this.getIconInitials() || this.getIconState() !== ValueState.None) {
|
|
304
352
|
aIds.push(this._getAvatar().getId());
|
|
305
353
|
}
|
|
306
354
|
|
|
@@ -58,7 +58,7 @@ sap.ui.define([
|
|
|
58
58
|
* @implements sap.f.cards.IHeader
|
|
59
59
|
*
|
|
60
60
|
* @author SAP SE
|
|
61
|
-
* @version 1.
|
|
61
|
+
* @version 1.141.0
|
|
62
62
|
*
|
|
63
63
|
* @constructor
|
|
64
64
|
* @public
|
|
@@ -531,7 +531,9 @@ sap.ui.define([
|
|
|
531
531
|
aIds.push(this.getId() + "-dataTimestamp");
|
|
532
532
|
}
|
|
533
533
|
|
|
534
|
-
|
|
534
|
+
if (this.getAggregation("_unitOfMeasurement").getText()) {
|
|
535
|
+
aIds.push(this._getUnitOfMeasurement().getId());
|
|
536
|
+
}
|
|
535
537
|
|
|
536
538
|
if (this.getIconSrc() || this.getIconInitials()) {
|
|
537
539
|
aIds.push(this._getAvatar().getId());
|
|
@@ -37,6 +37,38 @@ sap.ui.define([
|
|
|
37
37
|
return bHasMainIndicator || bHasSideIndicators || bHasDetails || bHasDataTimestamp;
|
|
38
38
|
};
|
|
39
39
|
|
|
40
|
+
/**
|
|
41
|
+
* @override
|
|
42
|
+
*/
|
|
43
|
+
NumericHeaderRenderer.renderMainWrapperContent = function (oRm, oHeader) {
|
|
44
|
+
const oError = oHeader.getAggregation("_error");
|
|
45
|
+
const oToolbar = oHeader.getToolbar();
|
|
46
|
+
const bHasToolbar = oToolbar && oToolbar.getVisible();
|
|
47
|
+
const oBindingInfos = oHeader.mBindingInfos;
|
|
48
|
+
const bHasStatus = oHeader.getStatusVisible() && oHeader.getStatusText();
|
|
49
|
+
const bHasDataTimestamp = oHeader.getDataTimestamp() || oBindingInfos.dataTimestamp;
|
|
50
|
+
const bHasNumericPart = this.hasNumericPart(oHeader);
|
|
51
|
+
|
|
52
|
+
oRm.openStart("div").class("sapFCardHeaderTopRow").openEnd();
|
|
53
|
+
this.renderMainPart(oRm, oHeader);
|
|
54
|
+
|
|
55
|
+
if (!oError && (bHasToolbar || bHasStatus || bHasDataTimestamp)) {
|
|
56
|
+
this._renderToolbar(oRm, oToolbar, oHeader);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
oRm.close("div"); // .sapFCardHeaderTopRow
|
|
60
|
+
|
|
61
|
+
// Info sections (if any)
|
|
62
|
+
if (!oError) {
|
|
63
|
+
this._renderInfoSections(oRm, oHeader);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
// Numeric part below
|
|
67
|
+
if (bHasNumericPart && !oError) {
|
|
68
|
+
this.renderNumericPart(oRm, oHeader);
|
|
69
|
+
}
|
|
70
|
+
};
|
|
71
|
+
|
|
40
72
|
/**
|
|
41
73
|
* @override
|
|
42
74
|
*/
|
|
@@ -124,7 +156,7 @@ sap.ui.define([
|
|
|
124
156
|
oRm.renderControl(oSubtitle);
|
|
125
157
|
}
|
|
126
158
|
|
|
127
|
-
if (
|
|
159
|
+
if (bHasUnitOfMeasurement) {
|
|
128
160
|
oRm.renderControl(oUnitOfMeasurement);
|
|
129
161
|
}
|
|
130
162
|
|
|
@@ -186,21 +218,15 @@ sap.ui.define([
|
|
|
186
218
|
NumericHeaderRenderer._renderDetails = function(oRm, oNumericHeader) {
|
|
187
219
|
var oBindingInfos = oNumericHeader.mBindingInfos,
|
|
188
220
|
oDetails = oNumericHeader.getAggregation("_details"),
|
|
189
|
-
bHasDetails = oNumericHeader.getDetails() || oBindingInfos.details
|
|
190
|
-
oDataTimestamp = oNumericHeader.getAggregation("_dataTimestamp"),
|
|
191
|
-
bHasDataTimestamp = oNumericHeader.getDataTimestamp() || oBindingInfos.dataTimestamp;
|
|
221
|
+
bHasDetails = oNumericHeader.getDetails() || oBindingInfos.details;
|
|
192
222
|
|
|
193
|
-
if (!bHasDetails
|
|
223
|
+
if (!bHasDetails) {
|
|
194
224
|
return;
|
|
195
225
|
}
|
|
196
226
|
|
|
197
227
|
oRm.openStart("div")
|
|
198
228
|
.class("sapFCardHeaderDetailsWrapper");
|
|
199
229
|
|
|
200
|
-
if (bHasDataTimestamp) {
|
|
201
|
-
oRm.class("sapFCardHeaderLineIncludesDataTimestamp");
|
|
202
|
-
}
|
|
203
|
-
|
|
204
230
|
oRm.openEnd();
|
|
205
231
|
|
|
206
232
|
//show placeholder when there is binded value also
|
|
@@ -212,10 +238,6 @@ sap.ui.define([
|
|
|
212
238
|
oRm.renderControl(oDetails);
|
|
213
239
|
}
|
|
214
240
|
|
|
215
|
-
if (bHasDataTimestamp) {
|
|
216
|
-
oRm.renderControl(oDataTimestamp);
|
|
217
|
-
}
|
|
218
|
-
|
|
219
241
|
oRm.close("div");
|
|
220
242
|
};
|
|
221
243
|
|