Stylized the new profiles

.gitignore

@@ -32,6 +32,7 @@ _ReSharper*/
 [Ll]ogs/
 [Aa]pp_Data/
 /[Pp]ackage/
+/FakesAssemblies/
 #NZBDrone specific
 *.db
 *Web.Publish.xml

NzbDrone.Api/QualityProfiles/QualityProfileService.cs

@@ -36,29 +36,29 @@ public override object OnGet(QualityProfileModel request)
             return Mapper.Map<QualityProfile, QualityProfileModel>(profile);
         }
 
-        public override object OnPost(QualityProfileModel data)
+        //Create
+        public override object OnPost(QualityProfileModel request)
         {
-            //Create
-            var profile = Mapper.Map<QualityProfileModel, QualityProfile>(data);
+            var profile = Mapper.Map<QualityProfileModel, QualityProfile>(request);
             _qualityProvider.Add(profile);
 
-            return data;
+            return request;
         }
 
-        public override object OnPut(QualityProfileModel data)
+        //Update
+        public override object OnPut(QualityProfileModel request)
         {
-            //Update
-            var profile = Mapper.Map<QualityProfileModel, QualityProfile>(data);
+            var profile = Mapper.Map<QualityProfileModel, QualityProfile>(request);
             _qualityProvider.Update(profile);
 
-            return data;
+            return request;
         }
 
-        public override object OnDelete(QualityProfileModel data)
+        public override object OnDelete(QualityProfileModel request)
         {
-            _qualityProvider.Delete(data.Id);
+            _qualityProvider.Delete(request.Id);
 
-            return "ok";
+            return request.Id.ToString();
         }
     }
 }

NzbDrone.Web/Content/QualitySettings.css

@@ -38,8 +38,7 @@
 }
 
 /* QualityProfileItem */
-.quality-selectee
-{
+.quality-selectee {
     border-color: #065EFE;
     border-style: solid;
     border-width: 1px;
@@ -51,73 +50,50 @@
     float: left;
     cursor: default;
 }
-.quality-selecting
-{
+.quality-selecting {
     background: #85AEF9;
 }
-.quality-selected
-{
+
+.quality-selected {
     background: #065EFE;
     color: white;
 }
     
-.profileSection
-{
+.quality-profile {
     float: left;
-    width: 265px;
+    width: 260px;
     margin: 2px;
     border:solid 1px #CCCCCD;
     display: inline-block;
     overflow: hidden;
     padding: 5px 5px 5px 5px;
+    position: relative;
 }
-    
-.profileOptions label
-{
-    margin-top: 10px;
-    margin-left: 7px;
-    margin-right: 20px;
-    font-weight: bold;
+
+.quality-profile-setting label {
+    width: 45px;
     display: inline-block;
-    width: 40px;
-}
-    
-.profileOptions input, .profileOptions select
-{
-    font-size:12px;
-    padding:4px 2px;
-    border:solid 1px #aacfe4;
-    width:170px;
-    margin-right: 2px;
 }
 
-.profileOptions input
-{
+.quality-profile-setting input {
     margin-left: 10px;
-    margin-bottom: 2px;
+    width: 160px;
 }
 
-.profileOptions select
-{
-    width: 176px;
-    margin-bottom: 7px;
+.quality-profile-setting select {
+    width: 166px;
 }
     
-.qualitySelector
-{
-    padding-left: 5px;
-}
-    
-.delete-profile {
+.remove-profile {
     position: absolute;
     top: 0px;
-    right: 0px;
-    font-size: 16px;
+    right: 4px;
+    font-size: 20px;
     color: #000000;
     text-decoration: none;
 }
 
-.delete-profile > i[class*="icon-"]:hover {
+.remove-profile > i[class*="icon-"]:hover {
     cursor: pointer !important;
 }
     

NzbDrone.Web/Scripts/backbone/views/qualityProfiles.js

@@ -2,10 +2,14 @@
     tagName: "div",
     className: "quality-profile",
     template: "#QualityProfileTemplate",
+    initialize: function() {
+        this.model.on('destroy', this.remove, this)
+    },
     events: {
         'click .quality-selectee': 'toggleAllowed',
         'change .cutoff': 'changeCutoff',
-        'change .name': 'changeName'
+        'change .name': 'changeName',
+        'click .remove-profile': 'destroy'
     },
     toggleAllowed: function (e) {
         //Add to cutoff
@@ -54,6 +58,17 @@
 
         this.model.set({ "Name": name });
         this.model.save();
+    },
+    destroy: function (e) {
+        if (e === undefined)
+            return;
+
+        e.preventDefault();
+        this.model.destroy();
+        e.stopPropagation();
+    },
+    remove: function (e) {
+        $(this.el).remove();
     }
 });
 
@@ -78,6 +93,7 @@ QualityProfileCollectionView = Backbone.Marionette.CompositeView.extend({
     },
     addProfile: function (e) {
         //Add new profile to collection
+        //Todo: How will we get the list of qualities (they would all be NOT allowed) - it all comes from the server side...
         this.collection.add(new QualityProfile());
         e.preventDefault();
     }

NzbDrone.Web/Views/Settings/Quality.cshtml

@@ -114,12 +114,13 @@
     @*@Html.IncludeScript("backbone/bootstrapper.js")*@
 
     <script id="QualityProfileTemplate" type="text/template">
-        <div>
-            <strong>Name</strong>
+        <a href="#" class="remove-profile"><i class="icon-remove"></i></a>
+        <div class="quality-profile-setting">
+            <label>Name</label>
             <input type="text" value="<%= Name %>" class="name" />
         </div>
-        <div>
-            <strong>Cutoff</strong>
+        <div class="quality-profile-setting">
+            <label>Cutoff</label>
             <select id="<%= Id %>" class="cutoff">
             <% _.each(Qualities, function(quality) { %>
                 <% if (quality.Allowed === true) { %>
@@ -132,14 +133,16 @@
 
         <% _.each(Qualities, function(quality) { %>
             <input id="<%= Id %>_<%= quality.Id %>"
-                   class="quality-selectee"
-                   type="checkbox"
-                   value="<%= quality.Allowed %>"
-                   data-quality-id="<%= quality.Id %>"
-                   <%= quality.Allowed ? 'checked="checked"' : '' %>
+                    class="quality-selectee"
+                    type="checkbox"
+                    value="<%= quality.Allowed %>"
+                    data-quality-id="<%= quality.Id %>"
+                    <%= quality.Allowed ? 'checked="checked"' : '' %>
             />
             <label for="<%= Id %>_<%= quality.Id %>"><%= quality.Name %></label>
         <% }); %>
+    
+    
     </script>
     
     <script id="QualityProfileCollectionTemplate" type="text/template">