Fixed styles for quality profile editor, click chevron to move

New: Quality in Profile can now be re-ordered (advanced setting)
pull/4/head
Mark McDowall 11 years ago
parent f832d55424
commit 8e59843d35

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

@ -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> <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>

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

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

@ -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);
}
}
});
});

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

Loading…
Cancel
Save