GPII-4424: Add siteConfig option to remove the QSS's close (X) button

siteconfig.json5

@@ -17,6 +17,12 @@
 
         // The scaling factor for the QSS
         scaleFactor: 1.2,
+
+        // Determines if the close (X) button will be displayed on the QSS
+        // set to `true` if the button should be there, and `false` to hide it
+        showQssCloseButton: true,
+
+        // All of the url based settings
         urls: {
             account: "http://morphic.world/account",
             cloudFolder: "https://drive.google.com/drive/folders/11m-AKdP-0wjEBocpVtvnK8iE23P7hFTS",

src/main/common/utils.js

@@ -355,16 +355,18 @@ gpii.app.buttonListShortcuts = function (buttonName) {
 /**
  * Filters the full button list based on the provided array of `id` attributes
  * @param {Array} siteConfigButtonList - basic array of strings
+ * @param {Boolean} siteConfigShowCloseButton - boolean with the option from qss > showQssCloseButton
  * @param {Object[]} availableButtons - all available buttons found in settings.json
  * @return {Object[]} - filtered version of available buttons (same structure)
  */
-gpii.app.filterButtonList = function (siteConfigButtonList, availableButtons) {
+gpii.app.filterButtonList = function (siteConfigButtonList, siteConfigShowCloseButton, availableButtons) {
     /**
     * These buttons are explicitly selected in the siteConfig, added in the same order.
     * All of the buttons that don't have `id` at all, they are added at the end of the list
     * starting tabindex, adding +10 of each new item.
     */
     var nonTabindex = ["separator", "separator-visible", "grid", "grid-visible"],
+        closeButtonId = "service-close",
         matchedList = [],
         afterList = [],
         tabindex = 100;
@@ -381,7 +383,13 @@ gpii.app.filterButtonList = function (siteConfigButtonList, availableButtons) {
             // this is custom button
             matchedButton = gpii.app.generateCustomButton(buttonId);
         } else {
-            matchedButton = gpii.app.findButtonById(buttonId, availableButtons);
+            if (buttonId === closeButtonId) {
+                if (siteConfigShowCloseButton) {
+                    matchedButton = gpii.app.findButtonById(buttonId, availableButtons);
+                }
+            } else {
+                matchedButton = gpii.app.findButtonById(buttonId, availableButtons);
+            }
         }
         if (matchedButton) {
             // the separators and grid elements don't need tabindex

src/main/dialogs/quickSetStrip/qssDialog.js

@@ -236,23 +236,30 @@ gpii.app.qss.computeQssButtonsWidth = function (options, modelScaleFactor, butto
         qssButtonTypes   = options.qssButtonTypes,
         buttonWidth      = options.dialogContentMetrics.buttonWidth,
         separatorWidth   = options.dialogContentMetrics.separatorWidth,
-        closeButtonWidth = options.dialogContentMetrics.closeButtonWidth;
+        closeButtonWidth = options.dialogContentMetrics.closeButtonWidth,
+        buttonsWidth = buttonWidth * 2, // adding the first buttons by default
+        showQssCloseButton = (options.siteConfig && options.siteConfig.showQssCloseButton) ? true : false;
+
+    if (showQssCloseButton) {
+        // start off with the first button size and the constant close button
+        buttonsWidth += closeButtonWidth;
+    }
 
-    // start off with the first button size and the constant close button
-    var buttonsWidth = closeButtonWidth + buttonWidth;
     // check the type of the previous button, if the current is small
     // in the future, we might have the case that there aren't two small sequential buttons
     for (var i = 1; i < buttons.length; i++) {
         if (!buttons[i].buttonTypes.includes(qssButtonTypes.smallButton) ||
             !buttons[i - 1].buttonTypes.includes(qssButtonTypes.smallButton) &&
             buttons[i].path !== qssButtonTypes.closeButton
         ) {
-            if (separatorIds.includes(buttons[i].buttonTypes[0])) {
-                // this is separator type button, which is slimmer that the others
-                buttonsWidth += separatorWidth;
-            } else {
-                // standart button width
-                buttonsWidth += buttonWidth;
+            if (buttons[i].path !== qssButtonTypes.closeButton) {
+                if (separatorIds.includes(buttons[i].buttonTypes[0])) {
+                    // this is separator type button, which is slimmer that the others
+                    buttonsWidth += separatorWidth;
+                } else {
+                    // standart button width
+                    buttonsWidth += buttonWidth;
+                }
             }
         }
     }

src/main/qss.js

@@ -619,11 +619,13 @@ gpii.app.qssWrapper.populateLanguageSettingOptions = function (settingOptions, l
 gpii.app.qssWrapper.loadSettings = function (assetsManager, installedLanguages, locale, messageBundles, settingOptions, settingsFixturePath, siteConfig) {
     var availableSettings = fluid.require(settingsFixturePath), // list of all available buttons
         loadedSettings = availableSettings, // by default we are getting all of the buttons
+        buttonList = siteConfig.buttonList ? siteConfig.buttonList : [], // gets the full button list if exists
+        showQssCloseButton = siteConfig.showQssCloseButton ? siteConfig.showQssCloseButton : false, // gets the showQssCloseButton setting
         multiplier = 1000; // the precision multiplier should match the one used in the qssBaseStepperWidget
 
     if (gpii.app.hasButtonList(siteConfig)) { // checking if we have a valid button list in the siteConfig
         // filtering the buttons based on buttonList array
-        loadedSettings = gpii.app.filterButtonList(siteConfig.buttonList, availableSettings);
+        loadedSettings = gpii.app.filterButtonList(buttonList, showQssCloseButton ,availableSettings);
     }
 
     // the multiplier used through all of the calculations below it's there because we have too small of values

src/renderer/qss/css/qss.css

@@ -8,6 +8,7 @@ body {
 .fl-qss {
     display: flex;
     height: 100%;
+    padding: 0 5px;
 
     flex-direction: column;
     flex-wrap: wrap;
@@ -85,7 +86,7 @@ body {
 .fl-qss-button.fl-qss-closeButton {
     width: 24px;
     height: 24px;
-    margin: 0 0 0 5px;
+    margin: 0 -5px 0 0;
     border-radius: 0;
     padding: 0;