From e615af509199b8956650d6c70a573c14597c90c1 Mon Sep 17 00:00:00 2001 From: Teppo Kurki Date: Mon, 15 Dec 2014 15:53:03 +0200 Subject: [PATCH] Fixes unnecessary padding-top added to all responsive UIs (#14679) When using Valo theme and Responsive extension, all responsive UIs get a padding-top even though it should be only added when a Valo Menu is present in the UI. Added a stylename which has to be added to any responsive UIs containing a Valo Menu. Change-Id: Ib3e3c5341bef03c174accb01401b4a90c1deb29e --- .../themes/valo/components/_valo-menu.scss | 2 +- .../src/com/vaadin/ui/themes/ValoTheme.java | 25 ++++++ .../ui/UnnecessaryPaddingInResponsiveUI.java | 79 +++++++++++++++++++ .../UnnecessaryPaddingInResponsiveUITest.java | 47 +++++++++++ 4 files changed, 152 insertions(+), 1 deletion(-) create mode 100644 uitest/src/com/vaadin/tests/components/ui/UnnecessaryPaddingInResponsiveUI.java create mode 100644 uitest/src/com/vaadin/tests/components/ui/UnnecessaryPaddingInResponsiveUITest.java diff --git a/WebContent/VAADIN/themes/valo/components/_valo-menu.scss b/WebContent/VAADIN/themes/valo/components/_valo-menu.scss index 5ed125b909..2d37b27773 100644 --- a/WebContent/VAADIN/themes/valo/components/_valo-menu.scss +++ b/WebContent/VAADIN/themes/valo/components/_valo-menu.scss @@ -152,7 +152,7 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if * @group valo-menu */ @mixin valo-menu-responsive { - .v-ui { + .v-ui.valo-menu-responsive { @include width-range($min: 801px, $max: 1100px) { .valo-menu-part { @include valo-menu-large-icons-style($valo-menu-background-color); diff --git a/server/src/com/vaadin/ui/themes/ValoTheme.java b/server/src/com/vaadin/ui/themes/ValoTheme.java index da80375114..1285bf7f67 100644 --- a/server/src/com/vaadin/ui/themes/ValoTheme.java +++ b/server/src/com/vaadin/ui/themes/ValoTheme.java @@ -880,6 +880,31 @@ public class ValoTheme { * **************************************************************************/ + /** + *

+ * When you use the Valo menu and wish to enable responsive features of the + * menu, you need to add this style name to the UI containing the menu. + *

+ * + *

+ * You only need to add this style name to the UI containing a Valo menu, if + * you're using the Responsive extension with the UI. + *

+ * + *

Example

+ * + *

+ * To enable responsivity in the Valo menu, the following example code + * should be executed in your UI containing the menu. + *

+ * + * 
+     * Responsive.makeResponsive(this);
+     * addStyleName(ValoTheme.UI_WITH_MENU);
+     *
+ */ + public static final String UI_WITH_MENU = "valo-menu-responsive"; + /** *

* Set the primary style name of a CssLayout to this, and diff --git a/uitest/src/com/vaadin/tests/components/ui/UnnecessaryPaddingInResponsiveUI.java b/uitest/src/com/vaadin/tests/components/ui/UnnecessaryPaddingInResponsiveUI.java new file mode 100644 index 0000000000..e80686f6f3 --- /dev/null +++ b/uitest/src/com/vaadin/tests/components/ui/UnnecessaryPaddingInResponsiveUI.java @@ -0,0 +1,79 @@ +/* + * Copyright 2000-2014 Vaadin Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); you may not + * use this file except in compliance with the License. You may obtain a copy of + * the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations under + * the License. + */ +package com.vaadin.tests.components.ui; + +import com.vaadin.annotations.Theme; +import com.vaadin.server.Responsive; +import com.vaadin.server.VaadinRequest; +import com.vaadin.ui.Button; +import com.vaadin.ui.CssLayout; +import com.vaadin.ui.HorizontalLayout; +import com.vaadin.ui.Label; +import com.vaadin.ui.UI; +import com.vaadin.ui.VerticalLayout; +import com.vaadin.ui.themes.ValoTheme; + +/** + * + * @since + * @author Vaadin Ltd + */ +@Theme("valo") +public class UnnecessaryPaddingInResponsiveUI extends UI { + + @Override + protected void init(VaadinRequest request) { + Responsive.makeResponsive(this); + + HorizontalLayout root = new HorizontalLayout(); + root.setSpacing(true); + + MenuLayout menu = new MenuLayout(); + + root.addComponent(menu); + + setContent(root); + + setWidth(799, Unit.PIXELS); + setId("UI"); + + // Uncomment this to enable responsive features in Valo Menu and + // introduce a padding-top to the UI. When this is commented the + // padding-top should be 0 and the related test should pass. + + // addStyleName(ValoTheme.UI_WITH_MENU); + } + + class MenuLayout extends VerticalLayout { + public MenuLayout() { + setSizeFull(); + setPrimaryStyleName(ValoTheme.MENU_ROOT); + + CssLayout titleLo = new CssLayout(); + titleLo.addStyleName(ValoTheme.MENU_TITLE); + titleLo.addComponent(new Label("menu-title")); + + addComponent(titleLo); + + for (int i = 1; i <= 5; i++) { + Button button = new Button("Menu Item " + i); + button.setPrimaryStyleName(ValoTheme.MENU_ITEM); + addComponent(button); + } + } + + } +} \ No newline at end of file diff --git a/uitest/src/com/vaadin/tests/components/ui/UnnecessaryPaddingInResponsiveUITest.java b/uitest/src/com/vaadin/tests/components/ui/UnnecessaryPaddingInResponsiveUITest.java new file mode 100644 index 0000000000..661db179e7 --- /dev/null +++ b/uitest/src/com/vaadin/tests/components/ui/UnnecessaryPaddingInResponsiveUITest.java @@ -0,0 +1,47 @@ +/* + * Copyright 2000-2014 Vaadin Ltd. + * + * Licensed under the Apache License, Version 2.0 (the "License"); you may not + * use this file except in compliance with the License. You may obtain a copy of + * the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations under + * the License. + */ +package com.vaadin.tests.components.ui; + +import static org.hamcrest.Matchers.equalTo; +import static org.junit.Assert.assertThat; + +import org.junit.Test; +import org.openqa.selenium.WebElement; + +import com.vaadin.tests.tb3.SingleBrowserTest; + +/** + * + * @since + * @author Vaadin Ltd + */ +public class UnnecessaryPaddingInResponsiveUITest extends SingleBrowserTest { + + @Test + public void testUIShouldHaveNoPaddingTop() { + openTestURL(); + + WebElement ui = vaadinElementById("UI"); + + String paddingTop = ui.getCssValue("padding-top"); + + Integer paddingHeight = Integer.parseInt(paddingTop.substring(0, + paddingTop.length() - 2)); + + assertThat(paddingHeight, equalTo(0)); + + } +} -- 2.39.5