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

Add API methods and support for styling of icons (Tray, MenuItem) under Mac OS X (Yosemite) Dark Mode #2775

Merged
merged 2 commits into from
Dec 11, 2014

Conversation

mrfabbri
Copy link
Member

@mrfabbri mrfabbri commented Dec 9, 2014

  • Add boolean property (defaults to true) iconsAreTemplates to Tray objects to allow for proper display of icons in Mac OS X (Yosemite) Dark Menus.
  • Add boolean property (defaults to true) iconsIsTemplate to MenuItem objects to allow for proper display of icons in Mac OS X (Yosemite) Dark Menus.
  • On Linux and Windows the introduced properties have no effect.

FIX #2476
FIX #2773
FIX #2604

Mac OS X uses the isTemplate() property of NSImage objects to ensure proper styling of icons in both NSMenuItems and NSStatusItems. When the property is set to true the images are treated as "templates" and the system automatically ensures proper styling according to the various states of the status item (e.g. dark menu, light menu, etc.).
Template images should consist only of black and clear colours and can use the
alpha channel in the image to adjust the opacity of black content.

See Dark Menus in AppKit Release Notes for OS X v10.10
and NSImage setTemplate:.

Further Notes:

  • In naming properties (e.g. Tray.iconsAreTemplates) a little verbosity has been traded over making the intent more clear.
  • The property defaults to true (which is the behavoiur both wanted in most cases and suggested by Apple).
  • A unique property has been added controlling the "template" behaviour of both icon and alticon (it's unlikely that an app uses two different strategies, either both the images are templates or either are not).
  • The "template" properties are "persistent" accross icon/alticon changes; e.g if the user changes the icon property of a Tray item which has iconsAreTemplates set to true the new icon will be treated as a template image (without the need to setting again Tray.iconsAreTemplates = true).

Example usage:

var tray;
tray = new gui.Tray({ icon: 'path-to-icon.png', iconsAreTemplates: true });
// NOTE: iconsAreTemplates option defaults to true so is superflous

var trayMenu = new gui.Menu();
trayMenu.append(new gui.MenuItem({
  type: 'normal', 
  label: 'Menu item 1', 
  icon: 'path-to-icon.png',
  iconIsTemplate: true // this unnaccessary as it defaults to true
}));

Add boolean property (defaults to `true`) `iconsAreTemplates` to `Tray` objects
to allow for proper display of icons in Mac OS X (Yosemite) Dark Menus.

When `iconsAreTemplates` is set to true, both `icon` and `altIcon` are treated
as "templates" and the system automatically ensures proper styling according to
the various states of the status item (e.g. dark menu, light menu, etc.).
Template images should consist only of black and clear colours and can use the
alpha channel in the image to adjust the opacity of black content.

See [Dark Menus in AppKit Release Notes for OS X v10.10](https://developer.apple.com/library/mac/releasenotes/AppKit/RN-AppKit/#10_10DarkMenus)
and [`NSImage setTemplate:`](https://developer.apple.com/library/mac/documentation/Cocoa/Reference/ApplicationKit/Classes/NSImage_Class/index.html#//apple_ref/occ/instm/NSImage/setTemplate:).

On Linux and Windows setting the property has no effect.

FIX nwjs#2476
Add boolean property (defaults to `true`) `iconsIsTemplate` to `MenuItem` objects
to allow for proper display of icons in Mac OS X (Yosemite) Dark Menus.

When `iconsIsTemplate` is set to true, the `icon` is treated as a "template" and
the system automatically ensures proper styling according to the various states
of the menu item (e.g. dark menu, light menu, etc.).
Template images should consist only of black and clear colours and can use the
alpha channel in the image to adjust the opacity of black content.

See [Dark Menus in AppKit Release Notes for OS X v10.10](https://developer.apple.com/library/mac/releasenotes/AppKit/RN-AppKit/#10_10DarkMenus)
and [`NSImage setTemplate:`](https://developer.apple.com/library/mac/documentation/Cocoa/Reference/ApplicationKit/Classes/NSImage_Class/index.html#//apple_ref/occ/instm/NSImage/setTemplate:).

On Linux and Windows setting the property has no effect.

FIX nwjs#2773
@rogerwang
Copy link
Member

Thanks! Could you please add this documentation to the wiki?

rogerwang added a commit that referenced this pull request Dec 11, 2014
Add API methods and support for styling of icons (Tray, MenuItem) under Mac OS X (Yosemite) Dark Mode
@rogerwang rogerwang merged commit 0c568cf into nwjs:master Dec 11, 2014
@mrfabbri
Copy link
Member Author

@rogerwang Added documentation for MenuItem.iconIsTemplate and Tray.iconsAreTemplates, I guessed they will be the in next release (i.e v0.11.3).

@nrako
Copy link

nrako commented Dec 15, 2014

Thanks @mrfabbri 👍

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants