New layout for Settings/Sabnzbd

Fixed scripting for Settings/Quality
This commit is contained in:
Mark McDowall 2011-06-29 22:22:34 -07:00
parent 01425ac0da
commit 63e303af3b
9 changed files with 335 additions and 284 deletions

View File

@ -0,0 +1,100 @@
body
{
/*font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;*/
}
p, h1, form, button{border:0; margin:0; padding:0;}
.spacer{clear:both; height:1px;}
.settingsForm
{
/*margin:0 auto;*/
width: 600px;
padding: 14px;
}
#stylized
{
border:solid 2px #b7ddf2;
/*background:#ebf4fb;*/
}
#stylized h1
{
font-size:20px;
font-weight:bold;
margin-bottom:8px;
}
#stylized p
{
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #b7ddf2;
padding-bottom:10px;
}
#stylized label
{
display:block;
font-weight:bold;
text-align:right;
width:340px;
float:left;
}
#stylized .small
{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:340px;
}
#stylized input, select
{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}
#stylized button
{
clear:both;
margin-left:220px;
margin-bottom: 10px;
width:125px;
height:31px;
background:#666666 url(img/button.png) no-repeat;
text-align:center;
line-height:31px;
color:#FFFFFF;
font-size:11px;
font-weight:bold;
}
#save_button:hover
{
border-bottom-style: solid;
border-bottom-width: 4px;
border-color: #3C3C3C;
/* Set padding to prevent fieldset border from moving when button is highlighted... WINNING! */
padding-bottom: 0px;
padding-top: 4px;
}
#saveAjax
{
padding-left: 6px;
margin-bottom: -7px;
width: 20px;
height: 20px;
display: none;
}

View File

@ -94,8 +94,6 @@ namespace NzbDrone.Web.Controllers
public ActionResult Sabnzbd()
{
ViewData["viewName"] = "Sabnzbd";
var sabDropDir = _configProvider.SabDropDirectory;
var selectList = new SelectList(new List<string> {sabDropDir}, sabDropDir);
@ -112,13 +110,11 @@ namespace NzbDrone.Web.Controllers
SabDropDirectorySelectList = selectList
};
return View("Index", model);
return View(model);
}
public ActionResult Quality()
{
ViewData["viewName"] = "Quality";
var qualityTypes = new List<QualityTypes>();
foreach (QualityTypes qual in Enum.GetValues(typeof(QualityTypes)))
@ -139,7 +135,7 @@ namespace NzbDrone.Web.Controllers
QualityProfileSelectList = qualityProfileSelectList
};
return View("Index", model);
return View(model);
}
public ActionResult Notifications()

View File

@ -544,6 +544,7 @@
<Content Include="Content\jquery-ui.custom.css" />
<Content Include="Content\jquery.jgrowl.css" />
<Content Include="Content\notibar.css" />
<Content Include="Content\Settings.css" />
<Content Include="Content\Site.css" />
<Content Include="Content\Images\XbmcNotification.png" />
<Content Include="favicon.ico" />

View File

@ -79,7 +79,7 @@ Series
})
.Editable(editor => editor.Mode(GridEditMode.PopUp))
.Sortable(sort => sort.OrderBy(order => order.Add(o => o.Title).Ascending()).Enabled(true))
.DetailView(detailView => detailView.ClientTemplate("<div style=\"width:95%\"><#= Overview #></div>"))
.DetailView(detailView => detailView.ClientTemplate("<#= Overview #>"))
.ClientEvents(clientEvents =>
{
clientEvents.OnEdit("grid_edit");

View File

@ -11,3 +11,30 @@
<script src="/Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>
@{Html.RenderPartial(ViewData["viewName"].ToString());}
}
@section Scripts{
<script type="text/javascript">
$(document).ready(function () {
var options = {
target: '#result',
beforeSubmit: showRequest,
success: showResponse,
type: 'post',
resetForm: false
};
$('#form').ajaxForm(options);
});
function showRequest(formData, jqForm, options) {
$("#result").empty().html('Saving...');
$("#form :input").attr("disabled", true);
$('#saveAjax').show();
}
function showResponse(responseText, statusText, xhr, $form) {
$("#result").empty().html(responseText);
$("#form :input").attr("disabled", false);
$('#saveAjax').hide();
}
</script>
}

View File

@ -170,32 +170,4 @@
</div>
</fieldset>
}
<div id="result" class="hiddenResult"></div>
@section Scripts{
<script type="text/javascript">
$(document).ready(function () {
var options = {
target: '#result',
beforeSubmit: showRequest,
success: showResponse,
type: 'post',
resetForm: false
};
$('#form').ajaxForm(options);
$('#save_button').attr('disabled', '');
});
function showRequest(formData, jqForm, options) {
$("#result").empty().html('Saving...');
$("#form :input").attr("disabled", true);
}
function showResponse(responseText, statusText, xhr, $form) {
$("#result").empty().html(responseText);
$("#form :input").attr("disabled", false);
}
</script>
}
<div id="result" class="hiddenResult"></div>

