Fixes #4102: RichTextArea should provide feedback on current text format

Revised the whole theme for RichTextArea.

svn changeset:11985/svn branch:6.3

7 files changed, 256 insertions, 105 deletions

diff --git a/WebContent/VAADIN/themes/base/styles.css b/WebContent/VAADIN/themes/base/styles.css
index e2c27575fb..ccaa2cf184 100644
--- a/WebContent/VAADIN/themes/base/styles.css
+++ b/WebContent/VAADIN/themes/base/styles.css
@@ -1,5 +1,6 @@
 .v-theme-version:after {content:"6_3_0_dev-20100318";}
 .v-theme-version-6_3_0_dev-20100318 {display: none;}
+
 /* Automatically compiled css file from subdirectories. */
 
 .v-absolutelayout-wrapper {
@@ -1573,6 +1574,7 @@ div.v-progressindicator-indeterminate-disabled {
 	height: 0;
 }
 
+
 .v-textfield {
 	text-align: left /* Force default alignment */
 }
@@ -1591,23 +1593,6 @@ textarea.v-textarea-prompt {
 	background: transparent;
 	border: none;
 }
-.v-richtextarea {
-	border: 1px solid #aaa;
-	overflow: hidden;
-}
-.v-richtextarea .gwt-RichTextArea {
-	background: #fff;
-}
-.v-richtextarea .gwt-RichTextToolbar .gwt-ToggleButton,
-.v-richtextarea .gwt-RichTextToolbar .gwt-PushButton {
-	float: left;
-}
-.v-richtextarea .gwt-RichTextToolbar {
-	white-space: nowrap;
-}
-.v-richtextarea iframe {
-	border: 0;
-}
 /* Disabled by default
 .v-textarea-error,
 .v-textfield-error,
@@ -1628,6 +1613,59 @@ textarea.v-textarea-prompt {
 	outline-width: medium;
 }
 
+.v-richtextarea {
+	border: 1px solid #aaa;
+	overflow: hidden;
+}
+.v-richtextarea .gwt-RichTextArea {
+	background: #fff;
+	border: none;
+}
+
+.v-richtextarea .gwt-RichTextToolbar {
+	white-space: nowrap;
+	background: #959595 url(textfield/img/richtext-toolbar-bg.png) repeat-x 0 -42px;
+	border-bottom: 1px solid #7d7d7d;
+	padding: 2px;
+	overflow: hidden;
+}
+.v-richtextarea .gwt-RichTextToolbar-top {
+	padding-bottom: 1px;
+	overflow: hidden;
+	white-space: normal;
+}
+.v-richtextarea .gwt-RichTextToolbar-bottom {
+	clear: left;
+	overflow: hidden;
+	white-space: nowrap;
+}
+.v-richtextarea .gwt-RichTextToolbar .gwt-ToggleButton,
+.v-richtextarea .gwt-RichTextToolbar .gwt-PushButton {
+	float: left;
+	display: inline;
+	width: 22px;
+	height: 21px;
+	overflow: hidden;
+	background: transparent url(textfield/img/richtext-toolbar-bg.png) repeat-x;
+	cursor: pointer;
+	margin-right: 2px;
+	text-align: center;
+}
+.v-richtextarea .gwt-RichTextToolbar .gwt-ToggleButton-down,
+.v-richtextarea .gwt-RichTextToolbar .gwt-PushButton-down,
+.v-richtextarea .gwt-RichTextToolbar .gwt-ToggleButton-down-hovering,
+.v-richtextarea .gwt-RichTextToolbar .gwt-PushButton-down-hovering {
+	background-position: 0 -21px;
+}
+.v-richtextarea .gwt-RichTextToolbar .gwt-ToggleButton img,
+.v-richtextarea .gwt-RichTextToolbar .gwt-PushButton img {
+	
+}
+.v-richtextarea .gwt-RichTextToolbar .gwt-ListBox {
+	width: 24.5%;
+	margin-right: 2px;
+}
+
 .v-tree {
 	text-align: left; /* Force default alignment */
 	overflow: hidden;
diff --git a/WebContent/VAADIN/themes/base/textfield/img/richtext-toolbar-bg.png b/WebContent/VAADIN/themes/base/textfield/img/richtext-toolbar-bg.png
new file mode 100644
index 0000000000..e92be23e51
--- /dev/null
+++ b/WebContent/VAADIN/themes/base/textfield/img/richtext-toolbar-bg.png
diff --git a/WebContent/VAADIN/themes/base/textfield/richtext.css b/WebContent/VAADIN/themes/base/textfield/richtext.css
new file mode 100644
index 0000000000..eaf7761d3e
--- /dev/null
+++ b/WebContent/VAADIN/themes/base/textfield/richtext.css
@@ -0,0 +1,52 @@
+.v-richtextarea {
+	border: 1px solid #aaa;
+	overflow: hidden;
+}
+.v-richtextarea .gwt-RichTextArea {
+	background: #fff;
+	border: none;
+}
+
+.v-richtextarea .gwt-RichTextToolbar {
+	white-space: nowrap;
+	background: #959595 url(img/richtext-toolbar-bg.png) repeat-x 0 -42px;
+	border-bottom: 1px solid #7d7d7d;
+	padding: 2px;
+	overflow: hidden;
+}
+.v-richtextarea .gwt-RichTextToolbar-top {
+	padding-bottom: 1px;
+	overflow: hidden;
+	white-space: normal;
+}
+.v-richtextarea .gwt-RichTextToolbar-bottom {
+	clear: left;
+	overflow: hidden;
+	white-space: nowrap;
+}
+.v-richtextarea .gwt-RichTextToolbar .gwt-ToggleButton,
+.v-richtextarea .gwt-RichTextToolbar .gwt-PushButton {
+	float: left;
+	display: inline;
+	width: 22px;
+	height: 21px;
+	overflow: hidden;
+	background: transparent url(img/richtext-toolbar-bg.png) repeat-x;
+	cursor: pointer;
+	margin-right: 2px;
+	text-align: center;
+}
+.v-richtextarea .gwt-RichTextToolbar .gwt-ToggleButton-down,
+.v-richtextarea .gwt-RichTextToolbar .gwt-PushButton-down,
+.v-richtextarea .gwt-RichTextToolbar .gwt-ToggleButton-down-hovering,
+.v-richtextarea .gwt-RichTextToolbar .gwt-PushButton-down-hovering {
+	background-position: 0 -21px;
+}
+.v-richtextarea .gwt-RichTextToolbar .gwt-ToggleButton img,
+.v-richtextarea .gwt-RichTextToolbar .gwt-PushButton img {
+	
+}
+.v-richtextarea .gwt-RichTextToolbar .gwt-ListBox {
+	width: 24.5%;
+	margin-right: 2px;
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/textfield/textfield-normal.css b/WebContent/VAADIN/themes/base/textfield/textfield-normal.css
new file mode 100644
index 0000000000..c48e769e73
--- /dev/null
+++ b/WebContent/VAADIN/themes/base/textfield/textfield-normal.css
@@ -0,0 +1,37 @@
+.v-textfield {
+	text-align: left /* Force default alignment */
+}
+.v-textarea {
+}
+.v-textfield-focus,
+.v-textarea-focus {
+}
+input.v-textfield-prompt,
+textarea.v-textarea-prompt {
+	color: #999;
+	font-style: italic;
+}
+.v-textfield.v-readonly,
+.v-textarea.v-readonly {
+	background: transparent;
+	border: none;
+}
+/* Disabled by default
+.v-textarea-error,
+.v-textfield-error,
+.v-richtextarea-error iframe.gwt-RichTextArea {
+	background: #FFE0E0;	
+}
+*/
+/* Disabled by default
+.v-textarea-required,
+.v-textfield-required,
+.v-richtextarea-required iframe.gwt-RichTextArea {
+	background: #FFE0E0;	
+}
+*/
+/* Safari focus glow fix */
+.v-sa input:focus, 
+.v-sa textarea:focus {
+	outline-width: medium;
+}
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/base/textfield/textfield.css b/WebContent/VAADIN/themes/base/textfield/textfield.css
index 261970a204..956b302efe 100644
--- a/WebContent/VAADIN/themes/base/textfield/textfield.css
+++ b/WebContent/VAADIN/themes/base/textfield/textfield.css
@@ -1,54 +1,2 @@
-.v-textfield {
-	text-align: left /* Force default alignment */
-}
-.v-textarea {
-}
-.v-textfield-focus,
-.v-textarea-focus {
-}
-input.v-textfield-prompt,
-textarea.v-textarea-prompt {
-	color: #999;
-	font-style: italic;
-}
-.v-textfield.v-readonly,
-.v-textarea.v-readonly {
-	background: transparent;
-	border: none;
-}
-.v-richtextarea {
-	border: 1px solid #aaa;
-	overflow: hidden;
-}
-.v-richtextarea .gwt-RichTextArea {
-	background: #fff;
-}
-.v-richtextarea .gwt-RichTextToolbar .gwt-ToggleButton,
-.v-richtextarea .gwt-RichTextToolbar .gwt-PushButton {
-	float: left;
-}
-.v-richtextarea .gwt-RichTextToolbar {
-	white-space: nowrap;
-}
-.v-richtextarea iframe {
-	border: 0;
-}
-/* Disabled by default
-.v-textarea-error,
-.v-textfield-error,
-.v-richtextarea-error iframe.gwt-RichTextArea {
-	background: #FFE0E0;	
-}
-*/
-/* Disabled by default
-.v-textarea-required,
-.v-textfield-required,
-.v-richtextarea-required iframe.gwt-RichTextArea {
-	background: #FFE0E0;	
-}
-*/
-/* Safari focus glow fix */
-.v-sa input:focus, 
-.v-sa textarea:focus {
-	outline-width: medium;
-}
\ No newline at end of file
+@import "textfield-normal.css";
+@import "richtext.css";
\ No newline at end of file
diff --git a/WebContent/VAADIN/themes/reindeer/styles.css b/WebContent/VAADIN/themes/reindeer/styles.css
index 9da582c916..ff91b7e88f 100644
--- a/WebContent/VAADIN/themes/reindeer/styles.css
+++ b/WebContent/VAADIN/themes/reindeer/styles.css
@@ -1,5 +1,6 @@
 .v-theme-version:after {content:"6_3_0_dev-20100318";}
 .v-theme-version-6_3_0_dev-20100318 {display: none;}
+
 /* Automatically compiled css file from subdirectories. */
 
 .v-absolutelayout-wrapper {
@@ -1573,6 +1574,7 @@ div.v-progressindicator-indeterminate-disabled {
 	height: 0;
 }
 
+
 .v-textfield {
 	text-align: left /* Force default alignment */
 }
@@ -1591,23 +1593,6 @@ textarea.v-textarea-prompt {
 	background: transparent;
 	border: none;
 }
-.v-richtextarea {
-	border: 1px solid #aaa;
-	overflow: hidden;
-}
-.v-richtextarea .gwt-RichTextArea {
-	background: #fff;
-}
-.v-richtextarea .gwt-RichTextToolbar .gwt-ToggleButton,
-.v-richtextarea .gwt-RichTextToolbar .gwt-PushButton {
-	float: left;
-}
-.v-richtextarea .gwt-RichTextToolbar {
-	white-space: nowrap;
-}
-.v-richtextarea iframe {
-	border: 0;
-}
 /* Disabled by default
 .v-textarea-error,
 .v-textfield-error,
@@ -1628,6 +1613,59 @@ textarea.v-textarea-prompt {
 	outline-width: medium;
 }
 
+.v-richtextarea {
+	border: 1px solid #aaa;
+	overflow: hidden;
+}
+.v-richtextarea .gwt-RichTextArea {
+	background: #fff;
+	border: none;
+}
+
+.v-richtextarea .gwt-RichTextToolbar {
+	white-space: nowrap;
+	background: #959595 url(../base/textfield/img/richtext-toolbar-bg.png) repeat-x 0 -42px;
+	border-bottom: 1px solid #7d7d7d;
+	padding: 2px;
+	overflow: hidden;
+}
+.v-richtextarea .gwt-RichTextToolbar-top {
+	padding-bottom: 1px;
+	overflow: hidden;
+	white-space: normal;
+}
+.v-richtextarea .gwt-RichTextToolbar-bottom {
+	clear: left;
+	overflow: hidden;
+	white-space: nowrap;
+}
+.v-richtextarea .gwt-RichTextToolbar .gwt-ToggleButton,
+.v-richtextarea .gwt-RichTextToolbar .gwt-PushButton {
+	float: left;
+	display: inline;
+	width: 22px;
+	height: 21px;
+	overflow: hidden;
+	background: transparent url(../base/textfield/img/richtext-toolbar-bg.png) repeat-x;
+	cursor: pointer;
+	margin-right: 2px;
+	text-align: center;
+}
+.v-richtextarea .gwt-RichTextToolbar .gwt-ToggleButton-down,
+.v-richtextarea .gwt-RichTextToolbar .gwt-PushButton-down,
+.v-richtextarea .gwt-RichTextToolbar .gwt-ToggleButton-down-hovering,
+.v-richtextarea .gwt-RichTextToolbar .gwt-PushButton-down-hovering {
+	background-position: 0 -21px;
+}
+.v-richtextarea .gwt-RichTextToolbar .gwt-ToggleButton img,
+.v-richtextarea .gwt-RichTextToolbar .gwt-PushButton img {
+	
+}
+.v-richtextarea .gwt-RichTextToolbar .gwt-ListBox {
+	width: 24.5%;
+	margin-right: 2px;
+}
+
 .v-tree {
 	text-align: left; /* Force default alignment */
 	overflow: hidden;
diff --git a/WebContent/VAADIN/themes/runo/styles.css b/WebContent/VAADIN/themes/runo/styles.css
index 0c0a8de943..0566128329 100644
--- a/WebContent/VAADIN/themes/runo/styles.css
+++ b/WebContent/VAADIN/themes/runo/styles.css
@@ -1,5 +1,6 @@
 .v-theme-version:after {content:"6_3_0_dev-20100318";}
 .v-theme-version-6_3_0_dev-20100318 {display: none;}
+
 /* Automatically compiled css file from subdirectories. */
 
 .v-absolutelayout-wrapper {
@@ -1573,6 +1574,7 @@ div.v-progressindicator-indeterminate-disabled {
 	height: 0;
 }
 
+
 .v-textfield {
 	text-align: left /* Force default alignment */
 }
@@ -1591,23 +1593,6 @@ textarea.v-textarea-prompt {
 	background: transparent;
 	border: none;
 }
-.v-richtextarea {
-	border: 1px solid #aaa;
-	overflow: hidden;
-}
-.v-richtextarea .gwt-RichTextArea {
-	background: #fff;
-}
-.v-richtextarea .gwt-RichTextToolbar .gwt-ToggleButton,
-.v-richtextarea .gwt-RichTextToolbar .gwt-PushButton {
-	float: left;
-}
-.v-richtextarea .gwt-RichTextToolbar {
-	white-space: nowrap;
-}
-.v-richtextarea iframe {
-	border: 0;
-}
 /* Disabled by default
 .v-textarea-error,
 .v-textfield-error,
@@ -1628,6 +1613,59 @@ textarea.v-textarea-prompt {
 	outline-width: medium;
 }
 
+.v-richtextarea {
+	border: 1px solid #aaa;
+	overflow: hidden;
+}
+.v-richtextarea .gwt-RichTextArea {
+	background: #fff;
+	border: none;
+}
+
+.v-richtextarea .gwt-RichTextToolbar {
+	white-space: nowrap;
+	background: #959595 url(../base/textfield/img/richtext-toolbar-bg.png) repeat-x 0 -42px;
+	border-bottom: 1px solid #7d7d7d;
+	padding: 2px;
+	overflow: hidden;
+}
+.v-richtextarea .gwt-RichTextToolbar-top {
+	padding-bottom: 1px;
+	overflow: hidden;
+	white-space: normal;
+}
+.v-richtextarea .gwt-RichTextToolbar-bottom {
+	clear: left;
+	overflow: hidden;
+	white-space: nowrap;
+}
+.v-richtextarea .gwt-RichTextToolbar .gwt-ToggleButton,
+.v-richtextarea .gwt-RichTextToolbar .gwt-PushButton {
+	float: left;
+	display: inline;
+	width: 22px;
+	height: 21px;
+	overflow: hidden;
+	background: transparent url(../base/textfield/img/richtext-toolbar-bg.png) repeat-x;
+	cursor: pointer;
+	margin-right: 2px;
+	text-align: center;
+}
+.v-richtextarea .gwt-RichTextToolbar .gwt-ToggleButton-down,
+.v-richtextarea .gwt-RichTextToolbar .gwt-PushButton-down,
+.v-richtextarea .gwt-RichTextToolbar .gwt-ToggleButton-down-hovering,
+.v-richtextarea .gwt-RichTextToolbar .gwt-PushButton-down-hovering {
+	background-position: 0 -21px;
+}
+.v-richtextarea .gwt-RichTextToolbar .gwt-ToggleButton img,
+.v-richtextarea .gwt-RichTextToolbar .gwt-PushButton img {
+	
+}
+.v-richtextarea .gwt-RichTextToolbar .gwt-ListBox {
+	width: 24.5%;
+	margin-right: 2px;
+}
+
 .v-tree {
 	text-align: left; /* Force default alignment */
 	overflow: hidden;