Added mono space font, cleaner UI for rename preview

src/NzbDrone.Core/Datastore/Migration/029_add_formats_to_naming_config.cs

@@ -90,7 +90,7 @@ private void ConvertConfig(IDbConnection conn, IDbTransaction tran)
                         {
                             if (replaceSpaces)
                             {
-                                qualityFormat = " [{Quality.Title}]";
+                                qualityFormat = ".[{Quality.Title}]";
                             }
 
                             standardEpisodeFormat += qualityFormat;

src/UI/Content/checkbox-button.less

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

src/UI/Content/font.less

@@ -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')
+}

src/UI/Content/icons.less

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

src/UI/Content/theme.less

@@ -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 {
+.mono-space {
-  margin-bottom: 5px;
+  font-family: "ubuntu mono"
-  padding: 5px;
+}
-  border-bottom: 1px solid #e5e5e5;
 
-  .checkbox {
+.file-path {
-    width: 80px;
+  .mono-space();
-    margin-left: 0px;
-    display: inline-block;
-    padding-top: 0px;
-    margin-bottom: 0px;
-  }
 }

src/UI/Rename/RenamePreviewItemView.js

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

src/UI/Rename/RenamePreviewItemViewTemplate.html

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

src/UI/Rename/RenamePreviewLayout.js

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

src/UI/Rename/RenamePreviewLayoutTemplate.html

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

src/UI/Rename/rename.less

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