[BUGFIX] Add reserved area for loading indicator within modules 37/47237/2
authorMichael Oehlhof <typo3@oehlhof.de>
Wed, 9 Dec 2015 23:17:46 +0000 (00:17 +0100)
committerFrank Naegler <frank.naegler@typo3.org>
Mon, 14 Mar 2016 09:31:10 +0000 (10:31 +0100)
The DocHeader has now a reserved area for the nprogress loading
indicator for use within modules. The area has a fixed position to
ensure visibility in every case.

The code of the Recycler and Extension manager have been adjusted
to use that element for the progress bar.

Resolves: #71509
Releases: master, 7.6
Change-Id: I07cacf61a1634357d4da0fe292ea22ba34a6100e
Reviewed-on: https://review.typo3.org/47237
Reviewed-by: Frank Naegler <frank.naegler@typo3.org>
Tested-by: Frank Naegler <frank.naegler@typo3.org>
Build/Resources/Public/Less/Component/module.less
typo3/sysext/backend/Resources/Private/Partials/DocHeader.html
typo3/sysext/extensionmanager/Resources/Public/JavaScript/Main.js
typo3/sysext/install/Resources/Public/Css/InstallTool.css
typo3/sysext/recycler/Resources/Public/JavaScript/Recycler.js
typo3/sysext/t3skin/Resources/Public/Css/backend.css

index 96027b4..e31f579 100644 (file)
        background-color: @module-bg;
 }
 
+//
+// Loading indicator
+//
+.module-loading-indicator {
+       min-height: 5px;
+       width: 100%;
+       z-index: 999999;
+
+       &.nprogress-custom-parent {
+               position: fixed;
+               top: 0;
+       }
+}
 
 //
 // Docheader
index fe1bb66..1b81d09 100644 (file)
@@ -1,3 +1,4 @@
+<div class="module-loading-indicator"></div>
 <div class="module-docheader t3js-module-docheader">
        <div class="module-docheader-bar module-docheader-bar-navigation t3js-module-docheader-bar t3js-module-docheader-bar-navigation">
                <div class="module-docheader-bar-column-left">
index bf1bf59..4d632fd 100644 (file)
@@ -378,7 +378,7 @@ define([
         *
         */
        Repository.initDom = function() {
-               NProgress.configure({parent: '.t3js-module-body', showSpinner: false});
+               NProgress.configure({parent: '.module-loading-indicator', showSpinner: false});
 
                $('#terTable').DataTable({
                        lengthChange: false,
index baa34ff..7921467 100644 (file)
@@ -7811,6 +7811,15 @@ button.close {
   width: 100%;
   background-color: #ffffff;
 }
+.module-loading-indicator {
+  min-height: 5px;
+  width: 100%;
+  z-index: 999999;
+}
+.module-loading-indicator.nprogress-custom-parent {
+  position: fixed;
+  top: 0;
+}
 .module-docheader {
   position: fixed;
   width: 100%;
index b00c046..eb962dc 100644 (file)
@@ -203,7 +203,7 @@ define(['jquery',
         * Initialize the recycler module
         */
        Recycler.initialize = function() {
-               NProgress.configure({parent: 'body', showSpinner: false});
+               NProgress.configure({parent: '.module-loading-indicator', showSpinner: false});
 
                Recycler.getElements();
                Recycler.registerEvents();
index 342aefe..b119a4e 100644 (file)
@@ -7820,6 +7820,15 @@ button.close {
   width: 100%;
   background-color: #ffffff;
 }
+.module-loading-indicator {
+  min-height: 5px;
+  width: 100%;
+  z-index: 999999;
+}
+.module-loading-indicator.nprogress-custom-parent {
+  position: fixed;
+  top: 0;
+}
 .module-docheader {
   position: fixed;
   width: 100%;