Loading overlay added to series grid.

NzbDrone.Web/Content/style.css

@@ -309,3 +309,29 @@ button, input[type="button"], input[type="submit"], input[type="reset"]
     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%  
+    } 

NzbDrone.Web/Views/Series/Index.cshtml

@@ -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"))
+    <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);
 
-            .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({

NzbDrone.Web/Views/Settings/Test.cshtml

@@ -1,106 +1,58 @@
-    <style type="text/css">
+<style>
 
-        #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>
-
-@{  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;  
 }  
 
-<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>
+.back  
+{  
+    position:absolute;  
+    top:0;left:0;  
+}  
+.wrap  
+{  
+    width:550px;  
+    height:390px;  
+    position:relative;  
+    margin:auto;  
+    overflow:hidden;  
 }  
 
-@{ Html.Telerik().ScriptRegistrar()
-        .OnDocumentReady(@<text>
-            // open the initially hidden window when the button is clicked
-            
-        </text>); }
+.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%  
+} 
 
+</style>
 
-<script type="text/javascript">
+<button onclick="overlay()">Click Me!</button>
 
-    var windowElement;
+<div class="wrap">
+    <img class="backer" src="../../Content/leopard.jpg" alt="image"/>
         
-    $('#feedback-open-button')
-                .click(function (e) {
-                    e.preventDefault();
+    <span class="comment">
+        Loading...
+    </span>
+</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() {
-        var window = windowElement.data("tWindow");
-        window.close();
+<script type="text/javascript">
+    function overlay() {
+        $('.wrap').children('.comment').stop().css("top", "0px");
     }
 </script>