View File

@ -1,5 +1,19 @@
@using NzbDrone.Web.Helpers;
@model NzbDrone.Web.Models.QualityModel
@section HeaderContent{
<link rel="stylesheet" type="text/css" href="../../Content/Settings.css" />
}
@section TitleContent{
Settings
}
@section ActionMenu{
@{Html.RenderPartial("SubMenu");}
}
@section MainContent{
@using (Html.BeginForm("SaveQuality", "Settings", FormMethod.Post, new { id = "form", name = "form" }))
{
<fieldset style="position: relative;">
@ -31,36 +45,19 @@
}
</div>
</div>
<input type="submit" id="save_button" value="Save" disabled="disabled" style="position: absolute;
<input type="submit" id="save_button" value="Save" style="position: absolute;
bottom: 0px; display: block; padding-left: 5px;" />
</fieldset>
}
<div id="result" class="hiddenResult">
</div>
}
@section Scripts{
<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
var options = {
target: '#result',
beforeSubmit: showRequest,
success: showResponse,
type: 'post',
resetForm: false
};
$('#form').ajaxForm(options);
$('#save_button').attr('disabled', '');
});
function showRequest(formData, jqForm, options) {
$("#result").empty().html('Saving...');
$("#form :input").attr("disabled", true);
}
function showResponse(responseText, statusText, xhr, $form) {
$("#result").empty().html(responseText);
$("#form :input").attr("disabled", false);
}
function addOption(text, value) {
var myCombo = $('#DefaultQualityProfileId');
@ -78,7 +75,6 @@
$("#DefaultQualityProfileId option[value='" + value + "']").html(text);
}
$("#addItem").click(function () {
$.ajax({
url: this.href,
@ -117,5 +113,28 @@
}
});
}
$(document).ready(function () {
var options = {
target: '#result',
beforeSubmit: showRequest,
success: showResponse,
type: 'post',
resetForm: false
};
$('#form').ajaxForm(options);
});
function showRequest(formData, jqForm, options) {
$("#result").empty().html('Saving...');
$("#form :input").attr("disabled", true);
$('#saveAjax').show();
}
function showResponse(responseText, statusText, xhr, $form) {
$("#result").empty().html(responseText);
$("#form :input").attr("disabled", false);
$('#saveAjax').hide();
}
</script>
}

View File

