Problem/Motivation

Field UI is using ajax on the manage form display to allow users to configure fields. The new Claro ajax throbber is not positioned correctly when a field display setting form is being opened, or when a field display setting is being saved.

Proposed resolution

Remaining tasks

User interface changes

CommentFileSizeAuthor
#7 interdiff-3068907-2-7.txt4.22 KBhuzooka
#7 claro-field_ui_ajax_throbber-3068907-7.patch3.81 KBhuzooka
#5 field-plugin-settings-edit-form--button-margin.png91.23 KBhuzooka
#5 field-plugin-settings-edit-form--order.png119.35 KBhuzooka
#5 field-plugin-settings-edit-wrapper.png41.8 KBhuzooka
#2 3068907-2.patch1.22 KBfinnsky
Screen Shot 2019-07-19 at 16.55.27.png17.7 KBlauriii
Screen Shot 2019-07-19 at 16.55.12.png24.54 KBlauriii

Comments

lauriii created an issue. See original summary.

finnsky’s picture

finnsky commented
Status: Active » Needs review
StatusFileSize
new 3068907-2.patch1.22 KB

Added small patch, but seems that field UI need some more design updates. related to colors and spacings

lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented

Thank you! This works great at least with Chrome. Would be nice to do some cross-browser testing on this one.

  1. While working on this, did you consider a solution that would be more generic? Or is this something we should or have to fix specifically only for the Field UI?
  2. +++ b/css/src/components/field-ui.css
@@ -2,9 +2,21 @@
+.field-ui-overview .field-plugin-settings-edit-wrapper {
...
+.field-ui-overview .field-plugin-settings-edit-wrapper .ajax-progress--throbber {

@@ -15,8 +27,13 @@
+.field-ui-overview .field-plugin-settings-edit-form .ajax-progress--throbber {

    Do you know if .field-plugin-settings-edit-wrapper and .field-plugin-settings-edit-form can be rendered outside of .field-ui-overview? Trying to ensure that we don't make the selectors unnecessarily specific.

huzooka’s picture

huzooka
Primary language Hungarian
Location Hungary 🇭🇺🇪🇺
commented

Reviewing.

huzooka’s picture

huzooka
Primary language Hungarian
Location Hungary 🇭🇺🇪🇺
commented
Status: Needs review » Needs work
StatusFileSize
new field-plugin-settings-edit-wrapper.png41.8 KB
new field-plugin-settings-edit-form--order.png119.35 KB
new field-plugin-settings-edit-form--button-margin.png91.23 KB

Re #2:

  1. +++ b/css/src/components/field-ui.css
@@ -2,9 +2,21 @@
+.field-ui-overview .field-plugin-settings-edit-wrapper .ajax-progress--throbber {

    .field-plugin-settings-edit-wrapper .ajax-progress--throbber is enough here. 

  2. +++ b/css/src/components/field-ui.css
@@ -2,9 +2,21 @@
+  order: -1;

    I think it would be better to leave order unset: [screenshot]

  3. +++ b/css/src/components/field-ui.css
@@ -15,8 +27,13 @@
+.field-ui-overview .field-plugin-settings-edit-form .ajax-progress--throbber {

    .field-plugin-settings-edit-form .ajax-progress--throbber would be enough. But instead of that, please move this rule to our form.css and change the selector to .form-actions .ajax-progress--throbber (form actions is near to the end of that file). This issue occurs in every ajax-submitted forms, not just this one. 

  4. +++ b/css/src/components/field-ui.css
@@ -15,8 +27,13 @@
+  order: 1;

    I'd leave the progress indicator next to the button that was clicked, and won't move it to the end of the form actions. 

  5. +++ b/css/src/components/field-ui.css
@@ -15,8 +27,13 @@
 #field-display-overview .field-plugin-settings-edit-form .form-submit {
   margin-bottom: 0;
+  margin-top: 0;
 }

    Instead of killing the margin-top, I'd remove this whole rule completely. It's much nicer if the element of the form actions break into multiple lines.

huzooka’s picture

huzooka
Primary language Hungarian
Location Hungary 🇭🇺🇪🇺
commented
Assigned: Unassigned » huzooka
huzooka’s picture

huzooka
Primary language Hungarian
Location Hungary 🇭🇺🇪🇺
commented
Assigned: huzooka » Unassigned
Status: Needs work » Needs review
StatusFileSize
new claro-field_ui_ajax_throbber-3068907-7.patch3.81 KB
new interdiff-3068907-2-7.txt4.22 KB

This patch addresses #6 and only adds Field UI admin styles if needed.

  • lauriii committed 1fd4ead on 8.x-1.x 
    Issue #3068907 by huzooka, finnsky, lauriii: Field UI ajax throbber not...
lauriii’s picture

lauriii
he/him
Primary language Finnish
Location Finland
commented
Status: Needs review » Fixed

Looks good. I confirmed with the design team that this is how the throbber is supposed to behave. I also generated a diff manually using the diff command to review the changes compared to the original file.

Committed and pushed!

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.