mirrors
/
vaadin-framework
mirror of https://github.com/vaadin/framework.git
Watch 1
Star 0
Fork 0
Code Issues 0 Releases 330 Wiki Activity
Browse Source

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
tags/8.0.0.alpha5
Marc Englund 8 years ago
parent
b49b8c2fc5
commit
53f9900424
6 changed files with 113 additions and 20 deletions
Unified View Show Diff Stats
  1. 23
    3
      server/src/main/java/com/vaadin/ui/themes/ValoTheme.java
  2. 2
    1
      themes/src/main/themes/VAADIN/themes/valo/components/_valo-menu.scss
  3. 8
    1
      uitest/src/main/java/com/vaadin/tests/themes/valo/ResponsiveStyles.java
  4. 5
    0
      uitest/src/main/java/com/vaadin/tests/themes/valo/ResponsiveStylesDesign.java
  5. 43
    15
      uitest/src/main/resources/com/vaadin/tests/themes/valo/ResponsiveStylesDesign.html
  6. 32
    0
      uitest/src/test/java/com/vaadin/tests/themes/valo/ResponsiveStylesTest.java

+ 23
- 3
server/src/main/java/com/vaadin/ui/themes/ValoTheme.java View File

* Set the <em><b>primary</b></em> style name of a Label or a Button to this * 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 * style name to create an application logo. The logo is designed to be
* placed inside a {@link #MENU_PART} layout. * placed inside a {@link #MENU_PART} layout.
* </p>
* *
* <p> * <p>
* The text content of the logo should be very short, since the logo area * The text content of the logo should be very short, since the logo area
* only shows approximately three letters. Using one of the * only shows approximately three letters. Using one of the
* {@link FontAwesome} icons is a good way to quickly create a logo for your * {@link FontAwesome} icons is a good way to quickly create a logo for your
* application. * application.
* </p>
* </p>
* <p>
* *
* <h4>Example</h4> * <h4>Example</h4>
* *
*/ */
public static final String MENU_LOGO = "valo-menu-logo"; 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";
} }

+ 2
- 1
themes/src/main/themes/VAADIN/themes/valo/components/_valo-menu.scss View File

@include transition(all 300ms); @include transition(all 300ms);
} }


.valo-menu-visible .valo-menuitems {
.valo-menu-visible .valo-menuitems,
.valo-menu-hover:hover .valo-menuitems {
@include transform(translatex(0%)); @include transform(translatex(0%));
} }
} }

+ 8
- 1
uitest/src/main/java/com/vaadin/tests/themes/valo/ResponsiveStyles.java View File



@Override @Override
protected void init(VaadinRequest request) { 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);
} }


} }

+ 5
- 0
uitest/src/main/java/com/vaadin/tests/themes/valo/ResponsiveStylesDesign.java View File

package com.vaadin.tests.themes.valo; package com.vaadin.tests.themes.valo;


import com.vaadin.annotations.DesignRoot; import com.vaadin.annotations.DesignRoot;
import com.vaadin.ui.Component;
import com.vaadin.ui.VerticalLayout; import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.declarative.Design; import com.vaadin.ui.declarative.Design;


@SuppressWarnings("serial") @SuppressWarnings("serial")
public class ResponsiveStylesDesign extends VerticalLayout { public class ResponsiveStylesDesign extends VerticalLayout {


protected Component collapsed;
protected Component narrow;
protected Component wide;

public ResponsiveStylesDesign() { public ResponsiveStylesDesign() {
Design.read(this); Design.read(this);
} }

+ 43
- 15
uitest/src/main/resources/com/vaadin/tests/themes/valo/ResponsiveStylesDesign.html View File

<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<body> <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-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">
<v-css-layout style-name="valo-menu-part"> <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 The
<strong>Application</strong> <strong>Application</strong>
</v-label> </v-label>
</v-horizontal-layout> </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 Menu
</v-button> </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 Inbox
<span class="valo-menu-badge">7</span> <span class="valo-menu-badge">7</span>
</v-button> </v-button>
</v-css-layout> </v-css-layout>
</v-css-layout> </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-horizontal-layout>
</v-css-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-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">
<v-css-layout style-name="valo-menu-part"> <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 The
<strong>Application</strong> <strong>Application</strong>
</v-label> </v-label>
</v-horizontal-layout> </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 Menu
</v-button> </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 Inbox
<span class="valo-menu-badge">7</span> <span class="valo-menu-badge">7</span>
</v-button> </v-button>
</v-css-layout> </v-css-layout>
</v-css-layout> </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-horizontal-layout>
</v-css-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> </v-vertical-layout>
</body> </body>
</html> </html>

+ 32
- 0
uitest/src/test/java/com/vaadin/tests/themes/valo/ResponsiveStylesTest.java View File



import org.junit.Test; import org.junit.Test;
import org.openqa.selenium.WebElement; import org.openqa.selenium.WebElement;
import org.openqa.selenium.interactions.Actions;


import com.vaadin.tests.tb3.MultiBrowserTest; import com.vaadin.tests.tb3.MultiBrowserTest;


*/ */
public class ResponsiveStylesTest extends 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 String MENU_STYLENAME = "valo-menu";
private static final int NARROW_ELEMENT_INDEX = 0; private static final int NARROW_ELEMENT_INDEX = 0;
private static final int NARROW_WIDTH = 112; private static final int NARROW_WIDTH = 112;
private static final int WIDE_ELEMENT_INDEX = 1; private static final int WIDE_ELEMENT_INDEX = 1;
private static final int WIDE_WIDTH = 146; 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, * Tests that valo-menu-responsive can be used in any element on the page,
* not just as top-level component. * not just as top-level component.


compareScreen("defaultMenuWidths"); 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");
}
} }

Write Preview
Loading…
Cancel
Save