Change colours of edit module icons in header and footer area

[drmenzelit]

Pull Request for Issue #139 .

Summary of Changes

Edit button color white for header and footer

Testing Instructions

Run npm ci or compile scss

Expected result

The edit icons for modules on header and footer area are visible

[richard67]

@chmst The module edit buttons on any module position become only visible when hovering on the module without and with this PR, in opposite to e.g. article edit button, which are always visible.

This seems to be desired behavior.

When hovered, edit buttons for modules on positions outside the header area don't change color when hovering over the button.

With this PR, when hovering the button on a module in the header area, e.g. the metismenu, it changes from white to a light grey.

I think this should be removed to be consistent with the behavior on other module positions outside the header area, i.e. the
https://github.com/joomla/cassiopeia/pull/142/files#diff-ad74cc307cffe2a700ee950b55370c3dR12-R14
should be removed.

@brianteeman What do you think? Are my above assumptions right? Or should the edit button for modules always be visible, like those e.g. for articles, when a user with module edit permissions is logged in on frontend?

Another thing is the position of the icon for the metismenu.

If the last (i.e. when LTR rightmost) menu item is a dropdown parent, the position of the edit icon is between the menu item's title and the toggle button:

And it is very close to the menu item title, so it might also be too close when it is not a dropdown parent and so has no dropdown toggle.

I think this should be corrected, it possible.

[brianteeman]

@chmst The module edit buttons on any module position become only visible when hovering on the module without and with this PR, in opposite to e.g. article edit button, which are always visible.

Isn't there a PR that changes this to be permanently displayed

[richard67]

Isn't there a PR that changes this to be permanently displayed

@brianteeman Possibly yes, but I don't find one right now. That's why I had asked about it.

[brianteeman]

I think @infograf768 was working on it

[richard67]

@brianteeman There were recently merged joomla/joomla-cms#30588 and joomla/joomla-cms#30605 , and those I remember, but they were only for articles and contacts. For modules I haven't found an open PR from him. Will ask him on Glip. Thanks for the hint.

[richard67]

But anyway, regardless of the result, I think we don't need the &:hover { color: $gray-300; } for the icon here:
https://github.com/joomla/cassiopeia/pull/142/files#diff-ad74cc307cffe2a700ee950b55370c3dR12-R14

[richard67]

I have tested this PR ✅ with success.

[richard67]

Thanks!

[richard67]

The position issue and that it is only shown when hovering the module (in opposite to article or contact edit icons) has to be solved with another PR either here or in the CMS repository.

[richard67]

Am in contact with JM on Glip.

[infograf768]

Folks, @chmst and I came to similar patches to indeed show the edit icon permanently when allowed to.

The problem is that we did it through each chrome and not through js.

BUT the main issue is not about this icon imho, it is about the edit menu items which is totally broken when using metismenu...

[infograf768]

Concerning permanent display, see
#87