Problem/Motivation

I have a few custom modules which add items to the toolbar. Its not compatibile with Gin Theme. I tried to add support for Gin in the module itself but is not easily possible. Does it make sense to have a generic .toolbar-icon-.... class in _toolbar.scss? It would help me to get background-color, mask-repeat and breakpoint right.

The background image (or mask) for the proper icon could be provided by the custom module.

Steps to reproduce

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

CommentFileSizeAuthor
#8 gin-3173816-8.patch292.41 KBdieterholvoet

Comments

webflo created an issue. See original summary.

webflo’s picture

Category: Bug report » Support request
anruether’s picture

Maybe tasty_backend_gin does something similar? https://www.drupal.org/project/tasty_backend_gin

saschaeggi’s picture

saschaeggi’s picture

Status: Active » Needs review

@webflo can you please test the latest dev? as I think this is the same issue as #3175265: Include custom toolbar items in secondary toolbar
Thanks

dieterholvoet’s picture

I don't think my patch completely covered this issue. There's still the problem that custom toolbar / administration menu items have no icon by default. It would be easier if the only necessary CSS to provide a custom icon would be the mask image.

saschaeggi’s picture

Status: Needs review » Active
dieterholvoet’s picture

Status: Active » Needs review
StatusFileSize
new292.41 KB

I replaced some selectors targeting specific icons with more general ones and everything still seems to be working. All you have to do now to add an icon for a new menu link is add a mask image, eg.

.toolbar-icon-version:before {
    -webkit-mask-image: url(data);
}

There's still the problem that menu links without an icon look bad, but we should probably create a new issue for that.

dieterholvoet’s picture

Could you share what icon pack you're getting the icons from? Can be useful for people searching for similar looking icons for their custom menu items.

saschaeggi’s picture

Most of them are custom icons made by myself. But I can recommend this OpenSource library, will blend in nicely: https://feathericons.com/

dieterholvoet’s picture

Great, thanks for the tip!

saschaeggi’s picture

Status: Needs review » Fixed
webflo’s picture

Thanks! 👍

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.