UX when using gin with Contnet Moderation and Workflows

Yeah, this is not optimal from UX PoV.

I'll make an attempt at changing this behavior/design.

Before I found this d.o issue I did a mockup of a better state. I'm not sure how much overlap this has with what's already been done on this issue.

I move the prio back to normal as this is a feature request.

@dalin, unfortunately no overlap. I went with my companies UX-designers design, but it was mostly as a band-aid in order for us to start using this theme.

I spun this up on https://simplytest.me Mostly, this is great! Better than what I had mocked up as an interim back-end solution by just reordering some things. Here's some screenshots from using just Drupal Core:

If I switch the moderation widget to "text field" then it's okay, but the field is too big:

And if I adjust my screensize we get some problems with things bumping together, or blocking the title. It's not too terrible, but should be cleaned up before we commit this.

@dalin, I took your feedback to my colleagues and this is what we came up as a solution for now:

Fullscreen:

Tablet (aligned left to make it stand out somewhat):

Mobile (labels hidden to save space)

Hi, I tested MR! 295 changes look good not attaching each screen screenshot as in #11 screenshots have already been added.

Rebased MR on latest 8.x-3.x.
Could not update MR, so will add patch here.

saschaeggi → changed the visibility of the branch 3359619-ux-when-using to hidden.

saschaeggi → changed the visibility of the branch 3359619-ux-when-using to active.

@devdits
Thanks for the re-roll.

> Could not update MR

Do you see a green "Get push access" button at the top of the page near the info about the fork?

> Rebased MR on latest 8.x-3.x.

In this latest reroll I'm seeing some elements bumping together.

This is happening at all screensizes.

Also, I'm not sure why many of the screenshots here don't include the words "Save as" or "Change to" because there isn't really a way to turn them off:
https://git.drupalcode.org/project/drupal/-/blob/11.x/core/modules/conte...

This needs a rebase and a dist recompile

New MR to 4.x (I assume that was the right thing to do too, sorry if not!)

Screenshot (issue described in #17 also no longer applies in 4.x it seems):

scott_euser → changed the visibility of the branch 3359619-ux-when-using to hidden.

This is looking good, except for 1 extra file components/content_moderation.scss that shouldn't be there. This file exists as styles/components/content_moderation.scss.

After that, this is RTBC from my side.

@saschaeggi as for new features, that should go into 4.1.x - are you ok that we create that branch and divert new features into that?

Updated MR

Unfortunately, this still needs some work.
The form container that is created in the gin sticky actions area doesn't actually do anything on form submit, so the moderation state remains unchanged.

Thanks for spotting and investigating! I see now what's going wrong; the sticky bar is outside of the <form> and therefore needs the form attribute set on the select element so that it gets submitted alongside the form. This is why the 'status' field without content moderation was already working, as it manually sets the form already on it. We now apply the same approach to moderation state.

This is now working for me. Great spot, Scott!

Thank you for addressing this issue! It's working for us on 10.3.11, gin 4.0.x-dev, php 8.3.14.

> It's working for us on... gin 4.0.x-dev

Hmmm, not for me. I can't get this to apply to dev _or_ 4.0.2. I think it needs a rebase, but there are conflicts in `src/GinContentFormHelper.php`. That's beyond my current GitLab skills.

We should also run through the full suite of tests in #10 so that we review all the different ways that the workflow widget can be configured.

scott_euser → changed the visibility of the branch 8.x-3.x to hidden.

just re-merged 4.0.x - still looks good to me

LGTM
Thanks for the rebase

Needs work to get this updated for 5.x

I am working on it.

After applying previous changes in latest 5.0.x the design is breaking. I am working on fixing it.

Fix the css selector a bit now it is ready for review on latest 5.0.x.

Looks, great but it does not look good with content translation enabled. Is this in scope of this issue?