diff --git a/core/misc/ajax.js b/core/misc/ajax.js index dc3fe34..8884d33 100644 --- a/core/misc/ajax.js +++ b/core/misc/ajax.js @@ -461,11 +461,10 @@ $(this.element).after(this.progress.element); } else if (this.progress.type === 'throbber') { - this.progress.element = $('
 
'); if (this.progress.message) { - this.progress.element.find('.throbber').after('
' + this.progress.message + '
'); + Drupal.announce(this.progress.message); } - $(this.element).after(this.progress.element); + $(this.element).addClass('is-loading'); } else if (this.progress.type === 'fullscreen') { this.progress.element = $('
 
'); @@ -478,9 +477,7 @@ */ Drupal.ajax.prototype.success = function (response, status) { // Remove the progress element. - if (this.progress.element) { - $(this.progress.element).remove(); - } + $(this.element).removeClass('is-loading'); if (this.progress.object) { this.progress.object.stopMonitoring(); } diff --git a/core/misc/throbber.gif b/core/misc/throbber.gif new file mode 100644 index 0000000..f2603e8 --- /dev/null +++ b/core/misc/throbber.gif @@ -0,0 +1,6 @@ +GIF89aŽ{{{! NETSCAPE2.0! ,@`)KkŏA|ad0L9~\8L Ǹ0, i{qBC~H'JRĨ`f4&a! ,` sɺ(t34M!-0,l#))9 !q(i<hB 3˥(`  ,9%cm +b0AY_e! ,dRj:ړtG8$c02P hi,ǑQ0X[LEck5`ڭP2F! a @q dfz{lQzK! ,`BjR:$BPFq(ˢ J@0i-2͇ Qck6[G`m:pQ4fqow! ,d1j}MS@S\ H9#IrPØi8f..r$ł|nl +*T\![͂l,Q0@(KFMO{ ql{! ,^I 3a!P(Ol~`8 LÇ!@$Lgx|f ,`"`Jʼn"cUP +GAw< tz! ,h9C4kk\ &I&l )F-P@ch H!ш4< +  x@R`0C"8h0BfgX(rc}Y + 1!,aйҚX]mKl[)"aĢ\*"$t& #9@1pP`,`I,8 S 8U,Q`(d `3-qH$ 1T{; \ No newline at end of file diff --git a/core/modules/quickedit/css/quickedit.icons.css b/core/modules/quickedit/css/quickedit.icons.css index 7845416..06cd5f8 100644 --- a/core/modules/quickedit/css/quickedit.icons.css +++ b/core/modules/quickedit/css/quickedit.icons.css @@ -64,9 +64,6 @@ .quickedit .icon-close:active:before { background-image: url(../../../misc/icons/000000/ex.svg); } -.quickedit .icon-throbber:before { - background-image: url(../images/icon-throbber.gif); -} .quickedit .icon-pencil:before { background-image: url(../../../misc/icons/5181c6/pencil.svg); background-position: left center; diff --git a/core/modules/quickedit/css/quickedit.theme.css b/core/modules/quickedit/css/quickedit.theme.css index c02daaf..c07803a 100644 --- a/core/modules/quickedit/css/quickedit.theme.css +++ b/core/modules/quickedit/css/quickedit.theme.css @@ -246,11 +246,24 @@ .quickedit-button.action-save:active { border: 1px solid #a0a0a0; } -.quickedit-button.action-saving, -.quickedit-button.action-saving:hover, -.quickedit-button.action-saving:active { - background-color: #e4e4e4; - background-image: none; - border-color: #d2d2d2; - color: #5a5a5a; + +.quickedit-button.action-save.is-loading::before, +.quickedit-button.action-save.is-loading::after { + content: none; +} +.quickedit-button.action-save.is-loading { + background: url(../../../misc/throbber.gif) no-repeat 95% center, + -webkit-linear-gradient(top, #007bc6, #0071b8); + background: url(../../../misc/throbber.gif) no-repeat 95% center, + -moz-linear-gradient(top, #007bc6, #0071b8); + background: url(../../../misc/throbber.gif) no-repeat 95% center, + -o-linear-gradient(top, #007bc6, #0071b8); + background: url(../../../misc/throbber.gif) no-repeat 95% center, + linear-gradient(to bottom, #007bc6, #0071b8); +} +[dir="ltr"] .quickedit-button.action-save.is-loading { + padding-right: 25px; /* LTR */ +} +[dir="rtl"] .quickedit-button.action-save.is-loading { + padding-left: 25px; } diff --git a/core/modules/quickedit/js/views/EntityToolbarView.js b/core/modules/quickedit/js/views/EntityToolbarView.js index 0cd7f0d..bfa5fe2 100644 --- a/core/modules/quickedit/js/views/EntityToolbarView.js +++ b/core/modules/quickedit/js/views/EntityToolbarView.js @@ -93,7 +93,7 @@ // The saving throbber is not managed by AJAX system. The // EntityToolbarView manages this visual element. $button - .removeClass('action-saving icon-throbber icon-end') + .removeClass('is-loading') .text(Drupal.t('Save')) .removeAttr('disabled') .attr('aria-hidden', !isDirty); @@ -101,7 +101,7 @@ // The changes to the fields of the entity are being committed. case 'committing': $button - .addClass('action-saving icon-throbber icon-end') + .addClass('is-loading') .text(Drupal.t('Saving')) .attr('disabled', 'disabled'); break; diff --git a/core/modules/system/css/system.module.css b/core/modules/system/css/system.module.css index ac1fa33..48b7975 100644 --- a/core/modules/system/css/system.module.css +++ b/core/modules/system/css/system.module.css @@ -4,6 +4,52 @@ */ /** + * is-loading. + * + * @see ajax.js + */ +/* General Throbbing style */ + +[dir="ltr"] .is-loading::after { + content: ''; + background-image: url(../../../misc/throbber.gif); + display: inline-block; + background-repeat: no-repeat; + position: absolute; + height: 18px; + width: 19px; + margin: 0 5px; +} +[dir="rtl"] .is-loading::before { + content: ''; + background-image: url(../../../misc/throbber.gif); + display: inline-block; + background-repeat: no-repeat; + position: absolute; + height: 18px; + width: 19px; + margin: 0 5px; +} +[dir="ltr"] a.button.is-loading { + padding-right: 25px; +} +[dir="rtl"] a.button.is-loading { + padding-left: 25px; +} +input.is-loading { + background-image: url(../../../misc/throbber.gif); + background-position: 95% center; /* LTR */ + background-repeat: no-repeat; +} +[dir="ltr"] input.is-loading { + padding-right: 25px; /* LTR */ +} +[dir="rtl"] input.is-loading { + background-position: 0 -18px; + padding-left: 25px; +} + +/** * Autocomplete. * * @see autocomplete.js @@ -33,7 +79,6 @@ border-width: 0; padding: 0; } - /** * Collapsible details. * diff --git a/core/themes/seven/css/components/buttons.theme.css b/core/themes/seven/css/components/buttons.theme.css index 36a4d6a..f956ffe 100644 --- a/core/themes/seven/css/components/buttons.theme.css +++ b/core/themes/seven/css/components/buttons.theme.css @@ -62,6 +62,28 @@ -o-transition: none; transition: none; } +[dir="ltr"] .button.is-loading { + background: url(../../../../misc/throbber.gif) no-repeat 95% center, + -webkit-linear-gradient(top, #f6f6f3, #e7e7df); + background: url(../../../../misc/throbber.gif) no-repeat 95% center, + -moz-linear-gradient(top, #f6f6f3, #e7e7df); + background: url(../../../../misc/throbber.gif) no-repeat 95% center, + -o-linear-gradient(top, #f6f6f3, #e7e7df); + background: url(../../../../misc/throbber.gif) no-repeat 95% center, + linear-gradient(to bottom, #f6f6f3, #e7e7df); + padding-right: 2em; +} +[dir="rtl"] .button.is-loading { + background: url(../../../../misc/throbber.gif) no-repeat 5% center, + -webkit-linear-gradient(top, #f6f6f3, #e7e7df); + background: url(../../../../misc/throbber.gif) no-repeat 5% center, + -moz-linear-gradient(top, #f6f6f3, #e7e7df); + background: url(../../../../misc/throbber.gif) no-repeat 5% center, + -o-linear-gradient(top, #f6f6f3, #e7e7df); + background: url(../../../../misc/throbber.gif) no-repeat 5% center, + linear-gradient(to bottom, #f6f6f3, #e7e7df); + padding-left: 2em; +} .button--primary { border-color: #1e5c90; @@ -99,6 +121,26 @@ border-color: #144b78; box-shadow: inset 0 1px 3px hsla(0, 0%, 0%, 0.2); } +.button--primary.is-loading { + background: url(../../../../misc/throbber.gif) no-repeat 95% center, + -webkit-linear-gradient(top, #007bc6, #0071b8); + background: url(../../../../misc/throbber.gif) no-repeat 95% center, + -moz-linear-gradient(top, #007bc6, #0071b8); + background: url(../../../../misc/throbber.gif) no-repeat 95% center, + -o-linear-gradient(top, #007bc6, #0071b8); + background: url(../../../../misc/throbber.gif) no-repeat 95% center, + linear-gradient(to bottom, #007bc6, #0071b8); +} +[dir="rtl"] .button--primary.is-loading { + background: url(../../../../misc/throbber.gif) no-repeat 5% center, + -webkit-linear-gradient(top, #007bc6, #0071b8); + background: url(../../../../misc/throbber.gif) no-repeat 5% center, + -moz-linear-gradient(top, #007bc6, #0071b8); + background: url(../../../../misc/throbber.gif) no-repeat 5% center, + -o-linear-gradient(top, #007bc6, #0071b8); + background: url(../../../../misc/throbber.gif) no-repeat 5% center, + linear-gradient(to bottom, #007bc6, #0071b8); +} /** * Overrides styling from system.theme. @@ -133,6 +175,9 @@ cursor: default; text-shadow: 0 1px hsla(0, 0%, 100%, 0.6); } +.button:disabled.is-loading { + background: #ededed url(../../../../misc/throbber.gif) no-repeat 95% center; +} /* Link actions. */ diff --git a/core/themes/seven/css/style.css b/core/themes/seven/css/style.css index aa78e66..f0c3eac 100644 --- a/core/themes/seven/css/style.css +++ b/core/themes/seven/css/style.css @@ -918,6 +918,19 @@ textarea.form-textarea { box-shadow: 0 1px 2px hsla(0, 0%, 0%, 0.125); } } +input.form-autocomplete.is-loading, +input.form-text.is-loading, +input.form-tel.is-loading, +input.form-email.is-loading, +input.form-url.is-loading, +input.form-search.is-loading, +input.form-number.is-loading, +input.form-color.is-loading, +input.form-file.is-loading, +textarea.form-textarea.is-loading, +select.form-select.is-loading { + background: #fff url(../../misc/throbber.gif) no-repeat 95% center; +} /** * Improve spacing of cancel link. @@ -1077,23 +1090,22 @@ div.admin-options div.form-item { /* Field UI */ -#field-display-overview input.field-plugin-settings-edit { - margin: 0; +input.field-plugin-settings-edit { padding: 1px 8px; } -#field-display-overview tr.field-plugin-settings-changed { +tr.field-plugin-settings-changed { background: #ffffbb; } -#field-display-overview tr.drag { +tr.drag { background: #ffee77; } -#field-display-overview tr.field-plugin-settings-editing { +tr.field-plugin-settings-editing { background: #d5e9f2; } -#field-display-overview .field-plugin-settings-edit-form .form-item { +.field-plugin-settings-edit-form .form-item { margin: 10px 0; } -#field-display-overview .field-plugin-settings-edit-form .form-submit { +.field-plugin-settings-edit-form .form-submit { margin-bottom: 0; }