From 5a690bcf33008ea6112a1dea1b9a2e3d985892ab Mon Sep 17 00:00:00 2001
From: Niels Hartvig <nh@umbraco.dk>
Date: Tue, 5 Nov 2013 11:24:53 +0100
Subject: [PATCH] Add progress status on starter kit install

---
 .../steps/Skinning/loadStarterKits.ascx       | 53 +++++++++++--------
 .../Installer/js/PackageInstaller.js          |  8 +++
 2 files changed, 39 insertions(+), 22 deletions(-)

diff --git a/src/Umbraco.Web.UI/install/steps/Skinning/loadStarterKits.ascx b/src/Umbraco.Web.UI/install/steps/Skinning/loadStarterKits.ascx
index 303b39c4c6..586162a2fd 100644
--- a/src/Umbraco.Web.UI/install/steps/Skinning/loadStarterKits.ascx
+++ b/src/Umbraco.Web.UI/install/steps/Skinning/loadStarterKits.ascx
@@ -24,32 +24,41 @@
         })(jQuery);
     </script>
     <% } %>
-
+        <div id="starter-kit-progress" style="display: none;">
+        <h2>Installation in progress...</h2>
+        <div class="loader">
+            <div class="hold">
+                <div class="progress-bar">
+                </div>
+                <span class="progress-bar-value">0%</span>
+            </div>
+            <strong></strong>
+        </div>
+    </div>
     <asp:Repeater ID="rep_starterKits" runat="server">
-        <HeaderTemplate>
-             <ul class="thumbnails">
-        </HeaderTemplate>
-        <ItemTemplate>
-             <li class="add-<%# ((Package)Container.DataItem).Text.Replace(" ","").ToLower() %>">
-                    <div class="image">
-						
-                        <a href="#" class="single-tab selectStarterKit" title="Install <%# ((Package)Container.DataItem).Text %>" data-repoId="<%# ((Package)Container.DataItem).RepoGuid %>">
-							<div class="overlay">Install <%# ((Package)Container.DataItem).Text %></div>
-                            <img src="http://our.umbraco.org<%# ((Package)Container.DataItem).Thumbnail %>" alt="<%# ((Package)Container.DataItem).Text %>">
-                        </a>
-						<a class="zoom-in" title="Enlarge <%# ((Package)Container.DataItem).Text %>" href="#<%# ((Package)Container.DataItem).Text %>">Open</a>
-                    </div>
-            </li>
-			<div id="<%# ((Package)Container.DataItem).Text %>" class="lb"><a href="#top"><img src="http://our.umbraco.org<%# ((Package)Container.DataItem).Thumbnail %>" alt="oh man" /></a></div>
+        <headertemplate>
+            <ul class="thumbnails">
+        </headertemplate>
+        <itemtemplate>
+            <li class="add-<%# ((Package)Container.DataItem).Text.Replace(" ","").ToLower() %>">
+                <div class="image">
 
-        </ItemTemplate>
-        <FooterTemplate>
+
+                    <div class="overlay"><a href="#" class="single-tab selectStarterKit" data-name="<%# ((Package)Container.DataItem).Text %>" title="Install <%# ((Package)Container.DataItem).Text %>" data-repoid="<%# ((Package)Container.DataItem).RepoGuid %>">Install <%# ((Package)Container.DataItem).Text %></a></div>
+                    <img src="http://our.umbraco.org<%# ((Package)Container.DataItem).Thumbnail %>" alt="<%# ((Package)Container.DataItem).Text %>">
+
+                    <a class="zoom-in" title="Enlarge <%# ((Package)Container.DataItem).Text %>" href="#<%# ((Package)Container.DataItem).Text %>">Open</a>
+                </div>
+            </li>
+            <div id="<%# ((Package)Container.DataItem).Text %>" class="lb"><a href="#top"><img src="http://our.umbraco.org<%# ((Package)Container.DataItem).Thumbnail %>" alt="oh man" /></a></div>
+
+        </itemtemplate>
+        <footertemplate>
                 </ul>
-                
-                 <asp:LinkButton runat="server" ID="declineStarterKits" CssClass="declineKit" OnClientClick="return confirm('Are you sure you do not want to install a starter kit?');" OnClick="NextStep">
+            <asp:LinkButton runat="server" ID="declineStarterKits" CssClass="declineKit" OnClientClick="return confirm('Are you sure you do not want to install a starter kit?');" OnClick="NextStep">
                     No thanks, do not install a starterkit!
-                </asp:LinkButton>
-        </FooterTemplate>
+            </asp:LinkButton>
+        </footertemplate>
     </asp:Repeater>
 
 </asp:PlaceHolder>
diff --git a/src/Umbraco.Web.UI/umbraco_client/Installer/js/PackageInstaller.js b/src/Umbraco.Web.UI/umbraco_client/Installer/js/PackageInstaller.js
index d8ce779166..16b5fb4b8d 100644
--- a/src/Umbraco.Web.UI/umbraco_client/Installer/js/PackageInstaller.js
+++ b/src/Umbraco.Web.UI/umbraco_client/Installer/js/PackageInstaller.js
@@ -72,6 +72,14 @@
 
             //bind to the click handler for each of the install starter kit buttons
             this._opts.starterKits.click(function () {
+                // show status screen
+                $(".thumbnails").fadeOut();
+                $(".declineKit").fadeOut();
+                $("#starter-kit-progress").fadeIn();
+
+                // set progress
+                self._setProgress("5", "Downloading " + $(this).attr("data-name"));
+
                 //set the package id to install
                 self._packageId = $(this).attr("data-repoId");
                 self.downloadPackageFiles();