From 53f990042418c66939292189879c296a85b654dd Mon Sep 17 00:00:00 2001
From: Marc Englund <marc@vaadin.com>
Date: Mon, 28 Sep 2015 14:11:07 +0300
Subject: Add "valo-menu-hover" stylename to make responsive menu appear w/o
 adding code (#19019)

Adding the optional "valo-menu-hover" style to the "valo-menu" element
will make the menu appear on hover - i.e when mousing over on desktop,
when tapping on touch devices (which also triggers hover).

Change-Id: I4ee83cdd0e4198e02782cfcda945193305c41152
---
 .../main/java/com/vaadin/ui/themes/ValoTheme.java  | 26 +++++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

(limited to 'server')

diff --git a/server/src/main/java/com/vaadin/ui/themes/ValoTheme.java b/server/src/main/java/com/vaadin/ui/themes/ValoTheme.java
index a808996206..df9621bf27 100644
--- a/server/src/main/java/com/vaadin/ui/themes/ValoTheme.java
+++ b/server/src/main/java/com/vaadin/ui/themes/ValoTheme.java
@@ -1032,15 +1032,13 @@ public class ValoTheme {
      * Set the <em><b>primary</b></em> style name of a Label or a Button to this
      * style name to create an application logo. The logo is designed to be
      * placed inside a {@link #MENU_PART} layout.
-     * </p>
      *
      * <p>
      * The text content of the logo should be very short, since the logo area
      * only shows approximately three letters. Using one of the
      * {@link FontAwesome} icons is a good way to quickly create a logo for your
      * application.
-     * </p>
-     * </p>
+     * <p>
      *
      * <h4>Example</h4>
      *
@@ -1052,4 +1050,26 @@ public class ValoTheme {
      */
     public static final String MENU_LOGO = "valo-menu-logo";
 
+    /**
+     * Add this style name to your {@link #UI_WITH_MENU responsive}
+     * {@link #MENU_ROOT valo menu} element to make it appear automatically on
+     * hover - without adding any code.
+     * <p>
+     * The menu will appear on mouse over on desktop, or when tapping on touch
+     * devices.
+     * <p>
+     * <h4>Example</h4>
+     *
+     * <pre>
+     * HorizontalLayout menu = new HorizontalLayout();
+     * Responsive.makeResponsive(menu);
+     * menu.addStyleName(ValoTheme.UI_WITH_MENU);
+     *
+     * CssLayout menuArea = new CssLayout();
+     * menuArea.setPrimaryStyleName(ValoTheme.MENU_ROOT);
+     * menuArea.addStyleName(ValoTheme.MENU_APPEAR_ON_HOVER);
+     * menu.addComponent(menuArea);
+     * </pre>
+     */
+    public static final String MENU_APPEAR_ON_HOVER = "valo-menu-hover";
 }
-- 
cgit v1.2.3