Quality Settings UI updated some more.

NzbDrone.Web/Content/style.css

@@ -1,8 +1,7 @@
 h1, h2, h3
 {
     margin: 0;
-    color: #549900;
+    color: #000000;
-    text-transform: lowercase;
 }
 
 body
@@ -206,13 +205,13 @@ hr
 input[type="text"]
 {
 	border: 1px solid #006;
-    background: #ffc;
+    background: #CBE8FF;
 }
 
 input[type="text"]:hover
 {
-	border: 1px solid #f00;
+	border: 1px solid #065EFE;
-    background: #ff6;
+    background: #C0D6FF;
 }
 
 .button

NzbDrone.Web/NzbDrone.Web.csproj

@@ -107,6 +107,7 @@
     <Content Include="Content\Hay\treeview-nodes-rtl.png" />
     <Content Include="Content\ie.css" />
     <Content Include="Content\Images\arrow.png" />
+    <Content Include="Content\Images\Plus.png" />
     <Content Include="Content\Images\spin.gif" />
     <Content Include="Content\Black\editor.png" />
     <Content Include="Content\Black\loading.gif" />
@@ -148,6 +149,7 @@
     <Content Include="Content\Images\ui-icons_888888_256x240.png" />
     <Content Include="Content\Images\ui-icons_cd0a0a_256x240.png" />
     <Content Include="Content\Images\ui-icons_ffffff_256x240.png" />
+    <Content Include="Content\Images\X.png" />
     <Content Include="Content\jquery-simpledropdown.css" />
     <Content Include="Content\jquery-ui-1.8.8.custom.css" />
     <Content Include="Content\jquery-ui.css" />

NzbDrone.Web/Views/Settings/Quality.ascx

@@ -66,27 +66,37 @@
             <legend>Quality</legend> 
                 <%: Html.ValidationSummary(true, "Unable to save your settings. Please correct the errors and try again.") %>
 
-                <div class="editor-label">
+                <div class="rightSide" style="float: right; width: 65%;">
-                    <%= Html.LabelFor(m => m.DefaultProfileId)%>
+                    <div id="defaultQualityDiv" style="float: left; margin: 30px;">
-                </div>
+                        
-                <div class="editor-field">
+                        <div class="config-group" style="width: 250px; margin-bottom: 5px; margin-left: 5px;">
-                    <%: Html.DropDownListFor(m => m.DefaultProfileId, Model.SelectList)%>
+                            <div class="config-title"><%= Html.LabelFor(m => m.DefaultProfileId)%></div>
-                    <%= Html.ValidationMessageFor(m => m.DefaultProfileId)%>
+                            <div class="config-value"><%: Html.DropDownListFor(m => m.DefaultProfileId, Model.SelectList)%></div>
+                            <div class="config-validation"><%= Html.ValidationMessageFor(m => m.DefaultProfileId)%></div>
+                        </div>
+                    </div>
                 </div>
 
-                <br />
+                <div id="leftSide" style="width:35%;">
+                    <div style="padding-top: 10px;">
+                        <div style="padding-left: 7px; margin-bottom: 5px;">
+                            <a id="addItem" style="text-decoration:none;" href="<%: Url.Action("AddUserProfile", "Settings") %>">
+                            <img src="../../Content/Images/Plus.png" alt="Add New Profile" />
+                            <h4 style="margin-left: 3px; display: inline; color: Black;">Add New Profile</h4></a>
+                        </div>
+
+                        <div id="user-profiles">
+                            <%foreach (var item in Model.UserProfiles) { %>
+                                <% Html.RenderPartial("UserProfileSection", item); %>
+                            <% } %>
+                        </div>
+                    </div>
 
-                <div id="profile-editor">
+                    <div style="margin-top: 10px; padding-left: 5px;">
-                    <%= Html.ActionLink("Add a New Profile", "AddUserProfile", null, new { id = "addItem" }) %>
+                        <input type="submit" class="button" value="Save" />
-                    <div id="user-profiles">
-                        <%foreach (var item in Model.UserProfiles) { %>
-                            <% Html.RenderPartial("UserProfileSection", item); %>
-                        <% } %>
                     </div>
                 </div>
 
-                <br />
-                <input type="submit" class="button" value="Save" />
         </fieldset>
 
     <%}%>

NzbDrone.Web/Views/Settings/UserProfileSection.ascx

@@ -11,7 +11,7 @@
 	        #sortable1 li { background: #ddd; }
 	        #sortable2 li { background: #DAA2A2; }
 	        .sortableHeader { margin:2px; margin-left:12px }
-	        #sortable1 li.ui-state-highlight, #sortable2 li.ui-state-highlight { background: #fbf5d0; }
+	        #sortable1 li.ui-state-highlight, #sortable2 li.ui-state-highlight { background: #fbf5d0; border-color: #065EFE; }
 	        .removeDiv { float: left; display:block; }
 	        
 	    </style>
@@ -40,69 +40,67 @@
 
     <div class="userProfileSectionEditor"> 
 
-        <fieldset style="width:275px; margin:5px;">
+        <fieldset style="width:275px; margin:5px; margin-top: 0px; border-color:#CCCCCD">
-            <%--<label><%= Model.Name %></label>--%>
 
