Ensure popup datefield width setting works in all themes (#10485)

Change-Id: I9f0891fb363e49d59b5ab2b1af53ba4bf9bca21e

diff --git a/WebContent/VAADIN/themes/base/datefield/datefield.scss b/WebContent/VAADIN/themes/base/datefield/datefield.scss
index 21f544cb722e9a63de047f841fe7be8cf72806a4..40991237640ebc5cca17fe48c5eae997ddcfa39e 100644 (file)
--- 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 2f3dc53ef3b07cb8b5effc866954dad87f0ce472..382dff3325982c79ebd6e8397c1a309ab4152258 100644 (file)
--- 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 cfb5ab2917872b4aab114a7d72453075508550c1..f2b597c59a2987a1bbd9ae80cf22810b21c84cc2 100644 (file)
--- 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 3d550c86902a3182f4431e2a355007993fbb57d2..2947a7189614076c32f947c7855723521aa295f2 100644 (file)
--- 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 736c29f075fcf07f4b45ac2e206bdfaafe81ecd0..5afcbd584ad357f21ba63cd08758ee13235c141f 100644 (file)
--- 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 7dac94fe9db14ab6e50acda9198adf85ffee8adc..76ff1acfeffbfab8083f75bddf57c1edd1cb98db 100644 (file)
--- 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 41f6b2edbab8308d79723b804118cb1f62383da0..f224e898f1d726db92447b1ba99b2cb73336236a 100644 (file)
--- 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 787a4a4f911b4ace3a8d90317fc2f9981f2b1886..7c5c72c1df862d3bb4ab2c7ac6a8512ab6c9370f 100644 (file)
--- 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 20bc1fe4784d79f022919c2862a64a98f061c4d0..d4863164191b3d2aee45e6acb6fd5e48c4efa174 100644 (file)
--- 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 2f9fe19cc0dc09781a9fd487c5b3eb05f7e55139..d89fdf786e4df87e0fcc84cc28acb332fa0f5734 100644 (file)
--- 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 454cc682024dd0a31ccc03081d738af00fc98259..cb97e8ee840530507fde27b39508e8206adf805d 100644 (file)
--- 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);