Loading indicator on buttons now.

admin/client/dist/fonts/silverstripe.svg

@@ -89,12 +89,6 @@
 <glyph glyph-name="block" unicode="&#60;" d="M256 502c68 0 126-24 174-72 48-48 72-106 72-174 0-68-24-125-72-174-48-48-106-72-174-72-68 0-125 24-174 72-48 49-72 106-72 174 0 68 24 126 72 174 49 48 106 72 174 72m132-113l0 0m-318-133c0-45 14-84 42-118 0 0 263 263 263 263-34 28-74 42-119 42-52 0-96-18-132-54-36-37-54-81-54-133m54-132l0 0m132-54c52 0 96 18 133 54 36 37 54 81 54 132 0 44-14 84-42 119 0 0-263-263-263-263 34-28 73-42 118-42"/>
 <glyph glyph-name="icon-enlarge" unicode="&#61;" d="M473 98l-103 103c18 28 28 61 28 95-2 103-85 185-188 188-100 0-182-82-182-182 3-103 85-186 188-188 32 0 64 8 92 25l102-103c11-10 28-10 39 0l29 28c4 5 6 12 5 18-1 7-4 13-10 16z m-388 204c1 68 57 124 125 125 72-3 129-60 131-131 0-69-56-125-125-125-71 2-128 59-131 131z m114 68l29 0 0-142-29 0z m-57-86l0 29 142 0 0-29z"/>
 <glyph glyph-name="page-multiple" unicode="&#62;" d="M443 393l-18 0 0-343c0-4-4-7-8-7l-253 0 0-18c0-5 3-8 8-8l271 0c4 0 7 3 7 8l0 360c0 4-3 8-7 8z m-44-317l0 360c0 4-3 8-7 8l-18 0 0-343c0-4-4-7-8-7l-253 0 0-18c0-4 3-8 7-8l272 0c4 0 7 4 7 8z m-51 51l0 360c0 5-3 8-8 8l-271 0c-4 0-7-3-7-8l0-360c0-4 3-8 7-8l271 0c5 0 8 4 8 8z"/>
-<<<<<<< HEAD
 <glyph glyph-name="database" unicode="&#63;" d="M428 183c5 7 7 7 7-1 0 0 0-51 0-51 0-25-18-48-53-69-36-21-78-31-126-31-48 0-90 10-125 31-36 21-54 44-54 69 0 0 0 51 0 51 0 3 0 5 2 5 1 1 3 0 5-4 11-17 32-32 64-44 32-11 68-17 108-17 40 0 76 6 108 17 32 12 53 27 64 44m1 130c3 6 5 6 6 0 0 0 0-59 0-59 0-23-17-43-52-58-35-16-77-24-127-24-49 0-91 8-126 24-36 15-53 35-53 58 0 0 0 59 0 59 0 7 2 7 7 0 10-15 31-28 63-38 33-10 69-15 109-15 40 0 76 5 109 15 32 10 53 23 64 38m-173 168c49 0 91-6 126-20 36-13 53-29 53-47 0 0 0-33 0-33 0-20-17-37-53-51-35-14-77-21-126-21-49 0-91 7-126 21-36 14-53 31-53 51 0 0 0 33 0 33 0 18 17 34 53 47 35 14 77 20 126 20"/>
-<<<<<<< HEAD
 <glyph glyph-name="external-link" unicode="&#64;" d="M402 247l0-92c0-22-8-42-24-58-16-16-35-24-58-24l-238 0c-22 0-42 8-58 24-16 16-24 36-24 58l0 238c0 23 8 42 24 58 16 16 36 24 58 24l201 0c3 0 5 0 7-2 2-2 3-4 3-7l0-18c0-3-1-5-3-7-2-1-4-2-7-2l-201 0c-12 0-23-5-32-14-9-9-13-19-13-32l0-238c0-12 4-23 13-32 9-9 20-13 32-13l238 0c13 0 23 4 32 13 9 9 14 20 14 32l0 92c0 3 1 5 2 6 2 2 4 3 7 3l18 0c3 0 5-1 7-3 1-1 2-3 2-6z m110 247l0-147c0-5-2-9-5-12-4-4-8-6-13-6-5 0-10 2-13 6l-50 50-187-186c-2-2-4-3-6-3-3 0-5 1-7 3l-32 32c-2 2-3 4-3 7 0 2 1 4 3 6l186 187-50 50c-4 3-6 8-6 13 0 5 2 9 6 13 3 3 7 5 12 5l147 0c5 0 9-2 13-5 3-4 5-8 5-13z"/>
