This document describes the steps needed to refactor the back-office components to use the new menu widget. Steps are to be applied to the menu widget xml files.
-----------------------------------------------------
Delete references to the tabButton style.
Change all
default-selected-style="tabButtonSelected"
to
default-selected-style="selected".
Delete orientation="horizontal" and orientation="vertical". The menu widget renders a simple unordered list, so the menus are vertical by default. Horizontal menus must be styled with a horizontal menu CSS style (see the maincss.css file). You can specify a horizontal menu style by using the menu-container-style property.
Delete default-widget-style, default-tooltip-style.
Example - before refactor:
<menu name="ProfileTabBar" default-menu-item-name="viewprofile" default-selected-style="tabButtonSelected"
default-title-style="tabButton" default-tooltip-style="tooltip" default-widget-style="tabButton"
orientation="horizontal" type="simple">
...
</menu>
Example - after refactor:
<menu name="ProfileTabBar" default-menu-item-name="viewprofile" default-selected-style="selected"
type="simple" menu-container-style="button-bar button-style-1">
...
</menu>