@sapui5/sap.ushell 1.116.0 → 1.117.1

package/src/main/js/sap/ushell/ui/launchpad/SectionRenderer.js

@@ -0,0 +1,66 @@
+// Copyright (c) 2009-2023 SAP SE, All Rights Reserved
+
+sap.ui.define([], function () {
+    "use strict";
+
+    /**
+     * @name Section renderer.
+     * @static
+     * @private
+     */
+    var SectionRenderer = {
+        apiVersion: 2
+    };
+
+    function isSectionEmpty (section) {
+        var bDefaultAreaHasItems = !!section.getDefaultItems().length;
+        var bFlatAreaHasItems = !!section.getFlatItems().length;
+        var bCompactAreaHasItems = !!section.getCompactItems().length;
+        return !bDefaultAreaHasItems && !bCompactAreaHasItems && !bFlatAreaHasItems;
+    }
+
+    /**
+     * Renders the HTML for the given control, using the provided {@link sap.ui.core.RenderManager}.
+     *
+     * @param {sap.ui.core.RenderManager} rm the RenderManager that can be used for writing to the render output buffer
+     * @param {sap.ushell.ui.launchpad.Section} section an object representation of the control that should be rendered
+     */
+    SectionRenderer.render = function (rm, section) {
+        var sHelpId = section.getDefault() ? "recently-added-apps" : section.getDataHelpId();
+        var bEditable = section.getEditable();
+        var oNoVisualizationsText = section.getAggregation("_noVisualizationsText");
+
+        rm.openStart("div", section);
+        rm.class("sapUshellSection");
+        if (bEditable) {
+            rm.class("sapUshellSectionEdit");
+            rm.attr("tabindex", "0");
+        }
+        if (!section.getShowSection()) {
+            rm.class("sapUshellSectionHidden");
+        }
+        if (isSectionEmpty(section)) {
+            rm.class("sapUshellSectionNoVisualizations");
+            if (bEditable && section.getShowNoVisualizationsText()) {
+                rm.attr("aria-describedBy", oNoVisualizationsText.getId());
+            }
+        }
+        if (sHelpId) {
+            rm.attr("data-help-id", sHelpId);
+        }
+        rm.attr("role", "group");
+        rm.attr("aria-label", section.getAriaLabel());
+        rm.openEnd(); // div - tag
+
+        rm.renderControl(section.getAggregation("_title"));
+        rm.renderControl(section.getAggregation("_header"));
+        rm.renderControl(oNoVisualizationsText);
+        rm.renderControl(section.getAggregation("_defaultArea"));
+        rm.renderControl(section.getAggregation("_flatArea"));
+        rm.renderControl(section.getAggregation("_compactArea"));
+
+        rm.close("div");
+    };
+
+    return SectionRenderer;
+}, /* bExport= */ true);

package/src/main/js/sap/ushell/ui/launchpad/section/CompactArea.js

