GPII-4439: Buttons GREY if they will not work with this version of Morphic

messageBundles/gpii-app-messageBundle_bg.json

@@ -35,6 +35,8 @@
         "keyedIn": "Вашите настройки са запазени в Morphic Cloud."
     },
 
+    "gpii_qss_unknownButtonPresenter_notification": "Бутонът не се поддържа от тази версия на Morphic. За да проработи Трябва да обновите Morphic.",
+
     "gpii_qssWidget_volumeStepper_incrementButton": "По-силно",
     "gpii_qssWidget_volumeStepper_decrementButton": "По-тихо",
     "gpii_qssWidget_volumeStepper_upperBoundError": "Това е най-високата настройка",

messageBundles/gpii-app-messageBundle_en.json

@@ -39,6 +39,8 @@
         "keyedIn": "Your settings were saved to the Morphic Cloud."
     },
 
+    "gpii_qss_unknownButtonPresenter_notification": "This button is not supported on this version of Morphic. This computer will need to be updated to a newer version of Morphic before this button will work here.",
+
     "gpii_psp_qssWidget_learnMore": "Help / Learn more",
     "gpii_psp_qssWidget_helpAndMoreOptions": "Help & More options",
     "gpii_psp_qssWidget_hideSideCar": "Hide",

messageBundles/gpii-app-qss-settings_bg.json

@@ -113,6 +113,11 @@
         "tooltip": "<p>Отваря уеб страница където да промените бутоните в лентата.</p>",
         "title": "Промени бутоните"
     },
+    "gpii_app_qss_settings_unknown-button": {
+        "tooltip": "<p>Трябва да обновите Morphic, за да използвате този бутон.</p>",
+        "title": "",
+        "tip": ""
+    },
     "gpii_app_qss_settings_common-colorVision": {
         "tooltip": "<p>Променя цветовете на екрана с цел да се отличават по-лесно.</p>",
         "title": "Филтри Цветове",

messageBundles/gpii-app-qss-settings_en.json

@@ -153,6 +153,11 @@
         "tooltip": "<p>Open the web tool to customize quickstrip's buttons.</p>",
         "title": "Customize Quickstrip"
     },