@ -1,105 +1,82 @@
@using NzbDrone.Web.Helpers;
@model NzbDrone.Web.Models.SabnzbdSettingsModel
@using (Html.BeginForm("SaveSabnzbd", "Settings", FormMethod.Post, new { id = "form", name = "form" }))
{
<fieldset>
<legend>SABnzbd</legend>
<button type="button" onclick="autoConfigureSab()">
Auto-Configure</button>
<div class="config-section">
<div class="config-group">
<div class="config-title">@Html.LabelFor(m => m.SabHost)</div>
<div class="config-value">@Html.TextBoxFor(m => m.SabHost)</div>
</div>
<div class="config-group2">
<div class="config-validation">@Html.ValidationMessageFor(m => m.SabHost)</div>
<div class="config-description">@Html.DescriptionFor(m => m.SabHost)</div>
</div>
</div>
<div class="config-section">
<div class="config-group">
<div class="config-title">@Html.LabelFor(m => m.SabPort)</div>
<div class="config-value">@Html.TextBoxFor(m => m.SabPort)</div>
</div>
<div class="config-group2">
<div class="config-validation">@Html.ValidationMessageFor(m => m.SabPort)</div>
<div class="config-description">@Html.DescriptionFor(m => m.SabPort)</div>
</div>
</div>
<div class="config-section">
<div class="config-group">
<div class="config-title">@Html.LabelFor(m => m.SabApiKey)</div>
<div class="config-value">@Html.TextBoxFor(m => m.SabApiKey)</div>
</div>
<div class="config-group2">
<div class="config-validation">@Html.ValidationMessageFor(m => m.SabApiKey)</div>
<div class="config-description">@Html.DescriptionFor(m => m.SabApiKey)</div>
</div>
</div>
<div class="config-section">
<div class="config-group">
<div class="config-title">@Html.LabelFor(m => m.SabUsername)</div>
<div class="config-value">@Html.TextBoxFor(m => m.SabUsername)</div>
</div>
<div class="config-group2">
<div class="config-validation">@Html.ValidationMessageFor(m => m.SabUsername)</div>
<div class="config-description">@Html.DescriptionFor(m => m.SabUsername)</div>
</div>
</div>
<div class="config-section">
<div class="config-group">
<div class="config-title">@Html.LabelFor(m => m.SabPassword)</div>
<div class="config-value">@Html.TextBoxFor(m => m.SabPassword)</div>
</div>
<div class="config-group2">
<div class="config-validation">@Html.ValidationMessageFor(m => m.SabPassword)</div>
<div class="config-description">@Html.DescriptionFor(m => m.SabPassword)</div>
</div>
</div>
<div class="config-section">
<div class="config-group">
<div class="config-title">@Html.LabelFor(m => m.SabTvCategory)</div>
<div class="config-value">@Html.TextBoxFor(m => m.SabTvCategory)</div>
</div>
<div class="config-group2">
<div class="config-validation">@Html.ValidationMessageFor(m => m.SabTvCategory)</div>
<div class="config-description">@Html.DescriptionFor(m => m.SabTvCategory)</div>
</div>
</div>
<div class="config-section">
<div class="config-group">
<div class="config-title">@Html.LabelFor(m => m.SabTvPriority)</div>
<div class="config-value">@Html.DropDownListFor(m => m.SabTvPriority, Model.PrioritySelectList)</div>
</div>
<div class="config-group2">
<div class="config-validation">@Html.ValidationMessageFor(m => m.SabTvPriority)</div>
<div class="config-description">@Html.DescriptionFor(m => m.SabTvPriority)</div>
</div>
</div>
<div class="config-section">
<div class="config-group">
<div class="config-title">@Html.LabelFor(m => m.SabDropDirectory)</div>
<div class="config-value">
@{Html.Telerik().ComboBoxFor(m => m.SabDropDirectory)
.BindTo(Model.SabDropDirectorySelectList)
.DataBinding(binding => binding.Ajax().Select("_autoCompletePath", "Directory").Delay(400).Cache(false))
.Filterable(f => f.FilterMode(AutoCompleteFilterMode.StartsWith))
.HighlightFirstMatch(true)
.HtmlAttributes(new { style = "margin-left: -2px; width: 220px;" })
.Render();}
</div>
</div>
<div class="config-group2">
<div class="config-validation">@Html.ValidationMessageFor(m => m.SabDropDirectory)</div>
<div class="config-description">@Html.DescriptionFor(m => m.SabDropDirectory)</div>
</div>
</div>
<input type="submit" id="save_button" value="Save" disabled="disabled" />
</fieldset>
@section HeaderContent{
<link rel="stylesheet" type="text/css" href="../../Content/Settings.css" />
}
<div id="result" class="hiddenResult">
</div>
@section TitleContent{
Settings
}
@section ActionMenu{
@{Html.RenderPartial("SubMenu");}
}
@section MainContent{
<div id="stylized">
@using (Html.BeginForm("SaveSabnzbd", "Settings", FormMethod.Post, new { id = "form", name = "form", @class = "settingsForm" }))
{
<h1>SABnzbd</h1>
<p></p>
<label>Auto-Configure
<span class="small">If no Username and Password is set and SABnzbd is on the same system as NzbDrone, you cna auto-configure it</span>
</label>
<input type="button" onclick="autoConfigureSab(); return false;" value="Auto-Configure" />
<label>@Html.LabelFor(m => m.SabHost)
<span class="small">@Html.DescriptionFor(m => m.SabHost)</span>
</label>
@Html.TextBoxFor(m => m.SabHost)
<label>@Html.LabelFor(m => m.SabPort)
<span class="small">@Html.DescriptionFor(m => m.SabPort)</span>
</label>
@Html.TextBoxFor(m => m.SabPort)
<label>@Html.LabelFor(m => m.SabApiKey)
<span class="small">@Html.DescriptionFor(m => m.SabApiKey)</span>
</label>
@Html.TextBoxFor(m => m.SabApiKey)
<label>@Html.LabelFor(m => m.SabUsername)
<span class="small">@Html.DescriptionFor(m => m.SabUsername)</span>
</label>
@Html.TextBoxFor(m => m.SabUsername)
<label>@Html.LabelFor(m => m.SabPassword)
<span class="small">@Html.DescriptionFor(m => m.SabPassword)</span>
</label>
@Html.TextBoxFor(m => m.SabPassword)
<label>@Html.LabelFor(m => m.SabTvCategory)
<span class="small">@Html.DescriptionFor(m => m.SabTvCategory)</span>
</label>
@Html.TextBoxFor(m => m.SabTvCategory)
<label>@Html.LabelFor(m => m.SabTvPriority)
<span class="small">@Html.DescriptionFor(m => m.SabTvPriority)</span>
</label>
@Html.DropDownListFor(m => m.SabTvPriority, Model.PrioritySelectList)
<label>@Html.LabelFor(m => m.SabDropDirectory)
<span class="small">@Html.DescriptionFor(m => m.SabDropDirectory)</span>
</label>
@Html.TextBoxFor(m => m.SabDropDirectory)
<button type="submit" id="save_button" >Save</button><img src="../../Content/Images/ajax-loader.gif" alt="Loader" id="saveAjax"/>
}
</div>
<div id="result" class="hiddenResult"></div>
}
@section Scripts{
<script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
<script src="/Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>
<script type="text/javascript">
var autoConfigureSabUrl = '@Url.Action("AutoConfigureSab", "Settings")';
@ -130,17 +107,18 @@
resetForm: false
};
$('#form').ajaxForm(options);
$('#save_button').attr('disabled', '');
});
function showRequest(formData, jqForm, options) {
$("#result").empty().html('Saving...');
$("#form :input").attr("disabled", true);
$('#saveAjax').show();
}
function showResponse(responseText, statusText, xhr, $form) {
$("#result").empty().html(responseText);
$("#form :input").attr("disabled", false);
}
$('#saveAjax').hide();
}
</script>
}

