mirror of
https://github.com/Radarr/Radarr
synced 2024-12-25 17:27:59 +00:00
Loading overlay added to series grid.
This commit is contained in:
Mark McDowall
parent
0645a9e552
commit
1015193ef5
4 changed files with 122 additions and 131 deletions
BIN
NzbDrone.Web/Content/Images/Loading.gif
Normal file
BIN
NzbDrone.Web/Content/Images/Loading.gif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
|
|
@ -308,4 +308,30 @@ button, input[type="button"], input[type="submit"], input[type="reset"]
|
|||
width: 435px;
|
||||
display: block;
|
||||
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%
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
@using NzbDrone.Core.Repository;
|
||||
@using NzbDrone.Web.Models;
|
||||
@model IEnumerable<NzbDrone.Core.Repository.Series>
|
||||
|
||||
|
||||
@section TitleContent{
|
||||
Series
|
||||
}
|
||||
|
|
@ -11,38 +11,43 @@
|
|||
}
|
||||
|
||||
@section MainContent{
|
||||
@{Html.Telerik().Grid<SeriesModel>().Name("Grid")
|
||||
.TableHtmlAttributes(new { @class = "Grid" })
|
||||
.DataKeys(keys => keys.Add(p => p.SeriesId))
|
||||
.DataBinding(data => data.Ajax()
|
||||
.Select("_AjaxSeriesGrid", "Series")
|
||||
.Update("_SaveAjaxSeriesEditing", "Series")
|
||||
.Delete("_DeleteAjaxSeriesEditing", "Series"))
|
||||
|
||||
.Columns(columns =>
|
||||
{
|
||||
columns.Bound(o => o.Title)
|
||||
.ClientTemplate("<a href=" +
|
||||
Url.Action("Details", "Series", new {seriesId = "<#= SeriesId #>"}) +
|
||||
"><#= Title #></a>");
|
||||
columns.Bound(o => o.SeasonsCount).Title("Seasons")
|
||||
.ClientTemplate("<a href=# onclick=\"openSeasonEditor(<#= SeriesId #>, \'<#= Title #>\'); return false;\"><#= SeasonsCount #></a>");
|
||||
columns.Bound(o => o.QualityProfileName).Title("Quality");
|
||||
columns.Bound(o => o.Status);
|
||||
columns.Bound(o => o.AirsDayOfWeek);
|
||||
columns.Bound(o => o.Path);
|
||||
columns.Command(commands =>
|
||||
{
|
||||
commands.Edit().ButtonType(GridButtonType.Image);
|
||||
commands.Delete().ButtonType(GridButtonType.Image);
|
||||
}).Title("Actions").Width(80);
|
||||
<div class="grid-container">
|
||||
@{Html.Telerik().Grid<SeriesModel>().Name("Grid")
|
||||
.TableHtmlAttributes(new { @class = "Grid" })
|
||||
.DataKeys(keys => keys.Add(p => p.SeriesId))
|
||||
.DataBinding(data => data.Ajax()
|
||||
.Select("_AjaxSeriesGrid", "Series")
|
||||
.Update("_SaveAjaxSeriesEditing", "Series")
|
||||
.Delete("_DeleteAjaxSeriesEditing", "Series"))
|
||||
.Columns(columns =>
|
||||
{
|
||||
columns.Bound(o => o.Title)
|
||||
.ClientTemplate("<a href=" +
|
||||
Url.Action("Details", "Series", new {seriesId = "<#= SeriesId #>"}) +
|
||||
"><#= Title #></a>");
|
||||
columns.Bound(o => o.SeasonsCount).Title("Seasons")
|
||||
.ClientTemplate("<a href=# onclick=\"openSeasonEditor(<#= SeriesId #>, \'<#= Title #>\'); return false;\"><#= SeasonsCount #></a>");
|
||||
columns.Bound(o => o.QualityProfileName).Title("Quality");
|
||||
columns.Bound(o => o.Status);
|
||||
columns.Bound(o => o.AirsDayOfWeek);
|
||||
columns.Bound(o => o.Path);
|
||||
columns.Command(commands =>
|
||||
{
|
||||
commands.Edit().ButtonType(GridButtonType.Image);
|
||||
commands.Delete().ButtonType(GridButtonType.Image);
|
||||
}).Title("Actions").Width(80);
|
||||
|
||||
})
|
||||
.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>"))
|
||||
.ClientEvents(clientEvents => clientEvents.OnEdit("grid_edit"))
|
||||
.Render();}
|
||||
})
|
||||
.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>"))
|
||||
.ClientEvents(clientEvents => { clientEvents.OnEdit("grid_edit");
|
||||
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">
|
||||
|
|
@ -55,6 +60,14 @@
|
|||
.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) {
|
||||
windowElement = null;
|
||||
windowElement = $.telerik.window.create({
|
||||
|
|
|
|||
|
|
@ -1,106 +1,58 @@
|
|||
<style type="text/css">
|
||||
|
||||
#feedback-open-button
|
||||
{
|
||||
height: 32px;
|
||||
margin: 2em 0 4em;
|
||||
}
|
||||
|
||||
#feedback-form
|
||||
{
|
||||
padding: 0 1em 1em;
|
||||
}
|
||||
|
||||
#feedback-form label
|
||||
{
|
||||
display: block;
|
||||
line-height: 25px;
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
#feedback-form input
|
||||
{
|
||||
width: 370px;
|
||||
}
|
||||
|
||||
.form-actions
|
||||
{
|
||||
padding-top: 1em;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.form-actions button
|
||||
{
|
||||
float: right;
|
||||
}
|
||||
|
||||
.example .t-group
|
||||
{
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
padding: 0 1em 1em;
|
||||
}
|
||||
|
||||
</style>
|
||||
<style>
|
||||
|
||||
@{ Html.Telerik().Window()
|
||||
.Name("Window")
|
||||
.Title("Submit feedback")
|
||||
.LoadContentFrom("TestPartial", "Settings")
|
||||
.Width(400)
|
||||
.Draggable(true)
|
||||
.Modal(true)
|
||||
.Visible(false)
|
||||
.Render();
|
||||
#container {
|
||||
width: 850px;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.back
|
||||
{
|
||||
position:absolute;
|
||||
top:0;left:0;
|
||||
}
|
||||
.wrap
|
||||
{
|
||||
width:550px;
|
||||
height:390px;
|
||||
position:relative;
|
||||
margin:auto;
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.comment
|
||||
{
|
||||
position: absolute;
|
||||
width: 550px;
|
||||
height: auto;
|
||||
top: 400px;
|
||||
left: 0px;
|
||||
letter-spacing: -1px;
|
||||
color: white; font: 24px/45px Berlin Sans FB, Sans-Serif;
|
||||
background: #4A4D4A;
|
||||
padding: 10px;
|
||||
filter:alpha(opacity=60);
|
||||
-moz-opacity:0.6;
|
||||
-khtml-opacity: 0.6;
|
||||
opacity: 0.6;
|
||||
line-height: 90%
|
||||
}
|
||||
|
||||
<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()
|
||||
.OnDocumentReady(@<text>
|
||||
// open the initially hidden window when the button is clicked
|
||||
|
||||
</text>); }
|
||||
</style>
|
||||
|
||||
<button onclick="overlay()">Click Me!</button>
|
||||
|
||||
<div class="wrap">
|
||||
<img class="backer" src="../../Content/leopard.jpg" alt="image"/>
|
||||
|
||||
<span class="comment">
|
||||
Loading...
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
var windowElement;
|
||||
|
||||
$('#feedback-open-button')
|
||||
.click(function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
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() {
|
||||
var window = windowElement.data("tWindow");
|
||||
window.close();
|
||||
function overlay() {
|
||||
$('.wrap').children('.comment').stop().css("top", "0px");
|
||||
}
|
||||
</script>
|
||||
Loading…
Reference in a new issue