kopia lustrzana https://github.com/wagtail/wagtail
Merge branch 'davecranwell-longrunning-forms'
Matt Westcott
commit
ed8399caee
1
.jscsrc
1
.jscsrc
|
|
@ -11,6 +11,7 @@
|
|||
"node_modules/**",
|
||||
"**/*.min.js",
|
||||
"**/vendor/**/*.js",
|
||||
"./wagtail/wagtailadmin/static/**",
|
||||
"./wagtail/wagtailadmin/templates/wagtailadmin/edit_handlers/inline_panel.js",
|
||||
"./wagtail/contrib/wagtailsearchpromotions/templates/wagtailsearchpromotions/includes/searchpromotions_formset.js",
|
||||
"./wagtail/wagtailusers/templates/wagtailusers/groups/includes/page_permissions_formset.js",
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@ Changelog
|
|||
* Simplified body_class in default homepage template (Josh Barr)
|
||||
* page_published signal now called with the revision object that was published (Josh Barr)
|
||||
* Added an overrideable favicon to the admin interface
|
||||
* Added spinner animations to long-running form submissions
|
||||
* Fix: Deleting a page permission from the groups admin UI does not immediately submit the form
|
||||
* Fix: Wagtail userbar is shown on pages that do not pass a `page` variable to the template (e.g. because they override the `serve` method)
|
||||
|
||||
|
|
|
|||
|
|
@ -17,6 +17,7 @@ What's new
|
|||
* Simplified body_class in default homepage template
|
||||
* page_published signal now called with the revision object that was published
|
||||
* Added a favicon to the admin interface, customisable by overriding the ``branding_favicon`` block (see :ref:`custom_branding`).
|
||||
* Added spinner animations to long-running form submissions
|
||||
|
||||
Bug fixes
|
||||
~~~~~~~~~
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -141,4 +141,45 @@ $(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 $replacementElem = $('em', $self);
|
||||
var reEnableAfter = 30;
|
||||
var dataName = 'disabledtimeout'
|
||||
|
||||
// Disabling a button prevents it submitting the form, so disabling
|
||||
// must occur on a brief timeout only after this function returns.
|
||||
|
||||
var timeout = setTimeout(function() {
|
||||
if (!$self.data(dataName)) {
|
||||
// Button re-enables after a timeout to prevent button becoming
|
||||
// permanently un-usable
|
||||
$self.data(dataName, setTimeout(function() {
|
||||
clearTimeout($self.data(dataName));
|
||||
|
||||
$self.prop('disabled', '').removeData(dataName).removeClass('button-longrunning-active')
|
||||
|
||||
if ($self.data('clicked-text')) {
|
||||
$replacementElem.text($self.data('original-text'));
|
||||
}
|
||||
|
||||
}, reEnableAfter * 1000));
|
||||
|
||||
if ($self.data('clicked-text') && $replacementElem.length) {
|
||||
// Save current button text
|
||||
$self.data('original-text', $replacementElem.text());
|
||||
|
||||
$replacementElem.text($self.data('clicked-text'));
|
||||
}
|
||||
|
||||
// Disabling button must be done last: disabled buttons can't be
|
||||
// modified in the normal way, it would seem.
|
||||
$self.addClass('button-longrunning-active').prop('disabled', 'true');
|
||||
}
|
||||
|
||||
clearTimeout(timeout);
|
||||
}, 10);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -348,7 +348,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;
|
||||
|
|
@ -370,6 +370,41 @@ input[type=submit], input[type=reset], input[type=button], .button, button{
|
|||
}
|
||||
}
|
||||
|
||||
&.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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -26,11 +26,13 @@
|
|||
<ul>
|
||||
<li class="actions">
|
||||
<div class="dropdown dropup dropdown-button match-width">
|
||||
<input type="submit" value="{% trans 'Save as draft' %}" class="button" />
|
||||
<button type="submit" class="button-longrunning" tabindex="3" data-clicked-text="{% trans 'Saving...' %}"><span class="icon icon-spinner"></span><em>{% trans 'Save draft' %}</em></button>
|
||||
<div class="dropdown-toggle icon icon-arrow-up"></div>
|
||||
<ul role="menu">
|
||||
{% if parent_page_perms.can_publish_subpage %}
|
||||
<li><input type="submit" name="action-publish" value="{% trans 'Publish' %}" class="button" /></li>
|
||||
<li>
|
||||
<button type="submit" name="action-publish" value="action-publish" class="button-longrunning" tabindex="3" data-clicked-text="{% trans 'Publishing...' %}" {% if page.locked %}disabled {% endif %}><span class="icon icon-spinner"></span><em>{% trans 'Publish' %}</em></button>
|
||||
</li>
|
||||
{% endif %}
|
||||
<li><input type="submit" name="action-submit" value="{% trans 'Submit for moderation' %}" class="button" /></li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
<ul>
|
||||
<li class="actions">
|
||||
<div class="dropdown dropup dropdown-button match-width">
|
||||
<input type="submit" value="{% if page.locked %}{% trans 'Page locked' %}{% else %}{% trans 'Save draft' %}{% endif %}" class="button" {% if page.locked %}disabled {% endif %} />
|
||||
<button type="submit" class="button-longrunning" tabindex="3" data-clicked-text="{% trans 'Saving...' %}" {% if page.locked %}disabled {% endif %}><span class="icon icon-spinner"></span><em>{% if page.locked %}{% trans 'Page locked' %}{% else %}{% trans 'Save draft' %}{% endif %}</em></button>
|
||||
|
||||
{% if not page.locked %}
|
||||
<div class="dropdown-toggle icon icon-arrow-up"></div>
|
||||
|
|
@ -44,7 +44,9 @@
|
|||
<li><a href="{% url 'wagtailadmin_pages:delete' page.id %}" class="shortcut">{% trans 'Delete' %}</a></li>
|
||||
{% endif %}
|
||||
{% if page_perms.can_publish %}
|
||||
<li><input type="submit" name="action-publish" value="{% trans 'Publish' %}" class="button" /></li>
|
||||
<li>
|
||||
<button type="submit" name="action-publish" value="action-publish" class="button-longrunning" tabindex="3" data-clicked-text="{% trans 'Publishing...' %}" {% if page.locked %}disabled {% endif %}><span class="icon icon-spinner"></span><em>{% trans 'Publish' %}</em></button>
|
||||
</li>
|
||||
{% endif %}
|
||||
<li><input type="submit" name="action-submit" value="{% trans 'Submit for moderation' %}" class="button" /></li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -32,7 +32,9 @@
|
|||
{% for field in uploadform %}
|
||||
{% include "wagtailadmin/shared/field_as_li.html" with field=field %}
|
||||
{% endfor %}
|
||||
<li><input type="submit" value="{% trans 'Save' %}" /></li>
|
||||
<li>
|
||||
<button type="submit" class="button-longrunning" data-clicked-text="{% trans 'Uploading...' %}"><span class="icon icon-spinner"></span><em>{% trans 'Upload' %}</em></button>
|
||||
</li>
|
||||
</ul>
|
||||
</form>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -21,7 +21,9 @@
|
|||
{% for field in form %}
|
||||
{% include "wagtailadmin/shared/field_as_li.html" with field=field %}
|
||||
{% endfor %}
|
||||
<li><input type="submit" value="{% trans 'Save' %}" /></li>
|
||||
<li>
|
||||
<button type="submit" class="button-longrunning" data-clicked-text="{% trans 'Uploading...' %}"><span class="icon icon-spinner"></span><em>{% trans 'Upload' %}</em></button>
|
||||
</li>
|
||||
</ul>
|
||||
</form>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
{% for field in form %}
|
||||
{% include "wagtailadmin/shared/field_as_li.html" with field=field %}
|
||||
{% endfor %}
|
||||
<li><input type="submit" value="{% trans 'Insert' %}" /></li>
|
||||
<li><button type="submit" class="button-longrunning"><span class="icon icon-spinner"></span><em>{% trans 'Insert' %}</em></button></li>
|
||||
</ul>
|
||||
</form>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -44,7 +44,9 @@
|
|||
{% include "wagtailadmin/shared/field_as_li.html" with field=field %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
<li><input type="submit" value="{% trans 'Upload' %}" /></li>
|
||||
<li>
|
||||
<button type="submit" class="button-longrunning" data-clicked-text="{% trans 'Uploading...' %}"><span class="icon icon-spinner"></span><em>{% trans 'Upload' %}</em></button>
|
||||
</li>
|
||||
</ul>
|
||||
</form>
|
||||
</section>
|
||||
|
|
|
|||
Ładowanie…
Reference in New Issue