Fixed styles for quality profile editor, click chevron to move

New: Quality in Profile can now be re-ordered (advanced setting)

src/UI/Settings/Quality/Definition/QualityDefinitionCollectionTemplate.html

@@ -2,14 +2,14 @@
     <legend>Quality Definitions</legend>
     <div class="span11">
         <div id="quality-definition-list">
-            <div class="x-header">
+            <div class="quality-header x-header">
                 <div class="row">
                     <span class="span2">Quality</span>
                     <span class="span2">Title</span>
                     <span class="offset1 span4">Size Limit</span>
                 </div>
             </div>
-            <div class="x-rows">
+            <div class="rows x-rows">
             </div>
         </div>
     </div>

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

@@ -1,5 +1,4 @@
-<i class="x-moveleft-handle pull-left icon-chevron-left" />
+<span class="move-handle x-move"><i class="move-left-handle pull-left icon-chevron-left" /></span>
-<i class="x-drag-handle pull-right icon-resize-vertical advanced-setting" />
-<i class="x-moveright-handle pull-right icon-chevron-right" />
 <span>{{name}}</span>
-
+<i class="drag-handle pull-right icon-resize-vertical advanced-setting x-drag-handle" />
+<span class="move-handle x-move"><i class="move-right-handle pull-right icon-chevron-right" /><span>

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

@@ -31,12 +31,12 @@
     <div>
         <div class="offset1 span2">
             <h3>Available</h3>
-            <ul class="x-available-list">
+            <ul class="available-list x-available-list">
             </ul>
         </div>
         <div class="span2">
             <h3>Allowed</h3>
-            <ul class="x-allowed-list" validation-name="allowed">
+            <ul class="allowed-list x-allowed-list" validation-name="allowed">
             </ul>
         </div>
     </div>

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

@@ -4,7 +4,7 @@ define(
         'vent',
         'marionette',
         'backbone',
-        'backbone.collectionview',
+        'Settings/Quality/Profile/QualitySortableCollectionView',
         'Settings/Quality/Profile/EditQualityProfileItemView',
         'Mixins/AsModelBoundView',
         'Mixins/AsValidatedView',
@@ -21,8 +21,7 @@ define(
             },
             
             events: {
-                'click .x-save'             : '_saveQualityProfile',
+                'click .x-save': '_saveQualityProfile'
-                //'click .x-qualityitem'      : '_moveQuality',
             },
 
             initialize: function (options) {
@@ -36,30 +35,35 @@ define(
             },
             
             onRender: function() {
-                var listViewAvailable = new BackboneSortableCollectionView( {
+                var listViewAvailable = new BackboneSortableCollectionView({
-                    el        : this.ui.available,
+                        el        : this.ui.available,
-                    modelView : EditQualityProfileItemView,
+                        modelView : EditQualityProfileItemView,
-                    selectable: false,
+                        selectable: false,
-                    sortable  : false,
+                        sortable  : false,
-                    collection: this.availableCollection
+                        collection: this.availableCollection
+                    });
+                  
+                var listViewAllowed = new BackboneSortableCollectionView({
+                        el        : this.ui.allowed,
+                        modelView : EditQualityProfileItemView,
+                        selectable: false,
+                        sortable  : true,
+                        sortableOptions : {
+                            handle: '.x-drag-handle'
+                        },
+                        collection : this.allowedCollection
                     });
-                listViewAvailable.render();
 
-                var listViewAllowed = new BackboneSortableCollectionView( {
+                listViewAvailable.render();
-                    el        : this.ui.allowed,
-                    modelView : EditQualityProfileItemView,
-                    selectable: false,
-                    sortable  : true,
-                    sortableOptions : {
-                        handle: ".x-drag-handle"
-                    },
-                    collection : this.allowedCollection
-                  } );
                 listViewAllowed.render();
                 
-                this.listenTo(listViewAvailable, "doubleClick", this._moveQuality);
+                this.listenTo(listViewAvailable, 'doubleClick', this._moveQuality);
-                this.listenTo(listViewAllowed, "doubleClick", this._moveQuality);
+                this.listenTo(listViewAllowed, 'doubleClick', this._moveQuality);
-                this.listenTo(listViewAllowed, "sortStop", this._updateModel);
+
+                this.listenTo(listViewAvailable, 'moveClicked', this._moveQuality);
+                this.listenTo(listViewAllowed, 'moveClicked', this._moveQuality);
+
+                this.listenTo(listViewAllowed, 'sortStop', this._updateModel);
             },
 
             _moveQuality: function (event) {

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

@@ -0,0 +1,27 @@
+'use strict';
+define(
+    [
+        'backbone.collectionview'
+    ], function (BackboneSortableCollectionView) {
+        return BackboneSortableCollectionView.extend({
+
+            events : {
+                'mousedown li, td' : '_listItem_onMousedown',
+                'dblclick li, td'  : '_listItem_onDoubleClick',
+                'click'            : '_listBackground_onClick',
+                'click ul.collection-list, table.collection-list' : '_listBackground_onClick',
+                'keydown'          : '_onKeydown',
+                'click .x-move'    : '_onClickMove'
+            },
+
+            _onClickMove: function( theEvent ) {
+                var clickedItemId = this._getClickedItemId( theEvent );
+
+                if( clickedItemId )
+                {
+                    var clickedModel = this.collection.get( clickedItemId );
+                    this.trigger('moveClicked', clickedModel);
+                }
+            }
+        });
+    });

src/UI/Settings/Quality/quality.less

@@ -36,16 +36,14 @@
   }
 }
 
-ul.x-available-list, ul.x-allowed-list {
+ul.available-list, ul.allowed-list {
-  min-height: 100px;
-
   .user-select(none);
 
+  min-height: 100px;
   margin: 0;
   padding: 0;
   list-style-type: none;
   outline: none;
-  cursor: pointer;
   
   li {
     margin: 2px;
@@ -54,56 +52,62 @@ ul.x-available-list, ul.x-allowed-list {
     border: 1px solid #AAA;
     border-radius: 4px;   /* may need vendor varients */
     background: #FAFAFA;
+    cursor: default;
     
     &:hover {
       border-color: #888;
       background: #EEE;
     }
     
-    .x-drag-handle, .x-moveleft-handle, .x-moveright-handle {
+    .drag-handle, .move-left-handle, .move-right-handle {
       opacity: 0.0;
       line-height: 20px;
+      cursor: pointer;
+    }
+
+    .move-handle {
+      cursor: pointer;
     }
   }
 }
 
-ul.x-available-list li {
+ul.available-list li {
-  .x-moveright-handle {
+  .move-right-handle {
     opacity: 0.2;
   }
   
-  .x-drag-handle {
+  .drag-handle {
     display: none;
   }
   
-  &:hover .x-moveright-handle {
+  &:hover .move-right-handle {
     opacity: 1.0;
   }
 }
 
-ul.x-allowed-list li {
+ul.allowed-list li {
-  .x-drag-handle, .x-moveleft-handle {
+  .drag-handle, .move-left-handle {
     opacity: 0.2;
   }
   
-  .x-drag-handle:hover {
+  .drag-handle:hover {
     opacity: 1.0;
     cursor: pointer;
   }
   
-  &:hover .x-moveleft-handle {
+  &:hover .move-left-handle {
     opacity: 1.0;
   }
 }
 
 #quality-definition-list {
 
-  .x-header .row {
+  .quality-header .row {
     font-weight: bold;
     line-height: 40px;
   }
 
-  .x-rows .row {
+  .rows .row {
     line-height: 30px;
     border-top: 1px solid #ddd;
     vertical-align: middle;