-=======
->>>>>>> a791e2f... update icon fonts
-=======
->>>>>>> c536424... new font icons added
 </font></defs></svg>

admin/client/dist/js/bundle.js

@@ -1057,16 +1057,16 @@ return!n.length||(n.each(function(){$(this).confirmUnsavedChanges()||(i=!1)}),i)
 this.checkCanNavigate(n.pjax?n.pjax.split(","):["Content"])&&(this.saveTabState(),n.__forceReferer=r,i&&(n.__forceReload=1+Math.random()),window.ss.router.show(e,n))},reloadCurrentPanel:function g(){this.loadPanel(document.URL,null,null,!0)
 
 },submitForm:function v(e,t,n,i){var r=this
-t||(t=this.find(".btn-toolbar :submit[name=action_save]")),t||(t=this.find(".btn-toolbar :submit:first")),e.trigger("beforesubmitform"),this.trigger("submitform",{form:e,button:t}),$(t).addClass("loading")
-
-
-var a=e.validate()
-if("undefined"!=typeof a&&!a)return statusMessage("Validation failed.","bad"),$(t).removeClass("loading"),!1
-var o=e.serializeArray()
-return o.push({name:$(t).attr("name"),value:"1"}),o.push({name:"BackURL",value:document.URL.replace(/\/$/,"")}),this.saveTabState(),jQuery.ajax(jQuery.extend({headers:{"X-Pjax":"CurrentForm,Breadcrumbs"
-},url:e.attr("action"),data:o,type:"POST",complete:function s(){$(t).removeClass("loading")},success:function l(t,i,a){e.removeClass("changed"),n&&n(t,i,a)
-var s=r.handleAjaxResponse(t,i,a)
-s&&s.filter("form").trigger("aftersubmitform",{status:i,xhr:a,formData:o})}},i)),!1},LastState:null,PauseState:!1,handleStateChange:function y(e){var t=arguments.length<=1||void 0===arguments[1]?window.history.state:arguments[1]
+t||(t=this.find(".btn-toolbar :submit[name=action_save]")),t||(t=this.find(".btn-toolbar :submit:first")),e.trigger("beforesubmitform"),this.trigger("submitform",{form:e,button:t}),$(t).addClass("btn--loading loading"),
+$(t).is("button")&&($(t).data("original-text",$(t).text()),$(t).text(""),$(t).append($('<div class="btn__loading-icon"><span class="btn__circle btn__circle--1" /><span class="btn__circle btn__circle--2" /><span class="btn__circle btn__circle--3" /></div>')),
+$(t).css($(t).outerWidth()+"px"))
+var a=e.validate(),o=function l(){$(t).removeClass("btn--loading loading"),$(t).find(".btn__loading-icon").remove(),$(t).css("width","auto"),$(t).text($(t).data("original-text"))}
+"undefined"==typeof a||a||(statusMessage("Validation failed.","bad"),o())
+var s=e.serializeArray()
+return s.push({name:$(t).attr("name"),value:"1"}),s.push({name:"BackURL",value:document.URL.replace(/\/$/,"")}),this.saveTabState(),jQuery.ajax(jQuery.extend({headers:{"X-Pjax":"CurrentForm,Breadcrumbs"
+},url:e.attr("action"),data:s,type:"POST",complete:function u(){o()},success:function c(t,i,a){o(),e.removeClass("changed"),n&&n(t,i,a)
+var l=r.handleAjaxResponse(t,i,a)
+l&&l.filter("form").trigger("aftersubmitform",{status:i,xhr:a,formData:s})}},i)),!1},LastState:null,PauseState:!1,handleStateChange:function y(e){var t=arguments.length<=1||void 0===arguments[1]?window.history.state:arguments[1]
 
 
 if(!this.getPauseState()){this.getStateChangeXHR()&&this.getStateChangeXHR().abort()
@@ -2041,10 +2041,11 @@ n.length&&this.getGridField().showDetailView(n.prop("href"))},onmouseover:functi
 
 }}),e(".grid-field .action.action_import:button").entwine({onclick:function f(t){t.preventDefault()
 var n=e(".modal-backdrop")
-n.length<1?(n=e('<div class="modal-backdrop fade in"></div>'),e("body").append(n)):n.addClass("fade in").fadeIn(),e(this.data("target")).addClass("in")
-var i=this
-e(this.data("target")).find("[data-dismiss]").on("click",function(){n.fadeOut(function(){e(this).removeClass("in")}),e(i.data("target")).removeClass("in")})}}),e(".grid-field .action:button").entwine({
-onclick:function p(e){var t="show"
+n.length<1?(n=e('<div class="modal-backdrop fade in"></div>'),e("body").append(n)):n.addClass("fade in").fadeIn()
+var i=e(this.data("target"))
+i.addClass("in"),i.find("[data-dismiss]").on("click",function(){n.fadeOut(function(){n.removeClass("in")}),i.removeClass("in")})}}),e(".grid-field .action:button").entwine({onclick:function p(e){var t="show"
+
+
 return this.is(":disabled")?void e.preventDefault():(!this.hasClass("ss-gridfield-button-close")&&this.closest(".grid-field").hasClass("show-filter")||(t="hidden"),this.getGridField().reload({data:[{name:this.attr("name"),
 value:this.val(),filter:t}]}),void e.preventDefault())},actionurl:function h(){var t=this.closest(":button"),n=this.getGridField(),i=this.closest("form"),r=i.find(":input.gridstate").serialize(),a=i.find('input[name="SecurityID"]').val()
 

admin/client/src/components/FormAction/FormAction.scss

@@ -109,9 +109,11 @@
   }
 }
 
-.btn--loading > span,
-.btn--loading::before {
-  visibility: hidden;
+.btn--loading {
+  & > span,
+  &::before {
+    visibility: hidden;
+  }
 }
 
 @keyframes loading-icon {

admin/client/src/legacy/LeftAndMain.js

@@ -432,17 +432,36 @@ $.entwine('ss', function($) {
       this.trigger('submitform', {form: form, button: button});
 
       // set button to "submitting" state
-      $(button).addClass('loading');
+      $(button).addClass('btn--loading loading');
+
+      if($(button).is('button')) {
+        $(button).data('original-text', $(button).text());
+        $(button).text('');
+
+        $(button).append($(
+          '<div class="btn__loading-icon">'+
+            '<span class="btn__circle btn__circle--1" />'+
+            '<span class="btn__circle btn__circle--2" />'+
+            '<span class="btn__circle btn__circle--3" />'+
+          '</div>'));
+
+        $(button).css($(button).outerWidth() + 'px');
+      }
 
       // validate if required
       var validationResult = form.validate();
+
+      var clearButton = function() {
+        $(button).removeClass('btn--loading loading');
+        $(button).find('.btn__loading-icon').remove();
+        $(button).css('width', 'auto');
+        $(button).text($(button).data('original-text'));
+      }
+
       if(typeof validationResult!=='undefined' && !validationResult) {
         // TODO Automatically switch to the tab/position of the first error
         statusMessage("Validation failed.", "bad");
-
-        $(button).removeClass('loading');
-
-        return false;
+        clearButton();
       }
 
       // get all data from the form
@@ -458,6 +477,7 @@ $.entwine('ss', function($) {
       // Save tab selections so we can restore them later
       this.saveTabState();
 
+
       // Standard Pjax behaviour is to replace the submitted form with new content.
       // The returned view isn't always decided upon when the request
       // is fired, so the server might decide to change it based on its own logic,
@@ -468,9 +488,10 @@ $.entwine('ss', function($) {
         data: formData,
         type: 'POST',
         complete: function() {
-          $(button).removeClass('loading');
+          clearButton()
         },
         success: function(data, status, xhr) {
+          clearButton();
           form.removeClass('changed'); // TODO This should be using the plugin API
           if(callback) callback(data, status, xhr);