Fix spinners for themes

Spinners come in many forms and CSS spinners can't be applied as a background property like GIFs, which means that they need their own DIV

11 files changed, 67 insertions, 25 deletions

diff --git a/css/gallerybutton.css b/css/gallerybutton.css
index a120e01a..7328a008 100644
--- a/css/gallerybutton.css
+++ b/css/gallerybutton.css
@@ -164,6 +164,15 @@ http://davidwalsh.name/css-flip*/
 	transform: rotateX(180deg);
 }
 
+#button-loading {
+	position: absolute;
+	width: 24px;
+	height: 24px;
+	background-size: 24px 24px;
+	margin-left: -4px;
+	margin-top: -3px;
+}
+
 #controls .button.sorting.active-button.hover .front {
 	-webkit-transform: rotateX(180deg);
 	-moz-transform: rotateX(180deg);
diff --git a/css/slideshow.css b/css/slideshow.css
index 0ea49e2b..ba953438 100644
--- a/css/slideshow.css
+++ b/css/slideshow.css
@@ -162,14 +162,14 @@
 }
 
 #slideshow > .name .title {
-	padding: 0px 50px;
+	padding: 0 50px;
 	text-align: center;
 	color: #FFF;
 	font-size: 18px;
 	line-height: normal;
 	text-overflow: ellipsis;
-	overflow:hidden;
-	white-space:nowrap;
+	overflow: hidden;
+	white-space: nowrap;
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
 	filter: alpha(opacity=50);
 	opacity: .5;
@@ -196,3 +196,10 @@
 	width: 100%;
 	height: 100%;
 }
+
+.icon-loading-dark {
+	position: absolute;
+	top: 50%;
+	width: 100%;
+	height: 32px;
+}
diff --git a/css/styles.css b/css/styles.css
index 58771aba..1aafe395 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -39,7 +39,7 @@ div.crumb.last a {
 	vertical-align: -3px;
 }
 
