From 228267306146facd7d4f8ec7be3b22504a924bf7 Mon Sep 17 00:00:00 2001 From: Artur Signell Date: Fri, 4 Jan 2013 13:42:08 +0200 Subject: [PATCH] Ensure popup datefield width setting works in all themes (#10485) Change-Id: I9f0891fb363e49d59b5ab2b1af53ba4bf9bca21e --- .../themes/base/datefield/datefield.scss | 10 +++ .../themes/chameleon/common/common.scss | 2 + .../chameleon/components/button/button.scss | 4 +- .../components/datefield/datefield.scss | 81 ++++++++++--------- .../chameleon/components/label/label.scss | 4 +- .../chameleon/components/selects/selects.scss | 4 +- .../chameleon/components/table/table.scss | 4 +- .../components/textfield/textfield.scss | 9 +-- .../themes/reindeer/datefield/datefield.scss | 6 -- .../themes/runo/datefield/datefield.scss | 15 +++- .../uitest/components/DatesCssTest.java | 23 ++++-- 11 files changed, 94 insertions(+), 68 deletions(-) diff --git a/WebContent/VAADIN/themes/base/datefield/datefield.scss b/WebContent/VAADIN/themes/base/datefield/datefield.scss index 21f544cb72..4099123764 100644 --- a/WebContent/VAADIN/themes/base/datefield/datefield.scss +++ b/WebContent/VAADIN/themes/base/datefield/datefield.scss @@ -14,7 +14,12 @@ .#{$primaryStyleName}-button { cursor: pointer; + vertical-align: top; +} +.v-has-width > input.#{$primaryStyleName}-textfield { + width: 100%; } + .#{$primaryStyleName}-prompt .#{$primaryStyleName}-textfield { color: #999; font-style: italic; @@ -80,6 +85,11 @@ .#{$primaryStyleName}-popup { background: #fff; } +.#{$primaryStyleName}-popupcalendar input.#{$primaryStyleName}-textfield { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} /* Disabled by default .#{$primaryStyleName}-error .v-textfield, .#{$primaryStyleName}-error .#{$primaryStyleName}-calendarpanel { diff --git a/WebContent/VAADIN/themes/chameleon/common/common.scss b/WebContent/VAADIN/themes/chameleon/common/common.scss index 2f3dc53ef3..382dff3325 100644 --- a/WebContent/VAADIN/themes/chameleon/common/common.scss +++ b/WebContent/VAADIN/themes/chameleon/common/common.scss @@ -4,6 +4,8 @@ $chameleon-app-background: transparent; $chameleon-font-family: Arial, Helvetica, "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana, sans-serif; $chameleon-font-size: 13px; +$chameleon-font-size-small: 11.05px; +$chameleon-font-size-big: 15.6px; $chameleon-line-height: 1.4; diff --git a/WebContent/VAADIN/themes/chameleon/components/button/button.scss b/WebContent/VAADIN/themes/chameleon/components/button/button.scss index cfb5ab2917..f2b597c59a 100644 --- a/WebContent/VAADIN/themes/chameleon/components/button/button.scss +++ b/WebContent/VAADIN/themes/chameleon/components/button/button.scss @@ -79,7 +79,7 @@ div.#{$primaryStyleName}-down .#{$primaryStyleName}-wrap { * Big ******************************************************************************/ .#{$primaryStyleName}-big { - font-size: 15.6px; + font-size: $chameleon-font-size-big; } @@ -87,7 +87,7 @@ div.#{$primaryStyleName}-down .#{$primaryStyleName}-wrap { * Small ******************************************************************************/ .#{$primaryStyleName}-small { - font-size: 11.05px; + font-size: $chameleon-font-size-small; font-weight: normal; } diff --git a/WebContent/VAADIN/themes/chameleon/components/datefield/datefield.scss b/WebContent/VAADIN/themes/chameleon/components/datefield/datefield.scss index 3d550c8690..2947a71896 100644 --- a/WebContent/VAADIN/themes/chameleon/components/datefield/datefield.scss +++ b/WebContent/VAADIN/themes/chameleon/components/datefield/datefield.scss @@ -1,5 +1,12 @@ @mixin chameleon-datefield($primaryStyleName : v-datefield) { +$popupdatefield-button-width: 25px; +$negative-popupdatefield-button-width: -25px; + +$popupdatefield-height: 1.7em; +$popupdatefield-small-height: 1.6em; +$popupdatefield-big-height: 1.9em; + .#{$primaryStyleName}-button { background: #dadada url(../../img/date-btn.png) repeat-x 50% 0; border: 1px solid gray; @@ -7,59 +14,56 @@ -webkit-border-bottom-right-radius: 3px; -moz-border-radius-topright: 3px; -moz-border-radius-bottomright: 3px; - width: 25px; - height: 1.2em; + width: $popupdatefield-button-width; + margin-right: $negative-popupdatefield-button-width; + height: $popupdatefield-height; padding: .2em 0; - -webkit-box-sizing: content-box; - -moz-box-sizing: content-box; - -ms-box-sizing: content-box; - box-sizing: content-box; - } - -.#{$primaryStyleName}-small .#{$primaryStyleName}-button { - height: 1.2em; - } - -.#{$primaryStyleName}-big .#{$primaryStyleName}-button { - padding: .3em 0; - height: 1.2em; - } - -.v-ie8 & .#{$primaryStyleName}-button { - height: 1.6em; - padding: 0; } -.v-ie8 & .#{$primaryStyleName}-big .#{$primaryStyleName}-button { - height: 1.8em; - } -input.#{$primaryStyleName}-textfield { +input.#{$primaryStyleName}-textfield[type="text"] { border-right: none; -webkit-border-top-right-radius: 0; -webkit-border-bottom-right-radius: 0; -moz-border-radius-topright: 0; -moz-border-radius-bottomright: 0; + height: $popupdatefield-height; } - /******************************************************************************* * Big ******************************************************************************/ -.#{$primaryStyleName}-big .#{$primaryStyleName}-button { - width: 32px; - background-image: url(../../img/date-btn-big.png); +.#{$primaryStyleName}-big { + .#{$primaryStyleName}-button { + padding: .3em 0; + height: $popupdatefield-big-height; + width: 32px; + background-image: url(../../img/date-btn-big.png); + font-size: $chameleon-font-size-big; + } + input.#{$primaryStyleName}-textfield[type="text"] { + height: $popupdatefield-big-height; + font-size: $chameleon-font-size-big; } +} /******************************************************************************* * Small ******************************************************************************/ -.#{$primaryStyleName}-small .#{$primaryStyleName}-button { - width: 19px; - background-position: 50% -2px; +.#{$primaryStyleName}-small { + .#{$primaryStyleName}-button { + height: $popupdatefield-small-height; + width: 19px; + background-position: 50% -2px; + font-size: $chameleon-font-size-small; } - + input.#{$primaryStyleName}-textfield[type="text"] { + height: $popupdatefield-small-height; + font-size: $chameleon-font-size-small; + } + +} /******************************************************************************* * Calendar panel @@ -73,11 +77,11 @@ input.#{$primaryStyleName}-textfield { } .#{$primaryStyleName}-month .#{$primaryStyleName}-textfield { - width: 6em; + width: 6.4em; } .#{$primaryStyleName}-year .#{$primaryStyleName}-textfield { - width: 4em; + width: 4.4em; } .#{$primaryStyleName}-year .#{$primaryStyleName}-calendarpanel-prevmonth, @@ -108,21 +112,22 @@ span.#{$primaryStyleName}-calendarpanel-month { } .#{$primaryStyleName}-year .#{$primaryStyleName}-calendarpanel-month { - width: 5em; + width: 5.4em; } .#{$primaryStyleName}-month .#{$primaryStyleName}-calendarpanel-month, .#{$primaryStyleName}-day .#{$primaryStyleName}-calendarpanel-month, .#{$primaryStyleName}-full .#{$primaryStyleName}-calendarpanel-month { - width: 9em; + width: 9.4em; } .#{$primaryStyleName}-popupcalendar { min-width: 0; - } + padding-right: $popupdatefield-button-width; +} .#{$primaryStyleName}-year .#{$primaryStyleName}-calendarpanel { - width: 8em; + width: 8.4em; } td.#{$primaryStyleName}-calendarpanel-prevyear { diff --git a/WebContent/VAADIN/themes/chameleon/components/label/label.scss b/WebContent/VAADIN/themes/chameleon/components/label/label.scss index 736c29f075..5afcbd584a 100644 --- a/WebContent/VAADIN/themes/chameleon/components/label/label.scss +++ b/WebContent/VAADIN/themes/chameleon/components/label/label.scss @@ -44,7 +44,7 @@ * Big ******************************************************************************/ .#{$primaryStyleName}-big { - font-size: 15.6px; + font-size: $chameleon-font-size-big; } @@ -63,7 +63,7 @@ * Tiny ******************************************************************************/ .#{$primaryStyleName}-tiny { - font-size: 11.05px; + font-size: $chameleon-font-size-small; line-height: 1.2; opacity: .7; filter: alpha(opacity=70); diff --git a/WebContent/VAADIN/themes/chameleon/components/selects/selects.scss b/WebContent/VAADIN/themes/chameleon/components/selects/selects.scss index 7dac94fe9d..76ff1acfef 100644 --- a/WebContent/VAADIN/themes/chameleon/components/selects/selects.scss +++ b/WebContent/VAADIN/themes/chameleon/components/selects/selects.scss @@ -53,7 +53,7 @@ } &.v-app .#{$primaryStyleName}-suggestpopup-small td { - font-size: 11.05px; + font-size: $chameleon-font-size-small; } &.v-app .#{$primaryStyleName}-suggestpopup-big td { @@ -138,7 +138,7 @@ } .v-select-big .v-select-select { - font-size: 15.6px; + font-size: $chameleon-font-size-big; } diff --git a/WebContent/VAADIN/themes/chameleon/components/table/table.scss b/WebContent/VAADIN/themes/chameleon/components/table/table.scss index 41f6b2edba..f224e898f1 100644 --- a/WebContent/VAADIN/themes/chameleon/components/table/table.scss +++ b/WebContent/VAADIN/themes/chameleon/components/table/table.scss @@ -106,7 +106,7 @@ div.#{$primaryStyleName}-focus-slot-right { ******************************************************************************/ .#{$primaryStyleName}-small .#{$primaryStyleName}-caption-container, .#{$primaryStyleName}-small .#{$primaryStyleName}-body { - font-size: 11.05px; + font-size: $chameleon-font-size-small; } .#{$primaryStyleName}-small .#{$primaryStyleName}-resizer, @@ -124,7 +124,7 @@ div.#{$primaryStyleName}-focus-slot-right { ******************************************************************************/ .#{$primaryStyleName}-big .#{$primaryStyleName}-caption-container, .#{$primaryStyleName}-big .#{$primaryStyleName}-body { - font-size: 15.6px; + font-size: $chameleon-font-size-big; } .#{$primaryStyleName}-big .#{$primaryStyleName}-caption-container { diff --git a/WebContent/VAADIN/themes/chameleon/components/textfield/textfield.scss b/WebContent/VAADIN/themes/chameleon/components/textfield/textfield.scss index 787a4a4f91..7c5c72c1df 100644 --- a/WebContent/VAADIN/themes/chameleon/components/textfield/textfield.scss +++ b/WebContent/VAADIN/themes/chameleon/components/textfield/textfield.scss @@ -71,22 +71,17 @@ textarea.v-textarea-readonly { ******************************************************************************/ &.v-app input.#{$primaryStyleName}-small, &.v-app textarea.v-textarea-small, -.v-datefield-small .v-datefield-textfield, -.v-datefield-small .v-datefield-button, .v-filterselect-small .v-filterselect-input { - font-size: 11.05px; + font-size: $chameleon-font-size-small; } - /******************************************************************************* * Big (and big search) ******************************************************************************/ &.v-app input.#{$primaryStyleName}-big, &.v-app textarea.v-textarea-big, -.v-datefield-big .v-datefield-textfield, -.v-datefield-big .v-datefield-button, .v-filterselect-big .v-filterselect-input { - font-size: 15.6px; + font-size: $chameleon-font-size-big; } input.#{$primaryStyleName}-big[type=text], diff --git a/WebContent/VAADIN/themes/reindeer/datefield/datefield.scss b/WebContent/VAADIN/themes/reindeer/datefield/datefield.scss index 20bc1fe478..d486316419 100644 --- a/WebContent/VAADIN/themes/reindeer/datefield/datefield.scss +++ b/WebContent/VAADIN/themes/reindeer/datefield/datefield.scss @@ -233,9 +233,6 @@ td.#{$primaryStyleName}-calendarpanel-nextyear { .v-op & .#{$primaryStyleName}-popup { background: rgba(255,255,255,.95); } -.v-has-width > input.#{$primaryStyleName}-textfield { - width: 100%; -} .#{$primaryStyleName}-year > .#{$primaryStyleName}-textfield { width: 4.5em; } @@ -255,9 +252,6 @@ td.#{$primaryStyleName}-calendarpanel-nextyear { -webkit-border-top-right-radius: 0; -webkit-border-bottom-right-radius: 0; height: 23px; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; } .#{$primaryStyleName}.v-readonly input.#{$primaryStyleName}-textfield { border-right-width: 1px; diff --git a/WebContent/VAADIN/themes/runo/datefield/datefield.scss b/WebContent/VAADIN/themes/runo/datefield/datefield.scss index 2f9fe19cc0..d89fdf786e 100644 --- a/WebContent/VAADIN/themes/runo/datefield/datefield.scss +++ b/WebContent/VAADIN/themes/runo/datefield/datefield.scss @@ -1,19 +1,28 @@ @mixin runo-datefield($primaryStyleName : v-datefield) { +$popupdatefield-button-width: 22px; +$negative-popupdatefield-button-width: -22px; + .#{$primaryStyleName} input.v-textfield, .#{$primaryStyleName} input.v-textfield[type=text] { - height: 18px; + height: 22px; // 18px height + 2*2px padding + } .#{$primaryStyleName}-button { font-size:13px; - width: 22px; + width: $popupdatefield-button-width; + margin-right: $negative-popupdatefield-button-width; height: 24px; padding: 0; overflow: hidden; border: none; background: transparent url(img/open-button.png) no-repeat right 0; - vertical-align: top; } +.#{$primaryStyleName}-popupcalendar { + min-width: 0; + padding-right: $popupdatefield-button-width; +} + .#{$primaryStyleName}-popup { font-family: "Trebuchet MS", geneva, helvetica, arial, tahoma, verdana, sans-serif; color: #464f52; diff --git a/uitest/src/com/vaadin/tests/components/uitest/components/DatesCssTest.java b/uitest/src/com/vaadin/tests/components/uitest/components/DatesCssTest.java index 454cc68202..cb97e8ee84 100644 --- a/uitest/src/com/vaadin/tests/components/uitest/components/DatesCssTest.java +++ b/uitest/src/com/vaadin/tests/components/uitest/components/DatesCssTest.java @@ -6,12 +6,12 @@ import java.util.GregorianCalendar; import com.vaadin.tests.components.uitest.TestSampler; import com.vaadin.ui.Component; import com.vaadin.ui.DateField; -import com.vaadin.ui.HorizontalLayout; +import com.vaadin.ui.GridLayout; import com.vaadin.ui.InlineDateField; import com.vaadin.ui.PopupDateField; import com.vaadin.ui.themes.ChameleonTheme; -public class DatesCssTest extends HorizontalLayout { +public class DatesCssTest extends GridLayout { private TestSampler parent; private int debugIdCounter = 0; @@ -19,13 +19,14 @@ public class DatesCssTest extends HorizontalLayout { private Calendar cal = new GregorianCalendar(2012, 8, 11, 18, 00, 00); public DatesCssTest(TestSampler parent) { + super(5, 2); this.parent = parent; setSpacing(true); setWidth("100%"); - createDateFieldWith(null, null); - createDateFieldWith("Small", ChameleonTheme.DATEFIELD_SMALL); - createDateFieldWith("Big", ChameleonTheme.DATEFIELD_BIG); + createDateFieldWith(null, null, null); + createDateFieldWith("Small", ChameleonTheme.DATEFIELD_SMALL, null); + createDateFieldWith("Big", ChameleonTheme.DATEFIELD_BIG, null); DateField df = new PopupDateField("Popup date field"); df.setId("datefield" + debugIdCounter++); @@ -36,9 +37,16 @@ public class DatesCssTest extends HorizontalLayout { df.setId("datefield" + debugIdCounter++); df.setValue(cal.getTime()); addComponent(df); + + createDateFieldWith(null, null, "130px"); + createDateFieldWith("Small 130px", ChameleonTheme.DATEFIELD_SMALL, + "130px"); + createDateFieldWith("Big 130px", ChameleonTheme.DATEFIELD_BIG, "130px"); + } - private void createDateFieldWith(String caption, String primaryStyleName) { + private void createDateFieldWith(String caption, String primaryStyleName, + String width) { DateField df = new DateField("Date field"); df.setId("datefield" + debugIdCounter++); df.setValue(cal.getTime()); @@ -50,6 +58,9 @@ public class DatesCssTest extends HorizontalLayout { if (primaryStyleName != null) { df.addStyleName(primaryStyleName); } + if (width != null) { + df.setWidth(width); + } addComponent(df); -- 2.39.5