View File

@ -1,136 +1,94 @@
<script>
/*
* jQuery doTimeout: Like setTimeout, but better! - v1.0 - 3/3/2010
* http://benalman.com/projects/jquery-dotimeout-plugin/
*
* Copyright (c) 2010 "Cowboy" Ben Alman
* Dual licensed under the MIT and GPL licenses.
* http://benalman.com/about/license/
*/
(function ($) { var a = {}, c = "doTimeout", d = Array.prototype.slice; $[c] = function () { return b.apply(window, [0].concat(d.call(arguments))) }; $.fn[c] = function () { var f = d.call(arguments), e = b.apply(this, [c + f[0]].concat(f)); return typeof f[0] === "number" || typeof f[1] === "number" ? this : e }; function b(l) { var m = this, h, k = {}, g = l ? $.fn : $, n = arguments, i = 4, f = n[1], j = n[2], p = n[3]; if (typeof f !== "string") { i--; f = l = 0; j = n[1]; p = n[2] } if (l) { h = m.eq(0); h.data(l, k = h.data(l) || {}) } else { if (f) { k = a[f] || (a[f] = {}) } } k.id && clearTimeout(k.id); delete k.id; function e() { if (l) { h.removeData(l) } else { if (f) { delete a[f] } } } function o() { k.id = setTimeout(function () { k.fn() }, j) } if (p) { k.fn = function (q) { if (typeof p === "string") { p = g[p] } p.apply(m, d.call(n, i)) === true && !q ? o() : e() }; o() } else { if (k.fn) { j === undefined ? e() : k.fn(j === false); return true } else { e() } } } })(jQuery);
</script>
<script>
(function ($) {
$.fn.episodeProgress = function (episodes, totalEpisodes) {
return this.each(
function () {
var div = $(this);
var progressBar = div.find(".progress");
var width = Math.round(episodes / totalEpisodes * 100);
progressBar.css("width", width + "%");
if (width > 97) {
progressBar.css("-khtml-border-top-right-radius", "7px");
progressBar.css("border-top-right-radius", "7px");
progressBar.css("-moz-border-top-right-radius", "7px");
progressBar.css("-webkit-border-top-right-radius", "7px");
progressBar.css("-khtml-border-bottom-right-radius", "7px");
progressBar.css("border-bottom-right-radius", "7px");
progressBar.css("-moz-border-bottom-right-radius", "7px");
progressBar.css("-webkit-border-bottom-right-radius", "7px");
}
div.find(".progressText").html(episodes + " / " + totalEpisodes);
}
);
};
})(jQuery);
</script>
<style>
/* progress bar container */
.progressbar
{
border:1px solid grey;
-khtml-border-radius:8px;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
width:125px;
height:20px;
position:relative;
color:black;
<style>
/*body{
font-family:"Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
p, h1, form, button{border:0; margin:0; padding:0;}*/
.spacer{clear:both; height:1px;}
/* ----------- My Form ----------- */
.myform{
margin:0 auto;
width:400px;
padding:14px;
}
/* apply curves to the progress bar */
.progress
{
-khtml-border-top-left-radius:7px;
border-top-left-radius:7px;
-moz-border-top-left-radius:7px;
-webkit-border-top-left-radius:7px;
-khtml-border-bottom-left-radius:7px;
border-bottom-left-radius:7px;
-moz-border-bottom-left-radius:7px;
-webkit-border-bottom-left-radius:7px;
/* ----------- stylized ----------- */
#stylized{
border:solid 2px #b7ddf2;
background:#ebf4fb;
}
/* color bar */
.progressbar div.progress
{
position:absolute;
width:0;
height:100%;
overflow:hidden;
background-color:#065EFE;
#stylized h1 {
font-size:14px;
font-weight:bold;
margin-bottom:8px;
}
/* text on bar */
.progressbar div.progress .progressText{
position:absolute;
text-align:center;
color:white;
#stylized p{
font-size:11px;
color:#666666;
margin-bottom:20px;
border-bottom:solid 1px #b7ddf2;
padding-bottom:10px;
}
/* text off bar */
.progressbar div.progressText{
position:absolute;
width:100%;
height:100%;
text-align:center;
#stylized label{
display:block;
font-weight:bold;
text-align:right;
width:140px;
float:left;
}
#stylized .small{
color:#666666;
display:block;
font-size:11px;
font-weight:normal;
text-align:right;
width:140px;
}
#stylized input{
float:left;
font-size:12px;
padding:4px 2px;
border:solid 1px #aacfe4;
width:200px;
margin:2px 0 20px 10px;
}
#stylized button{
clear:both;
margin-left:150px;
width:125px;
height:31px;
background:#666666 url(img/button.png) no-repeat;
text-align:center;
line-height:31px;
color:#FFFFFF;
font-size:11px;
font-weight:bold;
}
</style>
<div id="progressbar" class="progressbar">
<div class="progressText"></div>
<div class="progress">
<span class="progressText" style="width: 125px;"></span>
</div>
</div>
<div id="stylized" class="myform">
<form id="form" name="form" method="post">
<fieldset>
<h1>Sign-up form</h1>
<p>This is the basic look of my form without table</p>
<div id="progressbar2" class="progressbar">
<div class="progressText"></div>
<div class="progress">
<span class="progressText" style="width: 125px;"></span>
</div>
</div>
<label>Name
<span class="small">Add your name</span>
</label>
<input type="text" name="name" id="name" />
<script>
$(document).ready(function() {
<label>Email
<span class="small">Add a valid address</span>
</label>
<input type="text" name="email" id="email" />
progress(65, 100, 'progressbar');
progress(22, 25, 'progressbar2');
<label>Password
<span class="small">Min. size 6 chars</span>
</label>
<input type="text" name="password" id="password" />
});
function progress(episodes, episodeTotal, elementName) {
var counter = 0;
var max = episodes + 1;
$.doTimeout(20, function () {
if (counter == max) {
return false;
}
$("#" + elementName).episodeProgress(counter, episodeTotal);
counter++;
return true;
});
};
</script>
<button type="submit">Sign-up</button>
<div class="spacer"></div>
</fieldset>
</form>
</div>