Fixes #3456: DateField rendered wrong in readonly mode

svn changeset:9121/svn branch:6.2

9 files changed, 49 insertions, 83 deletions

diff --git a/WebContent/VAADIN/themes/base/datefield/datefield.css b/WebContent/VAADIN/themes/base/datefield/datefield.css
index 05038aa783..1427ff2195 100644
--- a/WebContent/VAADIN/themes/base/datefield/datefield.css
+++ b/WebContent/VAADIN/themes/base/datefield/datefield.css
@@ -7,6 +7,9 @@
 .v-datefield-button {
 	cursor: pointer;
 }
+.v-readonly .v-datefield-button {
+	display: none;
+}
 .v-datefield-calendarpanel table {
 	width: 100%;
 }
diff --git a/WebContent/VAADIN/themes/base/styles.css b/WebContent/VAADIN/themes/base/styles.css
index 29be722503..93258c44fc 100644
--- a/WebContent/VAADIN/themes/base/styles.css
+++ b/WebContent/VAADIN/themes/base/styles.css
@@ -461,6 +461,9 @@ div.v-app-loading {
 .v-datefield-button {
 	cursor: pointer;
 }
+.v-readonly .v-datefield-button {
+	display: none;
+}
 .v-datefield-calendarpanel table {
 	width: 100%;
 }
@@ -1402,12 +1405,6 @@ textarea.v-textarea-prompt {
 	color: #999;
 	font-style: italic;
 }
-.v-textfield.v-readonly,
-.v-textarea.v-readonly {
-	background: transparent;
-	color: #222;
-	border: none;
-}
 .v-richtextarea {
 	border: 1px solid #aaa;
 	overflow: hidden;
diff --git a/WebContent/VAADIN/themes/base/textfield/textfield.css b/WebContent/VAADIN/themes/base/textfield/textfield.css
index 097f6adab8..b6209403b5 100644
--- a/WebContent/VAADIN/themes/base/textfield/textfield.css
+++ b/WebContent/VAADIN/themes/base/textfield/textfield.css
@@ -11,12 +11,6 @@ textarea.v-textarea-prompt {
 	color: #999;
 	font-style: italic;
 }
-.v-textfield.v-readonly,
-.v-textarea.v-readonly {
-	background: transparent;
-	color: #222;
-	border: none;
-}
 .v-richtextarea {
 	border: 1px solid #aaa;
 	overflow: hidden;
diff --git a/WebContent/VAADIN/themes/reindeer/datefield/datefield.css b/WebContent/VAADIN/themes/reindeer/datefield/datefield.css
index a2bf290326..9abfde2676 100644
--- a/WebContent/VAADIN/themes/reindeer/datefield/datefield.css
+++ b/WebContent/VAADIN/themes/reindeer/datefield/datefield.css
@@ -213,7 +213,7 @@ td.v-datefield-calendarpanel-nextyear {
 	padding: 8px 4px;
 	border-radius: 3px;
 	-webkit-border-radius: 3px;
-	-moz-border-radisu: 3px;
+	-moz-border-radius: 3px;
 }
 .v-sa .v-datefield-popup,
 .v-ff3 .v-datefield-popup,
@@ -233,20 +233,30 @@ td.v-datefield-calendarpanel-nextyear {
 	width: 12em;
 }
 .v-datefield-popupcalendar .v-datefield-textfield {
-	border-right: none;
+	border-right-width: 0;
 	height: 18px;
 }
-.v-ff .v-datefield-popupcalendar .v-datefield-textfield,
-.v-op .v-datefield-popupcalendar .v-datefield-textfield {
+.v-readonly .v-datefield-textfield {
+	border-right-width: 1px;
+}
+.v-ff .v-datefield-popupcalendar .v-datefield-textfield {
 	border-radius-topright: 0;
 	border-radius-bottomright: 0;
 	-moz-border-radius-topright: 0;
 	-moz-border-radius-bottomright: 0;
 }
+.v-ff .v-readonly .v-datefield-textfield {
+	border-radius: 3px;
+	-moz-border-radius: 3px;
+}
 .v-sa .v-datefield-popupcalendar .v-datefield-textfield,
 .v-ff35 .v-datefield-popupcalendar .v-datefield-textfield {
 	border-width: 0 0 0 3px;
 }
+.v-sa .v-datefield-popupcalendar .v-textfield-readonly,
+.v-ff35 .v-datefield-popupcalendar .v-textfield-readonly {
+	border-width: 0 3px;
+}
 .v-datefield-popupcalendar .v-datefield-button {
 	width: 24px;
 	height: 23px;
diff --git a/WebContent/VAADIN/themes/reindeer/styles.css b/WebContent/VAADIN/themes/reindeer/styles.css
index da13566aec..88b8acccc4 100644
--- a/WebContent/VAADIN/themes/reindeer/styles.css
+++ b/WebContent/VAADIN/themes/reindeer/styles.css
@@ -461,6 +461,9 @@ div.v-app-loading {
 .v-datefield-button {
 	cursor: pointer;
 }
+.v-readonly .v-datefield-button {
+	display: none;
+}
 .v-datefield-calendarpanel table {
 	width: 100%;
 }
@@ -1402,12 +1405,6 @@ textarea.v-textarea-prompt {
 	color: #999;
 	font-style: italic;
 }
-.v-textfield.v-readonly,
-.v-textarea.v-readonly {
-	background: transparent;
-	color: #222;
-	border: none;
-}
 .v-richtextarea {
 	border: 1px solid #aaa;
 	overflow: hidden;
@@ -2600,7 +2597,7 @@ td.v-datefield-calendarpanel-nextyear {
 	padding: 8px 4px;
 	border-radius: 3px;
 	-webkit-border-radius: 3px;
-	-moz-border-radisu: 3px;
+	-moz-border-radius: 3px;
 }
 .v-sa .v-datefield-popup,
 .v-ff3 .v-datefield-popup,
@@ -2620,20 +2617,30 @@ td.v-datefield-calendarpanel-nextyear {
 	width: 12em;
 }
 .v-datefield-popupcalendar .v-datefield-textfield {
-	border-right: none;
+	border-right-width: 0;
 	height: 18px;
 }
-.v-ff .v-datefield-popupcalendar .v-datefield-textfield,
-.v-op .v-datefield-popupcalendar .v-datefield-textfield {
+.v-readonly .v-datefield-textfield {
+	border-right-width: 1px;
+}
+.v-ff .v-datefield-popupcalendar .v-datefield-textfield {
 	border-radius-topright: 0;
 	border-radius-bottomright: 0;
 	-moz-border-radius-topright: 0;
 	-moz-border-radius-bottomright: 0;
 }
+.v-ff .v-readonly .v-datefield-textfield {
+	border-radius: 3px;
+	-moz-border-radius: 3px;
+}
 .v-sa .v-datefield-popupcalendar .v-datefield-textfield,
 .v-ff35 .v-datefield-popupcalendar .v-datefield-textfield {
 	border-width: 0 0 0 3px;
 }
+.v-sa .v-datefield-popupcalendar .v-textfield-readonly,
+.v-ff35 .v-datefield-popupcalendar .v-textfield-readonly {
+	border-width: 0 3px;
+}
 .v-datefield-popupcalendar .v-datefield-button {
 	width: 24px;
 	height: 23px;
@@ -4394,20 +4401,6 @@ textarea.v-textarea-prompt {
 	color: #5f6366;
 }
 
-/* Readonly */
-input.v-textfield-readonly,
-.v-sa input.v-textfield-readonly,
-.v-ff35 input.v-textfield-readonly,
-.black input.v-textfield-readonly,
-.v-sa .black input.v-textfield-readonly,
-.v-ff35 .black input.v-textfield-readonly {
-	border: none;
-	background: transparent;
-	-webkit-border-image: none;
-	-moz-border-image: none;
-	border-width: 0;
-}
-
 .v-tree-node {
 	background: transparent url(tree/img/arrows.png) no-repeat 6px -10px;
 	margin-bottom: 2px;
diff --git a/WebContent/VAADIN/themes/reindeer/textfield/textfield.css b/WebContent/VAADIN/themes/reindeer/textfield/textfield.css
index 73434b902b..129ebc13bc 100644
--- a/WebContent/VAADIN/themes/reindeer/textfield/textfield.css
+++ b/WebContent/VAADIN/themes/reindeer/textfield/textfield.css
@@ -123,18 +123,4 @@ textarea.v-textarea-prompt {
 
 .black input.v-textfield-prompt {
 	color: #5f6366;
-}
-
-/* Readonly */
-input.v-textfield-readonly,
-.v-sa input.v-textfield-readonly,
-.v-ff35 input.v-textfield-readonly,
-.black input.v-textfield-readonly,
-.v-sa .black input.v-textfield-readonly,
-.v-ff35 .black input.v-textfield-readonly {
-	border: none;
-	background: transparent;
-	-webkit-border-image: none;
-	-moz-border-image: none;
-	border-width: 0;
 }
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/runo/styles.css b/WebContent/VAADIN/themes/runo/styles.css
index b4d79b92e5..ec5fcb2de1 100644
--- a/WebContent/VAADIN/themes/runo/styles.css
+++ b/WebContent/VAADIN/themes/runo/styles.css
@@ -461,6 +461,9 @@ div.v-app-loading {
 .v-datefield-button {
 	cursor: pointer;
 }
+.v-readonly .v-datefield-button {
+	display: none;
+}
 .v-datefield-calendarpanel table {
 	width: 100%;
 }
@@ -1402,12 +1405,6 @@ textarea.v-textarea-prompt {
 	color: #999;
 	font-style: italic;
 }
-.v-textfield.v-readonly,
-.v-textarea.v-readonly {
-	background: transparent;
-	color: #222;
-	border: none;
-}
 .v-richtextarea {
 	border: 1px solid #aaa;
 	overflow: hidden;
diff --git a/src/com/vaadin/terminal/gwt/client/ui/VPopupCalendar.java b/src/com/vaadin/terminal/gwt/client/ui/VPopupCalendar.java
index 8143eb0ea9..413666b644 100644
--- a/src/com/vaadin/terminal/gwt/client/ui/VPopupCalendar.java
+++ b/src/com/vaadin/terminal/gwt/client/ui/VPopupCalendar.java
@@ -60,28 +60,7 @@ public class VPopupCalendar extends VTextualDate implements Paintable, Field,
         }

         calendarToggle.setEnabled(enabled);

 

-        handleReadonly();

-

-    }

-

-    private void handleReadonly() {

-        String currentDisplay = calendarToggle.getElement().getStyle()

-                .getProperty("display");

-        boolean currentReadonly = (currentDisplay != null && currentDisplay

-                .equals("none"));

-        if (currentReadonly != readonly) {

-            // We need to react only if the read-only status has changed

-            if (readonly) {

-                calendarToggle.getElement().getStyle().setProperty("display",

-                        "none");

-            } else {

-                calendarToggle.getElement().getStyle().setProperty("display",

-                        "");

-            }

-

-            // Force update of textfield size

-            updateWidth();

-        }

+        updateWidth();

 

     }

 

diff --git a/src/com/vaadin/terminal/gwt/client/ui/VTextualDate.java b/src/com/vaadin/terminal/gwt/client/ui/VTextualDate.java
index 11f335e152..c1487f742b 100644
--- a/src/com/vaadin/terminal/gwt/client/ui/VTextualDate.java
+++ b/src/com/vaadin/terminal/gwt/client/ui/VTextualDate.java
@@ -82,6 +82,12 @@ public class VTextualDate extends VDateField implements Paintable, Field,
         if (uidl.hasAttribute("tabindex")) {

             text.setTabIndex(uidl.getIntAttribute("tabindex"));

         }

+

+        if (readonly) {

+            text.addStyleDependentName("readonly");

+        } else {

+            text.removeStyleDependentName("readonly");

+        }

     }

 

     protected String getFormatString() {

@@ -141,7 +147,8 @@ public class VTextualDate extends VDateField implements Paintable, Field,
         }

 

         text.setText(dateText);

-        text.setEnabled(enabled && !readonly);

+        text.setEnabled(enabled);

+        text.setReadOnly(readonly);

 

         if (readonly) {

             text.addStyleName("v-readonly");