Replace menu labels by icons in new menu

OpenEMR Development
1

mdsupport wrote on Friday, October 14, 2016:

In case anyone is interested in local changes to the standard new menu, here are few lines to decrease horizontal space needed by new menu :

Make sure font-awesome css is in the DOM and invoke after all standard code.

// Replace menu text by fa
var xl_icons = {
    "Calendar": "calendar",
    "Flow Board": "calendar-check-o",
    "Messages": "envelope",
//    "Fees": "money",
//    "Administration": "cog",
//    "Reports": "file-text-o",
    "About": "ellipsis-v",
};

$(".menuLabel").each( function(ix) {
    var lbl = $(this).html().trim();
    if (xl_icons[lbl]) {
       $(this).css ('font-size', '150%');
       $(this).attr ('title', lbl);
       $(this).html('<i class="fa fa-' + xl_icons[lbl] + '" aria-hidden="true"></i>');
   } 
});
2

bradymiller wrote on Friday, October 14, 2016:

Hi MD Support,

Can you throw this code into a PR on github? This is a very good starting point to begin to think about supporting this in the main codebase. Initial thoughts are to place a label_to_icon setting in the json menu structure, which it will then use if the user wants this option via a global for now (and in future can figure out a way to be responsive). And thinking should only be used on the top menu items??

-brady
OpenEMR

3

mdsupport wrote on Friday, October 14, 2016:

Added this.