From 2febf6e86a4f3d0d294edf96e81b9674e2bac8e4 Mon Sep 17 00:00:00 2001 From: Jouni Koivuviita Date: Tue, 5 Aug 2014 22:54:46 +0300 Subject: Fix tree row height in IE8 (Valo) Change-Id: Ia942f91d22e7fa459e345ea4036e56d071054eb7 --- WebContent/VAADIN/themes/valo/components/_tree.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) (limited to 'WebContent/VAADIN') diff --git a/WebContent/VAADIN/themes/valo/components/_tree.scss b/WebContent/VAADIN/themes/valo/components/_tree.scss index 1327320cd4..7e00f4ec09 100644 --- a/WebContent/VAADIN/themes/valo/components/_tree.scss +++ b/WebContent/VAADIN/themes/valo/components/_tree.scss @@ -51,7 +51,6 @@ $v-tree-expand-animation-enabled: false !default; opacity: 0; .v-ie8 & { - content: "+"; position: static; margin-left: -1.9em; vertical-align: top; @@ -72,6 +71,9 @@ $v-tree-expand-animation-enabled: false !default; overflow: hidden; white-space: nowrap; + // Mainly to satisty IE8 (doesn't harm other browsers) + vertical-align: top; + & > div { display: inline-block; width: 100%; -- cgit v1.2.3 From eb48509c1a2c0291f676013a98b9e566c23c35ab Mon Sep 17 00:00:00 2001 From: Jouni Koivuviita Date: Tue, 5 Aug 2014 22:56:06 +0300 Subject: TexArea 'white-space: normal' breaks multiline texts in Valo (#14225) Change-Id: I228d065d13cc6f85f6901702d33121c675af6fc4 --- WebContent/VAADIN/themes/valo/components/_textarea.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'WebContent/VAADIN') diff --git a/WebContent/VAADIN/themes/valo/components/_textarea.scss b/WebContent/VAADIN/themes/valo/components/_textarea.scss index 3b610251d3..79bdb04d3c 100644 --- a/WebContent/VAADIN/themes/valo/components/_textarea.scss +++ b/WebContent/VAADIN/themes/valo/components/_textarea.scss @@ -47,9 +47,9 @@ $shadow: $shadow, $states: $states); - //display: block; // Fixes extra white-space under the textarea element height: auto; resize: none; + white-space: pre-wrap; // Restore default, because .v-widget sets it to normal .v-ie8 &, .v-ie9 & { -- cgit v1.2.3 From 3be1db9dd80f4df2d81a89861541241c3100d892 Mon Sep 17 00:00:00 2001 From: Jouni Koivuviita Date: Tue, 5 Aug 2014 22:57:31 +0300 Subject: Rich text area has broken icons in Valo theme (#14219) Change-Id: I5e7d6a11bee0127bc3f9f4dd32c0828f28b0659d --- WebContent/VAADIN/themes/valo/components/_richtextarea.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'WebContent/VAADIN') diff --git a/WebContent/VAADIN/themes/valo/components/_richtextarea.scss b/WebContent/VAADIN/themes/valo/components/_richtextarea.scss index 702bda2ac4..2d32769898 100644 --- a/WebContent/VAADIN/themes/valo/components/_richtextarea.scss +++ b/WebContent/VAADIN/themes/valo/components/_richtextarea.scss @@ -48,7 +48,7 @@ $valo-richtextarea-use-font-awesome: true !default; "Toggle Strikethrough" "\f0cc", "Indent Right" "\f03c", "Indent Left" "\f03b", - "Insert Horizontal Rule" "—", + "Insert Horizontal Rule" "\2014", "Insert Ordered List" "\f0cb", "Insert Unordered List" "\f0ca", "Insert Image" "\f03e", -- cgit v1.2.3 From 83cef3a4df1528f4572e287bfc36ed793e7ac539 Mon Sep 17 00:00:00 2001 From: Jouni Koivuviita Date: Thu, 7 Aug 2014 17:03:37 +0300 Subject: VerticalSplitPanel inside a HorizontalSplitPanel doesn't display its second component (Valo theme) (#14152) Change-Id: I81b340206a6020d349593926156264b85253c4e6 --- .../VAADIN/themes/valo/components/_splitpanel.scss | 108 ++++++++++----------- .../components/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 (limited to 'WebContent/VAADIN') 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"); + } +} -- cgit v1.2.3 From dee87e1172cee9be7c4d2b22e3974babecc30906 Mon Sep 17 00:00:00 2001 From: Jouni Koivuviita Date: Thu, 7 Aug 2014 14:42:46 +0300 Subject: Empty rows in Table are badly styles (#14112) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Reduced padding around widgets inside table cells also. Set z-index for drag’n’drop styles to set the above any relative positioned widgets inside table cells. Change-Id: I512c61428aa88678261f276148d3ba39134a6411 --- WebContent/VAADIN/themes/valo/components/_table.scss | 14 ++++++++++++++ uitest/src/com/vaadin/tests/themes/valo/Tables.java | 2 +- 2 files changed, 15 insertions(+), 1 deletion(-) (limited to 'WebContent/VAADIN') diff --git a/WebContent/VAADIN/themes/valo/components/_table.scss b/WebContent/VAADIN/themes/valo/components/_table.scss index deef084561..2335c59873 100644 --- a/WebContent/VAADIN/themes/valo/components/_table.scss +++ b/WebContent/VAADIN/themes/valo/components/_table.scss @@ -162,6 +162,7 @@ $v-table-background-color: null !default; .#{$primary-stylename}-cell-content { border-left: $v-table-border-width solid $border-color; overflow: hidden; + height: $v-table-row-height; &:first-child { border-left: none; @@ -181,6 +182,10 @@ $v-table-background-color: null !default; padding: $vertical-padding $v-table-cell-padding-horizontal; @include box-sizing(border-box); margin-right: 0 !important; + + > .v-widget { + margin: round($vertical-padding / -2) round($v-table-cell-padding-horizontal / -2); + } } .#{$primary-stylename}-body { @@ -429,6 +434,7 @@ $v-table-background-color: null !default; content: ""; display: block; position: absolute; + z-index: 1; height: $v-table-row-height + $v-table-border-width; left: 0; right: 0; @@ -588,8 +594,16 @@ $v-table-background-color: null !default; height: $row-height; } + .#{$primary-stylename}-cell-content { + height: $row-height; + } + .#{$primary-stylename}-cell-wrapper { padding: $vertical-padding $cell-padding-horizontal; + + > .v-widget { + margin: round($vertical-padding / -2) round($cell-padding-horizontal / -2); + } } .#{$primary-stylename}-header-cell-asc .#{$primary-stylename}-sort-indicator, diff --git a/uitest/src/com/vaadin/tests/themes/valo/Tables.java b/uitest/src/com/vaadin/tests/themes/valo/Tables.java index 442e3e509a..62ef67f9f3 100644 --- a/uitest/src/com/vaadin/tests/themes/valo/Tables.java +++ b/uitest/src/com/vaadin/tests/themes/valo/Tables.java @@ -48,7 +48,7 @@ public class Tables extends VerticalLayout implements View { CheckBox footer = new CheckBox("Footer", true); CheckBox sized = new CheckBox("Sized"); CheckBox expandRatios = new CheckBox("Expand ratios"); - CheckBox stripes = new CheckBox("Sripes", true); + CheckBox stripes = new CheckBox("Stripes", true); CheckBox verticalLines = new CheckBox("Vertical lines", true); CheckBox horizontalLines = new CheckBox("Horizontal lines", true); CheckBox borderless = new CheckBox("Borderless"); -- cgit v1.2.3 From adf1586875cdf2d2b0e31d9ed2bfc7054395d381 Mon Sep 17 00:00:00 2001 From: Jouni Koivuviita Date: Tue, 5 Aug 2014 23:08:10 +0300 Subject: Fix color picker button for IE8 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The selected color hex value is no longer overlapping with the color square. But now when there’s no hex value as the button caption, there’s extra white space on the right edge of the button, which is unavoidable. This is a lesser evil. Change-Id: I9c7e36fdf22f63c9cad6972f0f2038513f841d6b --- .../VAADIN/themes/valo/components/_colorpicker.scss | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) (limited to 'WebContent/VAADIN') diff --git a/WebContent/VAADIN/themes/valo/components/_colorpicker.scss b/WebContent/VAADIN/themes/valo/components/_colorpicker.scss index 4509c23f15..4460aafb21 100644 --- a/WebContent/VAADIN/themes/valo/components/_colorpicker.scss +++ b/WebContent/VAADIN/themes/valo/components/_colorpicker.scss @@ -203,6 +203,23 @@ + .v-button-caption:not(:empty) { margin-left: round($v-unit-size/2); } + + .v-ie8 & { + position: relative; + top: auto; + right: auto; + bottom: auto; + left: auto; + width: $v-font-size; + height: $v-font-size; + display: inline-block; + vertical-align: middle; + margin: 0 round($v-font-size / -2); + + + .v-button-caption { + margin-left: round($v-unit-size/2); + } + } } } -- cgit v1.2.3 From 29a3cfc299294f4de688c2e99bb977727d6616a4 Mon Sep 17 00:00:00 2001 From: Jouni Koivuviita Date: Tue, 5 Aug 2014 23:09:59 +0300 Subject: Fix native select font color (Valo) Change-Id: Ibeb5849417776847f40422ff1b9fb99c63d23af7 --- WebContent/VAADIN/themes/valo/components/_nativeselect.scss | 1 + WebContent/VAADIN/themes/valo/shared/_global.scss | 1 - 2 files changed, 1 insertion(+), 1 deletion(-) (limited to 'WebContent/VAADIN') diff --git a/WebContent/VAADIN/themes/valo/components/_nativeselect.scss b/WebContent/VAADIN/themes/valo/components/_nativeselect.scss index 80e9ab8000..1b7469ed2b 100644 --- a/WebContent/VAADIN/themes/valo/components/_nativeselect.scss +++ b/WebContent/VAADIN/themes/valo/components/_nativeselect.scss @@ -23,6 +23,7 @@ @mixin valo-nativeselect-select-style { border: valo-border(); @include valo-gradient; + color: valo-font-color($v-background-color); &:focus { outline: none; diff --git a/WebContent/VAADIN/themes/valo/shared/_global.scss b/WebContent/VAADIN/themes/valo/shared/_global.scss index 71d72b367c..ad53264d06 100644 --- a/WebContent/VAADIN/themes/valo/shared/_global.scss +++ b/WebContent/VAADIN/themes/valo/shared/_global.scss @@ -304,7 +304,6 @@ $valo-shared-pathPrefix: null; font: inherit; font-weight: 400; line-height: inherit; - color: inherit; padding: round($v-unit-size/8); margin: 0; border-radius: $v-border-radius; -- cgit v1.2.3 From e8cc46e64b1b9ae39d78360088586d6bcf21c0e9 Mon Sep 17 00:00:00 2001 From: Jouni Koivuviita Date: Tue, 5 Aug 2014 23:17:28 +0300 Subject: Update textfield readonly style (Valo) Make readonly textfields show better inside panels for instance (so that they look different from normal textfields). Change-Id: If2b9b810a5bf0d7388563ea1d7560bbf1b9f149a --- WebContent/VAADIN/themes/valo/components/_textfield.scss | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) (limited to 'WebContent/VAADIN') diff --git a/WebContent/VAADIN/themes/valo/components/_textfield.scss b/WebContent/VAADIN/themes/valo/components/_textfield.scss index c314a0c855..39dfa3420e 100644 --- a/WebContent/VAADIN/themes/valo/components/_textfield.scss +++ b/WebContent/VAADIN/themes/valo/components/_textfield.scss @@ -1,4 +1,5 @@ $v-textfield-background-color: if(is-dark-color($v-app-background-color), darken($v-app-background-color, 4%), lighten($v-app-background-color, 8%)) !default; +$v-textfield-background-color--readonly: $v-app-background-color; $v-textfield-bevel: inset 0 1px 0 v-shade !default; $v-textfield-shadow: 0 1px 0 (v-tint 2) !default; $v-textfield-font-weight: 400 !default; @@ -12,7 +13,6 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default; - @mixin valo-textfield-style ( $unit-size : $v-unit-size, $padding : null, // Computed by default @@ -134,10 +134,12 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default; @mixin valo-textfield-readonly-style { - background: transparent; + background: $v-textfield-background-color--readonly; + color: valo-font-color($v-textfield-background-color--readonly) @include box-shadow(none); &:focus { - @include valo-focus-style($include-box-shadow: true); + box-shadow: none; + border-color: first-color(valo-border($v-textfield-border, $v-textfield-background-color--readonly)); } } -- cgit v1.2.3 From bf40ca74a0cc9950a74ab6dc418fcf8415c1e695 Mon Sep 17 00:00:00 2001 From: Jouni Koivuviita Date: Tue, 5 Aug 2014 23:39:26 +0300 Subject: Valo reports theme version wrong in debug window (#14338) Change-Id: I15f35e2c1e5e61027fc4fca6593f24f1112624c7 --- WebContent/VAADIN/themes/valo/shared/_global.scss | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'WebContent/VAADIN') diff --git a/WebContent/VAADIN/themes/valo/shared/_global.scss b/WebContent/VAADIN/themes/valo/shared/_global.scss index ad53264d06..ad5b9297cf 100644 --- a/WebContent/VAADIN/themes/valo/shared/_global.scss +++ b/WebContent/VAADIN/themes/valo/shared/_global.scss @@ -13,6 +13,11 @@ $valo-global-included: false !default; @mixin valo-global { @if $valo-global-included == false { + // Version info for the debug window + .v-vaadin-version:after { + content: "@version@"; + } + // Core widget styles come before any other component (and are always included), // so that it has the least specificity @include valo-widget; -- cgit v1.2.3 From 67da8682f4f262ebf2d7598fa0f0a57fa013cd46 Mon Sep 17 00:00:00 2001 From: Jouni Koivuviita Date: Wed, 6 Aug 2014 00:39:05 +0300 Subject: Refactor Valo main menu styles into separate mixins MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add a new utility mixin for defining width-ranges and height-ranges. Refactored ValoThemeUI to use Responsive and styled it to fit in a variety of viewport widths. Fixed an issue with “flat-dark” using named colors, which trips the “type-of” function. Theme “theme select”. Change-Id: Iff55ca2c23d2e279b6199590db2fdfe51423c1df --- .../themes/tests-valo-flatdark/_variables.scss | 2 +- WebContent/VAADIN/themes/tests-valo/_valotest.scss | 34 +- .../themes/tests-valo/img/profile-pic-300px.jpg | Bin 0 -> 6406 bytes .../VAADIN/themes/valo/optional/_valo-menu.scss | 573 +++++++++++++++------ WebContent/VAADIN/themes/valo/util/_util.scss | 14 + .../com/vaadin/tests/themes/valo/ValoThemeUI.java | 62 ++- 6 files changed, 497 insertions(+), 188 deletions(-) create mode 100644 WebContent/VAADIN/themes/tests-valo/img/profile-pic-300px.jpg (limited to 'WebContent/VAADIN') diff --git a/WebContent/VAADIN/themes/tests-valo-flatdark/_variables.scss b/WebContent/VAADIN/themes/tests-valo-flatdark/_variables.scss index f68f9c266d..fa785af8b8 100644 --- a/WebContent/VAADIN/themes/tests-valo-flatdark/_variables.scss +++ b/WebContent/VAADIN/themes/tests-valo-flatdark/_variables.scss @@ -1,7 +1,7 @@ $v-app-loading-text: "Dark & Flat Valo"; $v-background-color: #000; -$v-focus-color: orange; +$v-focus-color: #ffa500; $v-font-size: 15px; $v-font-weight: 600; $v-unit-size: 42px; diff --git a/WebContent/VAADIN/themes/tests-valo/_valotest.scss b/WebContent/VAADIN/themes/tests-valo/_valotest.scss index f775938e13..7c024b323e 100644 --- a/WebContent/VAADIN/themes/tests-valo/_valotest.scss +++ b/WebContent/VAADIN/themes/tests-valo/_valotest.scss @@ -1,9 +1,35 @@ @mixin valotest { @include valo; - .valo-menu .v-checkbox { - margin: round($v-unit-size/2); - font-weight: 400; + #themeSelect { + position: fixed; + z-index: 1000; + top: 0; + right: 0; + padding: 0 10px; + background-color: darken($v-app-background-color, 5%); + background-color: rgba(darken($v-app-background-color, 5%), .9); + color: valo-font-color($v-app-background-color); + border-radius: 0 0 0 $v-border-radius; + + &:before { + content: "Theme:"; + } + + select { + background: transparent; + color: inherit; + border: none; + display: inline-block; + } + } + + .v-ui { + @include width-range($max: 800px) { + #themeSelect { + top: $v-unit-size; + } + } } $color1: hsl(220, 5%, 38%); @@ -115,4 +141,4 @@ .v-accordion-item-color1 .v-accordion-item-caption { @include valo-accordion-item-caption-style($background-color: $color2); } -} \ No newline at end of file +} diff --git a/WebContent/VAADIN/themes/tests-valo/img/profile-pic-300px.jpg b/WebContent/VAADIN/themes/tests-valo/img/profile-pic-300px.jpg new file mode 100644 index 0000000000..8a98078243 Binary files /dev/null and b/WebContent/VAADIN/themes/tests-valo/img/profile-pic-300px.jpg differ diff --git a/WebContent/VAADIN/themes/valo/optional/_valo-menu.scss b/WebContent/VAADIN/themes/valo/optional/_valo-menu.scss index f3377f232c..8bd26e2b10 100644 --- a/WebContent/VAADIN/themes/valo/optional/_valo-menu.scss +++ b/WebContent/VAADIN/themes/valo/optional/_valo-menu.scss @@ -1,214 +1,465 @@ -$valo-menu-background-color: null !default; +$valo-menu-background-color: scale-color($v-app-background-color, $lightness: if(color-luminance($v-app-background-color) < 10, 15%, -70%)) !default; -@mixin valo-menu { - - $bg-lightness: if(color-luminance($v-app-background-color) < 10, 15%, -70%); - $bg: $valo-menu-background-color or scale-color($v-app-background-color, $lightness: $bg-lightness); - $font-color: valo-font-color($bg, 0.5); +@mixin valo-menu ($bg: $valo-menu-background-color) { .valo-menu { + @include valo-menu-style($bg); + } + + .valo-menu-toggle { + display: none; + position: fixed; + z-index: 200; + $offset: floor(($v-unit-size - $v-unit-size * 0.8) / 2); + top: $offset; + left: $offset; + min-width: 0; + } + + .valo-menu-part { + border-left: valo-border($color: $bg, $strength: 0.6); height: 100%; - @include linear-gradient(to left, (scale-color($bg, $lightness: valo-gradient-opacity()*-1) 0%, $bg round($v-unit-size/4)), $fallback: $bg); - color: $font-color; - font-size: round($v-font-size * 0.9); - line-height: round($v-unit-size * 0.8); - border-right: valo-border($color: $bg); + padding-bottom: $v-unit-size; + overflow: auto; + + &:first-child { + border-left: none; + } + } + + .valo-menu-title, + .valo-menu-subtitle, + .valo-menu-item { + display: block; + line-height: inherit; white-space: nowrap; + position: relative; + + .valo-menu-badge { + position: absolute; + right: round($v-unit-size/2); + } + } - .valo-menu-part { - border-left: valo-border($color: $bg, $strength: 0.6); - height: 100%; - padding-bottom: $v-unit-size; - overflow: auto; + .valo-menu-title { + @include valo-menu-title-style; + text-align: center; - &:first-child { - border-left: none; - } + .v-menubar.v-menubar { + background: transparent; + border-color: first-color(valo-border($color: $v-selection-color)); + color: inherit; + @include box-shadow(none); + text-shadow: inherit; } - .valo-menu-title, - .valo-menu-subtitle, - .valo-menu-item { - display: block; - line-height: inherit; - white-space: nowrap; - position: relative; + .v-menubar-menuitem { + background: transparent; + @include box-shadow(valo-bevel-and-shadow($bevel: $v-bevel, $background-color: $v-selection-color, $gradient: $v-gradient)); + text-shadow: inherit; + font-size: $v-font-size; + border-color: inherit; + } - .valo-menu-badge { - position: absolute; - right: round($v-unit-size/2); - } + h1, .v-label-h1, + h2, .v-label-h2, + h3, .v-label-h3, + h4, .v-label-h4 { + margin-top: 0; + margin-bottom: 0; + color: inherit; } + } - .valo-menu-title { - line-height: 1.2; - @include valo-gradient($color: $v-selection-color); - $font-color: valo-font-color($v-selection-color, 1); - color: $font-color; - text-shadow: valo-text-shadow($font-color: $font-color, $background-color: $v-selection-color); - padding: round($v-unit-size/3) round($v-unit-size/2); - font-size: round($v-font-size * 0.9); - border-bottom: valo-border($color: $v-selection-color); - @include box-shadow(valo-bevel-and-shadow($shadow: $v-shadow)); - - .v-menubar { - background: transparent; - border-color: first-color(valo-border($color: $v-selection-color)); - color: inherit; - @include box-shadow(none); - text-shadow: inherit; + .v-menubar-user-menu { + @include valo-menubar-borderless-style; + margin: round($v-unit-size/2) round($v-unit-size/5); + display: block; + text-align: center; + height: auto; + color: inherit; + + > .v-menubar-menuitem { + color: inherit; + white-space: normal; + line-height: 1.4; + + img.v-icon { + width: round($v-unit-size * 1.5); + height: round($v-unit-size * 1.5); + border-radius: ceil($v-unit-size * 1.5 / 2); + box-shadow: valo-bevel-and-shadow($bevel: null, $shadow: $v-shadow); + display: block; + margin: 0 auto .3em; } + } - .v-menubar-menuitem { - background: transparent; - @include box-shadow(valo-bevel-and-shadow($bevel: $v-bevel, $background-color: $v-selection-color, $gradient: $v-gradient)); - text-shadow: inherit; - font-size: $v-font-size; - border-color: inherit; - } + .v-menubar-menuitem-selected { + background: transparent; + } + } + + .valo-menu-subtitle { + @include valo-menu-subtitle-style($bg); + + .valo-menu-badge { + color: mix(valo-font-color($bg), $v-selection-color); } + } + + .valo-menuitems { + display: block; + } + + .valo-menu-item { + @include valo-menu-item-style($bg); + } + + .valo-menu-part.large-icons { + @include valo-menu-large-icons-style($bg); + } + + .valo-menu-logo { + @include valo-menu-logo-style; + } + + @include valo-menu-responsive; + +} - .valo-menu-subtitle { - color: valo-font-color($bg, 0.33); - margin: round($v-unit-size/5) 0 round($v-unit-size/5) round($v-unit-size/2); - border-bottom: valo-border($color: $bg, $strength: 0.5, $border: first-number($v-border) solid v-tone); - .valo-menu-badge { - color: mix(valo-font-color($bg), $v-selection-color); +@mixin valo-menu-responsive { + .v-ui { + @include width-range($min: 801px, $max: 1100px) { + .valo-menu-part { + @include valo-menu-large-icons-style($valo-menu-background-color); } } - .valo-menu-item { - outline: none; - font-weight: $v-font-weight + 100; - padding: 0 round($v-unit-size) 0 round($v-unit-size/2); - cursor: pointer; - position: relative; - text-shadow: valo-text-shadow($font-color: $font-color, $background-color: $bg, $offset: -2px); - @include transition(background-color 300ms, color 60ms); + @include width-range($max: 800px) { + padding-top: $v-unit-size; + -webkit-box-sizing: border-box; + box-sizing: border-box; + + .v-loading-indicator { + top: $v-unit-size; + } + + > .v-widget { + position: relative !important + } - $diff: color-luminance($bg) - color-luminance($v-selection-color); - $active-color: $v-selection-color; - @if abs($diff) < 30 { - $active-color: lighten($v-selection-color, 10%); + .valo-menu { + border-right: none; } - .valo-menu-item-caption { - vertical-align: middle; + .valo-menu-toggle { display: inline-block; - width: 90%; - max-width: 15em; - padding-right: round($v-unit-size/2); - text-overflow: ellipsis; - overflow: hidden; } - &.selected { - background: darken($bg, 3%); + .valo-menu-title { + position: fixed; + z-index: 100; + top: 0; + left: 0; + right: 0; + height: $v-unit-size !important; + padding-top: 0; + padding-bottom: 0; + } - .v-icon { - color: $active-color; + .valo-menu .v-menubar-user-menu { + position: fixed; + z-index: 100; + top: 0; + right: 0; + margin: 0; + padding: 0; + height: $v-unit-size; + color: valo-font-color($v-selection-color, 0.5); + + .v-menubar-menuitem { + line-height: $v-unit-size - 1px; } - .valo-menu-badge { - @include valo-gradient($color: $active-color); - color: valo-font-color($active-color); + img.v-icon { + display: inline-block; + margin: 0 round($v-unit-size / 6) 0 0; + width: round($v-unit-size / 2); + height: round($v-unit-size / 2); + border-radius: ceil($v-unit-size / 4); } } - &:hover, - &.selected { - color: valo-font-color($bg, 1); + .valo-menuitems { + @include valo-menu-style; + position: fixed; + z-index: 200; + top: $v-unit-size; + bottom: 0; + height: auto; + max-width: 100%; + overflow: auto; + padding: round($v-unit-size / 2) 0; + @include transform(translatex(-100%)); + @include transition(all 300ms); } - // Font icons - span.v-icon { - min-width: 1em; - margin-right: round($v-unit-size/2); - text-align: center; - vertical-align: middle; + .valo-menu-visible .valo-menuitems { + @include transform(translatex(0%)); + } + } - + span { - margin-left: 0; - } + @include width-range($max: 500px) { + .valo-menu-toggle .v-button-caption { + display: none; } - .valo-menu-badge { - background: lighten($bg, 5%); - @include transition(background-color 300ms); - line-height: 1; - padding: round($v-unit-size/9) round($v-unit-size/6); - min-width: round($v-font-size/1.5); - text-align: center; - top: (round($v-unit-size * 0.8) - round($v-font-size * 0.9) - round($v-unit-size/9) * 2) / 2; - border-radius: $v-border-radius; + .valo-menu .v-menubar-user-menu .v-menubar-menuitem-caption { + display: inline-block; + width: round($v-unit-size / 2); + overflow: hidden; } } + } +} - .valo-menu-part.large-icons { - $bg: darken($bg, 4%); - background-color: $bg; - - .valo-menu-item { - font-size: $v-unit-size; - line-height: 1; - padding: round($v-unit-size/3); - min-width: $v-unit-size * 2; - max-width: $v-unit-size * 3; - text-align: center; - - .valo-menu-item-caption { - display: block; - width: auto; - margin: .3em 0 0; - padding: 0; - font-size: round($v-font-size * 0.7); - } - .v-icon { - margin: 0; - } - span.v-icon { - opacity: 0.8; - } +@mixin valo-menu-style ($bg: $valo-menu-background-color) { + height: 100%; + @include linear-gradient(to left, (scale-color($bg, $lightness: valo-gradient-opacity()*-1) 0%, $bg round($v-unit-size/4)), $fallback: $bg); + color: valo-font-color($bg, 0.5); + font-size: round($v-font-size * 0.9); + line-height: round($v-unit-size * 0.8); + border-right: valo-border($color: $bg); + white-space: nowrap; +} - &.selected { - background: darken($bg, 3%); - .v-icon { - opacity: 1; - } - .valo-menu-badge { - border-color: darken($bg, 3%); - } - } +@mixin valo-menu-title-style { + line-height: 1.2; + @include valo-gradient($color: $v-selection-color); + $font-color: valo-font-color($v-selection-color, 1); + color: $font-color; + text-shadow: valo-text-shadow($font-color: $font-color, $background-color: $v-selection-color); + padding: round($v-unit-size/3) round($v-unit-size/2); + font-size: round($v-font-size * 0.9); + border-bottom: valo-border($color: $v-selection-color); + @include box-shadow(valo-bevel-and-shadow($shadow: $v-shadow)); +} - .valo-menu-badge { - padding-left: round($v-unit-size/9); - padding-right: round($v-unit-size/9); - top: round($v-unit-size/5); - right: round($v-unit-size/5); - border: 2px solid $bg; - } - } + + +@mixin valo-menu-subtitle-style ($bg: $valo-menu-background-color) { + color: valo-font-color($bg, 0.33); + margin: round($v-unit-size/5) 0 round($v-unit-size/5) round($v-unit-size/2); + border-bottom: valo-border($color: $bg, $strength: 0.5, $border: first-number($v-border) solid v-tone); +} + + + +@mixin valo-menu-item-style ($bg: $valo-menu-background-color) { + $font-color: valo-font-color($bg, 0.5); + outline: none; + font-weight: $v-font-weight + 100; + padding: 0 round($v-unit-size) 0 round($v-unit-size/2); + cursor: pointer; + position: relative; + text-shadow: valo-text-shadow($font-color: $font-color, $background-color: $bg, $offset: -2px); + @include transition(background-color 300ms, color 60ms); + + $diff: color-luminance($bg) - color-luminance($v-selection-color); + $active-color: $v-selection-color; + @if abs($diff) < 30 { + $active-color: lighten($v-selection-color, 10%); + } + + [class*="caption"] { + vertical-align: middle; + display: inline-block; + width: 90%; + max-width: 15em; + padding-right: round($v-unit-size/2); + text-overflow: ellipsis; + overflow: hidden; + } + + &.selected { + background: darken($bg, 3%); + + .v-icon { + color: $active-color; + } + + [class*="badge"] { + @include valo-badge-style($states: active, $active-color: $active-color); + } + } + + &:focus, + &:hover, + &.selected { + color: valo-font-color($bg, 1); + } + + // Font icons + span.v-icon { + min-width: 1em; + margin-right: round($v-unit-size/2); + text-align: center; + vertical-align: middle; + + @if $v-gradient { + -webkit-mask-image: -webkit-gradient(linear, left top, left bottom, from(black), to(rgba(0, 0, 0, 0.75))); + } + + + span { + margin-left: 0; } + } - .valo-menu-logo { + [class*="badge"] { + @include valo-badge-style($states: inactive, $background-color: lighten($bg, 5%)); + } +} + + + + +@mixin valo-badge-style ($states: inactive active, $background-color: null, $active-color: $v-selection-color) { + @if contains($states, inactive) { + background-color: $background-color; + @include transition(background-color 300ms); + line-height: 1; + padding: round($v-unit-size/9) round($v-unit-size/6); + min-width: round($v-font-size/1.5); + text-align: center; + top: (round($v-unit-size * 0.8) - round($v-font-size * 0.9) - round($v-unit-size/9) * 2) / 2; + border-radius: $v-border-radius; + } + + @if contains($states, active) { + @include valo-gradient($color: $active-color); + color: valo-font-color($active-color); + } +} + + + +@mixin valo-menu-large-icons-style ($bg: darken($valo-menu-background-color, 4%)) { + background-color: $bg; + min-width: $v-unit-size * 2; + max-width: $v-unit-size * 3; + + .valo-menu-title { + font-size: round($v-font-size * 0.75); + + .v-label-undef-w { + white-space: normal; + } + } + + .v-menubar-user-menu { + margin-left: 0; + margin-right: 0; + font-size: round($v-font-size * 0.7); + + img.v-icon { + width: round($v-unit-size/1.3); + height: round($v-unit-size/1.3); + } + } + + [class*="subtitle"] { + margin: round($v-unit-size/4) 0 0; + padding: round($v-unit-size/5) round($v-unit-size/1.5) round($v-unit-size/5) round($v-unit-size/4); + line-height: 1; + border: none; + text-overflow: ellipsis; + overflow: hidden; + background: darken($bg, 6%); + font-size: round($v-font-size * 0.8); + box-shadow: valo-bevel-and-shadow($shadow: $v-shadow); + + [class*="badge"] { + right: round($v-unit-size/4); + } + + + .valo-menu-item { + border-top: none; + } + } + + .valo-menu-item { + display: block; + font-size: round($v-font-size * 1.6); + line-height: 1; + padding: round($v-unit-size/3); + text-align: center; + border-top: valo-border($color: $bg, $strength: 0.2, $border: first-number($v-border) solid v-tone); + + &:first-child { + border-top: none; + } + + [class*="caption"] { display: block; - overflow: hidden; - width: round($v-unit-size * 1.2) !important; - height: round($v-unit-size * 1.2); - border-radius: $v-border-radius; - text-align: center; - @include valo-gradient($color: $v-selection-color); - color: valo-font-color($v-selection-color, 1); - font-size: round($v-unit-size/1.5); - line-height: round($v-unit-size * 1.2); - margin: round($v-unit-size/2) auto; - @include box-shadow(valo-bevel-and-shadow($shadow: $v-shadow)); + width: auto; + margin: .3em 0 0; + padding: 0; + font-size: round($v-font-size * 0.7); + line-height: 1.3; + } + + .v-icon { + margin: 0; + } + + span.v-icon { + opacity: 0.8; + } + + &.selected { + background: darken($bg, 3%); + + .v-icon { + opacity: 1; + } + + [class*="badge"] { + border-color: darken($bg, 3%); + } + } + + [class*="badge"] { + padding-left: round($v-unit-size/9); + padding-right: round($v-unit-size/9); + top: round($v-unit-size/5); + right: round($v-unit-size/5); + border: 2px solid $bg; } } +} + + +@mixin valo-menu-logo-style { + display: block; + overflow: hidden; + width: round($v-unit-size * 1.2) !important; + height: round($v-unit-size * 1.2); + border-radius: $v-border-radius; + text-align: center; + @include valo-gradient($color: $v-selection-color); + color: valo-font-color($v-selection-color, 1); + font-size: round($v-unit-size/1.5); + line-height: round($v-unit-size * 1.2); + margin: round($v-unit-size/2) auto; + @include box-shadow(valo-bevel-and-shadow($shadow: $v-shadow)); + + &:focus { + outline: none; + } } diff --git a/WebContent/VAADIN/themes/valo/util/_util.scss b/WebContent/VAADIN/themes/valo/util/_util.scss index 2f7b28b3ad..a510695560 100644 --- a/WebContent/VAADIN/themes/valo/util/_util.scss +++ b/WebContent/VAADIN/themes/valo/util/_util.scss @@ -25,3 +25,17 @@ -webkit-touch-callout: none; cursor: pointer; } + + + +@mixin width-range($min: 0, $max: null) { + &[width-range~="#{$min}-#{$max}"] { + @content; + } +} + +@mixin height-range($min: 0, $max: null) { + &[height-range~="#{$min}-#{$max}"] { + @content; + } +} diff --git a/uitest/src/com/vaadin/tests/themes/valo/ValoThemeUI.java b/uitest/src/com/vaadin/tests/themes/valo/ValoThemeUI.java index 27a256665e..1f92265d9d 100644 --- a/uitest/src/com/vaadin/tests/themes/valo/ValoThemeUI.java +++ b/uitest/src/com/vaadin/tests/themes/valo/ValoThemeUI.java @@ -36,13 +36,14 @@ import com.vaadin.navigator.ViewChangeListener; import com.vaadin.server.FontAwesome; import com.vaadin.server.Page; import com.vaadin.server.Resource; +import com.vaadin.server.Responsive; +import com.vaadin.server.ThemeResource; import com.vaadin.server.VaadinRequest; import com.vaadin.shared.ui.label.ContentMode; import com.vaadin.ui.Alignment; import com.vaadin.ui.Button; import com.vaadin.ui.Button.ClickEvent; import com.vaadin.ui.Button.ClickListener; -import com.vaadin.ui.CheckBox; import com.vaadin.ui.Component; import com.vaadin.ui.ComponentContainer; import com.vaadin.ui.CssLayout; @@ -53,6 +54,7 @@ import com.vaadin.ui.MenuBar.MenuItem; import com.vaadin.ui.NativeSelect; import com.vaadin.ui.Notification; import com.vaadin.ui.UI; +import com.vaadin.ui.themes.ValoTheme; @Theme("tests-valo") @Title("Valo Theme Test") @@ -74,6 +76,7 @@ public class ValoThemeUI extends UI { ValoMenuLayout root = new ValoMenuLayout(); ComponentContainer viewDisplay = root.getContentContainer(); CssLayout menu = new CssLayout(); + CssLayout menuItemsLayout = new CssLayout(); private Navigator navigator; private LinkedHashMap menuItems = new LinkedHashMap(); @@ -86,11 +89,12 @@ public class ValoThemeUI extends UI { // e.printStackTrace(); // } + Responsive.makeResponsive(this); + getPage().setTitle("Valo Theme Test"); setContent(root); root.setWidth("100%"); - root.addMenu(buildTestMenu()); root.addMenu(buildMenu()); navigator = new Navigator(this, viewDisplay); @@ -131,13 +135,14 @@ public class ValoThemeUI extends UI { @Override public void afterViewChange(ViewChangeEvent event) { - for (Iterator it = menu.iterator(); it.hasNext();) { + for (Iterator it = menuItemsLayout.iterator(); it + .hasNext();) { it.next().removeStyleName("selected"); } for (Entry item : menuItems.entrySet()) { if (event.getViewName().equals(item.getKey())) { - for (Iterator it = menu.iterator(); it - .hasNext();) { + for (Iterator it = menuItemsLayout + .iterator(); it.hasNext();) { Component c = it.next(); if (c.getCaption() != null && c.getCaption().startsWith( @@ -216,30 +221,43 @@ public class ValoThemeUI extends UI { menu.addComponent(top); menu.addComponent(createThemeSelect()); - Label title = new Label("Vaadin
Valo Theme Styles", + Button showMenu = new Button("Menu", new ClickListener() { + @Override + public void buttonClick(ClickEvent event) { + if (menu.getStyleName().contains("valo-menu-visible")) { + menu.removeStyleName("valo-menu-visible"); + } else { + menu.addStyleName("valo-menu-visible"); + } + } + }); + showMenu.addStyleName(ValoTheme.BUTTON_PRIMARY); + showMenu.addStyleName(ValoTheme.BUTTON_SMALL); + showMenu.addStyleName("valo-menu-toggle"); + showMenu.setIcon(FontAwesome.LIST); + menu.addComponent(showMenu); + + Label title = new Label("

Vaadin Valo Theme

", ContentMode.HTML); title.setSizeUndefined(); top.addComponent(title); top.setExpandRatio(title, 1); MenuBar settings = new MenuBar(); - MenuItem settingsItem = settings.addItem("", FontAwesome.COG, null); - settingsItem.setStyleName("icon-only"); + settings.addStyleName("user-menu"); + StringGenerator sg = new StringGenerator(); + MenuItem settingsItem = settings.addItem( + sg.nextString(true) + " " + sg.nextString(true) + + sg.nextString(false), new ThemeResource( + "../tests-valo/img/profile-pic-300px.jpg"), null); settingsItem.addItem("Edit Profile", null); settingsItem.addItem("Preferences", null); settingsItem.addSeparator(); settingsItem.addItem("Sign Out", null); - top.addComponent(settings); + menu.addComponent(settings); - final CheckBox enabled = new CheckBox("Enabled", true); - enabled.setDescription("Enable or disable the components on the right side"); - menu.addComponent(enabled); - enabled.addValueChangeListener(new ValueChangeListener() { - @Override - public void valueChange(ValueChangeEvent event) { - viewDisplay.setEnabled(enabled.getValue()); - } - }); + menuItemsLayout.setPrimaryStyleName("valo-menuitems"); + menu.addComponent(menuItemsLayout); Label label = null; int count = -1; @@ -249,7 +267,7 @@ public class ValoThemeUI extends UI { label.setPrimaryStyleName("valo-menu-subtitle"); label.addStyleName("h4"); label.setSizeUndefined(); - menu.addComponent(label); + menuItemsLayout.addComponent(label); } if (item.getKey().equals("panels")) { label.setValue(label.getValue() @@ -260,7 +278,7 @@ public class ValoThemeUI extends UI { label.setPrimaryStyleName("valo-menu-subtitle"); label.addStyleName("h4"); label.setSizeUndefined(); - menu.addComponent(label); + menuItemsLayout.addComponent(label); } if (item.getKey().equals("calendar")) { label.setValue(label.getValue() @@ -271,7 +289,7 @@ public class ValoThemeUI extends UI { label.setPrimaryStyleName("valo-menu-subtitle"); label.addStyleName("h4"); label.setSizeUndefined(); - menu.addComponent(label); + menuItemsLayout.addComponent(label); } Button b = new Button(item.getValue(), new ClickListener() { @Override @@ -286,7 +304,7 @@ public class ValoThemeUI extends UI { b.setHtmlContentAllowed(true); b.setPrimaryStyleName("valo-menu-item"); b.setIcon(testIcon.get()); - menu.addComponent(b); + menuItemsLayout.addComponent(b); count++; } label.setValue(label.getValue() + " " -- cgit v1.2.3 From 474afffeb87cd2acc632f4bf061763e77dfe08e1 Mon Sep 17 00:00:00 2001 From: Jouni Koivuviita Date: Mon, 4 Aug 2014 10:15:44 +0300 Subject: ResponsiveConnector should request layout update when breakpoints change (#14354) Change-Id: Ie995268f8d89a951e9ebb351edde4ba1e824101e --- .../VAADIN/themes/tests-responsive/styles.css | 17 +++++- .../client/extensions/ResponsiveConnector.java | 17 ++++-- .../tests/extensions/ResponsiveLayoutUpdate.java | 61 ++++++++++++++++++++++ .../extensions/ResponsiveLayoutUpdateTest.java | 52 ++++++++++++++++++ 4 files changed, 143 insertions(+), 4 deletions(-) create mode 100644 uitest/src/com/vaadin/tests/extensions/ResponsiveLayoutUpdate.java create mode 100644 uitest/src/com/vaadin/tests/extensions/ResponsiveLayoutUpdateTest.java (limited to 'WebContent/VAADIN') diff --git a/WebContent/VAADIN/themes/tests-responsive/styles.css b/WebContent/VAADIN/themes/tests-responsive/styles.css index db92a2a2fc..a06c920fe9 100644 --- a/WebContent/VAADIN/themes/tests-responsive/styles.css +++ b/WebContent/VAADIN/themes/tests-responsive/styles.css @@ -98,4 +98,19 @@ } .v-csslayout-width-and-height[height-range~="500px-"][width-range~="600px-"] { background: red; -} \ No newline at end of file +} + +/* Styles for ResponsiveLayoutUpdate test */ +.layout-update .change-width { + white-space: normal; + background: #ddd; +} +.layout-update[width-range="0-599px"] .change-width { + width: 200px; + height: 200px; +} + +.layout-update[width-range="600px-"] .change-width { + width: 300px; + height: 300px; +} diff --git a/client/src/com/vaadin/client/extensions/ResponsiveConnector.java b/client/src/com/vaadin/client/extensions/ResponsiveConnector.java index 62913400db..8e349bac7b 100644 --- a/client/src/com/vaadin/client/extensions/ResponsiveConnector.java +++ b/client/src/com/vaadin/client/extensions/ResponsiveConnector.java @@ -302,11 +302,11 @@ public class ResponsiveConnector extends AbstractExtensionConnector implements }-*/; - private String currentWidthRanges; - private String currentHeightRanges; + private String currentWidthRanges = ""; + private String currentHeightRanges = ""; @Override - public void onElementResize(ElementResizeEvent event) { + public void onElementResize(final ElementResizeEvent event) { int width = event.getLayoutManager().getOuterWidth(event.getElement()); int height = event.getLayoutManager() .getOuterHeight(event.getElement()); @@ -315,6 +315,9 @@ public class ResponsiveConnector extends AbstractExtensionConnector implements .getElement(); boolean forceRedraw = false; + String oldWidthRanges = currentWidthRanges; + String oldHeightRanges = currentHeightRanges; + // Loop through breakpoints and see which one applies to this width currentWidthRanges = resolveBreakpoint("width", width, event.getElement()); @@ -342,6 +345,14 @@ public class ResponsiveConnector extends AbstractExtensionConnector implements if (forceRedraw) { forceRedrawIfIE8(element); } + + // If a new breakpoint is triggered, ensure all sizes are updated in + // case some new styles are applied + if (!currentWidthRanges.equals(oldWidthRanges) + || !currentHeightRanges.equals(oldHeightRanges)) { + event.getLayoutManager().setNeedsMeasureRecursively( + ResponsiveConnector.this.target); + } } /** diff --git a/uitest/src/com/vaadin/tests/extensions/ResponsiveLayoutUpdate.java b/uitest/src/com/vaadin/tests/extensions/ResponsiveLayoutUpdate.java new file mode 100644 index 0000000000..4634ebff15 --- /dev/null +++ b/uitest/src/com/vaadin/tests/extensions/ResponsiveLayoutUpdate.java @@ -0,0 +1,61 @@ +/* + * 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.extensions; + +import com.vaadin.annotations.Theme; +import com.vaadin.server.Responsive; +import com.vaadin.server.VaadinRequest; +import com.vaadin.tests.components.AbstractTestUI; +import com.vaadin.ui.HorizontalLayout; +import com.vaadin.ui.Label; +import com.vaadin.ui.Panel; + +@Theme("tests-responsive") +public class ResponsiveLayoutUpdate extends AbstractTestUI { + + @Override + protected void setup(VaadinRequest request) { + HorizontalLayout layout = new HorizontalLayout(); + layout.addStyleName("layout-update"); + layout.setWidth("100%"); + setContent(layout); + Responsive.makeResponsive(layout); + + Label label = new Label( + "This label changes its size between the breakpoints, allowing more space for the adjacent component."); + label.addStyleName("change-width"); + label.setSizeUndefined(); + layout.addComponent(label); + + Panel panel = new Panel("Panel"); + panel.setContent(new Label( + "This Panel should be maximized in both breakpoints.")); + panel.setSizeFull(); + layout.addComponent(panel); + layout.setExpandRatio(panel, 1); + } + + @Override + protected String getTestDescription() { + return "A new layout phase should be requested after a new breakpoint is triggered, ensuring any style changes affecting component sizes are taken into account."; + } + + @Override + protected Integer getTicketNumber() { + return 14354; + } +} diff --git a/uitest/src/com/vaadin/tests/extensions/ResponsiveLayoutUpdateTest.java b/uitest/src/com/vaadin/tests/extensions/ResponsiveLayoutUpdateTest.java new file mode 100644 index 0000000000..cd0a92d339 --- /dev/null +++ b/uitest/src/com/vaadin/tests/extensions/ResponsiveLayoutUpdateTest.java @@ -0,0 +1,52 @@ +/* + * 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.extensions; + +import org.junit.Test; +import org.openqa.selenium.WebDriver; +import org.openqa.selenium.support.ui.ExpectedCondition; + +import com.vaadin.testbench.By; +import com.vaadin.testbench.elements.PanelElement; +import com.vaadin.tests.tb3.MultiBrowserTest; + +public class ResponsiveLayoutUpdateTest extends MultiBrowserTest { + + @Test + public void testWidthAndHeightRanges() throws Exception { + openTestURL(); + + final PanelElement panelElement = $(PanelElement.class).first(); + // I currently have no idea why PhantomJS wants a click here to work + // properly + panelElement.click(); + waitForElementVisible(By.cssSelector(".layout-update")); + + compareScreen("large"); + + // Resize below 600px width breakpoint + testBench().resizeViewPortTo(400, 768); + + waitUntil(new ExpectedCondition() { + @Override + public Boolean apply(WebDriver input) { + return panelElement.getSize().getWidth() < 500; + } + }); + compareScreen("small"); + } +} -- cgit v1.2.3