Searching icons and spinner fix

New: Manual search has its own icon on series details instead of a dropdown
Fixed: Automatic search icon will spin showing activity

src/NzbDrone.Core/IndexerSearch/EpisodeSearchCommand.cs

@@ -1,11 +1,12 @@
-using System.Collections.Generic;
+using System;
+using System.Collections.Generic;
 using NzbDrone.Core.Messaging.Commands;
 
 namespace NzbDrone.Core.IndexerSearch
 {
     public class EpisodeSearchCommand : Command
     {
-        public List<int> EpisodeIds { get; set; }
+        public List<Int32> EpisodeIds { get; set; }
 
         public override bool SendUpdatesToClient
         {
@@ -19,7 +20,7 @@ namespace NzbDrone.Core.IndexerSearch
         {
         }
 
-        public EpisodeSearchCommand(List<int> episodeIds)
+        public EpisodeSearchCommand(List<Int32> episodeIds)
         {
             EpisodeIds = episodeIds;
         }

src/UI/Cells/EpisodeActionsCell.js

@@ -3,37 +3,31 @@
 define(
     [
         'vent',
-        'marionette',
         'Cells/NzbDroneCell',
         'Commands/CommandController'
-    ], function (vent, Marionette, NzbDroneCell, CommandController) {
+    ], function (vent, NzbDroneCell, CommandController) {
         return NzbDroneCell.extend({
 
             className: 'episode-actions-cell',
-            template : 'Cells/EpisodeActionsCellTemplate',
-
-            ui: {
-                automaticSearch: '.x-automatic-search-icon'
-            },
 
             events: {
-                'click .x-automatic-search': '_automaticSearch',
+                'click .x-automatic-search' : '_automaticSearch',
                 'click .x-manual-search'    : '_manualSearch'
             },
 
             render: function () {
-                var templateName = this.column.get('template') || this.template;
+                this.$el.empty();
 
-                this.templateFunction = Marionette.TemplateCache.get(templateName);
-                var data = this.cellValue.toJSON();
-                var html = this.templateFunction(data);
-                this.$el.html(html);
+                this.$el.html(
+                    '<i class="icon-search x-automatic-search" title="Automatic Search"></i>' +
+                    '<i class="icon-nd-manual-search x-manual-search" title="Manual Search"></i>'
+                );
 
                 CommandController.bindToCommand({
-                    element: this.$(this.ui.automaticSearch),
+                    element: this.$el.find('.x-automatic-search'),
                     command: {
                         name       : 'episodeSearch',
-                        episodeId: this.model.get('id')
+                        episodeIds : [ this.model.get('id') ]
                     }
                 });
 
@@ -44,7 +38,7 @@ define(
             _automaticSearch: function () {
                 CommandController.Execute('episodeSearch', {
                     name       : 'episodeSearch',
-                    episodeIds: [ this.model.get('id') ]
+                    episodeIds : [ this.model.get('id') ]
                 });
             },
 

src/UI/Cells/EpisodeActionsCellTemplate.hbs

@@ -1,14 +0,0 @@
-<div class="btn-group hidden-xs">
-    <button class="btn btn-xs x-automatic-search x-automatic-search-icon" title="Automatic Search" data-container="body"><i class="icon-search"></i></button>
-    <button class="btn btn-xs dropdown-toggle" data-toggle="dropdown">
-        <span class="caret"></span>
-    </button>
-    <ul class="dropdown-menu">
-        <li class="x-automatic-search">Automatic Search</li>
-        <li class="x-manual-search">Manual Search</li>
-    </ul>
-</div>
-
-<div class="visible-xs">
-    <button class="btn btn-xs x-automatic-search x-automatic-search-icon" title="Automatic Search"><i class="icon-search"></i></button>
-</div>

src/UI/Cells/cells.less

@@ -114,24 +114,11 @@ td.episode-status-cell, td.quality-cell, td.history-quality-cell {
 }
 
 .episode-actions-cell {
-  width: 65px;
+  width: 55px;
 
-  li {
+  i {
     .clickable();
-
-    display: block;
-    padding: 3px 20px;
-    clear: both;
-    font-weight: normal;
-    line-height: 20px;
-    color: rgb(51, 51, 51);
-    white-space: nowrap;
-  }
-
-  li:hover {
-    text-decoration: none;
-    color: rgb(255, 255, 255);
-    background-color: rgb(0, 129, 194);
+    margin-left : 8px;
   }
 }
 

src/UI/Commands/CommandController.js

@@ -52,7 +52,6 @@ define(
                 bindToCommand: function (options) {
 
                     var self = this;
-
                     var existingCommand = CommandCollection.findCommand(options.command);
 
                     if (existingCommand) {

src/UI/Commands/CommandModel.js

@@ -1,8 +1,9 @@
 'use strict';
 define(
     [
+        'underscore',
         'backbone'
-    ], function (Backbone) {
+    ], function (_, Backbone) {
         return Backbone.Model.extend({
             url: window.NzbDrone.ApiRoot + '/command',
 
@@ -18,11 +19,19 @@ define(
                 }
 
                 for (var key in command) {
-                    if (key !== 'name' && command[key] !== this.get(key)) {
+                    if (key !== 'name') {
+                        if (Array.isArray(command[key])) {
+                            if (_.difference(command[key], this.get(key)).length > 0) {
                                 return false;
                             }
                         }
 
+                        else if (command[key] !== this.get(key)) {
+                            return false;
+                        }
+                    }
+                }
+
                 return true;
             },
 

src/UI/Content/icons.less

@@ -191,3 +191,7 @@
   .icon(@exclamation-sign);
   color : @brand-danger;
 }
+
+.icon-nd-manual-search:before {
+  .icon(@male);
+}