From 83cef3a4df1528f4572e287bfc36ed793e7ac539 Mon Sep 17 00:00:00 2001 From: Jouni Koivuviita Date: Thu, 7 Aug 2014 17:03:37 +0300 Subject: [PATCH] VerticalSplitPanel inside a HorizontalSplitPanel doesn't display its second component (Valo theme) (#14152) Change-Id: I81b340206a6020d349593926156264b85253c4e6 --- .../themes/valo/components/_splitpanel.scss | 108 ++++++++---------- .../splitpanel/SplitPanelStyleLeak.java | 85 ++++++++++++++ .../splitpanel/SplitPanelStyleLeakTest.java | 31 +++++ 3 files changed, 165 insertions(+), 59 deletions(-) create mode 100644 uitest/src/com/vaadin/tests/components/splitpanel/SplitPanelStyleLeak.java create mode 100644 uitest/src/com/vaadin/tests/components/splitpanel/SplitPanelStyleLeakTest.java diff --git a/WebContent/VAADIN/themes/valo/components/_splitpanel.scss b/WebContent/VAADIN/themes/valo/components/_splitpanel.scss index e05eb08d16..27da1d9cc6 100644 --- a/WebContent/VAADIN/themes/valo/components/_splitpanel.scss +++ b/WebContent/VAADIN/themes/valo/components/_splitpanel.scss @@ -1,6 +1,11 @@ @mixin valo-splitpanel($primary-stylename : v-splitpanel) { - // No need for parent selector - @include valo-splitpanel-style($primary-stylename: $primary-stylename); + .#{$primary-stylename}-horizontal { + @include valo-splitpanel-style($primary-stylename: $primary-stylename, $orientation: horizontal); + } + + .#{$primary-stylename}-vertical { + @include valo-splitpanel-style($primary-stylename: $primary-stylename, $orientation: vertical); + } } @@ -68,14 +73,14 @@ // Allow undefined/auto height for horizontal split - .#{$primary-stylename}-horizontal { - .#{$primary-stylename}-second-container { + .#{$primary-stylename}-horizontal > div { + > .#{$primary-stylename}-second-container { position: static !important; display: inline-block; vertical-align: top; } - .#{$primary-stylename}-first-container { + > .#{$primary-stylename}-first-container { display: inline-block; vertical-align: top; } @@ -94,76 +99,61 @@ $orientation: vertical horizontal ) { - @if contains($orientation, horizontal) { - .#{$primary-stylename}-hsplitter { - width: $splitter-size; - } - } - - @if contains($orientation, vertical) { - .#{$primary-stylename}-vsplitter { - height: $splitter-size; - } - } - $offset: round(($splitter-active-size - $splitter-size)/-2); @if contains($orientation, horizontal) { - .#{$primary-stylename}-hsplitter:after { - left: $offset; - right: $offset; - } - } + > div > .#{$primary-stylename}-hsplitter { + width: $splitter-size; - @if contains($orientation, vertical) { - .#{$primary-stylename}-vsplitter:after { - top: $offset; - bottom: $offset; - } - } + &:after { + left: $offset; + right: $offset; + } + + div { + &:before { + @include valo-button-style($shadow: $splitter-shadow); + height: auto; + padding: 0; + border-radius: 0; + @include valo-gradient($color: $v-background-color, $direction: to right); + } - @if contains($orientation, horizontal) or contains($orientation, vertical) { - .#{$primary-stylename}-hsplitter div, - .#{$primary-stylename}-vsplitter div { - &:before { - @include valo-button-style($shadow: $splitter-shadow); - height: auto; - padding: 0; - border-radius: 0; + @if $splitter-handle-visible { + &:after { + @include valo-splitpanel-splitter-handle-style($horizontal: true); + } + } } } - } - @if contains($orientation, horizontal) { - .#{$primary-stylename}-hsplitter div { - &:before { - $color: $v-background-color; - @include valo-gradient($color: $color, $direction: to right); - } + > div > .#{$primary-stylename}-second-container { + margin-left: $splitter-size; } } - @if $splitter-handle-visible { - .#{$primary-stylename}-vsplitter div, - .#{$primary-stylename}-hsplitter div { + @if contains($orientation, vertical) { + > div > .#{$primary-stylename}-vsplitter { + height: $splitter-size; + &:after { - @include valo-splitpanel-splitter-handle-style; + top: $offset; + bottom: $offset; } - } - @if contains($orientation, horizontal) { - .#{$primary-stylename}-hsplitter div { - &:after { - @include valo-splitpanel-splitter-handle-style($horizontal: true, $include-common: false); + div { + &:before { + @include valo-button-style($shadow: $splitter-shadow); + height: auto; + padding: 0; + border-radius: 0; } - } - } - } - @if contains($orientation, horizontal) { - &.#{$primary-stylename}-horizontal { - .#{$primary-stylename}-second-container { - margin-left: $splitter-size; + @if $splitter-handle-visible { + &:after { + @include valo-splitpanel-splitter-handle-style; + } + } } } } diff --git a/uitest/src/com/vaadin/tests/components/splitpanel/SplitPanelStyleLeak.java b/uitest/src/com/vaadin/tests/components/splitpanel/SplitPanelStyleLeak.java new file mode 100644 index 0000000000..b634e43f46 --- /dev/null +++ b/uitest/src/com/vaadin/tests/components/splitpanel/SplitPanelStyleLeak.java @@ -0,0 +1,85 @@ +/* + * 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.splitpanel; + +import com.vaadin.server.VaadinRequest; +import com.vaadin.tests.components.AbstractTestUI; +import com.vaadin.ui.AbstractSplitPanel; +import com.vaadin.ui.CssLayout; +import com.vaadin.ui.HorizontalSplitPanel; +import com.vaadin.ui.Label; +import com.vaadin.ui.VerticalSplitPanel; + +public class SplitPanelStyleLeak extends AbstractTestUI { + + @Override + protected void setup(VaadinRequest request) { + CssLayout wrap = new CssLayout(); + addComponent(wrap); + + wrap.addComponent(getSplit(true, null)); + wrap.addComponent(getSplit(false, null)); + + wrap.addComponent(getSplit(true, "small")); + wrap.addComponent(getSplit(false, "small")); + + wrap.addComponent(getSplit(true, "large")); + wrap.addComponent(getSplit(false, "large")); + } + + private AbstractSplitPanel getSplit(boolean horizontal, String style) { + AbstractSplitPanel split = horizontal ? new HorizontalSplitPanel() + : new VerticalSplitPanel(); + + if (style != null) { + split.addStyleName(style); + } + split.setWidth("300px"); + split.setHeight("300px"); + + AbstractSplitPanel content = horizontal ? new VerticalSplitPanel() + : new HorizontalSplitPanel(); + content.addComponent(new Label("First")); + content.addComponent(new Label("Second")); + split.addComponent(content); + + content = horizontal ? new VerticalSplitPanel() + : new HorizontalSplitPanel(); + content.addComponent(new Label("First")); + split.addComponent(content); + + // Inception level nesting, but we need to test that the first level + // styles don't leak to a nested split panel with the same orientation + AbstractSplitPanel content2 = horizontal ? new HorizontalSplitPanel() + : new VerticalSplitPanel(); + content2.addComponent(new Label("First")); + content2.addComponent(new Label("Second")); + content.addComponent(content2); + + return split; + } + + @Override + protected String getTestDescription() { + return "Vertical/horizontal SplitPanel styles should not leak to any contained horizontal/vertical SplitPanel."; + } + + @Override + protected Integer getTicketNumber() { + return 14152; + } + +} diff --git a/uitest/src/com/vaadin/tests/components/splitpanel/SplitPanelStyleLeakTest.java b/uitest/src/com/vaadin/tests/components/splitpanel/SplitPanelStyleLeakTest.java new file mode 100644 index 0000000000..1ad9cdb461 --- /dev/null +++ b/uitest/src/com/vaadin/tests/components/splitpanel/SplitPanelStyleLeakTest.java @@ -0,0 +1,31 @@ +/* + * 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.splitpanel; + +import java.io.IOException; + +import org.junit.Test; + +import com.vaadin.tests.tb3.MultiBrowserTest; + +public class SplitPanelStyleLeakTest extends MultiBrowserTest { + + @Test + public void checkScreenshot() throws IOException { + openTestURL(); + compareScreen("all"); + } +} -- 2.39.5