From 53f990042418c66939292189879c296a85b654dd Mon Sep 17 00:00:00 2001 From: Marc Englund 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 --- .../vaadin/tests/themes/valo/ResponsiveStyles.java | 9 +++- .../tests/themes/valo/ResponsiveStylesDesign.java | 5 ++ .../tests/themes/valo/ResponsiveStylesDesign.html | 58 ++++++++++++++++------ .../tests/themes/valo/ResponsiveStylesTest.java | 32 ++++++++++++ 4 files changed, 88 insertions(+), 16 deletions(-) (limited to 'uitest/src') diff --git a/uitest/src/main/java/com/vaadin/tests/themes/valo/ResponsiveStyles.java b/uitest/src/main/java/com/vaadin/tests/themes/valo/ResponsiveStyles.java index 9e65b6a6bb..9d4196ad9b 100644 --- a/uitest/src/main/java/com/vaadin/tests/themes/valo/ResponsiveStyles.java +++ b/uitest/src/main/java/com/vaadin/tests/themes/valo/ResponsiveStyles.java @@ -22,7 +22,14 @@ public class ResponsiveStyles extends UI { @Override protected void init(VaadinRequest request) { - setContent(new ResponsiveStylesDesign()); + ResponsiveStylesDesign design = new ResponsiveStylesDesign(); + setContent(design); + + boolean collapsed = request.getParameter("collapsed") != null; + + design.collapsed.setVisible(collapsed); + design.narrow.setVisible(!collapsed); + design.wide.setVisible(!collapsed); } } diff --git a/uitest/src/main/java/com/vaadin/tests/themes/valo/ResponsiveStylesDesign.java b/uitest/src/main/java/com/vaadin/tests/themes/valo/ResponsiveStylesDesign.java index c18c22e57f..880b13d9c5 100644 --- a/uitest/src/main/java/com/vaadin/tests/themes/valo/ResponsiveStylesDesign.java +++ b/uitest/src/main/java/com/vaadin/tests/themes/valo/ResponsiveStylesDesign.java @@ -16,6 +16,7 @@ package com.vaadin.tests.themes.valo; import com.vaadin.annotations.DesignRoot; +import com.vaadin.ui.Component; import com.vaadin.ui.VerticalLayout; import com.vaadin.ui.declarative.Design; @@ -23,6 +24,10 @@ import com.vaadin.ui.declarative.Design; @SuppressWarnings("serial") public class ResponsiveStylesDesign extends VerticalLayout { + protected Component collapsed; + protected Component narrow; + protected Component wide; + public ResponsiveStylesDesign() { Design.read(this); } diff --git a/uitest/src/main/resources/com/vaadin/tests/themes/valo/ResponsiveStylesDesign.html b/uitest/src/main/resources/com/vaadin/tests/themes/valo/ResponsiveStylesDesign.html index 60da28d843..330bad00d3 100644 --- a/uitest/src/main/resources/com/vaadin/tests/themes/valo/ResponsiveStylesDesign.html +++ b/uitest/src/main/resources/com/vaadin/tests/themes/valo/ResponsiveStylesDesign.html @@ -1,56 +1,84 @@ - - + + + +

- - + + The Application - + Menu - - + + Inbox - +

- +

- - + + The Application - + Menu - - + + Inbox - +

+ + + + + + + + The + Application + + + + Menu + + + + Inbox + + + + + + + + + \ No newline at end of file diff --git a/uitest/src/test/java/com/vaadin/tests/themes/valo/ResponsiveStylesTest.java b/uitest/src/test/java/com/vaadin/tests/themes/valo/ResponsiveStylesTest.java index 39cd509e72..cbed52e864 100644 --- a/uitest/src/test/java/com/vaadin/tests/themes/valo/ResponsiveStylesTest.java +++ b/uitest/src/test/java/com/vaadin/tests/themes/valo/ResponsiveStylesTest.java @@ -22,6 +22,7 @@ import java.util.List; import org.junit.Test; import org.openqa.selenium.WebElement; +import org.openqa.selenium.interactions.Actions; import com.vaadin.tests.tb3.MultiBrowserTest; @@ -30,12 +31,19 @@ import com.vaadin.tests.tb3.MultiBrowserTest; */ public class ResponsiveStylesTest extends MultiBrowserTest { + /** + * Use this parameter to test the collapsed menu state. + */ + public static final String COLLAPSED_MENU_TEST_PARAM = "collapsed"; + private static final String MENU_STYLENAME = "valo-menu"; private static final int NARROW_ELEMENT_INDEX = 0; private static final int NARROW_WIDTH = 112; private static final int WIDE_ELEMENT_INDEX = 1; private static final int WIDE_WIDTH = 146; + private static final String TOGGLE_STYLENAME = "valo-menu-toggle"; + /** * Tests that valo-menu-responsive can be used in any element on the page, * not just as top-level component. @@ -59,4 +67,28 @@ public class ResponsiveStylesTest extends MultiBrowserTest { compareScreen("defaultMenuWidths"); } + + /** + * Tests that the valo-menu-hover style makes the menu appear on mouseover. + * + * @throws Exception + */ + @Test + public void testValoMenuResponsiveHover() throws Exception { + openTestURL(COLLAPSED_MENU_TEST_PARAM); + + compareScreen("collapsedMenu"); + + List toggles = findElements( + com.vaadin.testbench.By.className(TOGGLE_STYLENAME)); + + // Only one menu in the collapsed example + WebElement toggle = toggles.get(0); + + Actions actions = new Actions(getDriver()); + actions.moveToElement(toggle); + actions.perform(); + + compareScreen("expandedMenu"); + } } -- cgit v1.2.3