-.album-info-content {
+.album-info-container {
 	background-color: #eee;
 	border-bottom-left-radius: 5px;
 	box-shadow: 0 1px 1px #777;
@@ -53,6 +53,16 @@ div.crumb.last a {
 	overflow-y: auto;
 }
 
+.album-info-loader {
+	top: 50%;
+	left: 50%;
+	z-index: -100;
+	position: absolute !important;
+	width: 32px;
+	height: 32px;
+	background-size: 32px 32px;
+}
+
 .album-info-content ul {
 	list-style: initial;
 }
diff --git a/js/app.js b/js/app.js
index bad8ccec..ee327211 100644
--- a/js/app.js
+++ b/js/app.js
@@ -41,7 +41,7 @@ $(document).ready(function () {
 			});
 
 		$(document).click(function () {
-			$('.album-info-content').slideUp();
+			$('.album-info-container').slideUp();
 		});
 
 		// This block loads new rows
@@ -54,21 +54,21 @@ $(document).ready(function () {
 		var windowWidth = $(window).width();
 		var windowHeight = $(window).height();
 		$(window).resize(_.throttle(function () {
-			var infoContentElement = $('.album-info-content');
+			var infoContentContainer = $('.album-info-content');
 			// This section redraws the photowall and limits the width of dropdowns
 			if (windowWidth !== $(window).width()) {
 				if ($('#emptycontent').is(':hidden')) {
 					Gallery.view.viewAlbum(Gallery.currentAlbum);
 				}
 				Gallery.view.breadcrumb.setMaxWidth($(window).width() - Gallery.buttonsWidth);
-				infoContentElement.css('max-width', $(window).width());
+				infoContentContainer.css('max-width', $(window).width());
 
 				windowWidth = $(window).width();
 			}
 			// This makes sure dropdowns will not be hidden after a window resize
 			if (windowHeight !== $(window).height()) {
 				Gallery.resetContentHeight();
-				infoContentElement.css('max-height',
+				infoContentContainer.css('max-height',
 					$(window).height() - Gallery.browserToolbarHeight);
 
 				windowHeight = $(window).height();
diff --git a/js/gallery.js b/js/gallery.js
index 245f2edb..5e7ab35e 100644
--- a/js/gallery.js
+++ b/js/gallery.js
@@ -163,7 +163,7 @@
 			}
 			
 			var button = $('#filelist-button');
-			button.addClass('loading');
+			button.children('#button-loading').addClass('loading');
 			OC.redirect(OC.generateUrl(subUrl, params));
 		},
 
@@ -174,7 +174,7 @@
 		 */
 		share: function (event) {
 			// Clicking on share button does not trigger automatic slide-up
-			$('.album-info-content').slideUp();
+			$('.album-info-container').slideUp();
 
 			if (!OC.Share.droppedDown) {
 				event.preventDefault();
diff --git a/js/gallerybutton.js b/js/gallerybutton.js
index d645a39f..dc96168b 100644
--- a/js/gallerybutton.js
+++ b/js/gallerybutton.js
@@ -60,13 +60,14 @@ $(document).ready(function () {
 			// Button for opening files list as gallery view
 			GalleryButton.button =
 				$('<div id="gallery-button" class="button view-switcher">' +
+						'<div id="button-loading"></div>' +
 					'<img class="svg" src="' + OC.imagePath('core', 'actions/toggle-pictures.svg') +
 					'"' +
 					'alt="' + t('gallery', 'Gallery view') + '"/>' +
 					'</div>');
 
 			GalleryButton.button.click(function () {
-				$(this).addClass('loading');
+				$(this).children('#button-loading').addClass('loading');
 				window.location.href = GalleryButton.url;
 			});
 
diff --git a/js/galleryinfobox.js b/js/galleryinfobox.js
index 7ca085ad..4f7a4ace 100644
--- a/js/galleryinfobox.js
+++ b/js/galleryinfobox.js
@@ -7,10 +7,14 @@
 	 * @constructor
 	 */
 	var InfoBox = function () {
-		this.infoContentElement = $('.album-info-content');
+		this.infoContentContainer = $('.album-info-container');
+		this.infoContentSpinner = this.infoContentContainer.children('.album-info-loader');
+		this.infoContentElement = this.infoContentContainer.children('.album-info-content');
 	};
 
 	InfoBox.prototype = {
+		infoContentContainer: null,
+		infoContentSpinner: null,
 		infoContentElement: null,
 		albumInfo: null,
 
@@ -18,16 +22,16 @@
 		 * Shows an information box to the user
 		 */
 		showInfo: function () {
-			if (this.infoContentElement.is(':visible')) {
-				this.infoContentElement.slideUp();
+			if (this.infoContentContainer.is(':visible')) {
+				this.infoContentContainer.slideUp();
 			} else {
 				this.albumInfo = Gallery.config.albumInfo;
 
 				if (!this.albumInfo.infoLoaded) {
-					this.infoContentElement.addClass('icon-loading');
+					this.infoContentSpinner.addClass('icon-loading');
 					this.infoContentElement.empty();
 					this.infoContentElement.height(100);
-					this.infoContentElement.slideDown();
+					this.infoContentContainer.slideDown();
 					if (!$.isEmptyObject(this.albumInfo.descriptionLink)) {
 						var path = '/' + this.albumInfo.filePath;
 						var file = this.albumInfo.descriptionLink;
@@ -45,7 +49,7 @@
 					}
 					Gallery.config.infoLoaded = true;
 				} else {
-					this.infoContentElement.slideDown();
+					this.infoContentContainer.slideDown();
 				}
 				this.infoContentElement.scrollTop(0);
 			}
@@ -75,7 +79,7 @@
 		 * @private
 		 */
 		_adjustHeight: function () {
-			this.infoContentElement.removeClass('icon-loading');
+			this.infoContentSpinner.removeClass('icon-loading');
 			var newHeight = this.infoContentElement[0].scrollHeight;
 			this.infoContentElement.animate({
 				height: newHeight + 40
diff --git a/js/galleryview.js b/js/galleryview.js
index 7dd4c13c..499808ef 100644
--- a/js/galleryview.js
+++ b/js/galleryview.js
@@ -251,9 +251,9 @@
 		_infoButtonSetup: function () {
 			var infoButton = $('#album-info-button');
 			infoButton.find('span').hide();
-			var infoContentElement = $('.album-info-content');
-			infoContentElement.slideUp();
-			infoContentElement.css('max-height', $(window).height() - Gallery.browserToolbarHeight);
+			var infoContentContainer = $('.album-info-container');
+			infoContentContainer.slideUp();
+			infoContentContainer.css('max-height', $(window).height() - Gallery.browserToolbarHeight);
 			var albumInfo = Gallery.config.albumInfo;
 			if (Gallery.config.albumError) {
 				infoButton.hide();
diff --git a/templates/part.content.php b/templates/part.content.php
index 5fb3a79e..7703712a 100644
--- a/templates/part.content.php
+++ b/templates/part.content.php
@@ -82,9 +82,13 @@ style(
 				image_path('core', 'actions/info.svg')
 			); ?>" alt="<?php p($l->t('Album information')); ?>"/>
 		</div>
-		<div class="album-info-content markdown-body"></div>
+		<div class="album-info-container">
+			<div class="album-info-loader"></div>
+			<div class="album-info-content markdown-body"></div>
+		</div>
 		<!-- button for opening the current album as file list -->
 		<div id="filelist-button" class="button view-switcher gallery">
+			<div id="button-loading"></div>
 			<img class="svg" src="<?php print_unescaped(
 				image_path('core', 'actions/toggle-filelist.svg')
 			); ?>" alt="<?php p($l->t('File list')); ?>"/>
diff --git a/templates/public.php b/templates/public.php
index 608b00bd..57fb4ca9 100644
--- a/templates/public.php
+++ b/templates/public.php
@@ -133,9 +133,13 @@ style(
 							image_path('core', 'actions/info.svg')
 						); ?>" alt="<?php p($l->t('Album information')); ?>"/>
 					</div>
-					<div class="album-info-content markdown-body"></div>
+					<div class="album-info-container">
+						<div class="album-info-loader"></div>
+						<div class="album-info-content markdown-body"></div>
+					</div>
 					<!-- toggle for opening the current album as file list -->
 					<div id="filelist-button" class="button view-switcher gallery">
+						<div id="button-loading"></div>
 						<img class="svg" src="<?php print_unescaped(
 							image_path('core', 'actions/toggle-filelist.svg')
 						); ?>" alt="<?php p($l->t('Picture view')); ?>"/>
diff --git a/templates/slideshow.php b/templates/slideshow.php
index 52c00a55..29b76d6a 100644
--- a/templates/slideshow.php
+++ b/templates/slideshow.php
@@ -1,4 +1,5 @@
-<div id="slideshow" class="icon-loading-dark">
+<div id="slideshow">
+	<div class="icon-loading-dark"></div>
 	<input type="button" class="svg next icon-view-next"/>
 	<input type="button" class="svg play icon-view-play"/>
 	<input type="button" class="svg pause icon-view-pause hidden"/>
@@ -11,7 +12,9 @@
 			   class="menuItem svg changeBackground icon-view-toggle-background hidden"/>
 	</div>
 	<div class="progress icon-view-pause"/>
-	<div class="name"><div class="title"></div></div>
+	<div class="name">
+		<div class="title"></div>
+	</div>
 	<div class="notification"></div>
 	<div class="bigshotContainer"></div>
 </div>