UI looking better for quality profile editing

src/NzbDrone.Core/Datastore/Converters/EmbeddedDocumentConverter.cs

@@ -1,7 +1,6 @@
 using System;
 using Marr.Data.Converters;
 using Marr.Data.Mapping;
-using NzbDrone.Common.Serializer;
 using Newtonsoft.Json;
 using Newtonsoft.Json.Serialization;
 using Newtonsoft.Json.Converters;
@@ -25,8 +24,11 @@ namespace NzbDrone.Core.Datastore.Converters
 
             SerializerSetting.Converters.Add(new StringEnumConverter { CamelCaseText = true });
             SerializerSetting.Converters.Add(new VersionConverter());
+
             foreach (var converter in converters)
+            {
                 SerializerSetting.Converters.Add(converter);
+            }
         }
 
         public virtual object FromDB(ConverterContext context)

src/NzbDrone.Core/Datastore/Converters/QualityIntConverter.cs

@@ -48,7 +48,6 @@ namespace NzbDrone.Core.Datastore.Converters
             }
         }
 
-        #region JsonConverter
         public override bool CanConvert(Type objectType)
         {
             return objectType == typeof(Quality);
@@ -64,6 +63,5 @@ namespace NzbDrone.Core.Datastore.Converters
         {
             writer.WriteValue(ToDB(value));
         }
-        #endregion
     }
 }

src/NzbDrone.Core/Datastore/Migration/036_update_with_quality_converters.cs

@@ -2,7 +2,6 @@
 using NzbDrone.Core.Datastore.Migration.Framework;
 using System.Data;
 using System.Linq;
-using System;
 using NzbDrone.Common.Serializer;
 using NzbDrone.Core.Qualities;
 using System.Collections.Generic;

src/NzbDrone.Core/Datastore/Migration/037_add_configurable_qualities.cs

@@ -2,10 +2,7 @@
 using NzbDrone.Core.Datastore.Migration.Framework;
 using System.Data;
 using System.Linq;
-using System;
-using NzbDrone.Common.Serializer;
 using NzbDrone.Core.Qualities;
-using System.Collections.Generic;
 
 namespace NzbDrone.Core.Datastore.Migration
 {

src/NzbDrone.Core/Datastore/Migration/Framework/SqliteAlter.cs

@@ -45,7 +45,6 @@ namespace NzbDrone.Core.Datastore.Migration.Framework
 
                 var newIndexes = originalIndexes.Union(indexes);
 
-
                 CreateTable(tableName, columns, newIndexes);
 
                 transaction.Commit();
@@ -57,7 +56,7 @@ namespace NzbDrone.Core.Datastore.Migration.Framework
             using (var transaction = _sqLiteMigrationHelper.BeginTransaction())
             {
                 var originalColumns = _sqLiteMigrationHelper.GetColumns(tableName);
-                var originalIndexes = _sqLiteMigrationHelper.GetIndexes(tableName);
+                var indexes = _sqLiteMigrationHelper.GetIndexes(tableName);
 
                 var newColumns = originalColumns.Select(c =>
                 {
@@ -82,9 +81,7 @@ namespace NzbDrone.Core.Datastore.Migration.Framework
                     return c.Value;
                 }).ToList();
 
-                var newIndexes = originalIndexes;
+                CreateTable(tableName, newColumns, indexes);
-
-                CreateTable(tableName, newColumns, newIndexes);
 
                 transaction.Commit();
             }

src/NzbDrone.Core/Organizer/FileNameBuilder.cs

@@ -150,7 +150,6 @@ namespace NzbDrone.Core.Organizer
             tokenValues.Add("{Episode Title}", GetEpisodeTitle(episodeTitles));
             tokenValues.Add("{Quality Title}", GetQualityTitle(episodeFile.Quality));
             
-
             return CleanFilename(ReplaceTokens(pattern, tokenValues).Trim());
         }
 

src/UI/Config.js

