I don't know if this has already been considered somewhere...

How would authors of contrib modules - those that place menu items at the top level - create icons that are consistent with the Navbar core set? How can they be helped to do this? (is there an icon design spec somewhere?)

Example modules are Workbench and Commerce:
navbar-missing-icons.png

Comments

saltednut’s picture

Status: Active » Needs review
Issue tags: +demo_framework
StatusFileSize
new5.69 KB

Wow... we have the same exact use case! Here is a patch with some icons for Workbench and Commerce UI.

Unsure if this is the best way to do this - perhaps navbar could allow for some type of hook that lets contribs supply their own icons?

saltednut’s picture

StatusFileSize
new26.25 KB

Screenshot of #1
1954912-1-screenshot.png

pjcdawkins’s picture

Thanks for the patch!

I expect the navbar project would want to separate the CSS a bit for [other] contrib projects.

No hooks are needed evidently, because modules can just define/override the CSS and include the images (or data URIs).

But icons should be created in consistent sets, or even fonts, which was the crux of my OP. Your Commerce icon is a bit more complex than the rest (even though it's the Commerce Guys' logo, it's not so clear here where it's not in colour).

How to make these consistent? and might they be split up into different sets that could be defined by themes?

saltednut’s picture

Hmm yes a more basic cart icon would probably be better. Feel free to provide additional patches anyone who wants to better these icons.

pjcdawkins’s picture

Category: support » feature

Change to feature request so the module maintainers can have a look at this patch. Having these two extra icons is clearly a great improvement, no need for more ambitious plans for now I suppose.

saltednut’s picture

@pjcdawkins - here is an alternate patch that does what you mentioned: I put the css for contrib icons in their own file and updated the 'store' icon for commerce to use a new "cart" that is more consistent with the other navbar icons. Even though I like the Commerce logo, I am not sure if we can even use it since its probably copyrighted and you are right- it doesn't register in grayscale. These icons can be used as they were drawn by me (using Gimp!).

Also attached is a new screenshot and a ZIP of the Gimp files I created for help with future contributions to this solution.
navbar-icons-1954912-6.png

mrfelton’s picture

Would love to see an icon in there for the Apps module too.

mrfelton’s picture

StatusFileSize
new49.25 KB

missing app icon in navbar module

mrfelton’s picture

Added an apps icon.
Only local images are allowed.

mrfelton’s picture

StatusFileSize
new11.53 KB

something up with that last patch. wont apply with drush make.

mrfelton’s picture

StatusFileSize
new14.34 KB

3rd try, this time using --binary switch to git diff

saltednut’s picture

bumping this. yes, thats right.

hass’s picture

I like this additions, but I think this should be added to the modules and integrated from there. So every module can add it's own icons.

pjcdawkins’s picture

Re. #13 I agree that there should be a more extensible system

Here are some ideal-world features:

  • custom modules could define their own icons easily (in CSS? or PHP?) for their own menu links
  • custom modules or themes could swap out all the existing icons for other menu links, and replace with their own, including using an icon font instead of images
  • there would be some design recommendations to help contributors create icons consistent with what's already in navbar

... but, the perfect is the enemy of good. #11 is already a big improvement.

jessebeach’s picture

Issue summary: View changes
Issue tags: +rc-blocker
saltednut’s picture

Do we have a code example for how modules would define their own icon? I'd be happy to break the patch up if we can get some guidance here.

jessebeach’s picture

I've added a blurb about icons to the project description and the documentation page.

jessebeach’s picture

If you just need to add CSS or JS, you can implement hook_navbar and just return an #attached key with the necessary assets like this:

function workbench_navbar() {
  $items['workbench'] = array(
    '#attached' => array(
      'css' => array(drupal_get_path('module', 'workbench') . '/workbench.navbar.icons.css'),
    ),
  );

  return $items;
}

I would rather we kept JS, CSS and icons with their respective modules. You'll have more control of the assets in the long run this way.

We pull the SVG icons from this library: https://github.com/ry5n/libricons

Also note that we're leading with SVGs and falling back to PNG like this:

.navbar-bar .navbar-icon-home:before {
  background-image: url("../icons/bebebe/house.svg");
}
.no-svg .navbar-bar .navbar-icon-home:before {
  background-image: url("../icons/bebebe/house.png");
}
.navbar-bar .navbar-icon-home:active:before,
.navbar-bar .navbar-icon-home.active:before {
  background-image: url("../icons/ffffff/house.svg");
}
.no-svg .navbar-bar .navbar-icon-home:active:before,
.no-svg .navbar-bar .navbar-icon-home.active:before {
  background-image: url("../icons/ffffff/house.png");
}
.navbar-bar .navbar-icon-menu:before {
  background-image: url("../icons/bebebe/hamburger.svg");
}
.no-svg .navbar-bar .navbar-icon-menu:before {
  background-image: url("../icons/bebebe/hamburger.png");
}
jessebeach’s picture

Status: Needs review » Fixed

This fix has been in place for two weeks. I'm going to assume that it is working. If you find that the fix does not resolve the issue, please reopen this issue or create a new one.

saltednut’s picture

StatusFileSize
new10.59 KB

Here is a quick patch for the latest navbar as of this posting. The next step is to break these out into individual patches for the contrib modules. Note: I am using a svg from wikimedia commons as it is free to reuse (http://commons.wikimedia.org/wiki/File:Shopping_cart_font_awesome.svg)

pjcdawkins’s picture

@brantwynn: many thanks for that additional patch, I can confirm it works for me with the latest -dev of navbar. As you say, obviously it should be split into separate patches & issues for contrib modules.

jessebeach’s picture

Issue tags: -rc-blocker

Status: Fixed » Closed (fixed)

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

lsolesen’s picture

@brantwynn Can you please clarify where you made the individual patches for the contrib?

saltednut’s picture

Re #24 - I haven't gotten around to making those yet, but here is your model: #2217419: No Icon for second level nav bar

jweirather’s picture

+1, and thanks for the work so far.

peterhebert’s picture

Title: Menu icons for contrib modules » Created sandbox module for adding icons
Category: Feature request » Plan

I have created a sandbox module that loads the icons and css for the Workbench and Store icons used in this issue thread. I thought this might be a good place to easily implement these icons, without needing to add them in the main Navbar module, at least as an interim solution. I welcome input and if there are other icons you want to add, please let me know on the issue queue for the module.

Thanks,

saltednut’s picture

Okay. Honestly you should have probably created a new thread and referenced this one but whatever... kind of a zombie issue at this point.