+    "gpii_app_qss_settings_unknown-button": {
+        "tooltip": "<p>Button will not work here until Morphic is updated.</p>",
+        "title": "",
+        "tip": ""
+    },
     "gpii_app_qss_settings_common-colorVision": {
         "tooltip": "<p>Change the colors displayed on the screen to make things easier to view or distinguish.</p>",
         "title": "Color Vision",

src/main/common/utils.js

@@ -256,37 +256,58 @@ gpii.app.expect = function (dataObject, expectedKeys, warningSend, warningTitle)
  * @return {Object|Boolean} - data object constructed exactly as every other in the settings.json or false
  */
 gpii.app.generateCustomButton = function (buttonData) {
-    var serviceButtonTypeApp = "custom-launch-app",
+    var allowedButtonTypes = ["WEB", "APP", "KEY"],
+        requiredButtonFields = ["buttonId", "buttonName", "buttonType", "buttonData"],
+        serviceButtonTypeApp = "custom-launch-app",
         serviceButtonTypeWeb = "custom-open-url",
         serviceButtonTypeKey = "custom-keys",
         titleAppNotFound = "Program not found",
         titleUrlInvalid = "Invalid URL",
         titleNoKeyData = "No Key Data",
         disabledStyle = "disabledButton",
+        customButtonTypes = ["largeButton", "settingButton"],
+        unknownButtonTypes = ["largeButton", "settingButton", "unknownButton"],
         data = false;
 
     // we need to have the data, with all required fields:
     // buttonId, buttonName, buttonType, buttonData
-    if (gpii.app.expect(buttonData, ["buttonId", "buttonName", "buttonType", "buttonData"], true, "generateCustomButton")) {
+    if (
+        gpii.app.expect(buttonData, requiredButtonFields, true, "generateCustomButton") &&
+        allowedButtonTypes.includes(buttonData.buttonType)
+    ) {
+        // predefines the button
         data = {
-            "id": buttonData.buttonId,
-            "path": serviceButtonTypeWeb, // default
-            "schema": {
-                "type": serviceButtonTypeWeb,
-                "title": buttonData.buttonName,
-                "fullScreen": false
+            id: buttonData.buttonId,
+            path: serviceButtonTypeWeb, // default
+            schema: {
+                type: serviceButtonTypeWeb,
+                title: buttonData.buttonName,
+                fullScreen: (buttonData.fullScreen ? buttonData.fullScreen : false)
             },
-            "buttonTypes": ["largeButton", "settingButton"]
+            tooltip: (buttonData.popupText ? buttonData.popupText : ""),
+            buttonTypes: customButtonTypes
         };
-        if (fluid.isValue(buttonData.popupText)) {
-            // adding the tooltip text as well
-            data.tooltip = buttonData.popupText;
-        }
-        if (fluid.isValue(buttonData.fullScreen) && buttonData.fullScreen) {
-            // adding the full screen option if there is one
-            data.schema.fullScreen = true;
-        }
-        if (buttonData.buttonType === "APP") {
+
+        // adds specific data based on the button type
+        switch (buttonData.buttonType) {
+        case "WEB":
+            // WEB type button
+            // adding the http if its missing
+            if (buttonData.buttonData.indexOf("https://") === -1 && buttonData.buttonData.indexOf("http://") === -1) {
+                buttonData.buttonData = "http://" + buttonData.buttonData;
+            }
+            // checking if the url looks valid
+            if (gpii.app.checkUrl(buttonData.buttonData)) {
+                // adding the web page's url
+                data.schema.url = buttonData.buttonData;
+            } else {
+                // changes the button's title
+                data.schema.title = titleUrlInvalid;
+                // disables the button
+                data.buttonTypes.push(disabledStyle);
+            }
+            break;
+        case "APP":
             // APP type button
             data.path = serviceButtonTypeApp;
             data.schema.type = serviceButtonTypeApp;
@@ -300,7 +321,8 @@ gpii.app.generateCustomButton = function (buttonData) {
                 // disables the button
                 data.buttonTypes.push(disabledStyle);
             }
-        } else if (buttonData.buttonType === "KEY") {
+            break;
+        case "KEY":
             // KEY type button
             data.path = serviceButtonTypeKey;
             data.schema.type = serviceButtonTypeKey;
@@ -313,23 +335,21 @@ gpii.app.generateCustomButton = function (buttonData) {
                 // disables the button
                 data.buttonTypes.push(disabledStyle);
             }
-        } else {
-            // WEB type button
-            // adding the http if its missing
-            if (buttonData.buttonData.indexOf("https://") === -1 && buttonData.buttonData.indexOf("http://") === -1) {
-                buttonData.buttonData = "http://" + buttonData.buttonData;
-            }
-            // checking if the url looks valid
-            if (gpii.app.checkUrl(buttonData.buttonData)) {
-                // adding the web page's url
-                data.schema.url = buttonData.buttonData;
-            } else {
-                // changes the button's title
-                data.schema.title = titleUrlInvalid;
-                // disables the button
-                data.buttonTypes.push(disabledStyle);
-            }
+            break;
         }
+    } else {
+        // we are missing some of the required fields, so we are generating an unknown button
+        // generating the buttonId first (using buttonId if present, if not just random number 0 to 100)
+        var unknownButtonId = "Custom-" + (buttonData.buttonId ? buttonData.buttonId : Math.floor(Math.random() * 101));
+        data = {
+            id: unknownButtonId,
+            schema: {
+                type: "unknown"
+            },
+            path: "UNKNOWN-BUTTON-" + unknownButtonId,
+            buttonTypes: unknownButtonTypes,
+            messageKey: "unknown-button"
+        };
     }
     return data;
 };
@@ -365,6 +385,7 @@ gpii.app.filterButtonList = function (siteConfigButtonList, availableButtons) {
     * starting tabindex, adding +10 of each new item.
     */
     var nonTabindex = ["separator", "separator-visible", "grid", "grid-visible"],
+        unknownButtonTypes = ["largeButton", "settingButton", "unknownButton"],
         matchedList = [],
         afterList = [],
         tabindex = 100;
@@ -383,16 +404,25 @@ gpii.app.filterButtonList = function (siteConfigButtonList, availableButtons) {
         } else {
             matchedButton = gpii.app.findButtonById(buttonId, availableButtons);
         }
-        if (matchedButton) {
-            // the separators and grid elements don't need tabindex
-            if (!nonTabindex.includes(buttonId)) {
-                // adding the proper tabindex
-                matchedButton.tabindex = tabindex;
-                tabindex += 10; // increasing the tabindex
-            }
-            // adding button to the matched ones
-            matchedList.push(matchedButton);
+        if (!matchedButton) {
+            matchedButton = {
+                id: buttonId,
+                schema: {
+                    type: "unknown"
+                },
+                path: "UNKNOWN-BUTTON-" + buttonId,
+                buttonTypes: unknownButtonTypes,
+                messageKey: "unknown-button"
+            };
+        }
+        // the separators and grid elements don't need tabindex
+        if (!nonTabindex.includes(buttonId)) {
+            // adding the proper tabindex
+            matchedButton.tabindex = tabindex;
+            tabindex += 10; // increasing the tabindex
         }
+        // adding button to the matched ones
+        matchedList.push(matchedButton);
     });
 
     // creating the afterList

src/renderer/qss/css/qss.css

@@ -125,6 +125,10 @@ body {
     opacity: 0.4;
 }
 
+.fl-qss-button.fl-qss-unknown {
+    opacity: 0.4 !important;
+}
+
 .fl-qss-button.fl-qss-dimmed {
     background-color: #a7a9ad;
 }

src/renderer/qss/js/qss.js

@@ -47,6 +47,7 @@
             "mouse":             "gpii.qss.widgetButtonPresenter",
             "snipping-tool":     "gpii.qss.snippingToolPresenter",
             "disabled":          "gpii.qss.disabledButtonPresenter",
+            "unknown":           "gpii.qss.unknownButtonPresenter",
             // custom button grades
             "custom-launch-app": "gpii.qss.customLaunchAppPresenter",
             "custom-open-url":   "gpii.qss.customOpenUrlPresenter",

src/renderer/qss/js/qssButtons.js

@@ -99,6 +99,7 @@
         styles: {
             activated: "fl-activated",
             disabledButton: "fl-qss-disabled",
+            unknownButton: "fl-qss-unknown",
             smallButton: "fl-qss-smallButton",
             largeButton: "fl-qss-largeButton",
             settingButton: "fl-qss-settingButton",

src/renderer/qss/js/qssServiceButtons.js

@@ -122,6 +122,41 @@
         qssList.events.onSaveRequired.fire(notification);
     };
 
+    /**
+     * Inherits from `gpii.qss.buttonPresenter` and handles interactions with the unknown type
+     * QSS buttons (all that don't have definitions).
+     */
+    fluid.defaults("gpii.qss.unknownButtonPresenter", {
+        gradeNames: ["gpii.qss.buttonPresenter"],
+        model: {
+            messages: {
+                notification: null
+            }
+        },
+        invokers: {
+            activate: {
+                funcName: "gpii.qss.unknownButtonPresenter.activate",
+                args: [
+                    "{that}",
+                    "{list}"
+                ]
+            }
+        }
+    });
+
+    /**
+     * A custom function for handling activation of the unknown type QSS buttons. It just shows
+     * the proper notification why this button it's disabled.
+     * @param {gpii.qss.unknownButtonPresenter} that - The `gpii.qss.unknownButtonPresenter` instance.
+     * @param {gpii.qss.list} qssList - The `gpii.qss.list` instance.
+     */
+    gpii.qss.unknownButtonPresenter.activate = function (that, qssList) {
+        qssList.events.onNotificationRequired.fire({
+            description: that.model.messages.notification,
+            closeOnBlur: true
+        });
+    };
+
     /**
      * Inherits from `gpii.qss.buttonPresenter` and handles interactions with the "More..."
      * QSS button.