UI looking better for quality profile editing

This commit is contained in:
Mark McDowall 2014-01-28 20:13:00 -08:00
parent 3e97106aa7
commit 75decad601
13 changed files with 81 additions and 86 deletions

View File

@ -1,7 +1,6 @@
using System;
using Marr.Data.Converters;
using Marr.Data.Mapping;
using NzbDrone.Common.Serializer;
using Newtonsoft.Json;
using Newtonsoft.Json.Serialization;
using Newtonsoft.Json.Converters;
@ -25,8 +24,11 @@ namespace NzbDrone.Core.Datastore.Converters
SerializerSetting.Converters.Add(new StringEnumConverter { CamelCaseText = true });
SerializerSetting.Converters.Add(new VersionConverter());
foreach (var converter in converters)
{
SerializerSetting.Converters.Add(converter);
}
}
public virtual object FromDB(ConverterContext context)

View File

@ -48,7 +48,6 @@ namespace NzbDrone.Core.Datastore.Converters
}
}
#region JsonConverter
public override bool CanConvert(Type objectType)
{
return objectType == typeof(Quality);
@ -64,6 +63,5 @@ namespace NzbDrone.Core.Datastore.Converters
{
writer.WriteValue(ToDB(value));
}
#endregion
}
}

View File

@ -2,7 +2,6 @@
using NzbDrone.Core.Datastore.Migration.Framework;
using System.Data;
using System.Linq;
using System;
using NzbDrone.Common.Serializer;
using NzbDrone.Core.Qualities;
using System.Collections.Generic;

View File

@ -2,10 +2,7 @@
using NzbDrone.Core.Datastore.Migration.Framework;
using System.Data;
using System.Linq;
using System;
using NzbDrone.Common.Serializer;
using NzbDrone.Core.Qualities;
using System.Collections.Generic;
namespace NzbDrone.Core.Datastore.Migration
{

View File

@ -45,7 +45,6 @@ namespace NzbDrone.Core.Datastore.Migration.Framework
var newIndexes = originalIndexes.Union(indexes);
CreateTable(tableName, columns, newIndexes);
transaction.Commit();
@ -57,7 +56,7 @@ namespace NzbDrone.Core.Datastore.Migration.Framework
using (var transaction = _sqLiteMigrationHelper.BeginTransaction())
{
var originalColumns = _sqLiteMigrationHelper.GetColumns(tableName);
var originalIndexes = _sqLiteMigrationHelper.GetIndexes(tableName);
var indexes = _sqLiteMigrationHelper.GetIndexes(tableName);
var newColumns = originalColumns.Select(c =>
{
@ -82,9 +81,7 @@ namespace NzbDrone.Core.Datastore.Migration.Framework
return c.Value;
}).ToList();
var newIndexes = originalIndexes;
CreateTable(tableName, newColumns, newIndexes);
CreateTable(tableName, newColumns, indexes);
transaction.Commit();
}

View File

@ -150,7 +150,6 @@ namespace NzbDrone.Core.Organizer
tokenValues.Add("{Episode Title}", GetEpisodeTitle(episodeTitles));
tokenValues.Add("{Quality Title}", GetQualityTitle(episodeFile.Quality));
return CleanFilename(ReplaceTokens(pattern, tokenValues).Trim());
}

View File

