Better styling and some renaming in ColorPicker.

svn changeset:2379/svn branch:trunk

src/com/itmill/toolkit/demo/colorpicker/ColorPickerApplication.java

@@ -8,8 +8,6 @@ import com.itmill.toolkit.ui.Button.ClickEvent;
 /**
  * Demonstration application that shows how to use a simple
  * custom client-side GWT component, the ColorPicker.
- * 
- * @author magi
  */
 public class ColorPickerApplication extends com.itmill.toolkit.Application {
 	Window main = new Window("Color Picker Demo");

src/com/itmill/toolkit/demo/colorpicker/gwt/client/WidgetSet.java

@@ -1,17 +1,16 @@
 package com.itmill.toolkit.demo.colorpicker.gwt.client;
 
-import com.google.gwt.core.client.GWT;
 import com.google.gwt.user.client.ui.Widget;
-import com.itmill.toolkit.demo.colorpicker.gwt.client.ui.ClientColorPicker;
+import com.itmill.toolkit.demo.colorpicker.gwt.client.ui.ItkColorPicker;
 import com.itmill.toolkit.terminal.gwt.client.DefaultWidgetSet;
 import com.itmill.toolkit.terminal.gwt.client.UIDL;
 
 public class WidgetSet extends DefaultWidgetSet {
     public Widget createWidget(UIDL uidl) {
     	String className = resolveWidgetTypeName(uidl);
-    	if ("com.itmill.toolkit.demo.colorpicker.gwt.client.ui.ClientColorPicker"
+    	if ("com.itmill.toolkit.demo.colorpicker.gwt.client.ui.ItkColorPicker"
     		.equals(className))
-    		return new ClientColorPicker();
+    		return new ItkColorPicker();
 
     	return super.createWidget(uidl);
     }
@@ -19,7 +18,7 @@ public class WidgetSet extends DefaultWidgetSet {
     protected String resolveWidgetTypeName(UIDL uidl) {
     	String tag = uidl.getTag();
     	if ("colorpicker".equals(tag))
-    		return "com.itmill.toolkit.demo.colorpicker.gwt.client.ui.ClientColorPicker";
+    		return "com.itmill.toolkit.demo.colorpicker.gwt.client.ui.ItkColorPicker";
 
     	return super.resolveWidgetTypeName(uidl);
     }

src/com/itmill/toolkit/demo/colorpicker/gwt/client/ui/OriginalColorPicker.java → src/com/itmill/toolkit/demo/colorpicker/gwt/client/ui/GwtColorPicker.java

@@ -7,12 +7,12 @@ import com.google.gwt.user.client.ui.*;
 /**
  * A regular GWT component without integration with IT Mill Toolkit.
  **/
-public class OriginalColorPicker extends Composite implements ClickListener {
+public class GwtColorPicker extends Composite implements ClickListener {
 
 	/** Currently selected color name to give client-side feedback to the user. */
 	protected Label currentcolor = new Label();
 
-	public OriginalColorPicker() {
+	public GwtColorPicker() {
 		// Create a 4x4 grid of buttons with names for 16 colors
 		Grid grid = new Grid(4,4);
 		String[] colors = new String[] {"aqua", "black", "blue", "fuchsia",
@@ -25,19 +25,15 @@ public class OriginalColorPicker extends Composite implements ClickListener {
 				Button button = new Button(colors[colornum]);
 				button.addClickListener(this);
 				
-				// Set the button colors
-				if ("black navy maroon blue purple".indexOf(colors[colornum]) != -1)
-					DOM.setStyleAttribute(button.getElement(), "color", "white");
-				DOM.setStyleAttribute(button.getElement(), "background", colors[colornum]);
-				
-				// These style settings could be left for CSS
-				DOM.setStyleAttribute(button.getElement(), "width", "60px");
-				DOM.setStyleAttribute(button.getElement(), "height", "60px");
-				DOM.setStyleAttribute(button.getElement(), "border", "none");
-				DOM.setStyleAttribute(button.getElement(), "padding", "0px");
-				
 				// Put the button in the Grid layout
 				grid.setWidget(i, j, button);
+
+				// Set the button background colors.
+				DOM.setStyleAttribute(button.getElement(), "background", colors[colornum]);
+				
+				// For dark colors, the button label must be in white.
+				if ("black navy maroon blue purple".indexOf(colors[colornum]) != -1)
+					DOM.setStyleAttribute(button.getElement(), "color", "white");
 			}
 
 		// Create a panel with the color grid and currently selected color indicator
@@ -45,16 +41,15 @@ public class OriginalColorPicker extends Composite implements ClickListener {
 		panel.add(grid);
 		panel.add(currentcolor);
 
-        // Format the current color feedback box. These could be set in the CSS
-		// as well. We need to obtain the DOM element for the current color
-		// label. This assumes that the <td> element of the HorizontalPanel is
-		// the parent of the label element.
-        Element cell = DOM.getParent(currentcolor.getElement());
-        DOM.setStyleAttribute(cell, "width",         "240px");
-        DOM.setStyleAttribute(cell, "textAlign",     "center");
-        DOM.setStyleAttribute(cell, "verticalAlign", "middle");
+        // Set the class of the color selection feedback box to allow CSS styling.
+		// We need to obtain the DOM element for the current color label.
+		// This assumes that the <td> element of the HorizontalPanel is
+		// the parent of the label element. Notice that the element has no parent
+		// before the widget has been added to the horizontal panel.
+        Element panelcell = DOM.getParent(currentcolor.getElement());
+        DOM.setElementProperty(panelcell, "className", "colorpicker-currentcolorbox");
 
-		// Set initial color. This will be overridden with the value read from server.
+        // Set initial color. This will be overridden with the value read from server.
 		setColor("white");
 		
 		// Composite GWT widgets must call initWidget().

src/com/itmill/toolkit/demo/colorpicker/gwt/client/ui/ClientColorPicker.java → src/com/itmill/toolkit/demo/colorpicker/gwt/client/ui/ItkColorPicker.java

@@ -4,7 +4,7 @@ import com.itmill.toolkit.terminal.gwt.client.ApplicationConnection;
 import com.itmill.toolkit.terminal.gwt.client.Paintable;
 import com.itmill.toolkit.terminal.gwt.client.UIDL;
 
-public class ClientColorPicker extends OriginalColorPicker implements Paintable {
+public class ItkColorPicker extends GwtColorPicker implements Paintable {
 
 	/** Set the CSS class name to allow styling. */
 	public static final String CLASSNAME = "example-colorpicker";
@@ -19,7 +19,7 @@ public class ClientColorPicker extends OriginalColorPicker implements Paintable
 	 * The constructor should first call super() to initialize the component
 	 * and then handle any initialization relevant to IT Mill Toolkit. 
 	 **/
-	public ClientColorPicker() {
+	public ItkColorPicker() {
 		// The superclass has a lot of relevant initialization
 		super();
 		

src/com/itmill/toolkit/demo/colorpicker/gwt/public/colorpicker/styles.css

@@ -1,13 +1,20 @@
-td.example-colorpicker {
-	height: 100px;
-	width: 100px;
-	border: none;
-	padding: 0px;
+/* Set style for the color picker table. */
+table.example-colorpicker {
+	border-collapse: collapse;
+	border: 0px;
 }
 
-table.example-colorpicker {
-	height: 100px;
-	width: 100px;
+/* Set color picker button style. */
+.example-colorpicker button {
+	height: 60px;
+	width: 60px;
 	border: none;
 	padding: 0px;
 }
+
+/* Set style for the right-hand sample box that shows the currently selected color. */
+td.colorpicker-currentcolorbox {
+	width: 240px;
+	text-align: center;
+	vertical-align: middle !important;
+}