open-source-mirrors
/
Sonarr
mirror of https://github.com/Sonarr/Sonarr
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Loading overlay added to series grid.

Browse Source
pull/7/merge
Mark McDowall 14 years ago
parent 0645a9e552
commit 1015193ef5
4 changed files with 121 additions and 130 deletions
Show Stats Download Patch File Download Diff File

BIN
NzbDrone.Web/Content/Images/Loading.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.9 KiB

28
NzbDrone.Web/Content/style.css
Unescape View File

@ -308,4 +308,30 @@ button, input[type="button"], input[type="submit"], input[type="reset"]
width: 435px; width: 435px;
display: block; display: block;
height: 25px; height: 25px;
} }
/* Loading Bar */
.grid-container
{
position:relative;
margin:auto;
overflow:hidden;
}
.grid-loader
{
position: absolute;
width: 100%;
height: 100%;
top: 400px;
left: 0px;
letter-spacing: -1px;
color: white; font: 48px Berlin Sans FB, Sans-Serif;
background: #4A4D4A;
padding: 20px;
filter:alpha(opacity=80);
-moz-opacity:0.8;
-khtml-opacity: 0.8;
opacity: 0.8;
line-height: 90%
}

77
NzbDrone.Web/Views/Series/Index.cshtml
Unescape View File

