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).

Backported from master branch (vaadin 8).

Change-Id: I8344234a20aa93216b0116608d81e30e86d8b309

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 335c9daee87d9599071437510f20da63256eb030..d26860991e6049c3d3041282a46a2329f9be4d9c 100644 (file)
--- a/server/src/main/java/com/vaadin/ui/themes/ValoTheme.java
+++ b/server/src/main/java/com/vaadin/ui/themes/ValoTheme.java
@@ -1033,15 +1033,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>
      *
@@ -1053,4 +1051,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";
 }

diff --git a/themes/src/main/themes/VAADIN/themes/valo/components/_valo-menu.scss b/themes/src/main/themes/VAADIN/themes/valo/components/_valo-menu.scss
index 48ba22174baa6e68abe70fe064bd6c35dac2330b..084f97cac6b8cd99b9af91642f67b8fb215e1e54 100644 (file)
--- a/themes/src/main/themes/VAADIN/themes/valo/components/_valo-menu.scss
+++ b/themes/src/main/themes/VAADIN/themes/valo/components/_valo-menu.scss
@@ -237,7 +237,8 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if
         @include transition(all 300ms);
       }
 
-      .valo-menu-visible .valo-menuitems {
+      .valo-menu-visible .valo-menuitems,
+      .valo-menu-hover:hover .valo-menuitems {
         @include transform(translatex(0%));
       }
     }

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 f8474ef9c200898f454b28a854126e80cfbc1447..ed645002d81b81af680ac3d761493f41403f641a 100644 (file)
--- a/uitest/src/main/java/com/vaadin/tests/themes/valo/ResponsiveStyles.java
+++ b/uitest/src/main/java/com/vaadin/tests/themes/valo/ResponsiveStyles.java
@@ -24,7 +24,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 f7ee5068f0ed9e0d91840a48c1b6eb33230a31b8..57c00caf32035e521d02be644ce644dd5681d243 100644 (file)
--- 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 60da28d8437e271669aa2f740030670c5a244528..330bad00d355daf560a8bd2ea704bf3ba97588c0 100644 (file)
--- 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 5de3b5aaa784b0695976b036feaceed49e45133b..4d007e10bd1106391f0812db0860f62732fef417 100644 (file)
--- 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");
+    }
 }