@ -9,8 +9,9 @@ define(
},
Keys : {
DefaultQualityProfileId: 'DefaultQualityProfileId',
DefaultRootFolderId: 'DefaultRootFolderId',
UseSeasonFolder: 'UseSeasonFolder'
DefaultRootFolderId : 'DefaultRootFolderId',
UseSeasonFolder : 'UseSeasonFolder',
AdvancedSettings : 'advancedSettings'
},
getValueBoolean: function (key, defaultValue) {

View File

@ -1,3 +1,3 @@
<i class="select-handle pull-left icon-chevron-right x-select" />
<i class="select-handle pull-left x-select" />
<span class="quality-label">{{quality.name}}</span>
<i class="drag-handle pull-right icon-resize-vertical advanced-setting x-drag-handle" />
<i class="drag-handle pull-right icon-reorder advanced-setting x-drag-handle" />

View File

@ -1,6 +1,7 @@
'use strict';
define(
[
'underscore',
'vent',
'marionette',
'backbone',
@ -8,8 +9,8 @@ define(
'Settings/Quality/Profile/EditQualityProfileItemView',
'Mixins/AsModelBoundView',
'Mixins/AsValidatedView',
'underscore'
], function (vent, Marionette, Backbone, BackboneSortableCollectionView, EditQualityProfileItemView, AsModelBoundView, AsValidatedView, _) {
'Config'
], function (_, vent, Marionette, Backbone, QualitySortableCollectionView, EditQualityProfileItemView, AsModelBoundView, AsValidatedView, Config) {
var view = Marionette.ItemView.extend({
template: 'Settings/Quality/Profile/EditQualityProfileViewTemplate',
@ -26,35 +27,23 @@ define(
initialize: function (options) {
this.profileCollection = options.profileCollection;
this.allowedCollection = new Backbone.Collection(_.toArray(this.model.get('items')).reverse());
this.itemsCollection = new Backbone.Collection(_.toArray(this.model.get('items')).reverse());
},
onRender: function() {
var MyCollectionView = BackboneSortableCollectionView.extend({
events : {
// Backbone.CollectionView used mousedown for the click event, which interferes with the sortable.
"click li, td" : "_listItem_onMousedown",
"dblclick li, td" : "_listItem_onDoubleClick",
"click" : "_listBackground_onClick",
"click ul.collection-list, table.collection-list" : "_listBackground_onClick",
"keydown" : "_onKeydown"
}
});
var listViewAllowed = new MyCollectionView({
var listViewAllowed = new QualitySortableCollectionView({
el : this.ui.allowed,
modelView : EditQualityProfileItemView,
selectable : true,
selectMultiple : true,
clickToSelect : true,
clickToToggle : true,
sortable : true,
sortableOptions : {
handle: '.x-drag-handle'
},
collection : this.allowedCollection
sortable : Config.getValueBoolean(Config.Keys.AdvancedSettings, false),
collection : this.itemsCollection
});
listViewAllowed.setSelectedModels(this.allowedCollection.filter(function(item) { return item.get('allowed') === true; }));
listViewAllowed.setSelectedModels(this.itemsCollection.filter(function(item) { return item.get('allowed') === true; }));
listViewAllowed.render();
@ -73,7 +62,7 @@ define(
},
_updateModel: function() {
this.model.set('items', this.allowedCollection.toJSON().reverse());
this.model.set('items', this.itemsCollection.toJSON().reverse());
this.render();
},

View File

@ -29,17 +29,14 @@
</span>
</div>
</div>
</div>
<div>
<div class="offset1 span2">
<h3>
Allowed
<div class="control-group">
<label class="control-label">Qualities</label>
<div class="controls qualities-controls">
<ul class="qualities x-allowed-list" validation-name="allowed"></ul>
<span class="help-inline">
<i class="icon-question-sign" title="Qualities higher in the list are more preferred"/>
<i class="icon-question-sign" title="Qualities higher in the list are more preferred. Only checked qualities will be wanted."/>
</span>
</h3>
<ul class="allowed-list x-allowed-list" validation-name="allowed">
</ul>
</div>
</div>
</div>
</div>

View File

@ -6,7 +6,7 @@ define(
return BackboneSortableCollectionView.extend({
events : {
'mousedown li, td' : '_listItem_onMousedown',
'click li, td' : '_listItem_onMousedown',
'dblclick li, td' : '_listItem_onDoubleClick',
'click' : '_listBackground_onClick',
'click ul.collection-list, table.collection-list' : '_listBackground_onClick',

View File

@ -1,5 +1,6 @@
@import "../../Shared/Styles/card";
@import "../../Content/Bootstrap/mixins";
@import "../../Content/FontAwesome/font-awesome";
.quality-profiles {
li {
@ -36,7 +37,7 @@
}
}
ul.allowed-list {
ul.qualities {
.user-select(none);
min-height: 100px;
@ -44,49 +45,65 @@ ul.allowed-list {
padding: 0;
list-style-type: none;
outline: none;
width: 220px;
display: inline-block;
li {
margin: 2px;
padding: 2px;
padding: 2px 4px;
line-height: 20px;
border: 1px solid #AAA;
border: 1px solid #aaaaaa;
border-radius: 4px; /* may need vendor varients */
background: #FAFAFA;
background: #fafafa;
cursor: pointer;
&.selected {
.select-handle {
opacity: 1.0;
cursor: pointer;
}
.quality-label {
color: #444444;
}
.select-handle:before {
.icon(@check);
}
}
&:hover {
border-color: #888888;
background: #eeeeee;
.drag-handle {
opacity: 1.0;
cursor: pointer;
}
}
.quality-label {
color: #CCC;
color: #c6c6c6;
}
.drag-handle, .select-handle {
opacity: 0.2;
line-height: 20px;
cursor: pointer;
}
.drag-handle:hover {
opacity: 1.0;
cursor: pointer;
.select-handle:before {
.icon(@check-empty);
display: inline-block;
width: 16px;
margin-top: 1px;
}
}
li.selected {
.select-handle {
opacity: 1.0;
cursor: pointer;
}
.quality-label {
color: #444;
}
}
li:hover {
border-color: #888;
background: #EEE;
.select-handle {
opacity: 0.5;
}
}
.qualities-controls {
.help-inline {
vertical-align: top;
margin-top: 5px;
}
}
@ -102,22 +119,22 @@ ul.allowed-list {
border-top: 1px solid #ddd;
vertical-align: middle;
padding: 5px;
input {
margin-bottom: 0px;
}
.size-label-wrapper {
line-height: 20px;
}
.label {
min-width: 70px;
text-align: center;
margin: 0px 1px;
padding: 1px 4px;
}
.ui-slider {
position: relative;
text-align: left;
@ -125,14 +142,14 @@ ul.allowed-list {
border-radius: 3px;
border: 1px solid #ccc;
height: 8px;
.ui-slider-range {
position: absolute;
display: block;
background-color: #ddd;
height: 100%;
}
.ui-slider-handle {
position: absolute;
z-index: 2;
@ -147,4 +164,3 @@ ul.allowed-list {
}
}
}

View File

@ -194,7 +194,7 @@ define(
},
_setAdvancedSettingsState: function () {
var checked = Config.getValueBoolean('advancedSettings');
var checked = Config.getValueBoolean(Config.Keys.AdvancedSettings);
this.ui.advancedSettings.prop('checked', checked);
if (checked) {
@ -204,7 +204,7 @@ define(
_toggleAdvancedSettings: function () {
var checked = this.ui.advancedSettings.prop('checked');
Config.setValue('advancedSettings', checked);
Config.setValue(Config.Keys.AdvancedSettings, checked);
if (checked) {
$('body').addClass('show-advanced-settings');