-            <%= Html.TextBoxFor(m => m.AllowedString, new { @id = "allowedString", @style = "display:none" })%>
+            <div id="qualityHeader" style="padding-bottom: 5px; margin: 0px;">
+                <h2 style="display:inline; padding-right: 4px; margin-left: 4px;"><%= Html.DisplayTextFor(m => m.Name) %></h2>
+                <a href="#" class="deleteRow"><img src="../../Content/Images/X.png" alt="Delete" /></a>
+            </div>
 
-            <div class="config-group" style="width: 250px">
+            <div class="config-group" style="width: 250px; margin-bottom: 5px; margin-left: 5px;">
                 <div class="config-title"><%= Html.LabelFor(x => x.Name)%></div>
                 <div class="config-value"><%= Html.TextBoxFor(x => x.Name)%></div>
                 <div class="config-validation"><%= Html.ValidationMessageFor(x => x.Name)%></div>
             </div>
 
-            <div class="removeDiv"><a href="#" class="deleteRow">Remove</a></div>
+            <div id="sortablesDiv" style="margin: 0px;">
-            <br />
+                <div class="allowedQualities">
+                    <h4 class="sortableHeader">Allowed</h4>
+                    <ul id="sortable1" class="connectedSortable">
+                        <% if (Model.Allowed != null) { %>
+                            <%for (int i = 0; i < Model.Allowed.Count(); i++){%>
+                                <li class="ui-state-default" id="<%= Model.Allowed[i].ToString() %>">
+                                <%=Html.RadioButtonFor(x => x.Cutoff, Model.Allowed[i])%>
+                                <%= Html.DisplayTextFor(c => c.Allowed[i]) %>
+                                </li>
+                            <%}%>
+                        <%}%>
+                    </ul>
+                </div>
+
+                <div class="otherQualities">
+                    <h4 class="sortableHeader">Not-Allowed</h4>
+                    <ul id="sortable2" class="connectedSortable">
+                        <% var qualitiesList = (List<QualityTypes>) ViewData["Qualities"]; %>
+
+                        <%for (int i = 0; i < qualitiesList.Count(); i++){%>                      
+                            <%
+                                //Skip Unknown and any item that is in the allowed list
+                                if (qualitiesList[i].ToString() == "Unknown")
+                                    continue;
+                          
+                                if (Model.Allowed != null)
+                                {
+                                    if (Model.Allowed.Contains(qualitiesList[i]))
+                                        continue;
+                                }
+                            %>
+
+                            <li class="ui-state-default" id="<%= qualitiesList[i].ToString() %>">
+                            <%=Html.RadioButtonFor(x => x.Cutoff, qualitiesList[i])%>
+                            <%= Html.Label(qualitiesList[i].ToString()) %>
+                            <%--<%= Html.RenderPartial("ProfileAllowedQualities", Model.Allowed[i]) %>--%>
+                            </li>
 
+                        <% } %>
+                    </ul>
+                </div>
+            </div>
             <div class="hiddenProfileDetails">
                 <%= Html.TextBoxFor(x => x.ProfileId, new { @style = "display:none" })%>
                 <%= Html.CheckBoxFor(x => x.UserProfile, new { @style = "display:none" })%>
+                <%= Html.TextBoxFor(m => m.AllowedString, new { @id = "allowedString", @style = "display:none" })%>
             </div>
-
-            <br />
-
-            <div class="allowedQualities">
-                <h4 class="sortableHeader">Allowed</h4>
-                <ul id="sortable1" class="connectedSortable">
-                    <% if (Model.Allowed != null) { %>
-                        <%for (int i = 0; i < Model.Allowed.Count(); i++){%>
-                            <li class="ui-state-default" id="<%= Model.Allowed[i].ToString() %>">
-                            <%=Html.RadioButtonFor(x => x.Cutoff, Model.Allowed[i])%>
-                            <%= Html.DisplayTextFor(c => c.Allowed[i]) %>
-                            </li>
-                        <%}%>
-                    <%}%>
-                </ul>
-            </div>
-
-            <div class="otherQualities">
-                <h4 class="sortableHeader">Not-Allowed</h4>
-                <ul id="sortable2" class="connectedSortable">
-                    <% var qualitiesList = (List<QualityTypes>) ViewData["Qualities"]; %>
-
-                    <%for (int i = 0; i < qualitiesList.Count(); i++){%>                      
-                        <%
-                            //Skip Unknown and any item that is in the allowed list
-                            if (qualitiesList[i].ToString() == "Unknown")
-                                continue;
-                          
-                            if (Model.Allowed != null)
-                            {
-                                if (Model.Allowed.Contains(qualitiesList[i]))
-                                    continue;
-                            }
-                        %>
-
-                        <li class="ui-state-default" id="<%= qualitiesList[i].ToString() %>">
-                        <%=Html.RadioButtonFor(x => x.Cutoff, qualitiesList[i])%>
-                        <%= Html.Label(qualitiesList[i].ToString()) %>
-                        <%--<%= Html.RenderPartial("ProfileAllowedQualities", Model.Allowed[i]) %>--%>
-                        </li>
-
-                    <% } %>
-                </ul>
-            </div>
-            <br />
             
         </fieldset>
     </div>