From acf16f6bd33c92bc7cf148778f2e87711f4d3c91 Mon Sep 17 00:00:00 2001
From: Mark McDowall <markus.mcd5@gmail.com>
Date: Fri, 28 Jun 2013 01:20:15 -0700
Subject: [PATCH] knobs look way better

---
 UI/Content/base.less                          |  5 ++++
 UI/JsLibraries/jquery.knob.js                 |  1 +
 UI/Settings/Misc/MiscTemplate.html            |  6 ++---
 .../Quality/Size/QualitySizeTemplate.html     | 16 ++++++++++--
 UI/Settings/Quality/Size/QualitySizeView.js   | 26 +++++++++----------
 UI/Settings/Quality/quality.less              | 15 ++++++++---
 6 files changed, 47 insertions(+), 22 deletions(-)

diff --git a/UI/Content/base.less b/UI/Content/base.less
index 87c3d8914..ade0bb39f 100644
--- a/UI/Content/base.less
+++ b/UI/Content/base.less
@@ -93,3 +93,8 @@
   font-size : 56px;
   color     : white;
 }
+
+.label-large {
+  padding: 4px 6px;
+  font-size: 16px;
+}
\ No newline at end of file
diff --git a/UI/JsLibraries/jquery.knob.js b/UI/JsLibraries/jquery.knob.js
index 51b8629c5..a657773d4 100644
--- a/UI/JsLibraries/jquery.knob.js
+++ b/UI/JsLibraries/jquery.knob.js
@@ -475,6 +475,7 @@
                             ) return;
 
                             s.val(v);
+                            s.$.trigger('change', v);
                         }
                 , kval, to, m = 1, kv = {37:-s.o.step, 38:s.o.step, 39:s.o.step, 40:-s.o.step};
 
diff --git a/UI/Settings/Misc/MiscTemplate.html b/UI/Settings/Misc/MiscTemplate.html
index 7f071b3f3..91bd1cfba 100644
--- a/UI/Settings/Misc/MiscTemplate.html
+++ b/UI/Settings/Misc/MiscTemplate.html
@@ -1,5 +1,5 @@
 <fieldset>
-    <legend>General</legend>
+    <legend>Misc</legend>
 
     <div class="control-group">
         <label class="control-label">Backlog Searching</label>
@@ -49,9 +49,9 @@
         <div class="controls">
             <textarea rows="3" name="nzbRestrictions" class="nzb-restrictions"></textarea>
             <span class="help-inline">
-                <i class="icon-question-sign" title="White list or black list nzbs based on these rules<br/>White list: +:LoL<br/>Black list: -:French"/>
+                <i class="icon-question-sign" title="Blacklist NZBs based on these words (case-insensitive)"/>
             </span>
-            <span class="text-area-help">Newline-delimited set of rules in the form of +|-:</span>
+            <span class="text-area-help">Newline-delimited set of rules</span>
         </div>
     </div>
 </fieldset>
diff --git a/UI/Settings/Quality/Size/QualitySizeTemplate.html b/UI/Settings/Quality/Size/QualitySizeTemplate.html
index f96c240a4..f84c7cb13 100644
--- a/UI/Settings/Quality/Size/QualitySizeTemplate.html
+++ b/UI/Settings/Quality/Size/QualitySizeTemplate.html
@@ -1,8 +1,20 @@
 <div class="quality-size-item">
     <h2 class="center-block">{{name}}</h2>
     <div class="size">
+        <div class="size-value-wrapper">
+            <div>
+                <span class="label label-large label-warning x-size-thirty"
+                      name="thirtyMinuteSize"
+                      title="Maximum size for a 30 minute episode in Megabytes">
+                </span>
+            </div>
+            <div>
+                <span class="label label-large label-info x-size-sixty"
+                      name="sixtyMinuteSize"
+                      title="Maximum size for a 60 minute episode in Megabytes">
+                </span>
+            </div>
+        </div>
         <input type="text" name="maxSize" class="knob x-knob" />
     </div>
-    <div class="size-value">30 minute limit: <span name="thirtyMinuteSize" class="thirty-minute-size"></span>MB</div>
-    <div class="size-value">60 minute limit: <span name="sixtyMinuteSize" class="sixty-minute-size"></span>MB</div>
 </div>
\ No newline at end of file
diff --git a/UI/Settings/Quality/Size/QualitySizeView.js b/UI/Settings/Quality/Size/QualitySizeView.js
index 7c2de6267..1b557ff3c 100644
--- a/UI/Settings/Quality/Size/QualitySizeView.js
+++ b/UI/Settings/Quality/Size/QualitySizeView.js
@@ -8,33 +8,33 @@ define(['marionette', 'Mixins/AsModelBoundView', 'jquery.knob'], function (Mario
 
         ui: {
             knob            : '.x-knob',
-            thirtyMinuteSize: '.thirty-minute-size',
-            sixtyMinuteSize : '.sixty-minute-size'
+            thirtyMinuteSize: '.x-size-thirty',
+            sixtyMinuteSize : '.x-size-sixty'
         },
 
         events: {
-            'change .x-knob': '_changeMaxSize'
+//            'change .x-knob': '_changeMaxSize'
         },
 
         initialize: function (options) {
             this.qualityProfileCollection = options.qualityProfiles;
+            this.model.on('change:maxSize', this._changeMaxSize, this)
         },
 
         onRender: function () {
             this.ui.knob.knob({
-                min         : 0,
-                max         : 200,
-                step        : 10,
-                cursor      : 25,
-                width       : 100,
-                stopper     : true
+                min          : 0,
+                max          : 200,
+                step         : 10,
+                cursor       : 25,
+                width        : 150,
+                stopper      : true,
+                displayInput : false
             });
         },
 
-        _changeMaxSize: function (e, value) {
-            this.model.set({
-                maxSize: value
-            });
+        _changeMaxSize: function (e) {
+            var value = this.model.get('maxSize');
 
             this.ui.thirtyMinuteSize.html(value * 30);
             this.ui.sixtyMinuteSize.html(value * 60);
diff --git a/UI/Settings/Quality/quality.less b/UI/Settings/Quality/quality.less
index c80a17c88..82083df23 100644
--- a/UI/Settings/Quality/quality.less
+++ b/UI/Settings/Quality/quality.less
@@ -32,17 +32,18 @@
 .quality-size-item {
 
   .card;
+  text-align: center;
 
   width: 200px;
-  height: 200px;
+  height: 220px;
   padding: 10px 15px;
 
   h3 {
     margin-top: 0px;
-    text-align: center;
   }
 
   .size {
+    position: relative;
     height: 100px;
     margin: 10px;
     text-align: center;
@@ -52,8 +53,14 @@
     box-shadow: none;
   }
 
-  .size-value {
-    text-align: center;
+  .size-value-wrapper {
+    position: absolute;
+    top: 50px;
+    width: 100%;
+
+    div {
+      margin-top: 2px;
+    }
   }
 }