Users miss "save" button and can't distinguish "editable" and "preview" areas

To append to this, we found this in two studies and it severely interrupted the process to the point that people exited the screen without actually saving and with that having the feeling it didn't work, and creating a new one.

I definitely think this is a major, it occurred in two studies and had a severe impact on the workflow. It is also a bug because it stopped people in their tracks, I am not sure if there was no guidance if people would have understood how to resolve this.

I helped technika in formulating this issue, this proposal outlines a idea on how to solve this. We think this is likely the direction it needs to take, to really create a noticeable save button and changing the layout is part of this as it requires a more holistic change.

Alright, so I have spend a bit talking this through with @dawhner and @damiankliop.

They mentioned that it will be hard to hide all of this functionality under "Advanced" as its a common thing to use if you have contextual filters and disabling/enabling preview is something you then do often.

I suggested the following:

• We don't show contextual filters form, unless there actually are contextual filters in use.
• We leave the "preview" last updated signaling issue for now, lets solve that in a followup.
• We lose the "advanced" button, as that doesn't inform you about its contents anyway.

• When we do show them, they have an "Apply" button to clearly signal you are applying this filter to the preview

Another thing for consideration is unchecking "Auto-preview" when you filled out a contextual filter value, since it won't auto update?

This could use some code! :) ?

Maybe i should have better stopped at the first contact with css, maybe this is still helpful for someone else :)

Postponing on #1840896: Views UI CSS Cleanup which is almost, because it updates some of the preview styling. Once that is in I would be happy to work on the CSS portion dawehner!

This issue has two parts:

1. Users miss "save" button
2. Users can't distinguish "editable" and "preview" areas

The second one is blocked by #1840896: Views UI CSS Cleanup, but the first is separate, and unblocked.
It could be moved to a separate issue.

Self-assigning to finish up.

Changes from #5 with CSS clean up.

Chrome preview

Firefox preview

For good measure adding before-patch screenshots.

Chrome preview before

Firefox preview before

I'll update the patch to fix the test failures.

Updated the tests to be able to find and click the preview button.

Can't review the css side of it, but especially the missing flickering is great!
From the PHP side it looks RTBC beside that single point here

+++ b/core/modules/views/views_ui/lib/Drupal/views_ui/ViewPreviewFormController.phpundefined
@@ -43,11 +50,20 @@ public function form(array $form, array &$form_state, EntityInterface $view) {
+    // Add a checkbox controlling whether or not this display auto-previews.
+    $form['controls']['live_preview'] = array(
+      '#weight' => 110,
+      '#type' => 'checkbox',
+      '#id' => 'edit-displays-live-preview',
+      '#title' => t('Auto preview'),
+      '#default_value' => config('views.settings')->get('ui.always_live_preview'),

This seems to duplicate just existing code.

This still needs the box like styling, the header of view config has.

xjm, tim.plunkett, dwehner, jessebeach and dmistry discussed and concluded that the Save button will be placed in the bottom left, following the standard Drupal pattern. The save button in the top right will be removed.

In addition, the Save button will be persistent. Currently it is only visible if the view has been modified.

I am +1 to this, keep in mind though that the "distinguish" part isn't solved by this.

tagging

Rerolled. dead_arm - goodluck.

huh?

huh?

what?

#22 says the patch failed testing while the patch in #21 is green. ???

I retested it from qa.d.o

Patch attached includes styling (#16 and #19) on the preview section in order to address the visual differentiation portion of this task.

Currently:

With patch applied:

Created a new issue, #2003440: Change the location of the save button, for the save button portion of this task, as #7 recommended it previously and the patches thus far have addressed the distinguishing areas portion only.

Add #27 to queue for testing.

#29: 1831894-27.patch queued for re-testing.

#29: 1831894-27.patch queued for re-testing.

Re-rolled patch.

Postponing on #1983164: Entity Forms in ajax requests don't find the route until Preview is working again, as we need all of the elements present in order to apply new styling correctly.

Preview is working, so the changes can be tested. The patch needed to be re-rolled. I got some of the styling further along, but the form markup isn't ideal to make all the changes requested, namely aligning the preview button with the field and having both of those be part of the preview header.

Currently:

With patch:

This doesn't install on simplytest.me

It really looks good though, can we get a reroll?

Rerolled.

@dawehner Did you check it? There are some wierd things happening.

relocate text

Ok, needs a little bit of work

Hei, everyone should be able to work on it :)

Rerolled patch attached. Can confirm it does not look good.

It appears the Views UI had some updates since the last patch:

• There is a new line above the form actions: 'Click on an item to edit that item's details.' I'm not sure if this is the correct place for this line. Should this be at the top of the page, as it is an instruction for the editing user?
• The css from views.exposed_form.css no longer applies to the exposed filters in the preview. This seems like a regression to me. Should this be a separate issue? Found relevant issue and added a patch there: #2396465: Views UI: Exposed Filter css is not applied

Screenshot before:

Screenshot after:

These screenshots look alright for me.

@Bojhan @yoroy
Is it okay to not tackle the argument part for now but just care about the save button area?

Sure, we can go ahead and remove that silly text too "Click on an item... blababa"

Sure, we can go ahead and remove that silly text too "Click on an item... blababa"

+1

I have updated the Views edit form to remove the silly text. As mentioned in my previous comment, there is a separate issue for the exposed filter styling in the View preview: #2396465: Views UI: Exposed Filter css is not applied

Screenshot after:

Looks fine for me.

Can we have a RTL screenshot?

Thanks jibran for reminding me to add RTL css :)

Screenshot after (LTR):

Screenshot after (RTL):

Still looks fine :)

This issue addresses a major bug and is a prioritised change (usability) as per https://www.drupal.org/core/beta-changes. Committed ab94733 and pushed to 8.0.x. Thanks!

Whooo!

Thanks, removing from UX sprint now.