Search code examples
javacssvaadin8

Want to change the backgroung color (or put the text on bold) to the current VAADIN menu bar item selection

I want to put a different color when my menu item has been selected. My menu is : enter image description here

For that, the code is : 

  /**
     * Create a Vertical Menu with the Home page and Actions page
     */
    public MenuBar createMenu() {
        MenuBar menuBar = new MenuBar();
        menuBar.addItem(StringConstants.MENU_HOMEPAGE_LABEL, VaadinIcons.HOME, createCommandHomepage());
        menuBar.addItem(StringConstants.MENU_ACTIONS_LABEL, VaadinIcons.TABLE, createCommandActions());
        menuBar.addItem(StringConstants.MENU_LOG_OUT_LABEL, VaadinIcons.SIGN_OUT, createCommandLogOut());
        return menuBar;
    }

    /**
     * Create the command when the Home page has been selected in the menu
     */
    private Command createCommandHomepage() {
        return new Command() {
            @Override
            public void menuSelected(final MenuBar.MenuItem selectedItem) {
                selectedItem.setStyleName("caption");
                UI.getCurrent().getNavigator().navigateTo(StringConstants.HOMEPAGE_VIEW_NAME);
            }
        };
    }
    /**
     * Same for the Action and Log out - it's not important to show the code here
     */

So I tried to put the current selection in bold (I tried to change the background too).

So My scss code was : 

.v-menubar-menuitem-selected{
          font-weight: bold;
    }

    .caption {
        font-weight: bold;
    }

And this is not working at all. However :

.v-menubar-menuitem-caption{
          font-weight: bold;
    }

is working, but it will put all captions in bold, not just the current selection.

I don't know what I did wrong.

EDIT: I compile the vaadin theme :

        <plugin>
            <groupId>com.vaadin</groupId>
            <artifactId>vaadin-maven-plugin</artifactId>
            <version>8.0.6</version>
            <executions>
                <execution>
                    <goals>
                        <goal>update-theme</goal>
                        <goal>update-widgetset</goal>
                        <goal>compile</goal>
                        <goal>compile-theme</goal>
                    </goals>
                </execution>
            </executions>
        </plugin>

However, I run a maven clean package to be sure that I build the theme.

EDIT 2 : Vaadin version from pom.xml : 

<dependency>
    <groupId>com.vaadin</groupId>
    <artifactId>vaadin-bom</artifactId>
    <version>8.0.4</version>
    <type>pom</type>
    <scope>import</scope>
</dependency>
Solution

  • This solution is working. But, I think it's not the better one. So, please, provide a better answer.

    I use the session to save the menu level : 

    String menuTabSelected =(String)VaadinSession.getCurrent().getAttribute("menuState");
MenuBar barmenu = new MenuBar();
barmenu.addStyleName("mybarmenu");
layout.addComponent(barmenu);

String homepageStyle = menuTabSelected == null || menuTabSelected.equals(StringConstants.MENU_HOMEPAGE_LABEL) ? "highlight" : null;

barmenu.addItem(StringConstants.MENU_HOMEPAGE_LABEL, VaadinIcons.HOME, createCommandHomepage()).setStyleName(homepageStyle);


private Command createCommandHomepage() {
    return new Command() {
        @Override
        public void menuSelected(final MenuItem selectedItem) {

            VaadinSession.getCurrent().setAttribute("menuState", selectedItem.getText());

            UI.getCurrent().getNavigator().navigateTo(StringConstants.HOMEPAGE_VIEW_NAME);
        }
    };
}

    In mytheme.scss : 

    .mybarmenu .v-menubar-menuitem-highlight {
    background: #dedede;
    font-weight: bold;
}