Merge pull request #1178 from nextcloud/theming-spinner-animation

Theming: Show loading spinner while uploading files
nextcloud · Aug 30, 2016 · f4dfd1f · f4dfd1f
2 parents dd2482e + 0e8b138
commit f4dfd1f
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 8 deletions.
diff --git a/apps/theming/css/settings-admin.css b/apps/theming/css/settings-admin.css
@@ -9,12 +9,13 @@
 #theming .theme-undo {
     cursor: pointer;
     opacity: .5;
-    padding: 9px;
-    vertical-align: bottom;
+    padding: 11px 5px;
+    vertical-align: top;
+    display: inline-block;
 }
 
-#theming .icon {
-    display: inline-block;
+#theming .icon-loading-small:after {
+    margin: -10px 0 0 -10px;
 }
 
 #theming label span {
@@ -23,10 +24,11 @@
     padding: 8px 0px;
 }
 
-#theming .icon-upload {
+#theming .icon-upload,
+#theming .icon-loading-small {
     display: inline-flex;
     padding: 8px;
-    margin: 0;
+    margin: 2px 0px;
 }
 
 div#theming_settings_msg {
@@ -46,4 +48,4 @@ div#theming_settings_msg {
     max-width: 20%;
     max-height: 20%;
     margin-top: 20px;
-}
+}
diff --git a/apps/theming/js/settings-admin.js b/apps/theming/js/settings-admin.js
@@ -25,6 +25,7 @@ function setThemingValue(setting, value) {
 		OC.generateUrl('/apps/theming/ajax/updateStylesheet'), {'setting' : setting, 'value' : value}
 	).done(function(response) {
 		OC.msg.finishedSaving('#theming_settings_msg', response);
+		hideUndoButton(setting, value);
 	}).fail(function(response) {
 		OC.msg.finishedSaving('#theming_settings_msg', response);
 	});
@@ -114,7 +115,6 @@ function preview(setting, value) {
 	if (setting === 'name') {
 		window.document.title = t('core', 'Admin') + " - " + value;
 	}
-	hideUndoButton(setting, value);
 }
 
 function hideUndoButton(setting, value) {
@@ -153,12 +153,16 @@ $(document).ready(function () {
 		done: function (e, response) {
 			preview('logoMime', response.result.data.name);
 			OC.msg.finishedSaving('#theming_settings_msg', response.result);
+			$('label#uploadlogo').addClass('icon-upload').removeClass('icon-loading-small');
+			$('.theme-undo[data-setting=logoMime]').show();
 		},
 		submit: function(e, response) {
 			OC.msg.startSaving('#theming_settings_msg');
+			$('label#uploadlogo').removeClass('icon-upload').addClass('icon-loading-small');
 		},
 		fail: function (e, response){
 			OC.msg.finishedError('#theming_settings_msg', response._response.jqXHR.responseJSON.data.message);
+			$('label#uploadlogo').addClass('icon-upload').removeClass('icon-loading-small');
 		}
 	};
 	var uploadParamsLogin = {
@@ -167,11 +171,15 @@ $(document).ready(function () {
 		done: function (e, response) {
 			preview('backgroundMime', response.result.data.name);
 			OC.msg.finishedSaving('#theming_settings_msg', response.result);
+			$('label#upload-login-background').addClass('icon-upload').removeClass('icon-loading-small');
+			$('.theme-undo[data-setting=backgroundMime]').show();
 		},
 		submit: function(e, response) {
 			OC.msg.startSaving('#theming_settings_msg');
+			$('label#upload-login-background').removeClass('icon-upload').addClass('icon-loading-small');
 		},
 		fail: function (e, response){
+			$('label#upload-login-background').removeClass('icon-loading-small').addClass('icon-upload');
 			OC.msg.finishedError('#theming_settings_msg', response._response.jqXHR.responseJSON.data.message);
 		}
 	};
@@ -216,6 +224,7 @@ $(document).ready(function () {
 	$('.theme-undo').click(function (e) {
 		var setting = $(this).data('setting');
 		OC.msg.startSaving('#theming_settings_msg');
+		$('.theme-undo[data-setting=' + setting + ']').hide();
 		$.post(
 			OC.generateUrl('/apps/theming/ajax/undoChanges'), {'setting' : setting}
 		).done(function(response) {