[TASK] Provide loading indicator for Install Tool 81/58281/4
authorMarkus Klein <markus.klein@typo3.org>
Sat, 15 Sep 2018 08:26:27 +0000 (10:26 +0200)
committerAndreas Fernandez <a.fernandez@scripting-base.de>
Sat, 15 Sep 2018 16:17:42 +0000 (18:17 +0200)
Resolves: #86259
Releases: master
Change-Id: I0a5c7020d879250cf38ca1975a8f63e65f1a0649
Reviewed-on: https://review.typo3.org/58281
Reviewed-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: Christian Kuhn <lolli@schwarzbu.ch>
Tested-by: TYPO3com <no-reply@typo3.com>
Reviewed-by: Andreas Fernandez <a.fernandez@scripting-base.de>
Tested-by: Andreas Fernandez <a.fernandez@scripting-base.de>
typo3/sysext/install/Resources/Private/Templates/Layout/Init.html
typo3/sysext/install/Resources/Private/Templates/Layout/MainLayout.html
typo3/sysext/install/Resources/Public/JavaScript/Modules/Router.js

index 597c6ed..c329d9f 100644 (file)
        <script type="text/javascript" src="{f:uri.resource(path: 'JavaScript/Contrib/require.js', extensionName: 'Core')}?{time}"></script>
        <script type="text/javascript" src="{f:uri.resource(path: 'JavaScript/Install.js')}?{time}"></script>
 </head>
-<body class="backend install-tool-init t3js-body" data-controller="{controller}" data-context="{context}"></body>
+<body class="backend install-tool-init t3js-body" data-controller="{controller}" data-context="{context}">
+<div>
+       <div id="t3js-ui-block" class="ui-block">
+               <core:icon identifier="spinner-circle" size="large" />
+               <h2 id="t3js-ui-block-detail">Initializing</h2>
+       </div>
+</div>
+</body>
 </html>
index af23716..02f6090 100644 (file)
                                </div>
                        </div>
                        <div class="module-body t3js-module-body" style="padding-top: 89px;">
+                               <div id="t3js-ui-block" class="ui-block">
+                                       <core:icon identifier="spinner-circle" size="large" />
+                                       <h2 id="t3js-ui-block-detail">Loading cards</h2>
+                               </div>
                        </div>
                </div>
        </f:then>
 
                        <div class="scaffold-content t3js-scaffold-content" style="padding-top:25px; overflow: auto;">
                                <div class="container-fluid">
-                                       <div class="row">
-                                               <div class="col-sm-12 t3js-module-body">
+                                       <div class="t3js-module-body">
+                                               <div id="t3js-ui-block" class="ui-block">
+                                                       <core:icon identifier="spinner-circle" size="large" />
+                                                       <h2 id="t3js-ui-block-detail">Loading cards</h2>
                                                </div>
                                        </div>
                                </div>
index df271be..2dd58a6 100644 (file)
@@ -118,6 +118,7 @@ define([
 
     executeSilentConfigurationUpdate: function() {
       var self = this;
+      self.updateLoadingInfo('Executing silent configuration update');
       $.ajax({
         url: this.getUrl('executeSilentConfigurationUpdate', 'layout'),
         cache: false,
@@ -143,6 +144,7 @@ define([
      */
     executeSilentLegacyExtConfExtensionConfigurationUpdate: function() {
       var self = this;
+      self.updateLoadingInfo('Executing silent extension configuration update');
       $.ajax({
         url: this.getUrl('executeSilentLegacyExtConfExtensionConfigurationUpdate', 'layout'),
         cache: false,
@@ -166,6 +168,7 @@ define([
      */
     executeSilentExtensionConfigurationSynchronization: function() {
       var self = this;
+      self.updateLoadingInfo('Executing silent extension configuration synchronization');
       $.ajax({
         url: this.getUrl('executeSilentExtensionConfigurationSynchronization', 'layout'),
         cache: false,
@@ -186,6 +189,7 @@ define([
     loadMainLayout: function() {
       var self = this;
       var $outputContainer = $(this.selectorBody);
+      self.updateLoadingInfo('Loading main layout');
       $.ajax({
         url: this.getUrl('mainLayout', 'layout'),
         cache: false,
@@ -350,6 +354,11 @@ define([
           self.handleAjaxError(xhr);
         }
       });
+    },
+
+    updateLoadingInfo: function(info) {
+      var $outputContainer = $(this.selectorBody);
+      $outputContainer.find('#t3js-ui-block-detail').text(info);
     }
   };
 });