more root dir UI cleanup

NzbDrone.Web/Content/ActionButton.css

@@ -4,7 +4,7 @@
     padding: 5px 10px 5px 10px;
     background-repeat: no-repeat;
     background-position: 5px center;
-    background-color: #dbe4e9;
+    background-color: #cccccc;
     margin-bottom: 10px;
     display: inline-block;
     font-size: 15px;

NzbDrone.Web/Content/Overrides.css

@@ -0,0 +1,11 @@
+/*YUI dropdown*/
+.yui3-aclist
+{
+    z-index: 100 !important;
+    width: auto !important;
+}
+
+.yui3-aclist-item-active
+{
+    background: #065EFE !important;
+}

NzbDrone.Web/Content/Settings.css

@@ -58,7 +58,6 @@ p, h1, form, button{border:0; margin:0; padding:0;}
 #stylized input, select
 {
     float:left;
-    font-size:12px;
     padding:4px 2px;
     border:solid 1px #aacfe4;
     width:200px;

NzbDrone.Web/Content/Site.css

@@ -6,7 +6,7 @@ h1, h2, h3
 body
 {
     background: #191919 url(images/img07.jpg) no-repeat right top;
-    font-family: "Segoe UI" , "Segoe UI Light" , Tahoma, Geneva, sans-serif;
+    font-family: "Segoe UI" , "Segoe UI Light" , Tahoma, Geneva, sans-serif !important;
     font-size: 13px;
     color: #3C3C3C;
     background-attachment: fixed;
@@ -169,6 +169,21 @@ button:active, input[type="button"]:active, input[type="submit"]:active, input[t
     border-color: #0C48B6;
 }
 
+input, select
+{
+    font-size: larger;
+    padding: 4px 2px;
+    border: solid 1px #aacfe4;
+    width: 200px;
+    margin: 2px 0 20px 10px;
+    height: 20px;
+}
+
+select
+{
+    height: 30px;
+}
+
 .listButton
 {
     padding: 2px 10px 2px 10px;
@@ -181,8 +196,7 @@ button:active, input[type="button"]:active, input[type="submit"]:active, input[t
 {
     border-bottom-style: solid;
     border-bottom-width: 5px;
-    border-bottom-color: #3C3C3C;
+    border-bottom-color: #3C3C3C; /* Set padding to prevent fieldset border from moving when button is highlighted... WINNING! */
-    /* Set padding to prevent fieldset border from moving when button is highlighted... WINNING! */
     padding-bottom: 2px;
 }
 

NzbDrone.Web/Controllers/AddSeriesController.cs

@@ -242,10 +242,15 @@ namespace NzbDrone.Web.Controllers
         }
 
 
-        public ActionResult RootDir()
+        public ActionResult RootList()
         {
             var rootDir = _rootFolderProvider.GetAll().Select(c => c.Path);
-            return PartialView("RootDir", rootDir);
+            return PartialView("RootList", rootDir);
+        }
+
+        public ActionResult RootDir()
+        {
+            return PartialView("RootDir");
         }
 
         public JsonResult DeleteRootDir(string path)

NzbDrone.Web/NzbDrone.Web.csproj

@@ -494,6 +494,7 @@
     <Content Include="Content\Blueprint\ie.css" />
     <Content Include="Content\Blueprint\screen.css" />
     <Content Include="Content\Blueprint\liquid.css" />
+    <Content Include="Content\Overrides.css" />
     <Content Include="Content\Images\ajax-loader.gif" />
     <Content Include="Content\ie.css" />
     <Content Include="Content\Images\arrow.png" />
@@ -589,6 +590,7 @@
     <Content Include="Scripts\jquery.jgrowl.js" />
     <Content Include="Scripts\jquery-tgc-countdown-1.0.js" />
     <Content Include="Scripts\jquery.simpledropdown.js" />
+    <Content Include="Scripts\jquery.watermark.min.js" />
     <Content Include="Scripts\Notification.js" />
     <Content Include="Views\AddSeries\Index.cshtml" />
     <Content Include="Views\AddSeries\AddNew.cshtml" />
@@ -686,6 +688,9 @@
   <ItemGroup>
     <Content Include="Views\AddSeries\Test.cshtml" />
   </ItemGroup>
+  <ItemGroup>
+    <Content Include="Views\AddSeries\RootList.cshtml" />
+  </ItemGroup>
   <Import Project="$(MSBuildBinPath)\Microsoft.CSharp.targets" />
   <Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v10.0\WebApplications\Microsoft.WebApplication.targets" />
   <!-- To modify your build process, add your task inside one of the targets below and uncomment it. 

NzbDrone.Web/Scripts/jquery.watermark.min.js

@@ -0,0 +1,12 @@
+/*
+* jQuery Watermark plugin
+* Version 1.2.1 (7-DEC-2010)
+* @requires jQuery v1.3 or later
+*
+* Examples at: http://mario.ec/static/jq-watermark/
+* Copyright (c) 2010 Mario Estrada
+* Licensed under the MIT license:
+* http://www.opensource.org/licenses/mit-license.php
+*
+*/
+(function (a) { var b = a.browser.msie && a.browser.version < 8, c = 4; a.watermarker = function () { }, a.extend(a.watermarker, { defaults: { color: "#999", left: 0, top: 0, fallback: !1, animDuration: 300, minOpacity: .6 }, setDefaults: function (b) { a.extend(a.watermarker.defaults, b) }, checkVal: function (b, c, d) { b.length == 0 ? a(c).show() : a(c).hide(); return b.length > 0 }, html5_support: function () { var a = document.createElement("input"); return "placeholder" in a } }), a.fn.watermark = function (d, e) { var e, f; e = a.extend(a.watermarker.defaults, e), f = this.filter("textarea, input:not(:checkbox,:radio,:file,:submit,:reset)"); if (!e.fallback || !a.watermarker.html5_support()) { f.each(function () { var f, g, h, i, j, k, l, m, n = 0, o, p; f = a(this), f.attr("data-jq-watermark") != "processed" && (g = f.attr("placeholder") != undefined && f.attr("placeholder") != "" ? "placeholder" : "title", h = d === undefined || d === "" ? a(this).attr(g) : d, i = a('<span class="watermark_container"></span>'), j = a('<span class="watermark">' + h + "</span>"), g == "placeholder" && f.removeAttr("placeholder"), i.css({ display: "inline-block", position: "relative" }), b && i.css({ zoom: 1, display: "inline" }), f.wrap(i).attr("data-jq-watermark", "processed"), this.nodeName.toLowerCase() == "textarea" ? (e_height = f.css("line-height"), e_height = e_height === "normal" ? parseInt(f.css("font-size")) : e_height, n = f.css("padding-top") != "auto" ? parseInt(f.css("padding-top")) : 0) : (e_height = f.outerHeight(), e_height <= 0 && (e_height = f.css("padding-top") != "auto" ? parseInt(f.css("padding-top")) : 0, e_height += f.css("padding-bottom") != "auto" ? parseInt(f.css("padding-bottom")) : 0, e_height += f.css("height") != "auto" ? parseInt(f.css("height")) : 0)), n += f.css("margin-top") != "auto" ? parseInt(f.css("margin-top")) : 0, k = f.css("margin-left") != "auto" ? parseInt(f.css("margin-left")) : 0, k += f.css("padding-left") != "auto" ? parseInt(f.css("padding-left")) : 0, j.css({ position: "absolute", display: "block", fontFamily: f.css("font-family"), fontSize: f.css("font-size"), color: e.color, left: c + e.left + k, top: e.top + n, height: e_height, lineHeight: e_height + "px", textAlign: "left", pointerEvents: "none" }).data("jq_watermark_element", f), a.watermarker.checkVal(f.val(), j), j.click(function () { a(a(this).data("jq_watermark_element")).trigger("click").trigger("focus") }), f.before(j).bind("focus.jq_watermark", function () { a.watermarker.checkVal(a(this).val(), j) || j.stop().fadeTo(e.animDuration, e.minOpacity) }).bind("blur.jq_watermark change.jq_watermark", function () { a.watermarker.checkVal(a(this).val(), j) || j.stop().fadeTo(e.animDuration, 1) }).bind("keydown.jq_watermark, paste.jq_watermark", function (b) { a(j).hide() }).bind("keyup.jq_watermark", function (b) { a.watermarker.checkVal(a(this).val(), j) })) }); return this } }, a(".jq_watermark").watermark() })(jQuery)

NzbDrone.Web/Views/AddSeries/RootDir.cshtml

@@ -1,44 +1,52 @@
-@using NzbDrone.Web.Models
+@{
-@model IEnumerable<String>
-@{
     Layout = null;
 }
+<div>
+    <input id="rootDirInput" type="text" style="width: 400px" />
+    <button id="saveDir">
+        Add</button>
+</div>
 <div id="rootDirs">
-    @foreach (var root in Model)
+    @{Html.RenderAction("RootList");}
-    {
-        <div class="actionButton delete">
-            <img src="/Content/Images/x_16.png" alt="delete" id='@root'/>
-            <span>@root</span>
-        </div>
-    }
 </div>
-<br />
-<label for="ac-input">
-    Enter a GitHub username:</label>
-<input id="rootDirInput" type="text" style="width: 100px" />
-<button id="saveDir">
-    Save</button>
 @(Html.Telerik().ScriptRegistrar().DefaultGroup(c => c.Add("http://ajax.googleapis.com/ajax/libs/yui/3.3.0/build/yui/yui-min.js")
                                                                                           .Add("AutoComplete.js")
                                                                  ).OnDocumentReady("bindFolderAutoComplete('#rootDirInput')"))
+
+@(Html.Telerik().ScriptRegistrar().OnDocumentReady("onRootReady()"))
+
 <script type="text/javascript">
 
-    $(document).ready(function () {
-        $('#saveDir').click(saveRootDir);
 
-        function saveRootDir() {
+    function onRootReady() {
-            var path = $("#rootDirInput").val();
-            $.post("/AddSeries/SaveRootDir", { Path: path });
-        }
-    });
 
+        $('#rootDirInput').watermark('Start typing to add new root folder...');
 
-    $(document).ready(function () {
         $('#rootDirs .actionButton img').live('click',
             function (image) {
                 var path = $(image.srcElement).attr('id');
-                $.post("/AddSeries/DeleteRootDir", { Path: path });
+                $.post('@Url.Action("DeleteRootDir", "AddSeries")', { Path: path }, function () {
+                    refreshRoot();
+                });
+            });
+
+        $('#saveDir').click(saveRootDir);
+
+        function saveRootDir() {
+            var path = $("#rootDirInput").val();
+            $.post('@Url.Action("SaveRootDir", "AddSeries")', { Path: path }, function () {
+                refreshRoot();
+                $("#rootDirInput").val('');
             });
+
+        }
+
+
+        function refreshRoot() {
+            $.get('@Url.Action("RootList", "AddSeries")', function (data) {
+                $('#rootDirs').html(data);
             });
+        }
+    }
     
 </script>

NzbDrone.Web/Views/AddSeries/RootList.cshtml

@@ -0,0 +1,14 @@
+@model IEnumerable<String>
+@if (Model.Count() == 0)
+{
+    <div class="actionButton delete">
+        <span>You have no root folders added.</span>
+    </div>
+}
+@foreach (var root in Model)
+{
+    <div class="actionButton delete">
+        <img src="/Content/Images/x_16.png" alt="delete" id='@root'/>
+        <span>@root</span>
+    </div>
+}

NzbDrone.Web/Views/Shared/_Layout.cshtml

@@ -5,9 +5,7 @@
     <link rel="SHORTCUT ICON" href="../../favicon.ico" />
     <title>NZBDrone</title>
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-
     <link href="/Content/Blueprint/screen.css" rel="stylesheet" type="text/css" />
-    <link href="/Content/Blueprint/ie.css" rel="stylesheet" type="text/css" />
     <link type="text/css" href="http://aspnet-skins.telerikstatic.com/mvcz/2011.1.414/telerik.common.min.css"
         rel="stylesheet" />
     <link type="text/css" href="http://aspnet-skins.telerikstatic.com/mvcz/2011.1.414/telerik.sitefinity.min.css"
@@ -17,6 +15,7 @@
     <link href="/Content/Site.css" rel="stylesheet" type="text/css" />
     <link href="/Content/Notibar.css" rel="stylesheet" type="text/css" />
     <link href="/Content/ActionButton.css" rel="stylesheet" type="text/css" />
+    <link href="/Content/overrides.css" rel="stylesheet" type="text/css" />
     @RenderSection("HeaderContent", required: false)
 </head>
 <body>
@@ -61,6 +60,7 @@
                     .Add("jquery.form.js")
                     .Add("jquery.jgrowl.js")
                     .Add("jquery-tgc-countdown-1.0.js")
+                                    .Add("jquery.watermark.min.js")
                     .Add("MicrosoftMvcValidation.js"))
 
                     .AddGroup("NzbDrone", group => group