diff --git a/admin/css/screen.css b/admin/css/screen.css index 6d28b006b..4a8c71756 100644 --- a/admin/css/screen.css +++ b/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; } diff --git a/admin/javascript/LeftAndMain.js b/admin/javascript/LeftAndMain.js index a4a0f1c52..964081968 100644 --- a/admin/javascript/LeftAndMain.js +++ b/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) @@ -138,7 +140,7 @@ jQuery.noConflict(); if(abort) return; } - + if(window.History.enabled) { // Active menu item is set based on X-Controller ajax header, // which matches one class on the menu @@ -186,7 +188,6 @@ jQuery.noConflict(); }); contentEl.addClass('loading'); - var xhr = $.ajax({ url: state.url, success: function(data, status, xhr) { @@ -247,9 +248,21 @@ jQuery.noConflict(); }); this.setCurrentXHR(xhr); + }, + /** + * Function: refresh + * + * Updates the container based on the current url + * + * Returns: void + */ + refresh: function() { + $(window).trigger('statechange'); + + $(this).redraw(); } }); - + $('.cms-content-fields').entwine({ redraw: function() { this.layout(); @@ -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 = $("").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' }); diff --git a/admin/scss/_forms.scss b/admin/scss/_forms.scss index 7d6c5c9a0..641431145 100644 --- a/admin/scss/_forms.scss +++ b/admin/scss/_forms.scss @@ -319,7 +319,7 @@ form.small .field, .field.small { ); @include box-shadow(0 0 5px darken($color-button-generic, 20%) inset); } - + /* constructive */ &.ss-ui-action-constructive { font-weight: bold; @@ -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; } }