fixes #2373. refactored DOM structure of RTE toolbar

svn changeset:6319/svn branch:trunk

diff --git a/WebContent/ITMILL/themes/default/styles.css b/WebContent/ITMILL/themes/default/styles.css
index c848c6e82fab795b872d94464708ba988c889f32..93bb1bf4fbfce26ec9bd906511e80efb9b1350d3 100644 (file)
--- a/WebContent/ITMILL/themes/default/styles.css
+++ b/WebContent/ITMILL/themes/default/styles.css
@@ -2383,6 +2383,13 @@ input.i-modified,
        border: 1px solid #b6b6b6;
        overflow: hidden;
 }
+.i-richtextarea .gwt-RichTextToolbar .gwt-ToggleButton,
+.i-richtextarea .gwt-RichTextToolbar .gwt-PushButton {
+       float:left;
+}
+.i-richtextarea .gwt-RichTextToolbar {
+       white-space: nowrap;
+}
 .i-richtextarea .gwt-RichTextArea {
        background: #fff url(textfield/img/bg.png) repeat-x;
 }

diff --git a/WebContent/ITMILL/themes/default/textfield/textfield.css b/WebContent/ITMILL/themes/default/textfield/textfield.css
index cabf11630a674bf3b1d1f4d19a492f391b0588ef..0a91a97b2e484516e1301b0150196613ee493e28 100644 (file)
--- a/WebContent/ITMILL/themes/default/textfield/textfield.css
+++ b/WebContent/ITMILL/themes/default/textfield/textfield.css
@@ -39,6 +39,13 @@
        border: 1px solid #b6b6b6;
        overflow: hidden;
 }
+.i-richtextarea .gwt-RichTextToolbar .gwt-ToggleButton,
+.i-richtextarea .gwt-RichTextToolbar .gwt-PushButton {
+       float:left;
+}
+.i-richtextarea .gwt-RichTextToolbar {
+       white-space: nowrap;
+}
 .i-richtextarea .gwt-RichTextArea {
        background: #fff url(img/bg.png) repeat-x;
 }

diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/IRichTextToolbar.java b/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/IRichTextToolbar.java
index 22450b8968a29b9c48eefb6a88aad071a84ed8da..af056fbf6040d5191234b3b967ef20c85ae6538a 100644 (file)
--- a/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/IRichTextToolbar.java
+++ b/src/com/itmill/toolkit/terminal/gwt/client/ui/richtextarea/IRichTextToolbar.java
@@ -22,20 +22,19 @@ import com.google.gwt.user.client.ui.AbstractImagePrototype;
 import com.google.gwt.user.client.ui.ChangeListener;
 import com.google.gwt.user.client.ui.ClickListener;
 import com.google.gwt.user.client.ui.Composite;
-import com.google.gwt.user.client.ui.HorizontalPanel;
+import com.google.gwt.user.client.ui.FlowPanel;
 import com.google.gwt.user.client.ui.ImageBundle;
 import com.google.gwt.user.client.ui.KeyboardListener;
 import com.google.gwt.user.client.ui.ListBox;
 import com.google.gwt.user.client.ui.PushButton;
 import com.google.gwt.user.client.ui.RichTextArea;
 import com.google.gwt.user.client.ui.ToggleButton;
-import com.google.gwt.user.client.ui.VerticalPanel;
 import com.google.gwt.user.client.ui.Widget;
 
 /**
- * A sample toolbar for use with {@link RichTextArea}. It provides a simple UI
- * for all rich text formatting, dynamically displayed only for the available
- * functionality.
+ * A modified version of sample toolbar for use with {@link RichTextArea}. It
+ * provides a simple UI for all rich text formatting, dynamically displayed only
+ * for the available functionality.
  */
 public class IRichTextToolbar extends Composite {
 
@@ -293,9 +292,9 @@ public class IRichTextToolbar extends Composite {
     private final RichTextArea.BasicFormatter basic;
     private final RichTextArea.ExtendedFormatter extended;
 
-    private final VerticalPanel outer = new VerticalPanel();
-    private final HorizontalPanel topPanel = new HorizontalPanel();
-    private final HorizontalPanel bottomPanel = new HorizontalPanel();
+    private final FlowPanel outer = new FlowPanel();
+    private final FlowPanel topPanel = new FlowPanel();
+    private final FlowPanel bottomPanel = new FlowPanel();
     private ToggleButton bold;
     private ToggleButton italic;
     private ToggleButton underline;
@@ -334,6 +333,8 @@ public class IRichTextToolbar extends Composite {
         outer.add(topPanel);
         outer.add(bottomPanel);
         topPanel.setWidth("100%");
+        topPanel.setHeight("20px");
+        topPanel.getElement().getStyle().setProperty("overflow", "hidden");
         bottomPanel.setWidth("100%");
 
         initWidget(outer);