Results rendering button colors

Author: puthurr

src/CognitiveSearch.UI/CognitiveSearch.UI/Models/ClientAction.cs

@@ -12,6 +12,7 @@ public class ClientAction
         public string svgicon { get; set; }
         public string method { get; set; }
         public string filter { get;set; }
+        public string classList { get;set; }
         public bool isDefault { get; set; }
     }
 }

src/CognitiveSearch.UI/CognitiveSearch.UI/config.json

@@ -104,14 +104,16 @@
             "title": "Only search Emails",
             "fonticon": "bi bi-envelope",
             "method": "Microsoft.All.UpdateResultsAsList",
-            "filter": "(content_group eq 'Email')"
+            "filter": "(content_group eq 'Email')",
+            "classList" : "btn-outline-primary"
           },
           {
             "name": "attachments",
             "title": "Only search Emails' attachments",
             "fonticon": "bi bi-paperclip",
             "method": "Microsoft.All.UpdateResultsAsList",
-            "filter": "(document_embedded eq true and parent/content_group eq 'Email')"
+            "filter": "(document_embedded eq true and parent/content_group eq 'Email')",
+            "classList" : "btn-outline-primary"
           }
         ]
       },

src/CognitiveSearch.UI/CognitiveSearch.UI/wwwroot/js/common.js

@@ -807,16 +807,25 @@ Microsoft.Search.Results = {
         if (Microsoft.View.config.resultsRenderings && Microsoft.View.config.resultsRenderings.length > 0) {
             var renderingHtml = '';
 
-            var switchClassList = "view-switch-button btn btn-outline-secondary btn-sm";
-            var switchClassListActive = "view-switch-button btn btn-outline-secondary btn-sm active";
+            var switchClassList = "view-switch-button btn btn-sm";
+            var switchClassListActive = "view-switch-button btn btn-sm active";
 
             // For each rendering of the search vertical
             for (var i = 0; i < Microsoft.View.config.resultsRenderings.length; i++) {
                 var rendering = Microsoft.View.config.resultsRenderings[i];
 
                 if (rendering.name !== "blank")
                 {
-                    renderingHtml += '        <label id="switch-' + rendering.name + '" title="' + rendering.title + '"  class="' + (Microsoft.Search.results_rendering === i ? switchClassListActive : switchClassList) + '" onclick="Microsoft.Search.Results.switchResultsView(' + i + ');">';
+                    var finalClass = (Microsoft.Search.results_rendering === i ? switchClassListActive : switchClassList); 
+                    if (rendering.classList)
+                    {
+                        finalClass += ' ' + rendering.classList;
+                    }
+                    else 
+                    {
+                        finalClass += ' btn-outline-secondary';
+                    }
+                    renderingHtml += '        <label id="switch-' + rendering.name + '" title="' + rendering.title + '"  class="' + finalClass + '" onclick="Microsoft.Search.Results.switchResultsView(' + i + ');">';
                     renderingHtml += '             <span class="' + rendering.fonticon + '"/>';
                     renderingHtml += '        </label>';    
                 }