BUGFIX: #7036 refresh CMS panel when adding a new file

admin/css/screen.css

@@ -191,6 +191,8 @@ form.small .field input.text, form.small .field textarea, form.small .field sele
 .cms .ss-ui-button.ss-ui-action-minor { background: none; border: 0; color: #393939; text-decoration: underline; -moz-box-shadow: none; -webkit-box-shadow: none; -o-box-shadow: none; box-shadow: none; }
 .cms .ss-ui-button.ss-ui-action-minor:hover { text-decoration: none; color: #1f1f1f; }
 .cms .ss-ui-button.ss-ui-action-minor:focus, .cms .ss-ui-button.ss-ui-action-minor:active { text-decoration: none; color: #525252; }
+.cms .ss-ui-button.ss-ui-button-loading { opacity: 0.8; }
+.cms .ss-ui-loading-icon { background: url(../../images/network-save.gif) no-repeat; display: block; width: 16px; height: 16px; }
 
 /** ---------------------------------------------------- Grouped form fields ---------------------------------------------------- */
 .fieldgroup .fieldgroup-field { float: left; display: block; width: 184px; padding-right: 8px; }

admin/javascript/LeftAndMain.js

@@ -124,6 +124,8 @@ jQuery.noConflict();
 			 */
 			loadPanel: function(url, title, data) {
 				if(!data) data = {};
+				if(!title) title = "";
+				
 				var selector = data.selector || '.cms-content', contentEl = $(selector);
 				
 				// Check change tracking (can't use events as we need a way to cancel the current state change)
@@ -186,7 +188,6 @@ jQuery.noConflict();
 				});
 
 				contentEl.addClass('loading');
-				
 				var xhr = $.ajax({
 					url: state.url,
 					success: function(data, status, xhr) {
@@ -247,6 +248,18 @@ jQuery.noConflict();
 				});
 				
 				this.setCurrentXHR(xhr);
+			},
+			/**
+			 * Function: refresh
+			 * 
+			 * Updates the container based on the current url
+			 *
+			 * Returns: void
+			 */
+			refresh: function() {
+				$(window).trigger('statechange');
+				
+				$(this).redraw();
 			}
 		});
 		
@@ -299,8 +312,21 @@ jQuery.noConflict();
 		 * Little helper to avoid repetition, and make it easy to trigger actions via a link,
 		 * without reloading the page, changing the URL, or loading in any new panel content.
 		 */
-		$('.cms .cms-link-ajax').entwine({
+		$('.cms .ss-ui-button-ajax').entwine({
 			onclick: function(e) {
+				$(this).removeClass('ui-button-text-only');
+				$(this).addClass('ss-ui-button-loading ui-button-text-icons');
+				
+				var loading = $(this).find(".ss-ui-loading-icon");
+				
+				if(loading.length < 1) {
+					loading = $("<span></span>").addClass('ss-ui-loading-icon ui-button-icon-primary ui-icon');
+					
+					$(this).prepend(loading);
+				}
+				
+				loading.show();
+				
 				var href = this.attr('href'), url = href ? href : this.data('href');
 
 				jQuery.ajax({
@@ -308,7 +334,19 @@ jQuery.noConflict();
 					// Ensure that form view is loaded (rather than whole "Content" template)
 					complete: function(xmlhttp, status) {
 						var msg = (xmlhttp.getResponseHeader('X-Status')) ? xmlhttp.getResponseHeader('X-Status') : xmlhttp.responseText;
-						if (typeof msg != "undefined" && msg != null) eval(msg);
+						console.log(msg);
+						
+						try {
+							if (typeof msg != "undefined" && msg != null) eval(msg);
+						}
+						catch(e) {}
+						
+						loading.hide();
+						
+						$(".cms-container").refresh();
+						
+						$(this).removeClass('ss-ui-button-loading ui-button-text-icons');
+						$(this).addClass('ui-button-text-only');
 					},
 					dataType: 'html'
 				});

admin/scss/_forms.scss

@@ -384,6 +384,17 @@ form.small .field, .field.small {
 				color: lighten($color-text-dark, 20%);
 			}
 		}
+		
+		&.ss-ui-button-loading {
+			opacity: 0.8;
+		}
+	}
+	
+	.ss-ui-loading-icon {
+		background: url(../../images/network-save.gif) no-repeat;
+		display: block;
+		width: 16px;
+		height: 16px;
 	}
 }