From 90d7e00154b26dfc22b0ea46fc7775e39430eeec Mon Sep 17 00:00:00 2001 From: Jouni Koivuviita Date: Tue, 19 Aug 2014 11:06:02 +0300 Subject: Table column resize does not work in Valo (Firefox) ( #14401) Fix a similar issue with context menu items also. Change-Id: I1c851ea43aa81a39e2c4596315b34976df0cba62 --- WebContent/VAADIN/themes/valo/components/_table.scss | 10 ++++++---- WebContent/VAADIN/themes/valo/shared/_contextmenu.scss | 1 + 2 files changed, 7 insertions(+), 4 deletions(-) (limited to 'WebContent/VAADIN') diff --git a/WebContent/VAADIN/themes/valo/components/_table.scss b/WebContent/VAADIN/themes/valo/components/_table.scss index 46318590d0..3144acb37c 100644 --- a/WebContent/VAADIN/themes/valo/components/_table.scss +++ b/WebContent/VAADIN/themes/valo/components/_table.scss @@ -153,10 +153,10 @@ $v-table-background-color: null !default; width: $v-table-resizer-width; cursor: e-resize; cursor: col-resize; - position: absolute; - top: 0; + position: relative; right: round($v-table-resizer-width / -2); z-index: 1; + margin-left: -$v-table-resizer-width; } .#{$primary-stylename}-cell-content { @@ -248,8 +248,7 @@ $v-table-background-color: null !default; width: $v-table-sort-indicator-width; height: $v-table-row-height; line-height: $v-table-row-height; - position: absolute; - right: 0; + margin-left: -$v-table-sort-indicator-width; } .#{$primary-stylename}-header-cell-asc .#{$primary-stylename}-sort-indicator:before, @@ -295,13 +294,16 @@ $v-table-background-color: null !default; .#{$primary-stylename}-focus-slot-right { border-right: $v-table-border-width + 2px solid $v-focus-color; right: -$v-table-border-width - 1px; + margin-left: -$v-table-resizer-width - $v-table-border-width - 2px; } .#{$primary-stylename}-focus-slot-left { + float: left; border-left: $v-table-border-width + 2px solid $v-focus-color; left: -$v-table-border-width; right: auto; margin-left: 0 !important; + margin-right: -$v-table-resizer-width - $v-table-border-width - 2px; } .#{$primary-stylename}-column-selector { diff --git a/WebContent/VAADIN/themes/valo/shared/_contextmenu.scss b/WebContent/VAADIN/themes/valo/shared/_contextmenu.scss index 8a3894b524..4b737416c2 100644 --- a/WebContent/VAADIN/themes/valo/shared/_contextmenu.scss +++ b/WebContent/VAADIN/themes/valo/shared/_contextmenu.scss @@ -10,6 +10,7 @@ .v-contextmenu .gwt-MenuItem { @include valo-selection-item-style; + display: block; // Firefox 24 needs this to make position: relative; work } .v-contextmenu .gwt-MenuItem-selected { -- cgit v1.2.3 From ddb2940bfb34b25fac14f2700385c6fdda7873c1 Mon Sep 17 00:00:00 2001 From: Jouni Koivuviita Date: Tue, 19 Aug 2014 11:09:22 +0300 Subject: Small adjustment to MenuBar line-height (Valo) Change-Id: I00eae3c53d78a4fc086567d677ce8f24e441a880 --- WebContent/VAADIN/themes/valo/components/_menubar.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'WebContent/VAADIN') diff --git a/WebContent/VAADIN/themes/valo/components/_menubar.scss b/WebContent/VAADIN/themes/valo/components/_menubar.scss index f03bc3d022..7368579d43 100644 --- a/WebContent/VAADIN/themes/valo/components/_menubar.scss +++ b/WebContent/VAADIN/themes/valo/components/_menubar.scss @@ -91,7 +91,7 @@ text-align: left; @if $unit-size { - line-height: $unit-size - first-number($v-border) * 2 - 1px; + line-height: $unit-size - first-number($v-border) * 2; > .#{$primary-stylename}-menuitem { padding: 0 round($unit-size/2.6); -- cgit v1.2.3 From 1ceef27de99043e4ba917a8f806d107d1eaf4495 Mon Sep 17 00:00:00 2001 From: Jouni Koivuviita Date: Tue, 19 Aug 2014 12:02:04 +0300 Subject: Add a new variation for Valo MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit A new variation named “Light”, similar to iOS7 style. Fix some valo-menu styles to accommodate the new light style better. Change-Id: Ib7c396263db7838c972d75a6b79fed1caf7ca576 --- .../VAADIN/themes/tests-valo-light/_variables.scss | 24 ++++++++++++++++++++++ .../VAADIN/themes/tests-valo-light/styles.scss | 6 ++++++ .../VAADIN/themes/valo/components/_table.scss | 1 - .../VAADIN/themes/valo/components/_tree.scss | 5 +++-- .../VAADIN/themes/valo/components/_valo-menu.scss | 22 +++++++++++++++----- WebContent/VAADIN/themes/valo/shared/_overlay.scss | 4 +++- build/ide.xml | 3 +++ uitest/build.xml | 3 +++ .../com/vaadin/tests/themes/valo/ValoThemeUI.java | 1 + 9 files changed, 60 insertions(+), 9 deletions(-) create mode 100644 WebContent/VAADIN/themes/tests-valo-light/_variables.scss create mode 100644 WebContent/VAADIN/themes/tests-valo-light/styles.scss (limited to 'WebContent/VAADIN') diff --git a/WebContent/VAADIN/themes/tests-valo-light/_variables.scss b/WebContent/VAADIN/themes/tests-valo-light/_variables.scss new file mode 100644 index 0000000000..e851f075e4 --- /dev/null +++ b/WebContent/VAADIN/themes/tests-valo-light/_variables.scss @@ -0,0 +1,24 @@ +$v-app-loading-text: "Light Valo"; + +$v-background-color: hsl(0, 0, 99.5%); +$v-app-background-color: #fff; +$v-focus-color: hsl(218, 80%, 60%); +$v-border: 1px solid (v-shade 0.6); +$v-border-radius: 3px; +$v-bevel: inset 0 1px 0 v-tint; +$v-textfield-bevel: false; +$v-gradient: v-linear 3%; +$v-shadow: false; +$valo-menu-background-color: hsl(218, 20%, 98%); +$v-friendly-color: hsl(163, 61%, 41%); +$v-error-indicator-color: hsl(349, 66%, 56%); + + +@import "../valo/valo"; + +.tests-valo-light .valo-menu .valo-menu-title { + background: $v-app-background-color; + color: $v-selection-color; + text-shadow: none; + border-color: first-color(valo-border($color: $v-app-background-color, $strength: 0.5)); +} diff --git a/WebContent/VAADIN/themes/tests-valo-light/styles.scss b/WebContent/VAADIN/themes/tests-valo-light/styles.scss new file mode 100644 index 0000000000..12ee8a780e --- /dev/null +++ b/WebContent/VAADIN/themes/tests-valo-light/styles.scss @@ -0,0 +1,6 @@ +@import "variables"; +@import "../tests-valo/valotest"; + +.tests-valo-light { + @include valotest; +} diff --git a/WebContent/VAADIN/themes/valo/components/_table.scss b/WebContent/VAADIN/themes/valo/components/_table.scss index 3144acb37c..2669ac44f6 100644 --- a/WebContent/VAADIN/themes/valo/components/_table.scss +++ b/WebContent/VAADIN/themes/valo/components/_table.scss @@ -221,7 +221,6 @@ $v-table-background-color: null !default; @include valo-gradient($v-selection-color); background-origin: border-box; color: valo-font-color($v-selection-color, 0.9); - text-shadow: valo-button-text-shadow($v-selection-color, $v-bevel-depth); + .v-selected { $gradient-end: first(last(valo-gradient-color-stops($v-selection-color))); diff --git a/WebContent/VAADIN/themes/valo/components/_tree.scss b/WebContent/VAADIN/themes/valo/components/_tree.scss index 93553fe55a..8e75f59945 100644 --- a/WebContent/VAADIN/themes/valo/components/_tree.scss +++ b/WebContent/VAADIN/themes/valo/components/_tree.scss @@ -176,8 +176,9 @@ $v-tree-expand-animation-enabled: false !default; .#{$primary-stylename}-node-selected { - color: valo-font-color($v-selection-color, 0.9); - text-shadow: valo-button-text-shadow($v-selection-color, $v-bevel-depth); + $font-color: valo-font-color($v-selection-color, 0.9); + color: $font-color; + text-shadow: valo-text-shadow($font-color: $font-color, $background-color: $v-selection-item-selection-color); &:after { opacity: 1; diff --git a/WebContent/VAADIN/themes/valo/components/_valo-menu.scss b/WebContent/VAADIN/themes/valo/components/_valo-menu.scss index 507065d339..020eb1cae7 100644 --- a/WebContent/VAADIN/themes/valo/components/_valo-menu.scss +++ b/WebContent/VAADIN/themes/valo/components/_valo-menu.scss @@ -91,6 +91,7 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if box-shadow: valo-bevel-and-shadow($bevel: null, $shadow: $v-shadow); display: block; margin: 0 auto .3em; + border: valo-border(); } } @@ -101,10 +102,6 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if .valo-menu-subtitle { @include valo-menu-subtitle-style($bg); - - .valo-menu-badge { - color: mix(valo-font-color($bg), $v-selection-color); - } } .valo-menuitems { @@ -177,9 +174,11 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if padding: 0; height: $v-unit-size; color: valo-font-color($v-selection-color, 0.5); + max-width: 30%; .v-menubar-menuitem { line-height: $v-unit-size - 1px; + white-space: nowrap; } img.v-icon { @@ -188,6 +187,7 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if width: round($v-unit-size / 2); height: round($v-unit-size / 2); border-radius: ceil($v-unit-size / 4); + border: none; } } @@ -228,7 +228,7 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if @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); + @include linear-gradient(to left, (darken($bg, valo-gradient-opacity() / 2) 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); @@ -256,6 +256,10 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if 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); + + [class*="badge"] { + color: mix(valo-font-color($bg), $v-selection-color); + } } @@ -286,6 +290,14 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if overflow: hidden; } + [class*="badge"] { + @if abs($diff) < 50 { + color: mix(valo-font-color($bg), $v-selection-color); + } @else { + color: $active-color; + } + } + &.selected { background: if(is-dark-color($bg), darken($bg, 3%), lighten($bg, 5%)); diff --git a/WebContent/VAADIN/themes/valo/shared/_overlay.scss b/WebContent/VAADIN/themes/valo/shared/_overlay.scss index a5f6e36957..dc54672cb6 100644 --- a/WebContent/VAADIN/themes/valo/shared/_overlay.scss +++ b/WebContent/VAADIN/themes/valo/shared/_overlay.scss @@ -181,7 +181,9 @@ $v-selection-item-selection-color: $v-selection-color !default; @mixin valo-selection-item-selected-style { @include valo-gradient($v-selection-item-selection-color); - color: valo-font-color($v-selection-item-selection-color, 0.9); + $font-color: valo-font-color($v-selection-item-selection-color, 0.9); + color: $font-color; + text-shadow: valo-text-shadow($font-color: $font-color, $background-color: $v-selection-item-selection-color); } diff --git a/build/ide.xml b/build/ide.xml index c7183077a9..1e586acc19 100755 --- a/build/ide.xml +++ b/build/ide.xml @@ -92,6 +92,9 @@ + + + diff --git a/uitest/build.xml b/uitest/build.xml index e81983f1f5..02b97fb3a0 100644 --- a/uitest/build.xml +++ b/uitest/build.xml @@ -267,6 +267,9 @@ + + + diff --git a/uitest/src/com/vaadin/tests/themes/valo/ValoThemeUI.java b/uitest/src/com/vaadin/tests/themes/valo/ValoThemeUI.java index b33a604033..62d76569dd 100644 --- a/uitest/src/com/vaadin/tests/themes/valo/ValoThemeUI.java +++ b/uitest/src/com/vaadin/tests/themes/valo/ValoThemeUI.java @@ -71,6 +71,7 @@ public class ValoThemeUI extends UI { themeVariants.put("tests-valo-facebook", "Facebook"); themeVariants.put("tests-valo-flatdark", "Flat dark"); themeVariants.put("tests-valo-flat", "Flat"); + themeVariants.put("tests-valo-light", "Light"); themeVariants.put("tests-valo-metro", "Metro"); } private TestIcon testIcon = new TestIcon(100); -- cgit v1.2.3 From 8cd05fe96a877eefaf17dbb58c54141fab1255fa Mon Sep 17 00:00:00 2001 From: Jouni Koivuviita Date: Tue, 19 Aug 2014 13:58:38 +0300 Subject: Last minute small fixes to Valo Change-Id: Ib4dfac4ee2bb858d02c34a920ad53e37e73b73e1 --- WebContent/VAADIN/themes/valo/components/_panel.scss | 2 ++ WebContent/VAADIN/themes/valo/components/_valo-menu.scss | 2 +- WebContent/VAADIN/themes/valo/components/_window.scss | 2 ++ 3 files changed, 5 insertions(+), 1 deletion(-) (limited to 'WebContent/VAADIN') diff --git a/WebContent/VAADIN/themes/valo/components/_panel.scss b/WebContent/VAADIN/themes/valo/components/_panel.scss index 6ccd5139da..07e21cccbf 100644 --- a/WebContent/VAADIN/themes/valo/components/_panel.scss +++ b/WebContent/VAADIN/themes/valo/components/_panel.scss @@ -162,6 +162,8 @@ $v-panel-border: $v-border !default; left: 0; height: 0; border-top: $border-width solid first-color(valo-border($color: $v-app-background-color, $strength: 0.5)); + $border-color: first-color(valo-border($color: $v-app-background-color, $strength: 1)); + border-color: rgba($border-color, .5); } } diff --git a/WebContent/VAADIN/themes/valo/components/_valo-menu.scss b/WebContent/VAADIN/themes/valo/components/_valo-menu.scss index 020eb1cae7..9a9e597888 100644 --- a/WebContent/VAADIN/themes/valo/components/_valo-menu.scss +++ b/WebContent/VAADIN/themes/valo/components/_valo-menu.scss @@ -87,7 +87,7 @@ $valo-menu-background-color: scale-color($v-app-background-color, $lightness: if 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); + border-radius: ceil($v-unit-size * 1.5 / 2 + first-number($v-border)); box-shadow: valo-bevel-and-shadow($bevel: null, $shadow: $v-shadow); display: block; margin: 0 auto .3em; diff --git a/WebContent/VAADIN/themes/valo/components/_window.scss b/WebContent/VAADIN/themes/valo/components/_window.scss index 97859a62b2..b958be79da 100644 --- a/WebContent/VAADIN/themes/valo/components/_window.scss +++ b/WebContent/VAADIN/themes/valo/components/_window.scss @@ -96,6 +96,8 @@ $v-window-modality-curtain-background-color: #222 !default; height: 0; $_bg: $v-window-background-color; border-top: $scroll-divider-width solid first-color(valo-border($strength: 0.5)); + $border-color: first-color(valo-border($strength: 1)); + border-color: rgba($border-color, .5); } } -- cgit v1.2.3 From 35201491f42555a4fba119ab515ab2dc34d14baa Mon Sep 17 00:00:00 2001 From: Jouni Koivuviita Date: Tue, 19 Aug 2014 16:28:23 +0300 Subject: Common components inside Table cells render better (Valo) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Add a new size variant “compact” for Textfield, DateField and ComboBox. Makes the field fit inside the default row height of the table, but keeps the font size the same as for a normal field. Borderless fields also now respect the font color of the container (e.g. a selected table row). Update test to include common components inside a table. Change-Id: I88f4d917579c937536dc4c886dc2b7825db01818 --- .../VAADIN/themes/valo/components/_checkbox.scss | 1 + .../VAADIN/themes/valo/components/_combobox.scss | 9 ++ .../VAADIN/themes/valo/components/_datefield.scss | 6 + .../VAADIN/themes/valo/components/_table.scss | 40 +++-- .../VAADIN/themes/valo/components/_textfield.scss | 23 ++- .../src/com/vaadin/tests/themes/valo/Tables.java | 166 +++++++++++++++++---- .../vaadin/tests/themes/valo/ValoMiscTests.java | 2 +- 7 files changed, 204 insertions(+), 43 deletions(-) (limited to 'WebContent/VAADIN') diff --git a/WebContent/VAADIN/themes/valo/components/_checkbox.scss b/WebContent/VAADIN/themes/valo/components/_checkbox.scss index e74781fc46..9fe360c6ed 100644 --- a/WebContent/VAADIN/themes/valo/components/_checkbox.scss +++ b/WebContent/VAADIN/themes/valo/components/_checkbox.scss @@ -44,6 +44,7 @@ label { @include valo-tappable; + display: inline-block; } } diff --git a/WebContent/VAADIN/themes/valo/components/_combobox.scss b/WebContent/VAADIN/themes/valo/components/_combobox.scss index 538a5e2694..93cb5393ee 100644 --- a/WebContent/VAADIN/themes/valo/components/_combobox.scss +++ b/WebContent/VAADIN/themes/valo/components/_combobox.scss @@ -67,6 +67,11 @@ } .#{$primary-stylename}-button { border: none; + color: inherit; + @include opacity(.5); + } + &.#{$primary-stylename}-prompt .#{$primary-stylename}-input { + @include valo-textfield-prompt-style(transparent); } } @@ -83,8 +88,12 @@ font-size: $v-font-size--tiny; } + .#{$primary-stylename}-compact, .#{$primary-stylename}-small { @include valo-combobox-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $gradient: null, $border: null, $border-radius: null, $background-color: null, $states: normal); + } + + .#{$primary-stylename}-small { font-size: $v-font-size--small; } diff --git a/WebContent/VAADIN/themes/valo/components/_datefield.scss b/WebContent/VAADIN/themes/valo/components/_datefield.scss index 8854992032..521d661a3d 100644 --- a/WebContent/VAADIN/themes/valo/components/_datefield.scss +++ b/WebContent/VAADIN/themes/valo/components/_datefield.scss @@ -48,6 +48,8 @@ } .#{$primary-stylename}-button { border: none; + color: inherit; + @include opacity(.5); } } @@ -64,8 +66,12 @@ font-size: $v-font-size--tiny; } + .#{$primary-stylename}-compact, .#{$primary-stylename}-small { @include valo-datefield-style($unit-size: $v-unit-size--small, $bevel: null, $shadow: null, $border: null, $background-color: null, $states: normal); + } + + .#{$primary-stylename}-small { font-size: $v-font-size--small; } diff --git a/WebContent/VAADIN/themes/valo/components/_table.scss b/WebContent/VAADIN/themes/valo/components/_table.scss index 2669ac44f6..adac1b90bd 100644 --- a/WebContent/VAADIN/themes/valo/components/_table.scss +++ b/WebContent/VAADIN/themes/valo/components/_table.scss @@ -3,7 +3,6 @@ $v-table-border-width: first-number($v-border) !default; $v-table-border-color: null !default; $v-table-border-radius: 0 !default; $v-table-cell-padding-horizontal: round($v-unit-size/3) !default; -//$v-table-cell-padding-horizontal-edge: round($v-unit-size/2.5) !default; $v-table-resizer-width: round($v-unit-size/4.5) !default; $v-table-sort-indicator-width: round($v-unit-size/2) !default; $v-table-header-font-size: round($v-font-size * 0.86) !default; @@ -178,14 +177,23 @@ $v-table-background-color: null !default; .#{$primary-stylename}-cell-wrapper { line-height: 1; - min-height: $v-table-row-height; - $vertical-padding: round(($v-table-row-height - $v-font-size)/2); - padding: $vertical-padding $v-table-cell-padding-horizontal; + padding: 0 $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); + // Leave some breathing room around the table cell and the widget + margin: round($v-table-cell-padding-horizontal / 4) round($v-table-cell-padding-horizontal / -2); + + &.v-label, + &.v-checkbox, + &.v-select-optiongroup { + margin: 0; + } + &.v-progressbar { + margin-left: 0; + margin-right: 0; + } } } @@ -220,7 +228,9 @@ $v-table-background-color: null !default; @include valo-gradient($v-selection-color); background-origin: border-box; - color: valo-font-color($v-selection-color, 0.9); + $font-color: valo-font-color($v-selection-color, 0.9); + color: $font-color; + text-shadow: valo-text-shadow($font-color: $font-color, $background-color: $v-selection-color); + .v-selected { $gradient-end: first(last(valo-gradient-color-stops($v-selection-color))); @@ -501,7 +511,7 @@ $v-table-background-color: null !default; .#{$primary-stylename}-compact, .#{$primary-stylename}-small { - @include valo-table-spacing-style($row-height: round($v-table-row-height * $v-scaling-factor--small), $cell-padding-horizontal: round($v-table-cell-padding-horizontal / 2)); + @include valo-table-spacing-style($row-height: $v-unit-size--small, $cell-padding-horizontal: round($v-table-cell-padding-horizontal / 2)); } .#{$primary-stylename}-small { @@ -640,11 +650,21 @@ $v-table-background-color: null !default; } .#{$primary-stylename}-cell-wrapper { - padding: $vertical-padding $cell-padding-horizontal; - min-height: $row-height; + padding-left: $cell-padding-horizontal; + padding-right: $cell-padding-horizontal; > .v-widget { - margin: round($vertical-padding / -2) round($cell-padding-horizontal / -2); + margin: round($cell-padding-horizontal / 4) round($cell-padding-horizontal / -2); + + &.v-label, + &.v-checkbox, + &.v-select-optiongroup { + margin: 0; + } + &.v-progressbar { + margin-left: 0; + margin-right: 0; + } } } diff --git a/WebContent/VAADIN/themes/valo/components/_textfield.scss b/WebContent/VAADIN/themes/valo/components/_textfield.scss index 0b4fa50fb2..85e2487bc1 100644 --- a/WebContent/VAADIN/themes/valo/components/_textfield.scss +++ b/WebContent/VAADIN/themes/valo/components/_textfield.scss @@ -35,8 +35,12 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default; font-size: $v-font-size--tiny; } + .#{$primary-stylename}-compact, .#{$primary-stylename}-small { @include valo-textfield-style($unit-size: $v-unit-size--small, $states: normal, $background-color: null, $border: null, $gradient: null, $bevel: null, $shadow: null); + } + + .#{$primary-stylename}-small { font-size: $v-font-size--small; } @@ -52,6 +56,7 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default; @include valo-textfield-inline-icon($stylenames: inline-icon); @include valo-textfield-inline-icon($stylenames: inline-icon tiny, $unit-size: $v-unit-size--tiny, $font-size: $v-font-size--tiny); + @include valo-textfield-inline-icon($stylenames: inline-icon compact, $unit-size: $v-unit-size--small); @include valo-textfield-inline-icon($stylenames: inline-icon small, $unit-size: $v-unit-size--small, $font-size: $v-font-size--small); @include valo-textfield-inline-icon($stylenames: inline-icon large, $unit-size: $v-unit-size--large, $font-size: $v-font-size--large); @include valo-textfield-inline-icon($stylenames: inline-icon huge, $unit-size: $v-unit-size--huge, $font-size: $v-font-size--huge); @@ -158,7 +163,10 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default; @mixin valo-textfield-prompt-style ($background-color: $v-textfield-background-color) { - @if type-of($background-color) == color { + @if $background-color == transparent { + color: inherit; + @include opacity(.5); + } @else if type-of($background-color) == color { $font-color: valo-font-color($background-color); $font-color: mix($background-color, $font-color); @if is-dark-color($background-color) and saturation($background-color) > 50% { @@ -205,15 +213,20 @@ $v-textfield-disabled-opacity: $v-disabled-opacity !default; border-radius: 0; background: $background-color; @include box-shadow(none); - @if $background-color == transparent { - color: inherit; - } @else if type-of($background-color) == color { - color: valo-font-color($background-color); + + $font-color: inherit; + @if $background-color != transparent and type-of($background-color) == color { + $font-color: valo-font-color($background-color); } + color: $font-color; &:focus { @include box-shadow(none); } + + &[class*="prompt"] { + @include valo-textfield-prompt-style($background-color); + } } diff --git a/uitest/src/com/vaadin/tests/themes/valo/Tables.java b/uitest/src/com/vaadin/tests/themes/valo/Tables.java index 62ef67f9f3..fb6638ee7d 100644 --- a/uitest/src/com/vaadin/tests/themes/valo/Tables.java +++ b/uitest/src/com/vaadin/tests/themes/valo/Tables.java @@ -26,9 +26,14 @@ import com.vaadin.navigator.View; import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent; import com.vaadin.ui.Button; import com.vaadin.ui.CheckBox; +import com.vaadin.ui.ComboBox; +import com.vaadin.ui.DateField; import com.vaadin.ui.HorizontalLayout; import com.vaadin.ui.Label; import com.vaadin.ui.Notification; +import com.vaadin.ui.OptionGroup; +import com.vaadin.ui.ProgressBar; +import com.vaadin.ui.Slider; import com.vaadin.ui.Table; import com.vaadin.ui.Table.Align; import com.vaadin.ui.Table.ColumnGenerator; @@ -56,8 +61,9 @@ public class Tables extends VerticalLayout implements View { CheckBox compact = new CheckBox("Compact"); CheckBox small = new CheckBox("Small"); CheckBox rowIndex = new CheckBox("Row index", false); - CheckBox rowIcon = new CheckBox("Row icon", true); + CheckBox rowIcon = new CheckBox("Row icon", false); CheckBox rowCaption = new CheckBox("Row caption", false); + CheckBox componentsInCells = new CheckBox("Components in Cells", false); Table table; @@ -76,7 +82,7 @@ public class Tables extends VerticalLayout implements View { wrap.addComponents(hierarchical, footer, sized, expandRatios, stripes, verticalLines, horizontalLines, borderless, headers, compact, - small, rowIndex, rowCaption, rowIcon); + small, rowIndex, rowCaption, rowIcon, componentsInCells); ValueChangeListener update = new ValueChangeListener() { @Override @@ -105,7 +111,7 @@ public class Tables extends VerticalLayout implements View { borderless.getValue(), headers.getValue(), compact.getValue(), small.getValue(), rowIndex.getValue(), rowCaption.getValue(), - rowIcon.getValue()); + rowIcon.getValue(), componentsInCells.getValue()); } }; @@ -123,6 +129,7 @@ public class Tables extends VerticalLayout implements View { rowIndex.addValueChangeListener(update); rowCaption.addValueChangeListener(update); rowIcon.addValueChangeListener(update); + componentsInCells.addValueChangeListener(update); footer.setValue(false); @@ -132,7 +139,7 @@ public class Tables extends VerticalLayout implements View { boolean expandRatios, boolean stripes, boolean verticalLines, boolean horizontalLines, boolean borderless, boolean headers, boolean compact, boolean small, boolean rowIndex, - boolean rowCaption, boolean rowIcon) { + boolean rowCaption, boolean rowIcon, boolean componentsInRows) { table.setSelectable(true); table.setMultiSelect(true); table.setSortEnabled(true); @@ -156,32 +163,137 @@ public class Tables extends VerticalLayout implements View { table.setColumnAlignment(ValoThemeUI.INDEX_PROPERTY, Align.CENTER); table.removeContainerProperty("textfield"); - table.addContainerProperty("textfield", TextField.class, null); - table.removeGeneratedColumn("textfield"); - table.addGeneratedColumn("textfield", new ColumnGenerator() { - @Override - public Object generateCell(Table source, Object itemId, - Object columnId) { - TextField tf = new TextField(); - tf.setInputPrompt("Type here…"); - return tf; - } - }); - table.removeContainerProperty("button"); - table.addContainerProperty("button", Button.class, null); - table.removeGeneratedColumn("button"); - table.addGeneratedColumn("button", new ColumnGenerator() { - @Override - public Object generateCell(Table source, Object itemId, - Object columnId) { - Button b = new Button("Button"); - return b; - } - }); - + table.removeContainerProperty("label"); + table.removeGeneratedColumn("label"); + table.removeContainerProperty("checkbox"); + table.removeGeneratedColumn("checkbox"); + table.removeContainerProperty("datefield"); + table.removeGeneratedColumn("datefield"); + table.removeContainerProperty("combobox"); + table.removeGeneratedColumn("combobox"); + table.removeContainerProperty("optiongroup"); + table.removeGeneratedColumn("optiongroup"); + table.removeContainerProperty("slider"); + table.removeGeneratedColumn("slider"); + table.removeContainerProperty("progress"); + table.removeGeneratedColumn("progress"); + + if (componentsInRows) { + table.addContainerProperty("textfield", TextField.class, null); + table.addGeneratedColumn("textfield", new ColumnGenerator() { + @Override + public Object generateCell(Table source, Object itemId, + Object columnId) { + TextField tf = new TextField(); + tf.setInputPrompt("Type here…"); + // tf.addStyleName("compact"); + if ((Integer) itemId % 2 == 0) { + tf.addStyleName("borderless"); + } + return tf; + } + }); + + table.addContainerProperty("datefield", TextField.class, null); + table.addGeneratedColumn("datefield", new ColumnGenerator() { + @Override + public Object generateCell(Table source, Object itemId, + Object columnId) { + DateField tf = new DateField(); + tf.addStyleName("compact"); + if ((Integer) itemId % 2 == 0) { + tf.addStyleName("borderless"); + } + return tf; + } + }); + + table.addContainerProperty("combobox", TextField.class, null); + table.addGeneratedColumn("combobox", new ColumnGenerator() { + @Override + public Object generateCell(Table source, Object itemId, + Object columnId) { + ComboBox tf = new ComboBox(); + tf.setInputPrompt("Select"); + tf.addStyleName("compact"); + if ((Integer) itemId % 2 == 0) { + tf.addStyleName("borderless"); + } + return tf; + } + }); + + table.addContainerProperty("button", Button.class, null); + table.addGeneratedColumn("button", new ColumnGenerator() { + @Override + public Object generateCell(Table source, Object itemId, + Object columnId) { + Button b = new Button("Button"); + b.addStyleName("small"); + return b; + } + }); + + table.addContainerProperty("label", TextField.class, null); + table.addGeneratedColumn("label", new ColumnGenerator() { + @Override + public Object generateCell(Table source, Object itemId, + Object columnId) { + Label label = new Label("Label component"); + label.setSizeUndefined(); + label.addStyleName("bold"); + return label; + } + }); + + table.addContainerProperty("checkbox", TextField.class, null); + table.addGeneratedColumn("checkbox", new ColumnGenerator() { + @Override + public Object generateCell(Table source, Object itemId, + Object columnId) { + CheckBox cb = new CheckBox(null, true); + return cb; + } + }); + + table.addContainerProperty("optiongroup", TextField.class, null); + table.addGeneratedColumn("optiongroup", new ColumnGenerator() { + @Override + public Object generateCell(Table source, Object itemId, + Object columnId) { + OptionGroup op = new OptionGroup(); + op.addItem("Male"); + op.addItem("Female"); + op.addStyleName("horizontal"); + return op; + } + }); + + table.addContainerProperty("slider", TextField.class, null); + table.addGeneratedColumn("slider", new ColumnGenerator() { + @Override + public Object generateCell(Table source, Object itemId, + Object columnId) { + Slider s = new Slider(); + s.setValue(30.0); + return s; + } + }); + + table.addContainerProperty("progress", TextField.class, null); + table.addGeneratedColumn("progress", new ColumnGenerator() { + @Override + public Object generateCell(Table source, Object itemId, + Object columnId) { + ProgressBar bar = new ProgressBar(); + bar.setValue(0.7f); + return bar; + } + }); + } table.setFooterVisible(footer); if (footer) { table.setColumnFooter(ValoThemeUI.CAPTION_PROPERTY, "caption"); diff --git a/uitest/src/com/vaadin/tests/themes/valo/ValoMiscTests.java b/uitest/src/com/vaadin/tests/themes/valo/ValoMiscTests.java index 1676d121af..b59c500d28 100644 --- a/uitest/src/com/vaadin/tests/themes/valo/ValoMiscTests.java +++ b/uitest/src/com/vaadin/tests/themes/valo/ValoMiscTests.java @@ -72,7 +72,7 @@ public class ValoMiscTests extends UI { table.setWidth("100%"); table.setContainerDataSource(ValoThemeUI.generateContainer(200, true)); Tables.configure(table, true, false, false, true, true, true, false, - true, false, false, false, false, false); + true, false, false, false, false, false, false); layout.addComponent(table); } -- cgit v1.2.3