From 68a244db42e8394a0f13c8016158794f52f3de98 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Marko=20Gr=C3=B6nroos?= Date: Wed, 26 Sep 2007 17:21:13 +0000 Subject: [PATCH] Better styling and some renaming in ColorPicker. svn changeset:2379/svn branch:trunk --- .../colorpicker/ColorPickerApplication.java | 2 - .../colorpicker/gwt/client/WidgetSet.java | 9 ++--- ...alColorPicker.java => GwtColorPicker.java} | 39 ++++++++----------- ...ntColorPicker.java => ItkColorPicker.java} | 4 +- .../gwt/public/colorpicker/styles.css | 23 +++++++---- 5 files changed, 38 insertions(+), 39 deletions(-) rename src/com/itmill/toolkit/demo/colorpicker/gwt/client/ui/{OriginalColorPicker.java => GwtColorPicker.java} (70%) rename src/com/itmill/toolkit/demo/colorpicker/gwt/client/ui/{ClientColorPicker.java => ItkColorPicker.java} (95%) diff --git a/src/com/itmill/toolkit/demo/colorpicker/ColorPickerApplication.java b/src/com/itmill/toolkit/demo/colorpicker/ColorPickerApplication.java index 80475b7534..2321f22dd6 100644 --- a/src/com/itmill/toolkit/demo/colorpicker/ColorPickerApplication.java +++ b/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"); diff --git a/src/com/itmill/toolkit/demo/colorpicker/gwt/client/WidgetSet.java b/src/com/itmill/toolkit/demo/colorpicker/gwt/client/WidgetSet.java index d00e7db74a..1fbfa40bf8 100644 --- a/src/com/itmill/toolkit/demo/colorpicker/gwt/client/WidgetSet.java +++ b/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); } diff --git a/src/com/itmill/toolkit/demo/colorpicker/gwt/client/ui/OriginalColorPicker.java b/src/com/itmill/toolkit/demo/colorpicker/gwt/client/ui/GwtColorPicker.java similarity index 70% rename from src/com/itmill/toolkit/demo/colorpicker/gwt/client/ui/OriginalColorPicker.java rename to src/com/itmill/toolkit/demo/colorpicker/gwt/client/ui/GwtColorPicker.java index 0c110a86b2..f3b792baf3 100644 --- a/src/com/itmill/toolkit/demo/colorpicker/gwt/client/ui/OriginalColorPicker.java +++ b/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 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 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(). diff --git a/src/com/itmill/toolkit/demo/colorpicker/gwt/client/ui/ClientColorPicker.java b/src/com/itmill/toolkit/demo/colorpicker/gwt/client/ui/ItkColorPicker.java similarity index 95% rename from src/com/itmill/toolkit/demo/colorpicker/gwt/client/ui/ClientColorPicker.java rename to src/com/itmill/toolkit/demo/colorpicker/gwt/client/ui/ItkColorPicker.java index 8d82f3ed8b..54dedf2991 100644 --- a/src/com/itmill/toolkit/demo/colorpicker/gwt/client/ui/ClientColorPicker.java +++ b/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(); diff --git a/src/com/itmill/toolkit/demo/colorpicker/gwt/public/colorpicker/styles.css b/src/com/itmill/toolkit/demo/colorpicker/gwt/public/colorpicker/styles.css index 2737c77864..01194d1ef6 100644 --- a/src/com/itmill/toolkit/demo/colorpicker/gwt/public/colorpicker/styles.css +++ b/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; +} -- 2.39.5