Closed #2934

CHANGELOG-v3.md

@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+### Added
+- Assets indexing progressbar now also displays the amount of files indexed and total to give a sense of progress. ([#2934](https://github.com/craftcms/cms/issues/2934))
 ### Changed
 - Craft no longer relies on ImageMagick or GD to define the image formats that should be considered manipulatable. ([#2408](https://github.com/craftcms/cms/issues/2408))
 - Removed the `showBetaUpdates` config setting as it’s no longer being used.

src/web/assets/assetindexes/dist/AssetIndexesUtility.js

@@ -24,7 +24,7 @@
 
                 if (!this.$trigger.hasClass('disabled')) {
                     if (!this.progressBar) {
-                        this.progressBar = new Craft.ProgressBar(this.$status);
+                        this.progressBar = new Craft.ProgressBar(this.$status, true);
                     }
                     else {
                         this.progressBar.resetProgressBar();
@@ -38,6 +38,7 @@
                     this.currentBatchQueue = [];
 
                     this.progressBar.$progressBar.removeClass('hidden');
+                    this.progressBar.$progressBarStatus.removeClass('hidden');
 
                     this.progressBar.$progressBar.velocity('stop').velocity(
                         {
@@ -66,8 +67,9 @@
             },
 
             updateProgressBar: function() {
-                var width = (100 * this.completedActions / this.totalActions);
-                this.progressBar.setProgressPercentage(width);
+                this.progressBar.setItemCount(this.totalActions);
+                this.progressBar.setProcessedItemCount(this.completedActions);
+                this.progressBar.updateProgressBar();
             },
 
             loadAction: function(data) {
@@ -175,6 +177,7 @@
                     this.$allDone.css('opacity', 0);
                 }
 
+                this.progressBar.$progressBarStatus.addClass('hidden');
                 this.progressBar.$progressBar.velocity({opacity: 0}, {
                     duration: 'fast', complete: $.proxy(function() {
                         this.$allDone.velocity({opacity: 1}, {duration: 'fast'});

src/web/assets/cp/dist/js/Craft.js

@@ -16275,13 +16275,20 @@ Craft.ProgressBar = Garnish.Base.extend(
     {
         $progressBar: null,
         $innerProgressBar: null,
+        $progressBarStatus: null,
 
         _itemCount: 0,
         _processedItemCount: 0,
+        _displaySteps: false,
+
+        init: function($element, displaySteps) {
+            if (displaySteps) {
+                this._displaySteps = true;
+            }
 
-        init: function($element) {
             this.$progressBar = $('<div class="progressbar pending hidden"/>').appendTo($element);
             this.$innerProgressBar = $('<div class="progressbar-inner"/>').appendTo(this.$progressBar);
+            this.$progressBarStatus = $('<div class="progressbar-status hidden" />').insertAfter(this.$progressBar);
 
             this.resetProgressBar();
         },
@@ -16298,6 +16305,11 @@ Craft.ProgressBar = Garnish.Base.extend(
             // Reset all the counters
             this.setItemCount(1);
             this.setProcessedItemCount(0);
+            this.$progressBarStatus.html('');
+
+            if (this._displaySteps) {
+                this.$progressBar.addClass('has-status');
+            }
         },
 
         /**
@@ -16311,6 +16323,7 @@ Craft.ProgressBar = Garnish.Base.extend(
 
         showProgressBar: function() {
             this.$progressBar.removeClass('hidden');
+            this.$progressBarStatus.removeClass('hidden');
         },
 
         setItemCount: function(count) {
@@ -16336,6 +16349,10 @@ Craft.ProgressBar = Garnish.Base.extend(
             var width = Math.min(100, Math.round(100 * this._processedItemCount / this._itemCount));
 
             this.setProgressPercentage(width);
+
+            if (this._displaySteps) {
+                this.$progressBarStatus.html(this._processedItemCount + ' / ' + this._itemCount);
+            }
         },
 
         setProgressPercentage: function(percentage, animate) {

src/web/assets/cp/src/js/ProgressBar.js

@@ -7,13 +7,20 @@ Craft.ProgressBar = Garnish.Base.extend(
     {
         $progressBar: null,
         $innerProgressBar: null,
+        $progressBarStatus: null,
 
         _itemCount: 0,
         _processedItemCount: 0,
+        _displaySteps: false,
+
+        init: function($element, displaySteps) {
+            if (displaySteps) {
+                this._displaySteps = true;
+            }
 
-        init: function($element) {
             this.$progressBar = $('<div class="progressbar pending hidden"/>').appendTo($element);
             this.$innerProgressBar = $('<div class="progressbar-inner"/>').appendTo(this.$progressBar);
+            this.$progressBarStatus = $('<div class="progressbar-status hidden" />').insertAfter(this.$progressBar);
 
             this.resetProgressBar();
         },
@@ -30,6 +37,11 @@ Craft.ProgressBar = Garnish.Base.extend(
             // Reset all the counters
             this.setItemCount(1);
             this.setProcessedItemCount(0);
+            this.$progressBarStatus.html('');
+
+            if (this._displaySteps) {
+                this.$progressBar.addClass('has-status');
+            }
         },
 
         /**
@@ -43,6 +55,7 @@ Craft.ProgressBar = Garnish.Base.extend(
 
         showProgressBar: function() {
             this.$progressBar.removeClass('hidden');
+            this.$progressBarStatus.removeClass('hidden');
         },
 
         setItemCount: function(count) {
@@ -68,6 +81,10 @@ Craft.ProgressBar = Garnish.Base.extend(
             var width = Math.min(100, Math.round(100 * this._processedItemCount / this._itemCount));
 
             this.setProgressPercentage(width);
+
+            if (this._displaySteps) {
+                this.$progressBarStatus.html(this._processedItemCount + ' / ' + this._itemCount);
+            }
         },
 
         setProgressPercentage: function(percentage, animate) {