Fix material admin button action icon issue on moderated content

acquia / df

Demo Framework - mirrored at https://git.drupal.org/project/df.git

https://www.drupal.org/project/df

18 stars 19 forks source link

Fix material admin button action icon issue on moderated content #123

Closed saltednut closed 5 years ago

saltednut commented 5 years ago

Seen in screenshot. We only see this in 8.x-4.x right now.

saltednut commented 5 years ago

Surprise its NOT material_admin - these are the material-icons added to the sidebar and there's code in moderation_sidebar for them. For some reason they are being added both before and after buttons but only in some cases. A good idea.

.ui-dialog-off-canvas #drupal-off-canvas .moderation-sidebar-button-wrapper i.material-icons {
  position: absolute;
  top: 5px;
  left: 5px;
  pointer-events: none;
  z-index: 11;
  background: transparent;
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

saltednut commented 5 years ago

Unfortunately we need a CSS fix here due to some new positioning rules that have been inherited from the sidebar updates.

saltednut commented 5 years ago

@kevinfunk can you look at this CSS sometime? It might be an easy patch to moderation_sidebar to get this fixed. https://git.drupalcode.org/project/moderation_sidebar/blob/8.x-1.x/css/moderation_sidebar.css#L54

saltednut commented 5 years ago

Ok actually I wasn't too far off. The icons are being added by df_tools_workflow. However, the nature of how container fields work in drupal is that indexes define the order. So the 'edit' icon would be above or below '#markup' added with the icon. The FIRST solution is to provide keys here that will be respected and stop using 0 or 1 or whatever as the index. See: fa79c9b

Second part of the solution comes from a moderation_sidebar patch...

saltednut commented 5 years ago

Okay, as of 6fb1f6435bd69dadcf7f31c50f4a0cd5a8e215fe this is fixed. Rather than going nuts and patching what he has in moderation_sidebar, I've just added ANOTHER wrapper here in df_tools_workflow and now the CSS thats currently in moderation_sidebar works. What's missing is just .ui-dialog-off-canvas #drupal-off-canvas .moderation-sidebar-form-button { position: relative } so maybe we can provide a patch but tbh its just one inline style so IDK.

saltednut commented 5 years ago

I would @mortenson but I guess I can't? Maybe he'll see this. If so, do you want me to file an issue? DO you even want the material-icons stuff in your code anymore? lmk if you see this and care either way!

mortenson commented 5 years ago

I've been summoned

mortenson commented 5 years ago

I'm not following the issue super well but if this is just about adding one sensible CSS rule to moderation_sidebar that sounds like a good issue to make @brantwynn

saltednut commented 5 years ago

Thanks @mortenson and sorry for the ping. I can file an issue, I just wasn't sure how anyone else would test it since the icons are only added when using Demo Framework's df_tools_workflow module. (Unless someone else is adding the icons via an alter hook too?) We can definitely file a patch if you'd accept it.

mortenson commented 5 years ago

@brantwynn Your call! I'd accept any simple change that doesn't negatively affect current styling.