How to Add Tab Icons December 3, 2018
Type-specific icons can be added to Gyroscope, starting v15.3. Although tab titles could contain images in the previous versions, the new tabs make use of the sprite sheet.
Previously, tabs with the same title but different context are hard to differentiate. Case in point, the "Activity Log" tabs. With tab icons, we can see that one is to configure the report settings, and the other is to view the report. Out of the box, settings, reports and users have tab icons enabled.
But why stop there when you can easily add your own, application-specific icons?
Imagine we need to add a car icon to the tabs. Follow the steps:
1. modify imgs/font.php to harvest the new icons
$icons=array(
...
array('name'=>'car','adjust'=>-6),
...
);
This will generate a series of icons in the browser:
2. add icon to sprite sheet, both SD and HD copies
Hiding guide layer and enabling transparency:
3. declare class in toolbar.css
.ico-car{
background:transparent url(imgs/toolbar.gif) no-repeat -512px 0;
width:16px;height:16px;
vertical-align:middle;
margin-right:8px;
}
.dulltab .ico-report{
background:transparent url(imgs/toolbar.gif) no-repeat -512px -16px;
}
4. declare class in toolbar_hd.css
...
.ico-car, .dulltab .ico-car,
...
{background-image:...}
5. use class in addtab calls
in cars.js, showcar function, change from:
addtab('car_'+carid, carname,
to
addtab('car_'+carid,
'<img src="imgs/t.gif" class="ico-car">'+carname,
6. change the newtitle header
in showcar.inc.php,
change from:
header('newtitle:'.tabtitle(htmlspecialchars(carname));
to
header('newtitle:'.tabtitle(
'<img src="imgs/t.gif" class="ico-car">'.htmlspecialchars(carname)
));
Additionally, although not necessary, you may add the icon to the new record tabs. This requires changing the inline "addtab" call in the listing view. The syntax is a bit different:
onclick="addtab('...',
'<img src="imgs/t.gif" class="ico-car">...
Although this seems like many steps, in fact, there are only three stages - asset preparation, style declaration, and using the icons. Each stage takes only two steps. The end result is will worth the effort, especially in an application that has a rich collection of record types.