@@ -3,7 +3,7 @@
 /**
  * @fileOverview Provides control sap.ushell.ui.launchpad.section.CompactArea
  *
- * @version 1.116.0
+ * @version 1.117.1
  */
 
 sap.ui.define([
@@ -253,6 +253,19 @@ sap.ui.define([
         return itemIndex;
     };
 
+    /**
+     * Does a lookup on the internal items aggregation and searches for a proper dom ref to focus
+     *
+     * @returns {HTMLElement} the dom ref to focus
+     * @private
+     */
+    CompactArea.prototype.getFocusDomRef = function () {
+        if (this.getItems().length) {
+            return this.getItems()[0].getFocusDomRef();
+        }
+        return this.getDomRef();
+    };
+
     /**
      * Handles the onfocusin event.
      *

package/src/main/js/sap/ushell/ui/shell/ShellAppTitle.js

@@ -8,52 +8,70 @@
  * 1. Title only: only the title will be rendered inside the Shell Header
  * 2. Title with popover button: A button will be placed in the Shell Header Title area.
  *    When the user clicks on the button, a popover will raise and render the innerControl as its content.
- *
  *    innerControl: the content of the popover. Will be destroyed by the ShellAppTitle control.
  */
 sap.ui.define([
-    "sap/ushell/library",
     "sap/m/Bar",
     "sap/m/Button",
-    "sap/m/Title",
+    "sap/m/Label",
     "sap/m/library",
+    "sap/m/OverflowToolbar",
+    "sap/m/OverflowToolbarLayoutData",
+    "sap/m/OverflowToolbarPriority",
     "sap/m/Popover",
     "sap/m/ResponsivePopover",
+    "sap/m/Title",
     "sap/m/ToggleButton",
     "sap/ui/core/Core",
+    "sap/ui/core/Icon",
     "sap/ui/core/IconPool",
     "sap/ui/Device",
+    "sap/ui/performance/Measurement",
     "sap/ushell/Config",
-    "sap/ushell/ui/launchpad/AccessibilityCustomData",
+    "sap/ushell/library",
     "sap/ushell/resources",
-    "sap/ui/performance/Measurement",
-    "sap/ushell/services/AllMyApps"
+    "sap/ushell/ui/launchpad/AccessibilityCustomData"
 ], function (
-    library,
     Bar,
     Button,
-    Title,
-    mLibrary,
+    Label,
+    mobileLibrary,
+    OverflowToolbar,
+    OverflowToolbarLayoutData,
+    OverflowToolbarPriority,
     Popover,
     ResponsivePopover,
+    Title,
     ToggleButton,
     Core,
+    Icon,
     IconPool,
     Device,
+    Measurement,
     Config,
-    AccessibilityCustomData,
-    oResources,
-    Measurement
+    ushellLibrary,
+    ushellResources,
+    AccessibilityCustomData
 ) {
     "use strict";
 
-    var AppTitleState = library.AppTitleState;
-    var AllMyAppsState = library.AllMyAppsState;
-    var PlacementType = mLibrary.PlacementType;
+    // shortcut for sap.ushell.AppTitleState
+    var AppTitleState = ushellLibrary.AppTitleState;
+
+    // shortcut for sap.ushell.AllMyAppsState
+    var AllMyAppsState = ushellLibrary.AllMyAppsState;
+
+    // shortcut for sap.m.PlacementType
+    var PlacementType = mobileLibrary.PlacementType;
 
     var ShellAppTitle = Button.extend("sap.ushell.ui.shell.ShellAppTitle", {
         metadata: {
             library: "sap.ushell",
+            properties: {
+                title: { type: "string", group: "Data", defaultValue: null },
+                subTitle: { type: "string", group: "Data", defaultValue: null },
+                icon: { type: "sap.ui.core.URI", group: "Appearance", defaultValue: "sap-icon://folder" }
+            },
             associations: {
                 navigationMenu: {
                     type: "sap.ushell.ui.shell.ShellNavigationMenu"
@@ -74,10 +92,9 @@ sap.ui.define([
             apiVersion: 2,
             render: function (oRm, oControl) {
                 // Calculate visibility of the ShellAppTitle control and the state of the ShallNavMenu/AllMyAps UIs
-                var bShellAppTitleIsVisible = oControl._getControlVisibilityAndState(),
-                    sText = oControl.getText(),
-                    oModel = oControl.getModel();
-
+                var bShellAppTitleIsVisible = oControl._getControlVisibilityAndState();
+                var sText = oControl.getText();
+                var oModel = oControl.getModel();
 
                 oRm.openStart("h1", oControl);
                 oRm.class("sapUshellHeadTitle");
@@ -101,9 +118,9 @@ sap.ui.define([
                     oRm.attr("role", "button");
                     oRm.attr("aria-haspopup", "dialog");
                     if (oModel && ShellAppTitle._getCurrentState() === AppTitleState.AllMyAppsOnly) {
-                        oRm.attr("aria-label", oResources.i18n.getText("ShowAllMyApps_AriaLabel", [sText]));
+                        oRm.attr("aria-label", ushellResources.i18n.getText("ShowAllMyApps_AriaLabel", [sText]));
                     } else {
-                        oRm.attr("aria-label", oResources.i18n.getText("ShellNavigationMenu_AriaLabel", [sText]));
+                        oRm.attr("aria-label", ushellResources.i18n.getText("ShellNavigationMenu_AriaLabel", [sText]));
                     }
                 }
                 oRm.openEnd(); // span - tag
@@ -246,10 +263,10 @@ sap.ui.define([
             "FLP"
         );
 
-        var oModel = this.getModel(),
-            sShellStateName = Config.last("/core/shell/model/currentState/stateName"),
-            bNavMenuEnabled = this._isNavMenuEnabled(),
-            bVisible = bNavMenuEnabled;
+        var oModel = this.getModel();
+        var sShellStateName = Config.last("/core/shell/model/currentState/stateName");
+        var bNavMenuEnabled = this._isNavMenuEnabled();
+        var bVisible = bNavMenuEnabled;
 
         if (!oModel) {
             return false;
@@ -285,7 +302,7 @@ sap.ui.define([
     /****************************************** Create Popover UI ******************************************/
 
     /*
-    * Create and return the popover object that will contains the AllMyApps UI
+    * Create and return the popover object that will contain the AllMyApps UI
     */
     ShellAppTitle.prototype._createAllMyAppsPopover = function () {
         var oAllMyApps = Core.byId(this.getAllMyApps());
@@ -316,9 +333,9 @@ sap.ui.define([
         oAllMyAppsPopover.attachAfterOpen(function () {
             oAllMyApps.getController()._afterOpen();
 
-            var oHeader = oAllMyAppsPopover.getCustomHeader(),
-                oBackButton = oHeader.getContentLeft()[0],
-                oToggleButton = oHeader.getContentLeft()[1];
+            var oHeader = oAllMyAppsPopover.getCustomHeader();
+            var oBackButton = oHeader.getContentLeft()[0];
+            var oToggleButton = oHeader.getContentLeft()[1];
 
             if (oToggleButton.getVisible()) {
                 oToggleButton.firePress();
@@ -338,23 +355,48 @@ sap.ui.define([
     };
 
     /*
-    * Create and return the popover object that will contains the ShellNavMenu UI
+    * Create and return the popover object that will contain the ShellNavMenu UI
     */
     ShellAppTitle.prototype._createNavMenuPopover = function () {
         var oNavMenu = Core.byId(this.getNavigationMenu());
 
+        this.oTitle = new Label("navMenuInnerTitle", {
+            design: "Bold",
+            text: "{/application/title}",
+            layoutData: new OverflowToolbarLayoutData({
+                priority: OverflowToolbarPriority.High,
+                shrinkable: false
+            })
+        });
+        this.oSecondTitle = new Label("navMenuInnerSecondTitle", {
+            text: "{/title}",
+            layoutData: new OverflowToolbarLayoutData({
+                priority: OverflowToolbarPriority.Low,
+                shrinkable: false
+            })
+        });
+        this.oIconControl = new Icon({
+            src: "{/application/icon}",
+            layoutData: new OverflowToolbarLayoutData({
+                priority: OverflowToolbarPriority.NeverOverflow,
+                shrinkable: false
+            })
+        });
+
+        this.oTitleBar = new OverflowToolbar("navMenuTitleBar", {
+            content: [this.oIconControl, this.oTitle, this.oSecondTitle]
+        });
+
         var oNavMenuPopover = new Popover("sapUshellAppTitlePopover", {
             placement: PlacementType.Bottom,
-            title: "",
             showArrow: true,
-            showHeader: {
-                path: "/ShellAppTitleState",
-                formatter: function (oCurrentState) {
-                    return oCurrentState !== AppTitleState.ShellNavMenu;
-                }
-            },
+            showHeader: false,
             contentWidth: "20rem",
-            content: oNavMenu
+            horizontalScrolling: false,
+            content: [
+                this.oTitleBar,
+                oNavMenu
+            ]
         }).addStyleClass("sapContrastPlus");
 
         if (Config.last("/core/services/allMyApps/enabled")) {
@@ -392,15 +434,27 @@ sap.ui.define([
         return oNavMenuPopover;
     };
 
+    ShellAppTitle.prototype._setAllMyAppsTitle = function (text) {
+        var oCurrentState = Config.last("/core/shellHeader");
+        if (oCurrentState.title && oCurrentState.ShellAppTitleState === "AllMyAppsOnly" || oCurrentState.ShellAppTitleState === "AllMyApps") {
+            text = text + " - " + oCurrentState.title;
+        }
+        Title.prototype.setText.apply(this, [text]);
+    };
+
     /*
-    * Create and return the popover header, containing back button and toggle button
-    */
+     * Create and return the popover header, containing back button and toggle button
+     */
     ShellAppTitle.prototype._getPopoverHeader = function () {
         var oAllMyAppsTitle = new Title({
-            text: oResources.i18n.getText("allMyApps_headerTitle"),
+            text: ushellResources.i18n.getText("allMyApps_headerTitle"),
             level: "H1"
         });
 
+        // The title is set in three different places (ShellAppTitle, AllMyApps.controller, ShellModel).
+        // To ensure correct title set if a subtitle is given, we override the setter to ensure the logic is only done once.
+        oAllMyAppsTitle.setText = this._setAllMyAppsTitle.bind(oAllMyAppsTitle);
+
         var oPopoverHeader = new Bar("sapUshellShellAppPopoverHeader", {
             contentLeft: [
                 this._createPopoverBackButton(),
@@ -419,15 +473,15 @@ sap.ui.define([
     };
 
     /*
-    * Popover Back Button functionality:
-    * 1. In case the Master area is in first level - switch to ShellNavMenu
-    * 2. In case the Master area is in second level - return the Master area to the first level (call switchToInitialState)
-    */
+     * Popover Back Button functionality:
+     * 1. In case the Master area is in first level - switch to ShellNavMenu
+     * 2. In case the Master area is in second level - return the Master area to the first level (call switchToInitialState)
+     */
     ShellAppTitle.prototype._createPopoverBackButton = function () {
         var oBackButton = new Button("sapUshellAppTitleBackButton", {
             icon: IconPool.getIconURI("nav-back"),
             press: [this._popoverBackButtonPressHandler, this],
-            tooltip: oResources.i18n.getText("backBtn_tooltip"),
+            tooltip: ushellResources.i18n.getText("backBtn_tooltip"),
             visible: this.getAllMyAppsController().getBackButtonVisible()
         });
         oBackButton.addStyleClass("sapUshellCatalogNewGroupBackButton");
@@ -436,8 +490,8 @@ sap.ui.define([
     };
 
     ShellAppTitle.prototype._popoverBackButtonPressHandler = function () {
-        var oAllMyAppsController = this.getAllMyAppsController(),
-            oAllMyAppsState = oAllMyAppsController.getCurrentState();
+        var oAllMyAppsController = this.getAllMyAppsController();
+        var oAllMyAppsState = oAllMyAppsController.getCurrentState();
 
         // In case of clicking "back" when in FIRST_LEVEL - switch to ShellNavMenu
         if ((oAllMyAppsState === AllMyAppsState.FirstLevel) ||
@@ -458,8 +512,8 @@ sap.ui.define([
     };
 
     /*
-    * This button should be visible only on devices, and is used for toggling between the master and the details areas
-    */
+     * This button should be visible only on devices, and is used for toggling between the master and the details areas
+     */
     ShellAppTitle.prototype._createPopoverToggleButton = function () {
         var oAllMyAppsController = this.getAllMyAppsController();
 
@@ -468,10 +522,10 @@ sap.ui.define([
             press: function (eEvent) {
                 oAllMyAppsController.switchToInitialState();
                 this.setTooltip(eEvent.getParameter("pressed") ?
-                    oResources.i18n.getText("ToggleButtonHide") :
-                    oResources.i18n.getText("ToggleButtonShow"));
+                    ushellResources.i18n.getText("ToggleButtonHide") :
+                    ushellResources.i18n.getText("ToggleButtonShow"));
             },
-            tooltip: oResources.i18n.getText("ToggleButtonShow"),
+            tooltip: ushellResources.i18n.getText("ToggleButtonShow"),
             visible: oAllMyAppsController.getToggleListButtonVisible()
         });
 
@@ -485,14 +539,12 @@ sap.ui.define([
     };
 
     /*
-    * Create and return the popover footer, containing a button for switching from ShellNavMenu to AllMyApps
-    */
+     * Create and return the popover footer, containing a button for switching from ShellNavMenu to AllMyApps
+     */
     ShellAppTitle.prototype._getPopoverFooterContent = function () {
-        var that = this,
-            oAllMyAppsButton;
-
-        oAllMyAppsButton = new Button("allMyAppsButton", {
-            text: oResources.i18n.getText("allMyApps_launchingButtonTitle"),
+        var that = this;
+        var oAllMyAppsButton = new Button("allMyAppsButton", {
+            text: ushellResources.i18n.getText("allMyApps_launchingButtonTitle"),
             press: function () {
                 that._openCloseAllMyAppsPopover();
 
@@ -519,7 +571,7 @@ sap.ui.define([
             contentMiddle: [oAllMyAppsButton]
         });
         this.addCustomData(oAllMyAppsButton, "role", "button");
-        this.addCustomData(oAllMyAppsButton, "aria-label", oResources.i18n.getText("allMyApps_launchingButtonTitle"));
+        this.addCustomData(oAllMyAppsButton, "aria-label", ushellResources.i18n.getText("allMyApps_launchingButtonTitle"));
         return oPopoverFooterContent;
     };
 
@@ -568,8 +620,8 @@ sap.ui.define([
     ShellAppTitle.prototype.onsapenter = ShellAppTitle.prototype.onclick;
 
     ShellAppTitle.prototype.exit = function () {
-        var oNavMenu = Core.byId(this.getNavigationMenu()),
-            oAllMyApps = Core.byId(this.getAllMyApps());
+        var oNavMenu = Core.byId(this.getNavigationMenu());
+        var oAllMyApps = Core.byId(this.getAllMyApps());
 
         if (oNavMenu) {
             oNavMenu.destroy();

package/src/main/js/sap/ushell/ui/shell/ShellHeadItem.js

@@ -30,7 +30,7 @@ sap.ui.define([
      * @extends sap.ui.core.Control
      *
      * @author SAP SE
-     * @version 1.116.0
+     * @version 1.117.1
      *
      * @constructor
      * @private