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{lQ zK ! , `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 ! , h9C 4kk\
&I&l
)F-P@chH!ш4<
+ x@R`0C"8h0BfgX(rc}Y
+1 ! , aйҚX]mKl[)"aĢ\*"$t	@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;
}