Content Moderation form in displayed entity looks broken

Maybe this needs some more love, it'd be great to align it more with the entity form widget, but for now, this patch solves the issue.

No, let me take a look at that!

I think this will need a bit more sign off than #3, but I think it looks good.

Wonder if the yellow is too yellow, maybe #FFFFEE would be better than #FFFFDD.

right, I'm not sure we can get it perfect in this issue, but better is good.

As lots of people seem to be on vacation at the moment maybe @webchick @bojhan @lauriii or @cottser could sign off? On the condition we have a follow up for someone like @jojototh to mock up a better solution.

This is running on the frontend theme, so I wonder how we can isolate this from being affected by other theme elements? I'm sure I remember @tedbow talking about this for some settings tray stuff.

The all-the-way-around border is definitely an improvement.

1. +++ b/core/modules/content_moderation/css/content_moderation.module.css
   @@ -10,10 +10,16 @@ ul.entity-moderation-form {
   +}
   +
   +
    ul.entity-moderation-form input[type=submit] {
   

   I think there's an extra newline there.

2. +++ b/core/modules/content_moderation/css/content_moderation.theme.css
   @@ -3,5 +3,7 @@
   +  background: #FFFFDD;
   

   I think we prefer lowercase and the shorthand for the hex (so #ffd rather than #FFFFDD).

   However, this yellow color is only used in one other place in core, in tabledrag when the row is actively being dragged. This area is not being actively manipulated, so I don't think this yellow is the correct choice. Maybe just white? Do we need to override the background color at all?

3. +++ b/core/modules/content_moderation/css/content_moderation.theme.css
   @@ -3,5 +3,7 @@
   -  border-bottom: 1px solid gray;
   +  border: 1px solid gray;
   

   This isn't used as a border color anywhere in core that I can find, neither as gray nor as its hex equivalent which is #808080 I think. However, since the color is in HEAD, I guess that's out of scope. But let's file a followup to refine the design and theming for this?

Also, does it need custom margins at all? Why not reuse existing design patterns rather than coming up with a new one?

Really we should not have backend developers designing by picking arbitrary colors and margins though, so tagging for usability feedback. :)

Haha, this looks interesting.

Just a few questions before proposing ideas:

• Can we move it above the author name/ out of the pink body?
• Why are we primarily designing this in Bartik? Is that the 80%?

@Bojhan-

• This is added in hook_entity_view(), so not sure if we can move it outside of the pink body without refactoring a load of things. I'll have a little play, and if not can we move this to the follow up?
• I expect very few people run a live site on Bartik, so this will represent less than 1% of the users, but I hope we can isolate this enough that it doesn't matter which theme you have.

@xjm-

• All sound like fine changes for this initial step. I'll get another patch together today.

This patch implements the changes suggested by @xjm in #11.

I looked at moving the form outside the red area, above the author, tabs, or title, this doesn't seem possible. I also discovered the weight is useless because it is overridden in \Drupal\Core\Entity\EntityViewBuilder::buildMultiple because content_moderation_control is a component and has it's own weight.

Bartik is useless to test against, so here's a screenshot of it with Bootstrap:

Going back to "Needs work" because it looks... bad.

My suggestion is to tone it down, white background, gray dashed border and fix the alignment. Tested with 10 most popular D8 themes and it looks pretty consistent.

Thanks @jojototh!

Keeping assigned to me, I'm in the middle of a couple of other patches, but once done I'll roll the patch for this.

Here's the patch for @jojototh's designs.

(all credit to @jojototh for the CSS, all I did was generate the interdiff and patch)

thanks @wim :) I've tested the patch and visually it looks as intended, but someone else should probably review the code;)

Screenshot:

RTBC++

Sounds good!

Forcing a white background will make it stand out enough on the pink background, which has literally no meaning to anyone - validated in 2009/2011/2015 :P.

I am curious how this will end up looking in Seven. We can make that look quite good.

We reviewed this LIVE on the weekly UX call today. Emilie was able to do the CSS review.

Around the Seven screenshot, @jojototh responded that this would be highly unlikely to ever appear in Seven, since this is a doohickey displayed on the front-end of the site when viewing a piece of content. This makes sense to me, and this patch is a big improvement over the original screenshot.

Committed and pushed to 8.5.x and cherry-picked to 8.4.x. Thanks!

After some Git struggles, finally did that. ;)

Hi,

Why was in the first place decided to have a Content Moderation form on the view page ? Could someone point me to a discussion about that decision ? I don't like it at all, btu if there are strong reasons...

@guix - This is something that came from Workbench Moderation, and allows you to moderate entities with our strictly editing them.

If you have real concerns please open a new issue. There are a couple making their rounds about different issues with the moderation form.

Thank you @timmillwood !

FYI, I created an issue there, if some other people agree and want to do the work... https://www.drupal.org/project/drupal/issues/2959657