From c13442cac67d752038c077fcb328f79486e956b0 Mon Sep 17 00:00:00 2001
From: Aaron van Geffen <aaron@aaronweb.net>
Date: Sun, 4 Sep 2016 12:52:59 +0200
Subject: [PATCH] Add label next to spinner to indicate what's happening.

---
 public/css/default.css    |  2 ++
 public/js/upload_queue.js | 21 +++++++++++++++++----
 2 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/public/css/default.css b/public/css/default.css
index fa8abf93..b18b1e4a 100644
--- a/public/css/default.css
+++ b/public/css/default.css
@@ -688,8 +688,10 @@ a#previous_photo:hover, a#next_photo:hover {
 	background-color: #74AFCF;
 	height: 20px;
 	width: 20px;
+	margin: 0 5px;
 	-webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
 	animation: sk-rotateplane 1.2s infinite ease-in-out;
+	vertical-align: middle;
 }
 
 @-webkit-keyframes sk-rotateplane {
diff --git a/public/js/upload_queue.js b/public/js/upload_queue.js
index 68f80e3a..30465e66 100644
--- a/public/js/upload_queue.js
+++ b/public/js/upload_queue.js
@@ -8,7 +8,7 @@ function UploadQueue(options) {
 UploadQueue.prototype.addEvents = function() {
 	var that = this;
 	that.queue.addEventListener('change', function() {
-		that.showSpinner(that.queue);
+		that.showSpinner(that.queue, "Generating previews (not uploading yet!)");
 		that.clearPreviews();
 		for (var i = 0; i < that.queue.files.length; i++) {
 			var callback = (i !== that.queue.files.length - 1) ? null : function() {
@@ -64,7 +64,7 @@ UploadQueue.prototype.process = function() {
 	alert('Should now upload ' + this.queue.files.length + " files");
 };
 
-UploadQueue.prototype.showSpinner = function(sibling) {
+UploadQueue.prototype.showSpinner = function(sibling, label) {
 	if (this.spinner) {
 		return;
 	}
@@ -72,9 +72,22 @@ UploadQueue.prototype.showSpinner = function(sibling) {
 	this.spinner = document.createElement('div');
 	this.spinner.className = 'spinner';
 	sibling.parentNode.appendChild(this.spinner);
+
+	if (label) {
+		this.spinner_label = document.createElement('span');
+		this.spinner_label.className = 'spinner_label';
+		this.spinner_label.innerHTML = label;
+		sibling.parentNode.appendChild(this.spinner_label);
+	}
 };
 
 UploadQueue.prototype.hideSpinner = function() {
-	this.spinner.parentNode.removeChild(this.spinner);
-	this.spinner = null;
+	if (this.spinner) {
+		this.spinner.parentNode.removeChild(this.spinner);
+		this.spinner = null;
+	}
+	if (this.spinner_label) {
+		this.spinner_label.parentNode.removeChild(this.spinner_label);
+		this.spinner_label = null;
+	}
 };