Show that something is happening after the user has clicked on the sw…

…itch
owncloud · Jun 25, 2015 · fa5221e · fa5221e
1 parent 369db1f
commit fa5221e
Show file tree

Hide file tree

Showing 6 changed files with 37 additions and 67 deletions.
diff --git a/css/gallerybutton.css b/css/gallerybutton.css
@@ -1,46 +1,53 @@
-/* Toggle for opening the files list in the Gallery app */
+/* Gallery buttons design  */
+
 #controls .button.view-switcher {
 	margin-top: 5px;
 	width: 40px;
 	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 {
 	float: left;
 	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;
 	border-radius: 0 3px 3px 0;
 	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;
 }
 
 #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;
 }
@@ -49,3 +56,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
@@ -27,57 +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 {
@@ -246,10 +197,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
@@ -197,6 +197,10 @@ Gallery.switchToFilesView = function (event) {
 	} 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
@@ -55,6 +55,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
@@ -32,7 +32,8 @@
 		'styles',
 		'mobile',
 		'github-markdown',
-		'slideshow'
+		'slideshow',
+		'gallerybutton'
 	]
 );
 ?>

diff --git a/templates/public.php b/templates/public.php
@@ -34,7 +34,8 @@
 		'public',
 		'gallerybutton',
 		'github-markdown',
-		'slideshow'
+		'slideshow',
+		'gallerybutton'
 	]
 );