@@ -9,8 +9,9 @@ define(
             },
             Keys  : {
                 DefaultQualityProfileId: 'DefaultQualityProfileId',
-                DefaultRootFolderId: 'DefaultRootFolderId',
+                DefaultRootFolderId    : 'DefaultRootFolderId',
-                UseSeasonFolder: 'UseSeasonFolder'
+                UseSeasonFolder        : 'UseSeasonFolder',
+                AdvancedSettings       : 'advancedSettings'
             },
 
             getValueBoolean: function (key, defaultValue) {

src/UI/Settings/Quality/Profile/EditQualityProfileItemViewTemplate.html

@@ -1,3 +1,3 @@
-<i class="select-handle pull-left icon-chevron-right x-select" />
+<i class="select-handle pull-left x-select" />
 <span class="quality-label">{{quality.name}}</span>
-<i class="drag-handle pull-right icon-resize-vertical advanced-setting x-drag-handle" />
+<i class="drag-handle pull-right icon-reorder advanced-setting x-drag-handle" />

src/UI/Settings/Quality/Profile/EditQualityProfileView.js

@@ -1,6 +1,7 @@
 'use strict';
 define(
     [
+        'underscore',
         'vent',
         'marionette',
         'backbone',
@@ -8,8 +9,8 @@ define(
         'Settings/Quality/Profile/EditQualityProfileItemView',
         'Mixins/AsModelBoundView',
         'Mixins/AsValidatedView',
-        'underscore'
+        'Config'
-    ], function (vent, Marionette, Backbone, BackboneSortableCollectionView, EditQualityProfileItemView, AsModelBoundView, AsValidatedView, _) {
+    ], function (_, vent, Marionette, Backbone, QualitySortableCollectionView, EditQualityProfileItemView, AsModelBoundView, AsValidatedView, Config) {
 
         var view = Marionette.ItemView.extend({
             template: 'Settings/Quality/Profile/EditQualityProfileViewTemplate',
@@ -26,35 +27,23 @@ define(
             initialize: function (options) {
                 this.profileCollection = options.profileCollection;
                                                 
-                this.allowedCollection = new Backbone.Collection(_.toArray(this.model.get('items')).reverse());
+                this.itemsCollection = new Backbone.Collection(_.toArray(this.model.get('items')).reverse());
             },
             
             onRender: function() {                  
-                var MyCollectionView = BackboneSortableCollectionView.extend({
+
-                    events : {
+                var listViewAllowed = new QualitySortableCollectionView({
-                            // Backbone.CollectionView used mousedown for the click event, which interferes with the sortable.
-                            "click li, td" : "_listItem_onMousedown",
-                            "dblclick li, td" : "_listItem_onDoubleClick",
-                            "click" : "_listBackground_onClick",
-                            "click ul.collection-list, table.collection-list" : "_listBackground_onClick",
-                            "keydown" : "_onKeydown"
-                    }
-                });
-                var listViewAllowed = new MyCollectionView({
                         el              : this.ui.allowed,
                         modelView       : EditQualityProfileItemView,
                         selectable      : true,
                         selectMultiple  : true,
                         clickToSelect   : true,
                         clickToToggle   : true,
-                        sortable        : true,
+                        sortable        : Config.getValueBoolean(Config.Keys.AdvancedSettings, false),
-                        sortableOptions : {
+                        collection : this.itemsCollection
-                            handle: '.x-drag-handle'
-                        },
-                        collection : this.allowedCollection
                     });
 
-                listViewAllowed.setSelectedModels(this.allowedCollection.filter(function(item) { return item.get('allowed') === true; }));
+                listViewAllowed.setSelectedModels(this.itemsCollection.filter(function(item) { return item.get('allowed') === true; }));
 
                 listViewAllowed.render();
                 
@@ -73,7 +62,7 @@ define(
             },
             
             _updateModel: function() {            
-                this.model.set('items', this.allowedCollection.toJSON().reverse());
+                this.model.set('items', this.itemsCollection.toJSON().reverse());
                 
                 this.render();
             },

src/UI/Settings/Quality/Profile/EditQualityProfileViewTemplate.html

@@ -29,17 +29,14 @@
                 </span>
             </div>
         </div>
-    </div>
+        <div class="control-group">
-    <div>
+            <label class="control-label">Qualities</label>
-        <div class="offset1 span2">
+            <div class="controls qualities-controls">
-            <h3>
+                <ul class="qualities x-allowed-list" validation-name="allowed"></ul>
-                Allowed
                 <span class="help-inline">
-                    <i class="icon-question-sign" title="Qualities higher in the list are more preferred"/>
+                    <i class="icon-question-sign" title="Qualities higher in the list are more preferred. Only checked qualities will be wanted."/>
                 </span>
-            </h3>
+            </div>
-            <ul class="allowed-list x-allowed-list" validation-name="allowed">
-            </ul>
         </div>
     </div>
 </div>

src/UI/Settings/Quality/Profile/QualitySortableCollectionView.js

@@ -6,7 +6,7 @@ define(
         return BackboneSortableCollectionView.extend({
 
             events : {
-                'mousedown li, td' : '_listItem_onMousedown',
+                'click li, td' : '_listItem_onMousedown',
                 'dblclick li, td'  : '_listItem_onDoubleClick',
                 'click'            : '_listBackground_onClick',
                 'click ul.collection-list, table.collection-list' : '_listBackground_onClick',

src/UI/Settings/Quality/quality.less

@@ -1,5 +1,6 @@
 @import "../../Shared/Styles/card";
 @import "../../Content/Bootstrap/mixins";
+@import "../../Content/FontAwesome/font-awesome";
 
 .quality-profiles {
   li {
@@ -36,7 +37,7 @@
   }
 }
 
-ul.allowed-list {
+ul.qualities {
   .user-select(none);
 
   min-height: 100px;
@@ -44,18 +45,45 @@ ul.allowed-list {
   padding: 0;
   list-style-type: none;
   outline: none;
+  width: 220px;
+  display: inline-block;
   
   li {
     margin: 2px;
-    padding: 2px;
+    padding: 2px 4px;
     line-height: 20px;
-    border: 1px solid #AAA;
+    border: 1px solid #aaaaaa;
     border-radius: 4px;   /* may need vendor varients */
-    background: #FAFAFA;
+    background: #fafafa;
     cursor: pointer;
 
+    &.selected {
+      .select-handle {
+        opacity: 1.0;
+        cursor: pointer;
+      }
+
+      .quality-label {
+        color: #444444;
+      }
+
+      .select-handle:before {
+        .icon(@check);
+      }
+    }
+
+    &:hover {
+      border-color: #888888;
+      background: #eeeeee;
+
+      .drag-handle {
+        opacity: 1.0;
+        cursor: pointer;
+      }
+    }
+
     .quality-label {
-      color: #CCC;
+      color: #c6c6c6;
     }
     .drag-handle, .select-handle {
       opacity: 0.2;
@@ -63,30 +91,19 @@ ul.allowed-list {
       cursor: pointer;
     }
 
-    .drag-handle:hover {
+    .select-handle:before {
-      opacity: 1.0;
+      .icon(@check-empty);
-      cursor: pointer;
+      display: inline-block;
-    }
+      width: 16px;
-  }
+      margin-top: 1px;
-  
-  li.selected {
-    .select-handle {
-      opacity: 1.0;
-      cursor: pointer;
-    }
-    
-    .quality-label {
-      color: #444;
     }
   }
+}
 
-  li:hover {
+.qualities-controls {
-    border-color: #888;
+  .help-inline {
-    background: #EEE;
+    vertical-align: top;
-        
+    margin-top: 5px;
-    .select-handle {
-      opacity: 0.5;
-    }
   }
 }
 
@@ -147,4 +164,3 @@ ul.allowed-list {
     }
   }
 }
-

src/UI/Settings/SettingsLayout.js

@@ -194,7 +194,7 @@ define(
             },
 
             _setAdvancedSettingsState: function () {
-                var checked = Config.getValueBoolean('advancedSettings');
+                var checked = Config.getValueBoolean(Config.Keys.AdvancedSettings);
                 this.ui.advancedSettings.prop('checked', checked);
 
                 if (checked) {
@@ -204,7 +204,7 @@ define(
 
             _toggleAdvancedSettings: function () {
                 var checked = this.ui.advancedSettings.prop('checked');
-                Config.setValue('advancedSettings', checked);
+                Config.setValue(Config.Keys.AdvancedSettings, checked);
 
                 if (checked) {
                     $('body').addClass('show-advanced-settings');