From: Jouni Koivuviita <jouni.koivuviita@itmill.com>
Date: Wed, 7 Oct 2009 06:46:26 +0000 (+0000)
Subject: Fixes #3456: DateField rendered wrong in readonly mode
X-Git-Tag: 6.7.0.beta1~2426
X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=3c00196a5eb3d0782dbd5f8b58df1f3f98c2d0e1;p=vaadin-framework.git

Fixes #3456: DateField rendered wrong in readonly mode

svn changeset:9121/svn branch:6.2
---

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");