summaryrefslogtreecommitdiffstats
path: root/uitest
diff options
context:
space:
mode:
authorMarc Englund <marc@vaadin.com>2015-09-28 14:11:07 +0300
committerVaadin Code Review <review@vaadin.com>2016-10-17 12:32:29 +0000
commit53f990042418c66939292189879c296a85b654dd (patch)
treee19a2a913df7da154306b7cbff0cbfa8533b39f6 /uitest
parentb49b8c2fc5112c21aaf4d3562bdbfa8eb3fee9a9 (diff)
downloadvaadin-framework-53f990042418c66939292189879c296a85b654dd.tar.gz
vaadin-framework-53f990042418c66939292189879c296a85b654dd.zip
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
Diffstat (limited to 'uitest')
-rw-r--r--uitest/src/main/java/com/vaadin/tests/themes/valo/ResponsiveStyles.java9
-rw-r--r--uitest/src/main/java/com/vaadin/tests/themes/valo/ResponsiveStylesDesign.java5
-rw-r--r--uitest/src/main/resources/com/vaadin/tests/themes/valo/ResponsiveStylesDesign.html58
-rw-r--r--uitest/src/test/java/com/vaadin/tests/themes/valo/ResponsiveStylesTest.java32
4 files changed, 88 insertions, 16 deletions
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 @@
<!DOCTYPE html>
<html>
<body>
- <v-vertical-layout primary-style-name="v-verticallayout" spacing="true" size-auto="true" margin="true">
- <v-css-layout caption="801-1100px = narrow menu" width="801px" height="200px">
+ <v-vertical-layout size-auto="true">
+ <v-vertical-layout spacing="true" size-auto="true" margin="true">
+
+ <v-css-layout _id="narrow" caption="801-1100px = narrow menu" width="801px" height="200px">
<v-horizontal-layout style-name="valo-menu-responsive" responsive="true" size-full="true">
<v-css-layout style-name="valo-menu">
<v-css-layout style-name="valo-menu-part">
- <v-horizontal-layout style-name="valo-menu-title" width-full="true" _id="menuTitle2">
- <v-label size-auto="true" _id="menuTitleLabel2" :middle="" :expand="">
+ <v-horizontal-layout style-name="valo-menu-title" width-full="true" >
+ <v-label size-auto="true" :middle="" :expand="">
The
<strong>Application</strong>
</v-label>
</v-horizontal-layout>
- <v-button icon="fonticon://FontAwesome/f03a" style-name="primary small valo-menu-toggle" plain-text="" _id="menuToggle2">
+ <v-button icon="fonticon://FontAwesome/f03a" style-name="primary small valo-menu-toggle" plain-text="" >
Menu
</v-button>
- <v-css-layout style-name="valo-menuitems" _id="menuItems2">
- <v-button icon="fonticon://FontAwesome/f01c" primary-style-name="valo-menu-item" _id="inboxButton2">
+ <v-css-layout style-name="valo-menuitems" >
+ <v-button icon="fonticon://FontAwesome/f01c" primary-style-name="valo-menu-item" >
Inbox
<span class="valo-menu-badge">7</span>
</v-button>
</v-css-layout>
</v-css-layout>
</v-css-layout>
- <v-vertical-layout spacing="true" margin="true" _id="content2" :expand=""></v-vertical-layout>
+ <v-vertical-layout spacing="true" margin="true" :expand=""></v-vertical-layout>
</v-horizontal-layout>
</v-css-layout>
- <v-css-layout caption="Over 1100px = wide menu" width="1101px" height="200px">
+ <v-css-layout _id="wide" caption="Over 1100px = wide menu" width="1101px" height="200px">
<v-horizontal-layout style-name="valo-menu-responsive" responsive="true" size-full="true">
<v-css-layout style-name="valo-menu">
<v-css-layout style-name="valo-menu-part">
- <v-horizontal-layout style-name="valo-menu-title" width-full="true" _id="menuTitle3">
- <v-label size-auto="true" _id="menuTitleLabel3" :middle="" :expand="">
+ <v-horizontal-layout style-name="valo-menu-title" width-full="true" >
+ <v-label size-auto="true" :middle="" :expand="">
The
<strong>Application</strong>
</v-label>
</v-horizontal-layout>
- <v-button icon="fonticon://FontAwesome/f03a" style-name="primary small valo-menu-toggle" plain-text="" _id="menuToggle3">
+ <v-button icon="fonticon://FontAwesome/f03a" style-name="primary small valo-menu-toggle" plain-text="" >
Menu
</v-button>
- <v-css-layout style-name="valo-menuitems" _id="menuItems3">
- <v-button icon="fonticon://FontAwesome/f01c" primary-style-name="valo-menu-item" _id="inboxButton3">
+ <v-css-layout style-name="valo-menuitems" >
+ <v-button icon="fonticon://FontAwesome/f01c" primary-style-name="valo-menu-item" >
Inbox
<span class="valo-menu-badge">7</span>
</v-button>
</v-css-layout>
</v-css-layout>
</v-css-layout>
- <v-vertical-layout spacing="true" margin="true" _id="content3" :expand=""></v-vertical-layout>
+ <v-vertical-layout spacing="true" margin="true" :expand=""></v-vertical-layout>
</v-horizontal-layout>
</v-css-layout>
+ </v-vertical-layout>
+ <v-css-layout _id="collapsed" caption="Collapsed menu w/ hover" width="500px" height="200px">
+ <v-horizontal-layout style-name="valo-menu-responsive" responsive="true" size-full="true">
+ <v-css-layout style-name="valo-menu valo-menu-hover">
+ <v-css-layout style-name="valo-menu-part">
+ <v-horizontal-layout style-name="valo-menu-title" width-full="true">
+ <v-label size-auto="true" :middle="" :expand="">
+ The
+ <strong>Application</strong>
+ </v-label>
+ </v-horizontal-layout>
+ <v-button icon="fonticon://FontAwesome/f03a" style-name="primary small valo-menu-toggle" plain-text="">
+ Menu
+ </v-button>
+ <v-css-layout style-name="valo-menuitems">
+ <v-button icon="fonticon://FontAwesome/f01c" primary-style-name="valo-menu-item" >
+ Inbox
+ <span class="valo-menu-badge">7</span>
+ </v-button>
+ </v-css-layout>
+ </v-css-layout>
+ </v-css-layout>
+ <v-vertical-layout spacing="true" margin="true" :expand=""></v-vertical-layout>
+ </v-horizontal-layout>
+ </v-css-layout>
+
</v-vertical-layout>
</body>
</html> \ 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<WebElement> 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");
+ }
}
generated by cgit v1.2.3 (git 2.39.1) at 2024-12-28 17:04:00 +0000