styling for buttons that submit long-running forms

wagtail/contrib/wagtailstyleguide/templates/wagtailstyleguide/base.html

@@ -291,7 +291,29 @@
             <a href="#" class="button no">No</a>
             <a href="#" class="button button-small no">No</a> 
 
-            
+            <h3>Buttons with internal loading indicators (currently only <code>button</code> supported)</h3>
+            <p class="help-block help-warning">Note that in some browsers, clicking these buttons minutely affects the appearance of Dropdown buttons, below. This is yet to be resolved.</p>
+            <button class="button-longrunning"><span class="icon icon-spinner"></span>Click me</button>
+
+            <h4>Secondary</h4>
+            <button class="button-secondary button-longrunning"><span class="icon icon-spinner"></span>Click me</button>
+
+            <h4>Small</h4>
+            <button class="button-small button-longrunning"><span class="icon icon-spinner"></span>Click me</button>
+           
+            <h4>Buttons where the text is replaced on click</h4>
+            <button class="button-longrunning" data-clicked-text="Test"><span class="icon icon-spinner"></span><em>Click me</em></button>
+
+            <h4>Arbitrarily bigger</h4>
+            <style>
+                #button-arbitrarily-bigger{
+                    font-size:1.5em;
+                    padding:1.1em 2.4em;
+                    height:3.5em;
+                }
+            </style>
+            <button class="button-longrunning" id="button-arbitrarily-bigger"><span class="icon icon-spinner"></span>Click me</button>
+
             <h3>Mixtures</h3>
 
             <button class="icon text-replace yes icon-tick">A proper button</button>

wagtail/wagtailadmin/static_src/wagtailadmin/js/core.js

@@ -134,6 +134,7 @@ $(function() {
         }
     }
 
+
     /* Functions that need to run/rerun when active tabs are changed */
     $(document).on('shown.bs.tab', function(e) {
         // Resize autosize textareas
@@ -141,4 +142,33 @@ $(function() {
             autosize.update($(this).get());
         });
     });
+
+    /* Debounce submission of long-running forms and add spinner to give sense of activity */
+    $(document).on('click', 'button.button-longrunning', function(e){
+        var $self = $(this);
+        var timeoutLength = 10000; // Button re-enables after this time, to allow for errors in submissions causing forms to be permanently un-usable
+        var dataname = 'disabledtimeout'
+        var $replacementElem = $('em', $self);
+
+        e.preventDefault();
+
+        // save original button value
+        $self.data('original-text', $self.text());
+
+        if(!$self.data(dataname)) {
+            $self.data(dataname, setTimeout(function(){
+                clearTimeout($self.data(dataname));
+                $self.prop('disabled', '').removeData(dataname).removeClass('button-longrunning-active')
+                $replacementElem.text($self.data('original-text'));
+            }, timeoutLength));
+            
+            if($self.data('clicked-text') && $replacementElem.length){
+                $replacementElem.text($self.data('clicked-text'));
+            }    
+            
+            $self.closest('form').submit();
+            $self.addClass('button-longrunning-active').prop('disabled', 'true');
+               
+        }
+    });
 });

wagtail/wagtailadmin/static_src/wagtailadmin/scss/components/forms.scss

@@ -73,8 +73,8 @@ input, textarea, select, .richtext, .tagit{
     }
     &:disabled, &[disabled], &:disabled:hover, &[disabled]:hover{
         background-color:inherit;
-        cursor:not-allowed;
         color:$color-grey-4;
+        cursor:default;
     }  
 }
 
@@ -354,7 +354,7 @@ input[type=submit], input[type=reset], input[type=button], .button, button{
         background-color:$color-grey-3 !important;
         border-color:$color-grey-3 !important;
         color:lighten($color-grey-2, 15%) !important;
-        cursor:not-allowed;
+        cursor:default !important;
     }
     &.button-secondary:disabled, &.button-secondary[disabled], &.button-secondary.disabled{
         background-color: white !important;
@@ -366,6 +366,43 @@ input[type=submit], input[type=reset], input[type=button], .button, button{
         border:0 !important;
     }
 
+    &.button-longrunning{
+        span{
+            @include transition(all 0.3s ease);
+            @include transform(scale(0.9));
+            display:inline-block;
+            height:0.9em;
+            position:relative;
+            opacity:0;
+            width:0;
+            visibility:hidden;
+            text-align:center;
+            padding-right:0em;
+        }
+        em{
+            font-style:normal;
+        }
+        &.button-longrunning-active span{
+            @include transform(scale(1));
+            visibility:visible;
+            width:1em;
+            opacity:0.8;
+            padding-right:0.5em;
+        }
+
+        .icon-spinner:after{
+            text-align:center;
+            position:absolute;
+            left:0;
+            margin:0;
+            line-height:1em;
+            display: inline-block;
+            font-size:1em;
+        }
+    }
+    
+
+
     @media screen and (min-width: $breakpoint-mobile){
         font-size:0.95em;
         padding:0 1.4em;

wagtail/wagtailadmin/static_src/wagtailadmin/scss/layouts/login.scss

@@ -47,7 +47,7 @@ form{
         width:auto;
         color:white;
     }
-    input[type=submit]{
+    button{
         font-size:1.5em;
         padding:1.1em 2.4em;
         height:3.5em;

wagtail/wagtailadmin/templates/wagtailadmin/login.html

@@ -56,7 +56,7 @@
                     </li>
                 {% endcomment %}
                 <li class="submit">
-                    <input type="submit" value="{% trans 'Sign in' %}" tabindex="3"/>
+                    <button type="submit" class="button-longrunning" tabindex="3" data-clicked-text="Signing in..."><span class="icon icon-spinner"></span><em>{% trans 'Sign in' %}</em></button>
                 </li>
             </ul>
         </form>