Show that something is happening after the user has clicked on the switch

6 files changed, 37 insertions, 68 deletions

diff --git a/css/gallerybutton.css b/css/gallerybutton.css
index 5561be66..430b184a 100644
--- a/css/gallerybutton.css
+++ b/css/gallerybutton.css
@@ -1,4 +1,5 @@
-/* Toggle for opening the files list in the Gallery app */
+/* Gallery buttons design  */
+
 #controls .button.view-switcher {
 	float: right;
 	margin-right: 4px;
@@ -8,12 +9,8 @@
 	padding: 8px 11px;
 }
 
-.button.left-switch-button img,
-.button.right-switch-button img {
-	vertical-align: -3px;
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
-	filter: alpha(opacity=60);
-	opacity: 0.6;
+#controls .button.sorting {
+	padding: 8px 7px;
 }
 
 #controls .button.left-switch-button {
@@ -21,9 +18,10 @@
 	display: inline;
 	border-radius: 3px 0 0 3px;
 	margin-left: 3px;
-	margin-right:0;
+	margin-right: 0;
 	border-right: 0;
 }
+
 #controls .button.right-switch-button {
 	float: left;
 	display: inline;
@@ -31,11 +29,19 @@
 	margin-left: -1px;
 }
 
+.button.left-switch-button img,
+.button.right-switch-button img {
+	vertical-align: -3px;
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
+	filter: alpha(opacity=60);
+	opacity: 0.6;
+}
+
 #controls .inactive-button {
 	background-color: rgb(230, 230, 230);
 }
 
-#controls .inactive-button img{
+#controls .inactive-button img {
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";
 	filter: alpha(opacity=25);
 	opacity: 0.25;
@@ -43,7 +49,8 @@
 
 #controls .inactive-button:hover,
 #controls .inactive-button:focus,
-#controls .inactive-button a:focus{
+#controls .inactive-button a:focus,
+#controls .inactive-button.loading {
 	background-color: rgba(255, 255, 255, .95);
 	color: #111;
 }
@@ -52,3 +59,11 @@
 	pointer-events: none;
 }
 
+#share-button img,
+.button.left-switch-button img,
+.button.right-switch-button img {
+	vertical-align: -3px;
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
+	filter: alpha(opacity=60);
+	opacity: 0.6;
+}
diff --git a/css/styles.css b/css/styles.css
index 3a4a3035..bb22aa49 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -27,58 +27,8 @@ div.crumb.last a {
 	width: 40px;
 }
 
-#controls .button.left-switch-button {
-	float: left;
-	display: inline;
-	border-radius: 3px 0 0 3px;
-	margin-left: 3px;
-	margin-right: 0;
-	border-right: 0;
-}
-
-#controls .button.right-switch-button {
-	float: left;
-	display: inline;
-	border-radius: 0 3px 3px 0;
-	margin-left: -1px;
-}
-
-#controls .button.view-switcher {
-	padding: 8px 11px;
-}
-
-#controls .button.sorting {
-	padding: 8px;
-}
-
-#controls .inactive-button {
-	background-color: rgb(230, 230, 230);
-}
-
-#controls .inactive-button img{
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";
-	filter: alpha(opacity=25);
-	opacity: 0.25;
-}
-
-#controls .inactive-button:hover,
-#controls .inactive-button:focus,
-#controls .inactive-button a:focus{
-	background-color: rgba(255, 255, 255, .95);
-	color: #111;
-}
-
-#controls .disabled-button {
-	pointer-events: none;
-}
-
-#share-button img,
-.button.left-switch-button img,
-.button.right-switch-button img {
-	vertical-align: -3px;
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
-	filter: alpha(opacity=60);
-	opacity: 0.6;
+#controls > .right {
+	float: right;
 }
 
 #album-info-button {
@@ -254,10 +204,6 @@ div.crumb.last a {
 	opacity: 0;
 }
 
-#controls > .right {
-	float: right;
-}
-
 #gallery > h2 {
 	background: #f7f7f7;
 	height: 2.8em;
diff --git a/js/gallery.js b/js/gallery.js
index c79a30a5..290044b7 100644
--- a/js/gallery.js
+++ b/js/gallery.js
@@ -161,6 +161,10 @@
 			} else {
 				subUrl = 'apps/files?dir={path}';
 			}
+			
+			var button = $('#filelist-button');
+			button.addClass('loading');
+			button.find('img').attr('src', OC.imagePath('core', 'loading-small.gif'));
 			OC.redirect(OC.generateUrl(subUrl, params));
 		},
 
diff --git a/js/gallerybutton.js b/js/gallerybutton.js
index 970cbde0..8f45de63 100644
--- a/js/gallerybutton.js
+++ b/js/gallerybutton.js
@@ -71,6 +71,8 @@ $(document).ready(function () {
 					'</div>');
 
 			GalleryButton.button.click(function () {
+				$(this).addClass('loading');
+				$(this).find('img').attr('src', OC.imagePath('core', 'loading-small.gif'));
 				window.location.href = GalleryButton.url;
 			});
 
diff --git a/templates/part.content.php b/templates/part.content.php
index f7187f48..7051870c 100644
--- a/templates/part.content.php
+++ b/templates/part.content.php
@@ -36,7 +36,8 @@ style(
 		'styles',
 		'mobile',
 		'github-markdown',
-		'slideshow'
+		'slideshow',
+		'gallerybutton'
 	]
 );
 ?>
diff --git a/templates/public.php b/templates/public.php
index f497aa91..a6cbb5d1 100644
--- a/templates/public.php
+++ b/templates/public.php
@@ -38,7 +38,8 @@ style(
 		'public',
 		'gallerybutton',
 		'github-markdown',
-		'slideshow'
+		'slideshow',
+		'gallerybutton'
 	]
 );