-
diff --git a/src/UI/Settings/Quality/Profile/EditQualityProfileItemViewTemplate.html b/src/UI/Settings/Quality/Profile/EditQualityProfileItemViewTemplate.html
index 19d710178..520c95246 100644
--- a/src/UI/Settings/Quality/Profile/EditQualityProfileItemViewTemplate.html
+++ b/src/UI/Settings/Quality/Profile/EditQualityProfileItemViewTemplate.html
@@ -1,5 +1,4 @@
-
-
-
+
{{name}}
-
+
+
diff --git a/src/UI/Settings/Quality/Profile/EditQualityProfileTemplate.html b/src/UI/Settings/Quality/Profile/EditQualityProfileTemplate.html
index 3a09e8922..e0c8a82fe 100644
--- a/src/UI/Settings/Quality/Profile/EditQualityProfileTemplate.html
+++ b/src/UI/Settings/Quality/Profile/EditQualityProfileTemplate.html
@@ -31,12 +31,12 @@
diff --git a/src/UI/Settings/Quality/Profile/EditQualityProfileView.js b/src/UI/Settings/Quality/Profile/EditQualityProfileView.js
index 703c6b88c..225fcb844 100644
--- a/src/UI/Settings/Quality/Profile/EditQualityProfileView.js
+++ b/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-qualityitem' : '_moveQuality',
+ 'click .x-save': '_saveQualityProfile'
},
initialize: function (options) {
@@ -36,30 +35,35 @@ define(
},
onRender: function() {
- var listViewAvailable = new BackboneSortableCollectionView( {
- el : this.ui.available,
- modelView : EditQualityProfileItemView,
- selectable: false,
- sortable : false,
- collection: this.availableCollection
+ var listViewAvailable = new BackboneSortableCollectionView({
+ el : this.ui.available,
+ modelView : EditQualityProfileItemView,
+ selectable: false,
+ sortable : false,
+ collection: this.availableCollection
});
- listViewAvailable.render();
- var listViewAllowed = new BackboneSortableCollectionView( {
- el : this.ui.allowed,
- modelView : EditQualityProfileItemView,
- selectable: false,
- sortable : true,
- sortableOptions : {
- handle: ".x-drag-handle"
- },
- collection : this.allowedCollection
- } );
+ var listViewAllowed = new BackboneSortableCollectionView({
+ el : this.ui.allowed,
+ modelView : EditQualityProfileItemView,
+ selectable: false,
+ sortable : true,
+ sortableOptions : {
+ handle: '.x-drag-handle'
+ },
+ collection : this.allowedCollection
+ });
+
+ listViewAvailable.render();
listViewAllowed.render();
- this.listenTo(listViewAvailable, "doubleClick", this._moveQuality);
- this.listenTo(listViewAllowed, "doubleClick", this._moveQuality);
- this.listenTo(listViewAllowed, "sortStop", this._updateModel);
+ this.listenTo(listViewAvailable, 'doubleClick', this._moveQuality);
+ this.listenTo(listViewAllowed, 'doubleClick', this._moveQuality);
+
+ this.listenTo(listViewAvailable, 'moveClicked', this._moveQuality);
+ this.listenTo(listViewAllowed, 'moveClicked', this._moveQuality);
+
+ this.listenTo(listViewAllowed, 'sortStop', this._updateModel);
},
_moveQuality: function (event) {
diff --git a/src/UI/Settings/Quality/Profile/QualitySortableCollectionView.js b/src/UI/Settings/Quality/Profile/QualitySortableCollectionView.js
new file mode 100644
index 000000000..8af2c7638
--- /dev/null
+++ b/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);
+ }
+ }
+ });
+ });
diff --git a/src/UI/Settings/Quality/quality.less b/src/UI/Settings/Quality/quality.less
index 60820eeca..de383c735 100644
--- a/src/UI/Settings/Quality/quality.less
+++ b/src/UI/Settings/Quality/quality.less
@@ -36,16 +36,14 @@
}
}
-ul.x-available-list, ul.x-allowed-list {
- min-height: 100px;
-
+ul.available-list, ul.allowed-list {
.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 {
- .x-moveright-handle {
+ul.available-list li {
+ .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 {
- .x-drag-handle, .x-moveleft-handle {
+ul.allowed-list li {
+ .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;