@sapui5/sap.ushell 1.129.1 → 1.130.1

package/src/main/js/sap/ushell/components/shell/Settings/appearance/Appearance.controller.js

@@ -12,10 +12,10 @@ sap.ui.define([
     "sap/ui/Device",
     "sap/ui/model/json/JSONModel",
     "sap/ui/thirdparty/jquery",
+    "sap/m/GroupHeaderListItem",
     "sap/ushell/Config",
     "sap/ushell/EventHub",
     "sap/ushell/resources",
-    "sap/ushell/services/DarkModeSupport",
     "sap/ushell/User",
     "sap/ushell/utils",
     "sap/ushell/Container"
@@ -31,10 +31,10 @@ sap.ui.define([
     Device,
     JSONModel,
     jQuery,
+    GroupHeaderListItem,
     Config,
     EventHub,
     ushellResources,
-    DarkModeSupport,
     User,
     ushellUtils,
     Container
@@ -44,44 +44,6 @@ sap.ui.define([
     // shortcut for sap.ui.core.MessageType
     var MessageType = coreLibrary.MessageType;
 
-    // gets the common name of complementary (dark/lite) themes
-    function getCommonName (themeId) {
-        switch (themeId) {
-            case "sap_fiori_3":
-            case "sap_fiori_3_dark":
-                return "SAP Quartz";
-            case "sap_horizon":
-            case "sap_horizon_dark":
-                return "SAP Horizon";
-            case "sap_fiori_3_hcb":
-            case "sap_fiori_3_hcw":
-                return ushellResources.i18n.getText("AppearanceHighContrastTheme", ["SAP Quartz"]);
-            case "sap_horizon_hcb":
-            case "sap_horizon_hcw":
-                return ushellResources.i18n.getText("AppearanceHighContrastTheme", ["SAP Horizon"]);
-            default:
-                Log.error("Can not find common name for the theme", themeId);
-                return themeId || "";
-        }
-    }
-
-    var SAP_THEMES = {
-        base: "sapUshellBaseIconStyle",
-        sap_bluecrystal: "sapUshellBlueCrystalIconStyle",
-        sap_belize_hcb: "sapUshellHCBIconStyle sapUshellHCBIconStyleOnHCB",
-        sap_belize_hcw: "sapUshellHCWIconStyle sapUshellHCWIconStyleOnHCW",
-        sap_belize: "sapUshellBelizeIconStyle",
-        sap_belize_plus: "sapUshellPlusIconStyle",
-        sap_fiori_3_hcb: "sapUshellQuartzHCBIconStyle sapUshellHCBIconStyleOnHCB",
-        sap_fiori_3_hcw: "sapUshellQuartzHCWIconStyle sapUshellHCWIconStyleOnHCW",
-        sap_fiori_3: "sapUshellQuartzLightIconStyle",
-        sap_fiori_3_dark: "sapUshellQuartzDarkIconStyle",
-        sap_horizon_hcb: "sapUshellHorizonHCBIconStyle sapUshellHCBIconStyleOnHCB",
-        sap_horizon_hcw: "sapUshellHorizonHCWIconStyle sapUshellHCWIconStyleOnHCW",
-        sap_horizon: "sapUshellHorizonLightIconStyle",
-        sap_horizon_dark: "sapUshellHorizonDarkIconStyle"
-    };
-
     return Controller.extend("sap.ushell.components.shell.Settings.appearance.Appearance", {
         TILE_SIZE: {
             Small: 0,
@@ -93,42 +55,51 @@ sap.ui.define([
         },
 
         onInit: function () {
-            var oView = this.getView();
-
+            const oView = this.getView();
             this.oUser = Container.getUser();
-            this.aThemeListFromServer = oView.getViewData().themeList || [];
+            const oViewData = oView.getViewData(); // ViewData is set in AppearanceEntry.js
+            this.aThemeListFromServer = oViewData.themeList || [];
+            this.aThemeSets = oViewData.themeSets || [];
+            this.sThemeRoot = oViewData.themeRoot; // for avatar urls
 
             this.oPersonalizers = {};
 
             // set models
-            var oResourceModel = ushellResources.getTranslationModel();
+            const oResourceModel = ushellResources.getTranslationModel();
             oView.setModel(oResourceModel, "i18n");
             oView.setModel(this.getConfigurationModel(), "config");
 
-            // listener
-            this._fnHandleThemeApplied = this._handleThemeApplied.bind(this);
-            Theming.attachApplied(this._fnHandleThemeApplied);
-
             this._oDarkModeModel = this.getDarkModeModel(this.aThemeListFromServer);
             oView.setModel(this._oDarkModeModel, "darkMode");
 
             // Model for the tab with theme list
-            var oUserTheme = this.oUser.getTheme();
             oView.setModel(new JSONModel({
-                options: this._getThemeListData(this.aThemeListFromServer, oUserTheme),
-                ariaTexts: { headerLabel: ushellResources.i18n.getText("Appearance") }
+                options: this._getThemeListData(this.oUser.getTheme()),
+                ariaTexts: { headerLabel: ushellResources.i18n.getText("Appearance") },
+                deprecatedThemeSelected: this.bShowDeprecationMsg
             }));
 
-            this._oInitPromise = Promise.all([
-                this._oConfigModelPromise,
-                this._oDarkModeModelPromise
-            ]);
+            // listener
+            this._fnHandleThemeApplied = this._handleThemeApplied.bind(this);
+            Theming.attachApplied(this._fnHandleThemeApplied);
         },
 
         onExit: function () {
             Theming.detachApplied(this._fnHandleThemeApplied);
         },
 
+        onAvatarError: function (oError) {
+            // if the avatar image has errors like 404, delete the avatar and replace it with an icon
+            oError.oSource.getBindingContext()?.setProperty("avatar", "");
+        },
+
+        // Group header text for a set is a set label. Other themes not in a set are grouped under Individual Themes
+        getThemeSetHeader: function (oGroup) {
+            const oSet = this.aThemeSets.find((set) => oGroup.key === set.id);
+            const sGroupTitle = oSet?.label || ushellResources.i18n.getText("AppearanceIndividualThemes");
+            return new GroupHeaderListItem({title: sGroupTitle});
+        },
+
         // Return the ID of the currently selected theme in the theme list.
         // If no selection, return the current user theme.
         _getSelectedTheme: function () {
@@ -137,63 +108,99 @@ sap.ui.define([
             return oBindingContext ? oBindingContext.getProperty("id") : this.oUser.getTheme();
         },
 
-        _getThemeListData: function (aThemeList, sCurrentThemeId) {
-            if (this.oUser.isSetThemePermitted() === false) {
-                var sName = sCurrentThemeId;
-                for (var i = 0; i < aThemeList.length; i++) {
-                    if (aThemeList[i].id === sCurrentThemeId) {
-                        sName = aThemeList[i].name || sCurrentThemeId;
-                        break;
-                    }
+        // The main function. Builds the list of themes. Items are grouped by setId.
+        _getThemeListData: function (sCurrentThemeId) {
+            const aThemes = this.aThemeListFromServer || [];
+            const aSets = this.aThemeSets || [];
+            const aListData = [];
+            const sThemeRoot = this.sThemeRoot;
+
+            function _getThemeSet (sId) {
+                return aSets.find((set) => !!set.set.themes?.find?.((theme) => theme?.id === sId));
+            }
+
+            function _getAvatarUrl (oTheme) {
+                if (sThemeRoot && oTheme?.avatarRuntimeUrl) {
+                    return sThemeRoot + oTheme.avatarRuntimeUrl;
                 }
+                return undefined;
+            }
+
+            this.bShowDeprecationMsg = false;
+
+            // If the user is not allowed to change themes, return only the current theme
+            if (!this._isThemeCofigurable() || this.oUser.isSetThemePermitted() === false) {
+                const oCurrentTheme = aThemes.find((theme) => theme?.id === sCurrentThemeId);
                 return [{
                     id: sCurrentThemeId,
-                    name: sName
+                    name: oCurrentTheme?.name || sCurrentThemeId,
+                    icon: "sap-icon://palette",
+                    avatar: _getAvatarUrl(oCurrentTheme),
+                    deprecated: false,
+                    isSelected: true
                 }];
             }
-            var oDarkModeModelData = this.getView().getModel("darkMode").getData();
-            var isDarkModeActive = this._isDarkModeActive();
-            return aThemeList.reduce(function (aList, oTheme) {
-                var oThemeForModel = {
-                    id: oTheme.id,
-                    name: oTheme.name || oTheme.id || "",
-                    isVisible: true,
-                    isSelected: oTheme.id === sCurrentThemeId,
-                    isSapTheme: !!SAP_THEMES[oTheme.id]
+
+            // add sets from the theme list for automatic selection ("set autmatically" items)
+            if (this._areSetsVisible()) {
+                const sCommonText = ushellResources.i18n.getText("AppearanceAutomaticSelection");
+                aSets.forEach((set) => {
+                    const oItemData = {
+                        id: set.id,
+                        name: sCommonText,
+                        icon: "sap-icon://sys-monitor",
+                        avatar: undefined, // TBD: replace with _getAvatarUrl(set), as soon as the sap.m.Image bug is fixed
+                        deprecated: set.deprecated === true,
+                        setId: set.id,
+                        isSelected: false
+                    };
+                    aListData.push(oItemData);
+                });
+            }
+
+            // add themes from the server list
+            aThemes.forEach((theme) => {
+                const oThemeSet = _getThemeSet(theme?.id) || {};
+                const oItemData = {
+                    id: theme?.id,
+                    name: theme?.name || theme?.id || "",
+                    icon: "sap-icon://palette",
+                    avatar: _getAvatarUrl(theme),
+                    deprecated: theme?.deprecated === true,
+                    setId: oThemeSet.id,
+                    isSelected: false
                 };
+                aListData.push(oItemData);
+            });
 
-                if (isDarkModeActive && oDarkModeModelData.supportedThemes[oTheme.id]) {
-                    var oThemeDarkModeConfig = oDarkModeModelData.supportedThemes[oTheme.id];
-                    if (oThemeDarkModeConfig.complementaryTheme === sCurrentThemeId || oTheme.id === sCurrentThemeId) {
-                        // if one theme from pair is selected show selected theme with common name
-                        oThemeForModel.isVisible = oTheme.id === sCurrentThemeId;
-                    } else {
-                        // if theme is not selected, show light theme as combine
-                        oThemeForModel.isVisible = oThemeDarkModeConfig.mode === DarkModeSupport.Mode.LIGHT;
-                    }
-                    // don't change the name, because leads to different sorting and error in onAfterRendering
-                    oThemeForModel.combineName = oThemeDarkModeConfig.combineName;
+            // set selection: either the "set automatically" or individual theme
+            let sSelectedId = sCurrentThemeId;
+            if (this._isDarkModeActive()) {
+                const oSet = _getThemeSet(sCurrentThemeId);
+                if (oSet) {
+                    sSelectedId = oSet.id;
                 }
+            }
+            const oSelectedItem = aListData.find((item) => item.id === sSelectedId);
+            if (oSelectedItem) {
+                oSelectedItem.isSelected = true;
+                this.bShowDeprecationMsg = oSelectedItem.deprecated;
+            }
 
-                aList.push(oThemeForModel);
-                return aList;
-            }, []).sort(function (theme1, theme2) {
-                var iOrder = theme1.name.localeCompare(theme2.name);
-                if (iOrder === 0) {
-                    iOrder = theme1.id.localeCompare(theme2.id);
-                }
-                return iOrder;
-            });
+            return aListData;
+        },
+
+        _isThemeCofigurable: function () {
+            return Config.last("/core/shell/model/setTheme") !== false;
         },
 
         getConfigurationModel: function () {
             const oConfigModel = new JSONModel({
-                themeConfigurable: Config.last("/core/shell/model/setTheme"),
+                themeConfigurable: this._isThemeCofigurable(),
                 sizeBehaviorConfigurable: Config.last("/core/home/sizeBehaviorConfigurable"),
                 tileSize: this.TILE_SIZE[Config.last("/core/home/sizeBehavior")],
                 contentDensityConfigurable: Config.last("/core/shell/model/contentDensity") && !Device.system.phone,
                 isCozyContentMode: document.body.classList.contains("sapUiSizeCozy"),
-                sapUiContentIconColor: "",
                 textAlign: Device.system.phone ? "Left" : "Right",
                 showContentProviderInfoOnVisualizationsConfigurable:
                     Config.last("/core/contentProviders/providerInfo/enabled") &&
@@ -202,95 +209,37 @@ sap.ui.define([
                     Config.last("/core/contentProviders/providerInfo/showContentProviderInfoOnVisualizations")
             });
 
-            this._oConfigModelPromise = ushellUtils.getThemingParameters(["sapUiContentIconColor"]).then(([sSapUiContentIconColor]) => {
-                oConfigModel.setProperty("/sapUiContentIconColor", sSapUiContentIconColor);
-            });
-
             return oConfigModel;
         },
 
-        getDarkModeModel: function (aThemeList) {
-            var oDarkModeModel = new JSONModel({
-                enabled: false,
-                detectionSupported: false,
-                detectionEnabled: false,
-                supportedThemes: {}
-            });
+        getDarkModeModel: function () {
+            const oUrlSearch = new URLSearchParams(window.location.search);
+            const bDetectionSupported = !oUrlSearch.get("sap-theme") && !oUrlSearch.get("sap-ui-theme");
+            const bThemeConfigurable = this._isThemeCofigurable();
 
-            if (Config.last("/core/darkMode/enabled")) {
-                this._oDarkModeModelPromise = Container.getServiceAsync("DarkModeSupport").then(function (oDarkModeSupport) {
-                    oDarkModeModel.setProperty("/enabled", true);
-                    oDarkModeModel.setProperty("/detectionSupported", oDarkModeSupport.canAutomaticallyToggleDarkMode());
-                    // if detection is not supported, e.g. due to the "&sap-theme=" URL parameter,
-                    // then do not enable dark mode detection disregarding the user setting.
-                    oDarkModeModel.setProperty("/detectionEnabled", oDarkModeSupport.canAutomaticallyToggleDarkMode() && this.oUser.getDetectDarkMode());
-                    oDarkModeModel.setProperty("/supportedThemes", this._getSupportedDarkModeThemes(aThemeList, Config.last("/core/darkMode/supportedThemes") || []));
-                }.bind(this));
-            } else {
-                this._oDarkModeModelPromise = Promise.resolve();
-            }
+            const oDarkModeModel = new JSONModel({
+                enabled: bThemeConfigurable,
+                detectionSupported: bThemeConfigurable && bDetectionSupported,
+                detectionEnabled: bThemeConfigurable && bDetectionSupported && this.oUser.getDetectDarkMode()
+            });
 
             return oDarkModeModel;
         },
 
-        _getSupportedDarkModeThemes: function (aThemeList, aSupportedThemePairs) {
-            var oThemeNamesMap = aThemeList.reduce(function (oResult, oTheme) {
-                oResult[oTheme.id] = oTheme.name;
-                return oResult;
-            }, {});
-
-            return aSupportedThemePairs.reduce(function (oResult, oPair) {
-                var sLightThemeId = oPair.light;
-                var sDarkThemeId = oPair.dark;
-                var sLightThemeName = oThemeNamesMap[sLightThemeId];
-                var sDarkThemeName = oThemeNamesMap[sDarkThemeId];
-
-                if (sLightThemeName && sDarkThemeName && !oResult[sLightThemeId] && !oResult[sDarkThemeId]) {
-                    // skip if some theme is missing from pair in aThemeList or some of the theme is used (wrong configuration)
-                    var sCombineName = getCommonName(sLightThemeId);
-                    oResult[sLightThemeId] = {
-                        mode: DarkModeSupport.Mode.LIGHT,
-                        complementaryTheme: sDarkThemeId,
-                        combineName: sCombineName
-                    };
-                    oResult[sDarkThemeId] = {
-                        mode: DarkModeSupport.Mode.DARK,
-                        complementaryTheme: sLightThemeId,
-                        combineName: sCombineName
-                    };
-                }
-                return oResult;
-            }, {});
-        },
-
         onAfterRendering: function () {
-            var bDarkModeActive = this._isDarkModeActive();
             var isListSelected = this.getView().getModel("config").getProperty("/themeConfigurable");
             var oList = this.getView().byId("themeList");
-            var items = oList.getItems();
-
             oList.toggleStyleClass("sapUshellThemeListDisabled", !isListSelected);
-            items.forEach(function (oListItem) {
-                var sThemeId = oListItem.getCustomData()[0].getValue();
-                var oIcon = oListItem.getContent()[0].getItems()[0].getItems()[0];
-
-                if (SAP_THEMES[sThemeId]) {
-                    oIcon.addStyleClass(SAP_THEMES[sThemeId]);
-                }
-                oIcon.toggleStyleClass("sapUshellDarkMode", bDarkModeActive); // special icon for combined themes in the dark mode
-            });
         },
 
-        _handleThemeApplied: async function () {
+        _handleThemeApplied: function () {
             var oConfigModel = this.getView().getModel("config");
             if (oConfigModel) {
-                const [sSapUiContentIconColor] = await ushellUtils.getThemingParameters(["sapUiContentIconColor"]);
-                oConfigModel.setProperty("/sapUiContentIconColor", sSapUiContentIconColor);
                 // readjusts the theme list after the dark mode change
-                var oUserTheme = this.oUser.getTheme();
-                var aThemeListData = this._getThemeListData(this.aThemeListFromServer, oUserTheme);
-
-                this.getView().getModel().setProperty("/options", aThemeListData);
+                var aThemeListData = this._getThemeListData(this.oUser.getTheme());
+                const oViewModel = this.getView().getModel();
+                oViewModel.setProperty("/options", aThemeListData);
+                oViewModel.setProperty("/deprecatedThemeSelected", this.bShowDeprecationMsg);
             }
         },
 
@@ -336,6 +285,7 @@ sap.ui.define([
             var oConfigModel = this.getView().getModel("config");
             var aSavePromises = [];
 
+            // onSaveThemes may switch dark mode on and off, therefore, the order of calls is important here
             if (oConfigModel.getProperty("/themeConfigurable")) {
                 aSavePromises.push(this.onSaveThemes().then(function () {
                     EventHub.emit("themeChanged", Date.now());
@@ -371,13 +321,23 @@ sap.ui.define([
             return this._applyDarkMode(); // make sure that the dark mode is applied after the theme change
         },
 
+        // If the user selects automatic entry in a set, set a theme from the set and enable dark mode automation.
+        // Otherwise (if a specific theme is selected), save this specific theme and disable automation.
         onSaveThemes: function () {
-            var oConfigModel = this.getView().getModel("config");
-            var sNewThemeId = this._getSelectedTheme();
-            var oUser = this.oUser;
-            var sOriginalThemeId = oUser.getTheme(User.prototype.constants.themeFormat.ORIGINAL_THEME);
+            let sNewThemeId = this._getSelectedTheme();
+            const oUser = this.oUser;
+            const sOriginalThemeId = oUser.getTheme(User.prototype.constants.themeFormat.ORIGINAL_THEME);
+
+            // If the set entry is selected, instead of an individual theme
+            const oSet = (this.aThemeSets || []).find((set) => set.id === sNewThemeId);
+            if (oSet) {
+                // Set any theme from the set. The DarkModesupport will find a suitable theme anyway.
+                sNewThemeId = oSet.set.themes[0].id;
+            }
+            // if a set is selected, the user has enabled detection, else disabled it
+            this._oDarkModeModel.setProperty("/detectionEnabled", !!oSet);
 
-            if (sNewThemeId && sNewThemeId !== sOriginalThemeId && oConfigModel.getProperty("/themeConfigurable")) {
+            if (sNewThemeId && sNewThemeId !== sOriginalThemeId) {
                 oUser.setTheme(sNewThemeId);
                 return this._updateUserPreferences(oUser)
                     .then(function () {
@@ -478,16 +438,10 @@ sap.ui.define([
             return Promise.resolve();
         },
 
-        onSaveDarkModeEnabledSuccess: function (oUser, sNewDarkModeEnabled) {
-            return Container.getServiceAsync("DarkModeSupport")
-                .then(function (oDarkModeSupport) {
-                    oUser.resetChangedProperty("detectDarkMode");
-                    if (sNewDarkModeEnabled) {
-                        oDarkModeSupport.enableDarkModeBasedOnSystem();
-                    } else {
-                        oDarkModeSupport.disableDarkModeBasedOnSystem();
-                    }
-                });
+        onSaveDarkModeEnabledSuccess: async function (oUser, sNewDarkModeEnabled) {
+            oUser.resetChangedProperty("detectDarkMode");
+            const oDarkModeSupport = await Container.getServiceAsync("DarkModeSupport");
+            oDarkModeSupport.toggleDetection(!!sNewDarkModeEnabled);
         },
 
         // Save the value of the Enable Auto Dark Mode Detection switch
@@ -599,30 +553,28 @@ sap.ui.define([
         },
 
         // applies dark mode after the user has selected a new theme
-        _applyDarkMode: function () {
-            var oModel = this._oDarkModeModel;
-            var oPromise;
-            if (oModel.getProperty("/enabled") && oModel.getProperty("/detectionSupported") && oModel.getProperty("/detectionEnabled")) {
-                oPromise = Container.getServiceAsync("DarkModeSupport")
-                    .then(function (oDarkModeSupport) {
-                        oDarkModeSupport._toggleDarkModeBasedOnSystemColorScheme();
-                    });
-            } else {
-                oPromise = Promise.resolve();
+        _applyDarkMode: async function () {
+            if (this._areSetsVisible()) { // only if sets are available and enabled
+                const oDarkModeSupport = await Container.getServiceAsync("DarkModeSupport");
+                oDarkModeSupport.toggleDetection(this._isDarkModeActive());
             }
-
-            return oPromise;
         },
 
         _isDarkModeActive: function () {
-            var oModelData = this._oDarkModeModel.getProperty("/");
+            const oModelData = this._oDarkModeModel.getProperty("/");
             return oModelData.enabled && oModelData.detectionSupported && oModelData.detectionEnabled;
         },
 
+        _areSetsVisible: function () {
+            const oModelData = this._oDarkModeModel.getProperty("/");
+            return oModelData.enabled && oModelData.detectionSupported;
+        },
+
         changeSystemModeDetection: function () {
             // update the theme list after the dark mode detection is changed by the user
-            var oUserTheme = this._getSelectedTheme();
-            this.getView().getModel().setProperty("/options", this._getThemeListData(this.aThemeListFromServer, oUserTheme));
+            const oViewModel = this.getView().getModel();
+            oViewModel.setProperty("/options", this._getThemeListData(this._getSelectedTheme()));
+            oViewModel.setProperty("/deprecatedThemeSelected", this.bShowDeprecationMsg);
             this.getView().invalidate();
         }
     });