Quality Profiles move to cards

UI/Settings/Quality/Profile/AllowedLabeler.js

@@ -0,0 +1,18 @@
+'use strict';
+define(['app', 'handlebars'], function (App,Handlebars) {
+    Handlebars.registerHelper('allowedLabeler', function () {
+        var ret = '';
+        var cutoff = this.cutoff;
+        _.each(this.allowed, function (allowed) {
+            if (allowed.id === cutoff.id) {
+                ret += '<span class="label label-info" title="Cutoff">' + allowed.name + '</span> ';
+            }
+
+            else {
+                ret += '<span class="label">' + allowed.name + '</span> ';
+            }
+        });
+
+        return new Handlebars.SafeString(ret);
+    });
+});

UI/Settings/Quality/Profile/DeleteView.js

@@ -6,7 +6,7 @@ define(
     ], function (App, Marionette) {
 
         return  Marionette.ItemView.extend({
-            template: 'Quality/Profile/DeleteTemplate',
+            template: 'Settings/Quality/Profile/DeleteTemplate',
 
             events: {
                 'click .x-confirm-delete': '_removeProfile'

UI/Settings/Quality/Profile/QualityProfileCollectionTemplate.html

@@ -1,14 +1,4 @@
 <fieldset>
     <legend>Quality Profiles</legend>
-    <table class="table table-hover">
-        <thead>
-        <tr>
-            <th>Name</th>
-            <th>Allowed</th>
-            <th>Cutoff</th>
-            <th>Controls</th>
-        </tr>
-        </thead>
-        <tbody></tbody>
-    </table>
+    <ul class="quality-profiles"></ul>
 </fieldset>

UI/Settings/Quality/Profile/QualityProfileCollectionView.js

@@ -3,7 +3,7 @@
 define(['marionette', 'Settings/Quality/Profile/QualityProfileView'], function (Marionette, QualityProfileView) {
     return Marionette.CompositeView.extend({
         itemView         : QualityProfileView,
-        itemViewContainer: 'tbody',
+        itemViewContainer: '.quality-profiles',
         template         : 'Settings/Quality/Profile/QualityProfileCollectionTemplate'
     });
 });

UI/Settings/Quality/Profile/QualityProfileTemplate.html

@@ -1,11 +1,11 @@
-<td name="name"></td>
-<td>
-    {{#each allowed}}
-    {{name}} |
-    {{/each}}
-</td>
-<td name="cutoff.name"></td>
-<td>
-    <i class="icon-cog x-edit" title="Edit Series"/>
-    | Delete
-</td>
+<div class="quality-profile-item">
+    <div>
+        <h2>{{name}}</h2>
+        <span class="btn-group pull-right">
+            <button class="btn btn-mini btn-danger x-delete">Delete</button>
+            <button class="btn btn-mini x-edit">Edit</button>
+        </span>
+    </div>
+
+    {{allowedLabeler}}
+</div>

UI/Settings/Quality/Profile/QualityProfileView.js

@@ -6,34 +6,34 @@ define(
         'marionette',
         'Settings/Quality/Profile/EditQualityProfileView',
         'Settings/Quality/Profile/DeleteView',
-        'Mixins/AsModelBoundView'
+        'Mixins/AsModelBoundView',
+        'Settings/Quality/Profile/AllowedLabeler'
 
     ], function (App, Marionette, EditProfileView, DeleteProfileView, AsModelBoundView) {
 
         var view = Marionette.ItemView.extend({
             template: 'Settings/Quality/Profile/QualityProfileTemplate',
-            tagName : 'tr',
+            tagName : 'li',
 
             ui: {
                 'progressbar': '.progress .bar'
             },
 
             events: {
-                'click .x-edit'  : 'edit',
-                'click .x-remove': 'removeQuality'
+                'click .x-edit'  : '_editProfile',
+                'click .x-delete': '_deleteProfile'
             },
 
-            edit: function () {
+            _editProfile: function () {
                 var view = new EditProfileView({ model: this.model});
                 App.modalRegion.show(view);
             },
 
-            removeQuality: function () {
+            _deleteProfile: function () {
                 var view = new DeleteProfileView({ model: this.model });
                 App.modalRegion.show(view);
             }
         });
 
-
         return AsModelBoundView.call(view);
     });