From 8e59843d35e6ce88b16d4aba8c27306f98774dc6 Mon Sep 17 00:00:00 2001 From: Mark McDowall Date: Mon, 27 Jan 2014 21:22:45 -0800 Subject: [PATCH] Fixed styles for quality profile editor, click chevron to move New: Quality in Profile can now be re-ordered (advanced setting) --- .../QualityDefinitionCollectionTemplate.html | 4 +- .../EditQualityProfileItemViewTemplate.html | 7 ++- .../Profile/EditQualityProfileTemplate.html | 4 +- .../Quality/Profile/EditQualityProfileView.js | 50 ++++++++++--------- .../Profile/QualitySortableCollectionView.js | 27 ++++++++++ src/UI/Settings/Quality/quality.less | 36 +++++++------ 6 files changed, 81 insertions(+), 47 deletions(-) create mode 100644 src/UI/Settings/Quality/Profile/QualitySortableCollectionView.js diff --git a/src/UI/Settings/Quality/Definition/QualityDefinitionCollectionTemplate.html b/src/UI/Settings/Quality/Definition/QualityDefinitionCollectionTemplate.html index bce6ecefa..d3287100b 100644 --- a/src/UI/Settings/Quality/Definition/QualityDefinitionCollectionTemplate.html +++ b/src/UI/Settings/Quality/Definition/QualityDefinitionCollectionTemplate.html @@ -2,14 +2,14 @@ Quality Definitions
-
+
Quality Title Size Limit
-
+
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 @@

Available

-
    +

Allowed

-
    +
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;