Adding toolbar buttons

Adding an icon

skins/skin_name/mail.png file holds all main icons used in WebMail. They are packed into a single file to eliminate multiple images load on a page which improves total page load performance. mail.png image is split to grid with 40x40 sized cells for convenience, it should be large enough to hold icons for any skin in a single grid cell. Cells’ coordinates are used in WebMail code. Any new icon should be placed into top left corner of free cell, it’s better to pick a cell closer to the bottom. If you placed icon to line 7 col 1, its coordinates are x: 6, y: 0.

Linking to new icon

In common/defines.js file, identifiers are declared for all toolbar buttons from TOOLBAR_NEW_MESSAGE to TOOLBAR_LIGHT_SEARCH_ARROW_UP. It’s necessary to add a new button’s identifier with unique value, e.g.:

var TOOLBAR_MY_BUTTON = 53;

Description of a new button is added to common/toolbar.js file within CToolBar class declaration:

this._descriptions[TOOLBAR_MY_BUTTON ] = { langField: 'MyButton', x: 6, y: 1 };

where:

• langField: 'MyButton' - language constant with MyButton name. If constant is required in one language only, then, instead of adding it to WebMail, declare it in common/defines.js file:

Lang.MyButton = 'my button';

• x: 6, y: 1 - button’s icon coordinates in mail.png (refer to “How to add icon to mail.png”), it is required if particular skin is using icons on buttons (e.g. Ya-Ya skin).

Configuring the toolbar

Depending on the toolbar this button should be added to, pick one of the files:

Locate _buildToolBar function and add a code to it to generate a new button, for instance:

var myButtonFunc = function ( ) { alert('my button action'); };
this._toolBar.AddItem(TOOLBAR_MY_BUTTON, myButtonFunc, true);