Added mono space font, cleaner UI for rename preview

This commit is contained in:
Mark McDowall 2013-11-27 01:19:44 -08:00
parent e42ac25657
commit f349f1177e
15 changed files with 165 additions and 33 deletions

View File

@ -90,7 +90,7 @@ namespace NzbDrone.Core.Datastore.Migration
{
if (replaceSpaces)
{
qualityFormat = " [{Quality.Title}]";
qualityFormat = ".[{Quality.Title}]";
}
standardEpisodeFormat += qualityFormat;

View File

@ -26,7 +26,7 @@
color: #333333;
}
input:first-of-type:checked ~ .btn {
input:first-of-type:checked ~ .btn-primary {
.buttonBackground(@btnPrimaryBackground, @btnPrimaryBackgroundHighlight);
}
}

View File

@ -33,3 +33,15 @@
url('/Content/fonts/opensans-semibold.woff') format('woff'),
url('/Content/fonts/opensans-semibold.ttf') format('truetype')
}
@font-face {
font-family: 'Ubuntu Mono';
font-style: normal;
font-weight: 400;
src: url('/Content/fonts/ubuntumono-regular.eot');
src: local('Open Sans'),
local('OpenSans'),
url('/Content/fonts/ubuntumono-regular.eot?#iefix') format('embedded-opentype'),
url('/Content/fonts/ubuntumono-regular.woff') format('woff'),
url('/Content/fonts/ubuntumono-regular.ttf') format('truetype')
}

Binary file not shown.

Binary file not shown.

Binary file not shown.

View File

@ -166,4 +166,4 @@
.icon-nd-download-failed:before {
.icon(@cloud-download);
color: @errorText;
}
}

View File

@ -12,6 +12,7 @@
@import "legend";
@import "../Shared/Styles/clickable";
@import "../Shared/Styles/card";
@import "../Rename/rename";
.progress.episode-progress {
width : 125px;
@ -185,16 +186,10 @@ footer {
display : none;
}
.rename-preview-item {
margin-bottom: 5px;
padding: 5px;
border-bottom: 1px solid #e5e5e5;
.mono-space {
font-family: "ubuntu mono"
}
.checkbox {
width: 80px;
margin-left: 0px;
display: inline-block;
padding-top: 0px;
margin-bottom: 0px;
}
.file-path {
.mono-space();
}

View File

@ -6,7 +6,39 @@ define(
'Mixins/AsModelBoundView'
], function (vent, Marionette, AsModelBoundView) {
var view = Marionette.ItemView.extend({
template: 'Rename/RenamePreviewItemViewTemplate'
template: 'Rename/RenamePreviewItemViewTemplate',
ui: {
itemDiv: '.rename-preview-item',
checkboxIcon: '.rename-checkbox i'
},
onRender: function () {
this._setItemState();
this.listenTo(this.model, 'change', this._setItemState);
this.listenTo(this.model, 'rename:select', this._onRenameAll);
},
_setItemState: function () {
var checked = this.model.get('rename');
this.model.trigger('rename:select', this.model, checked);
if (checked) {
this.ui.itemDiv.removeClass('do-not-rename');
this.ui.checkboxIcon.addClass('icon-check');
this.ui.checkboxIcon.removeClass('icon-check-empty');
}
else {
this.ui.itemDiv.addClass('do-not-rename');
this.ui.checkboxIcon.addClass('icon-check-empty');
this.ui.checkboxIcon.removeClass('icon-check');
}
},
_onRenameAll: function (model, checked) {
this.model.set('rename', checked);
}
});
return AsModelBoundView.apply(view);

View File

@ -1,24 +1,19 @@
<div class="rename-preview-item">
<div class="row">
<div class="span1">
<label class="checkbox toggle well" title="Rename file">
<div class="rename-checkbox span">
<label class="checkbox-button" title="Rename File">
<input type="checkbox" name="rename"/>
<p>
<span>Yes</span>
<span>No</span>
</p>
<div class="btn btn-warning slide-button"/>
<div class="btn btn-icon-only">
<i></i>
</div>
</label>
</div>
<div class="span9">
<div class="row">
<div class="span1">Existing</div>
<div class="span8">{{existingPath}}</div>
<div class="span9 file-path"><i class="icon-nd-existing" title="Existing path" /> {{existingPath}}</div>
</div>
<div class="row">
<div class="span1">Suggested</div>
<div class="span8">{{newPath}}</div>
<div class="span9 file-path"><i class="icon-nd-suggested" title="Suggested path" /> {{newPath}}</div>
</div>
</div>
</div>

View File

@ -19,11 +19,14 @@ define(
},
ui: {
pathInfo: '.x-path-info'
pathInfo : '.x-path-info',
renameAll : '.x-rename-all',
checkboxIcon: '.x-rename-all-button i'
},
events: {
'click .x-organize': '_organizeFiles'
'click .x-organize' : '_organizeFiles',
'change .x-rename-all': '_toggleAll'
},
initialize: function (options) {
@ -36,6 +39,7 @@ define(
this.collection = new RenamePreviewCollection(viewOptions);
this.listenTo(this.collection, 'sync', this._showPreviews);
this.listenTo(this.collection, 'rename:select', this._itemRenameChanged);
this.collection.fetch();
},
@ -51,6 +55,7 @@ define(
return;
}
this.ui.pathInfo.show();
this.collection.invoke('set', { rename: true });
this.renamePreviews.show(new RenamePreviewCollectionView({ collection: this.collection }));
},
@ -88,6 +93,37 @@ define(
}
vent.trigger(vent.Commands.CloseModalCommand);
},
_setCheckedState: function (checked) {
if (checked) {
this.ui.checkboxIcon.addClass('icon-check');
this.ui.checkboxIcon.removeClass('icon-check-empty');
}
else {
this.ui.checkboxIcon.addClass('icon-check-empty');
this.ui.checkboxIcon.removeClass('icon-check');
}
},
_toggleAll: function () {
var checked = this.ui.renameAll.prop('checked');
this._setCheckedState(checked);
this.collection.each(function (model) {
model.trigger('rename:select', model, checked);
});
},
_itemRenameChanged: function (model, checked) {
var allChecked = this.collection.all(function (m) {
return m.get('rename');
});
if (!checked || allChecked) {
this._setCheckedState(checked);
}
}
});
});

View File

@ -1,19 +1,26 @@
<div class="rename-preview-modal">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h3>
Organize & Rename
<i class="icon-nd-rename"></i> Organize & Rename
</h3>
</div>
<div class="modal-body">
<div class="alert alert-info x-path-info">All paths are relative to: <strong>{{path}}</strong></div>
<div class="alert alert-info path-info x-path-info">All paths are relative to: <strong>{{path}}</strong></div>
<div id="rename-previews"></div>
</div>
<div class="modal-footer">
<span class="rename-all-button x-rename-all-button pull-left">
<label class="checkbox-button" title="Toggle all">
<input type="checkbox" checked="checked" class="x-rename-all"/>
<div class="btn btn-icon-only">
<i class="icon-check"></i>
</div>
</label>
</span>
<button class="btn" data-dismiss="modal">close</button>
<button class="btn x-organize">Organize</button>
<button class="btn btn-primary x-organize">Organize</button>
</div>
</div>

55
src/UI/Rename/rename.less Normal file
View File

@ -0,0 +1,55 @@
@import "../Content/FontAwesome/font-awesome";
@import "../Content/Bootstrap/variables";
@import "../Content/variables";
.rename-preview-item {
margin-bottom: 5px;
padding: 5px;
border-bottom: 1px solid #e5e5e5;
&.do-not-rename {
background-color: #aaaaaa;
opacity: 0.7;
}
.icon-nd-existing:before {
.icon(@minus);
color : @errorText;
}
.icon-nd-suggested:before {
.icon(@plus);
color : @successText;
}
.rename-checkbox {
width: 20px;
padding-top: 5px;
margin-right: 10px;
.checkbox-button {
.btn {
text-align: left;
min-width: 10px;
width: 10px;
}
}
}
}
.path-info {
display: none;
}
.rename-all-button {
display: inline-block;
.checkbox-button {
.btn {
text-align: left;
min-width: 10px;
width: 10px;
}
}
}

BIN
src/UpgradeLog.htm Normal file

Binary file not shown.

BIN
src/UpgradeLog2.htm Normal file

Binary file not shown.