@ -1,7 +1,7 @@
@using NzbDrone.Core.Repository; @using NzbDrone.Core.Repository;
@using NzbDrone.Web.Models; @using NzbDrone.Web.Models;
@model IEnumerable<NzbDrone.Core.Repository.Series> @model IEnumerable<NzbDrone.Core.Repository.Series>
@section TitleContent{ @section TitleContent{
Series Series
} }
@ -11,38 +11,43 @@
} }
@section MainContent{ @section MainContent{
@{Html.Telerik().Grid<SeriesModel>().Name("Grid") <div class="grid-container">
.TableHtmlAttributes(new { @class = "Grid" }) @{Html.Telerik().Grid<SeriesModel>().Name("Grid")
.DataKeys(keys => keys.Add(p => p.SeriesId)) .TableHtmlAttributes(new { @class = "Grid" })
.DataBinding(data => data.Ajax() .DataKeys(keys => keys.Add(p => p.SeriesId))
.Select("_AjaxSeriesGrid", "Series") .DataBinding(data => data.Ajax()
.Update("_SaveAjaxSeriesEditing", "Series") .Select("_AjaxSeriesGrid", "Series")
.Delete("_DeleteAjaxSeriesEditing", "Series")) .Update("_SaveAjaxSeriesEditing", "Series")
.Delete("_DeleteAjaxSeriesEditing", "Series"))
.Columns(columns => .Columns(columns =>
{ {
columns.Bound(o => o.Title) columns.Bound(o => o.Title)
.ClientTemplate("<a href=" + .ClientTemplate("<a href=" +
Url.Action("Details", "Series", new {seriesId = "<#= SeriesId #>"}) + Url.Action("Details", "Series", new {seriesId = "<#= SeriesId #>"}) +
"><#= Title #></a>"); "><#= Title #></a>");
columns.Bound(o => o.SeasonsCount).Title("Seasons") columns.Bound(o => o.SeasonsCount).Title("Seasons")
.ClientTemplate("<a href=# onclick=\"openSeasonEditor(<#= SeriesId #>, \'<#= Title #>\'); return false;\"><#= SeasonsCount #></a>"); .ClientTemplate("<a href=# onclick=\"openSeasonEditor(<#= SeriesId #>, \'<#= Title #>\'); return false;\"><#= SeasonsCount #></a>");
columns.Bound(o => o.QualityProfileName).Title("Quality"); columns.Bound(o => o.QualityProfileName).Title("Quality");
columns.Bound(o => o.Status); columns.Bound(o => o.Status);
columns.Bound(o => o.AirsDayOfWeek); columns.Bound(o => o.AirsDayOfWeek);
columns.Bound(o => o.Path); columns.Bound(o => o.Path);
columns.Command(commands => columns.Command(commands =>
{ {
commands.Edit().ButtonType(GridButtonType.Image); commands.Edit().ButtonType(GridButtonType.Image);
commands.Delete().ButtonType(GridButtonType.Image); commands.Delete().ButtonType(GridButtonType.Image);
}).Title("Actions").Width(80); }).Title("Actions").Width(80);
}) })
.Editable(editor => editor.Mode(GridEditMode.PopUp)) .Editable(editor => editor.Mode(GridEditMode.PopUp))
.Sortable(sort => sort.OrderBy(order => order.Add(o => o.Title).Ascending()).Enabled(true)) .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("<div style=\"width:95%\"><#= Overview #></div>"))
.ClientEvents(clientEvents => clientEvents.OnEdit("grid_edit")) .ClientEvents(clientEvents => { clientEvents.OnEdit("grid_edit");
.Render();} clientEvents.OnDataBinding("grid_bind");
clientEvents.OnDataBound("grid_bound");
})
.Render();}
<span class="grid-loader"><img src="@Url.Content( "~/Content/Images/Loading.gif" )" alt="Loading"/> Loading...</span>
</div>
} }
<script type="text/javascript"> <script type="text/javascript">
@ -55,6 +60,14 @@
.center(); .center();
} }
function grid_bind(args) {
$('.grid-container').children('.grid-loader').stop().css("top", "0px").fadeIn('slow');
}
function grid_bound(args) {
$('.grid-container').children('.grid-loader').stop().fadeOut('slow');
}
function openSeasonEditor(seriesId, seriesName) { function openSeasonEditor(seriesId, seriesName) {
windowElement = null; windowElement = null;
windowElement = $.telerik.window.create({ windowElement = $.telerik.window.create({

146
NzbDrone.Web/Views/Settings/Test.cshtml
Unescape View File

@ -1,106 +1,58 @@
 <style type="text/css"> <style>
#feedback-open-button #container {
{ width: 850px;
height: 32px; margin: auto;
margin: 2em 0 4em; }
}
.back
#feedback-form {
{ position:absolute;
padding: 0 1em 1em; top:0;left:0;
} }
.wrap
#feedback-form label {
{ width:550px;
display: block; height:390px;
line-height: 25px; position:relative;
margin-top: 1em; margin:auto;
} overflow:hidden;
}
#feedback-form input
{ .comment
width: 370px; {
} position: absolute;
width: 550px;
.form-actions height: auto;
{ top: 400px;
padding-top: 1em; left: 0px;
overflow: hidden; letter-spacing: -1px;
} color: white; font: 24px/45px Berlin Sans FB, Sans-Serif;
background: #4A4D4A;
.form-actions button padding: 10px;
{ filter:alpha(opacity=60);
float: right; -moz-opacity:0.6;
} -khtml-opacity: 0.6;
opacity: 0.6;
.example .t-group line-height: 90%
{
border-width: 1px;
border-style: solid;
padding: 0 1em 1em;
}
</style>
@{ Html.Telerik().Window()
.Name("Window")
.Title("Submit feedback")
.LoadContentFrom("TestPartial", "Settings")
.Width(400)
.Draggable(true)
.Modal(true)
.Visible(false)
.Render();
} }
<button id="feedback-open-button" class="t-button t-state-default">Submit feedback...</button>
@if (ViewData["name"] != null || ViewData["email"] != null || ViewData["comment"] != null) {
<div class="t-group">
<h3>Feedback:</h3>
<p>
Name: @ViewData["name"] <br />
E-mail: @ViewData["email"] <br />
Comment: @ViewData["comment"]
</p>
</div>
}
@{ Html.Telerik().ScriptRegistrar() </style>
.OnDocumentReady(@<text>
// open the initially hidden window when the button is clicked
</text>); }
<button onclick="overlay()">Click Me!</button>
<script type="text/javascript"> <div class="wrap">
<img class="backer" src="../../Content/leopard.jpg" alt="image"/>
var windowElement;
<span class="comment">
$('#feedback-open-button') Loading...
.click(function (e) { </span>
e.preventDefault(); </div>
windowElement = $.telerik.window.create({
title: "Season Edition: ",
contentUrl: '@Url.Action("SeasonEditor", "Series")' + '/?seriesId=10',
width: 400,
height: 500,
modal: true,
resizable: false,
draggable: true,
scrollable: false
});
windowElement.data('tWindow').center();
});
// add button hovers
$('.t-button').live('mouseenter', $.telerik.buttonHover)
.live('mouseleave', $.telerik.buttonLeave);
function closeWindow() { <script type="text/javascript">
var window = windowElement.data("tWindow"); function overlay() {
window.close(); $('.wrap').children('.comment').stop().css("top", "0px");
} }
</script> </script>
Write Preview
Loading…
Cancel
Save