Fixed styles for quality profile editor, click chevron to move

New: Quality in Profile can now be re-ordered (advanced setting)
This commit is contained in:
Mark McDowall 2014-01-27 21:22:45 -08:00
parent f832d55424
commit 8e59843d35
6 changed files with 81 additions and 47 deletions

View File

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

View File

@ -1,5 +1,4 @@
<i class="x-moveleft-handle pull-left icon-chevron-left" />
<i class="x-drag-handle pull-right icon-resize-vertical advanced-setting" />
<i class="x-moveright-handle pull-right icon-chevron-right" />
<span class="move-handle x-move"><i class="move-left-handle pull-left icon-chevron-left" /></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>

View File

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

View File

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

View File

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

View File

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