Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Make menu icon (admin bar & main admin menu) use the menu icon color that's set in the site admin styling (also implement SVG instead of PNG in the process to support this) #9

Merged
merged 5 commits into from May 14, 2019

Conversation

@KZeni
Copy link
Contributor

KZeni commented May 14, 2019

The icon needs to be called inline so WordPress then swaps out the SVG fill color for whatever menu icon color it should be (see https://stackoverflow.com/a/42265057/1275054 for more details).

Also, I added menuicon.svg to the assets folder for reference (though it isn't actually called directly since the icon color is determined by having the SVG inline in the different menu item parameters.) Figured it might be helpful to have that icon available as an SVG file (though having menuicon.svg nor w3tc-sprite.png & w3tc-sprite-retina.png, for that matter, isn't required and I could just as easily see these removed from the plugin).

Regarding the icon itself, I tried to replicate the current menu icon while giving it a nice presence. I tried out a few different setups and found that the 3 sides to the box having opacity serve as shading with the shadow then very low opacity for effect (there wasn't a way to get the shadow to stay dark with svg-painter.js colorizing things.)

KZeni added 4 commits May 13, 2019
…eme of the dashboard.
…ded here as a helpful reference.)
@maxicus

This comment has been minimized.

Copy link
Contributor

maxicus commented May 14, 2019

Thanks.
As for now it contains bug - icon goes black when any frontend page is opened as admin:

w3tc-icon

foreground color is replaced well for backend /wp-admin/* pages only.

so that it works well both in menu and admin-bar
@maxicus

This comment has been minimized.

Copy link
Contributor

maxicus commented May 14, 2019

Adjusted it a bit to using font, so that it listens to wordpress admin-bar's css.

@maxicus maxicus merged commit 70a56bf into W3EDGE:master May 14, 2019
@KZeni

This comment has been minimized.

Copy link
Contributor Author

KZeni commented May 14, 2019

Yeah, it appears the SVG conversion WordPress does for the primary admin menu to have it use the correct colorization, unfortunately, doesn't extend to the admin bar on the non-admin/dashboard pages of the site. After poking around, it does appear that converting it to an icon font & serving it up that way seems to be the ideal solution for now (having it so both menus then use the font implementation also making sense).

I was a bit bummed by the fact that the resulting icon font didn't have variable opacity for the different elements like the SVG graphic has. As such, I've implemented the icon using https://icomoon.io/app/#/select/font since it has multi-color support during SVG conversion which would retain the opacity of the different elements. I'm currently working on getting it tested and ready to provide.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
2 participants
You can’t perform that action at this time.