Change ColorPicker to use new ComboBox

ColorPicker is moved back to vaadin-server now that it no
longer requires any old components

Change-Id: Iebb34cc0724a4bba6eff53073400e803d9ffddd1

7 files changed, 786 insertions, 0 deletions

diff --git a/client/src/main/java/com/vaadin/client/ui/colorpicker/AbstractColorPickerConnector.java b/client/src/main/java/com/vaadin/client/ui/colorpicker/AbstractColorPickerConnector.java
new file mode 100644
index 0000000000..6f480538e0
--- /dev/null
+++ b/client/src/main/java/com/vaadin/client/ui/colorpicker/AbstractColorPickerConnector.java
@@ -0,0 +1,113 @@
+/*
+ * Copyright 2000-2016 Vaadin Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.client.ui.colorpicker;
+
+import com.google.gwt.event.dom.client.ClickHandler;
+import com.google.gwt.event.dom.client.HasClickHandlers;
+import com.vaadin.client.communication.StateChangeEvent;
+import com.vaadin.client.ui.AbstractComponentConnector;
+import com.vaadin.shared.ui.colorpicker.ColorPickerState;
+
+/**
+ * An abstract class that defines default implementation for a color picker
+ * connector.
+ *
+ * @since 7.0.0
+ */
+public abstract class AbstractColorPickerConnector
+        extends AbstractComponentConnector implements ClickHandler {
+
+    private static final String DEFAULT_WIDTH_STYLE = "v-default-caption-width";
+
+    @Override
+    public ColorPickerState getState() {
+        return (ColorPickerState) super.getState();
+    }
+
+    @Override
+    public boolean delegateCaptionHandling() {
+        return false;
+    }
+
+    @Override
+    public void onStateChanged(StateChangeEvent stateChangeEvent) {
+        // NOTE: this method is called after @DelegateToWidget
+        super.onStateChanged(stateChangeEvent);
+        if (stateChangeEvent.hasPropertyChanged("color")) {
+            refreshColor();
+
+            if (getState().showDefaultCaption && (getState().caption == null
+                    || "".equals(getState().caption))) {
+
+                setCaption(getState().color);
+            }
+        }
+        if (stateChangeEvent.hasPropertyChanged("caption")
+                || stateChangeEvent.hasPropertyChanged("htmlContentAllowed")
+                || stateChangeEvent.hasPropertyChanged("showDefaultCaption")) {
+
+            setCaption(getCaption());
+            refreshDefaultCaptionStyle();
+        }
+    }
+
+    @Override
+    public void init() {
+        super.init();
+        if (getWidget() instanceof HasClickHandlers) {
+            ((HasClickHandlers) getWidget()).addClickHandler(this);
+        }
+    }
+
+    /**
+     * Get caption for the color picker widget.
+     *
+     * @return
+     */
+    protected String getCaption() {
+        if (getState().showDefaultCaption && (getState().caption == null
+                || "".equals(getState().caption))) {
+            return getState().color;
+        }
+        return getState().caption;
+    }
+
+    /**
+     * Add/remove default caption style.
+     */
+    protected void refreshDefaultCaptionStyle() {
+        if (getState().showDefaultCaption
+                && (getState().caption == null || getState().caption.isEmpty())
+                && getState().width.isEmpty()) {
+            getWidget().addStyleName(DEFAULT_WIDTH_STYLE);
+        } else {
+            getWidget().removeStyleName(DEFAULT_WIDTH_STYLE);
+        }
+    }
+
+    /**
+     * Set caption of the color picker widget.
+     *
+     * @param caption
+     */
+    protected abstract void setCaption(String caption);
+
+    /**
+     * Update the widget to show the currently selected color.
+     */
+    protected abstract void refreshColor();
+
+}
diff --git a/client/src/main/java/com/vaadin/client/ui/colorpicker/ColorPickerAreaConnector.java b/client/src/main/java/com/vaadin/client/ui/colorpicker/ColorPickerAreaConnector.java
new file mode 100644
index 0000000000..828cc689c7
--- /dev/null
+++ b/client/src/main/java/com/vaadin/client/ui/colorpicker/ColorPickerAreaConnector.java
@@ -0,0 +1,67 @@
+/*
+ * Copyright 2000-2016 Vaadin Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.client.ui.colorpicker;
+
+import com.google.gwt.core.client.GWT;
+import com.google.gwt.event.dom.client.ClickEvent;
+import com.google.gwt.user.client.ui.Widget;
+import com.vaadin.client.VCaption;
+import com.vaadin.client.communication.RpcProxy;
+import com.vaadin.client.ui.VColorPickerArea;
+import com.vaadin.shared.ui.Connect;
+import com.vaadin.shared.ui.Connect.LoadStyle;
+import com.vaadin.shared.ui.colorpicker.ColorPickerServerRpc;
+import com.vaadin.ui.ColorPickerArea;
+
+/**
+ * A class that defines an implementation for a color picker connector. Connects
+ * the server side {@link com.vaadin.ui.ColorPickerArea} with the client side
+ * counterpart {@link VColorPickerArea}
+ *
+ * @since 7.0.0
+ */
+@Connect(value = ColorPickerArea.class, loadStyle = LoadStyle.LAZY)
+public class ColorPickerAreaConnector extends AbstractColorPickerConnector {
+
+    private ColorPickerServerRpc rpc = RpcProxy
+            .create(ColorPickerServerRpc.class, this);
+
+    @Override
+    protected Widget createWidget() {
+        return GWT.create(VColorPickerArea.class);
+    }
+
+    @Override
+    public VColorPickerArea getWidget() {
+        return (VColorPickerArea) super.getWidget();
+    }
+
+    @Override
+    public void onClick(ClickEvent event) {
+        rpc.openPopup(getWidget().isOpen());
+    }
+
+    @Override
+    protected void setCaption(String caption) {
+        VCaption.setCaptionText(getWidget(), getState());
+    }
+
+    @Override
+    protected void refreshColor() {
+        getWidget().refreshColor();
+    }
+
+}
diff --git a/client/src/main/java/com/vaadin/client/ui/colorpicker/ColorPickerConnector.java b/client/src/main/java/com/vaadin/client/ui/colorpicker/ColorPickerConnector.java
new file mode 100644
index 0000000000..6254e7adbe
--- /dev/null
+++ b/client/src/main/java/com/vaadin/client/ui/colorpicker/ColorPickerConnector.java
@@ -0,0 +1,69 @@
+/*
+ * Copyright 2000-2016 Vaadin Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.client.ui.colorpicker;
+
+import com.google.gwt.core.client.GWT;
+import com.google.gwt.event.dom.client.ClickEvent;
+import com.google.gwt.user.client.ui.Widget;
+import com.vaadin.client.communication.RpcProxy;
+import com.vaadin.client.ui.VColorPicker;
+import com.vaadin.shared.ui.Connect;
+import com.vaadin.shared.ui.Connect.LoadStyle;
+import com.vaadin.shared.ui.colorpicker.ColorPickerServerRpc;
+import com.vaadin.ui.ColorPicker;
+
+/**
+ * A class that defines default implementation for a color picker connector.
+ * Connects the server side {@link com.vaadin.ui.ColorPicker} with the client
+ * side counterpart {@link VColorPicker}
+ *
+ * @since 7.0.0
+ */
+@Connect(value = ColorPicker.class, loadStyle = LoadStyle.LAZY)
+public class ColorPickerConnector extends AbstractColorPickerConnector {
+
+    private ColorPickerServerRpc rpc = RpcProxy
+            .create(ColorPickerServerRpc.class, this);
+
+    @Override
+    protected Widget createWidget() {
+        return GWT.create(VColorPicker.class);
+    }
+
+    @Override
+    public VColorPicker getWidget() {
+        return (VColorPicker) super.getWidget();
+    }
+
+    @Override
+    public void onClick(ClickEvent event) {
+        rpc.openPopup(getWidget().isOpen());
+    }
+
+    @Override
+    protected void setCaption(String caption) {
+        if (getState().captionAsHtml) {
+            getWidget().setHtml(caption);
+        } else {
+            getWidget().setText(caption);
+        }
+    }
+
+    @Override
+    protected void refreshColor() {
+        getWidget().refreshColor();
+    }
+}
diff --git a/client/src/main/java/com/vaadin/client/ui/colorpicker/ColorPickerGradientConnector.java b/client/src/main/java/com/vaadin/client/ui/colorpicker/ColorPickerGradientConnector.java
new file mode 100644
index 0000000000..c05449d7bd
--- /dev/null
+++ b/client/src/main/java/com/vaadin/client/ui/colorpicker/ColorPickerGradientConnector.java
@@ -0,0 +1,85 @@
+/*
+ * Copyright 2000-2016 Vaadin Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.client.ui.colorpicker;
+
+import com.google.gwt.core.client.GWT;
+import com.google.gwt.event.dom.client.MouseUpEvent;
+import com.google.gwt.event.dom.client.MouseUpHandler;
+import com.google.gwt.user.client.ui.Widget;
+import com.vaadin.client.communication.RpcProxy;
+import com.vaadin.client.communication.StateChangeEvent;
+import com.vaadin.client.ui.AbstractComponentConnector;
+import com.vaadin.shared.ui.Connect;
+import com.vaadin.shared.ui.Connect.LoadStyle;
+import com.vaadin.shared.ui.colorpicker.ColorPickerGradientServerRpc;
+import com.vaadin.shared.ui.colorpicker.ColorPickerGradientState;
+import com.vaadin.ui.components.colorpicker.ColorPickerGradient;
+
+/**
+ * A class that defines the default implementation for a color picker gradient
+ * connector. Connects the server side
+ * {@link com.vaadin.ui.components.colorpicker.ColorPickerGradient} with the
+ * client side counterpart {@link VColorPickerGradient}
+ *
+ * @since 7.0.0
+ */
+@Connect(value = ColorPickerGradient.class, loadStyle = LoadStyle.LAZY)
+public class ColorPickerGradientConnector extends AbstractComponentConnector
+        implements MouseUpHandler {
+
+    private ColorPickerGradientServerRpc rpc = RpcProxy
+            .create(ColorPickerGradientServerRpc.class, this);
+
+    @Override
+    protected Widget createWidget() {
+        return GWT.create(VColorPickerGradient.class);
+    }
+
+    @Override
+    public VColorPickerGradient getWidget() {
+        return (VColorPickerGradient) super.getWidget();
+    }
+
+    @Override
+    public ColorPickerGradientState getState() {
+        return (ColorPickerGradientState) super.getState();
+    }
+
+    @Override
+    public void onMouseUp(MouseUpEvent event) {
+        rpc.select(getWidget().getCursorX(), getWidget().getCursorY());
+    }
+
+    @Override
+    public void onStateChanged(StateChangeEvent stateChangeEvent) {
+        super.onStateChanged(stateChangeEvent);
+        if (stateChangeEvent.hasPropertyChanged("cursorX")
+                || stateChangeEvent.hasPropertyChanged("cursorY")) {
+
+            getWidget().setCursor(getState().cursorX, getState().cursorY);
+        }
+        if (stateChangeEvent.hasPropertyChanged("bgColor")) {
+            getWidget().setBGColor(getState().bgColor);
+        }
+    }
+
+    @Override
+    protected void init() {
+        super.init();
+        getWidget().addMouseUpHandler(this);
+    }
+
+}
diff --git a/client/src/main/java/com/vaadin/client/ui/colorpicker/ColorPickerGridConnector.java b/client/src/main/java/com/vaadin/client/ui/colorpicker/ColorPickerGridConnector.java
new file mode 100644
index 0000000000..2b57968e3b
--- /dev/null
+++ b/client/src/main/java/com/vaadin/client/ui/colorpicker/ColorPickerGridConnector.java
@@ -0,0 +1,94 @@
+/*
+ * Copyright 2000-2016 Vaadin Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.client.ui.colorpicker;
+
+import com.google.gwt.core.client.GWT;
+import com.google.gwt.event.dom.client.ClickEvent;
+import com.google.gwt.event.dom.client.ClickHandler;
+import com.google.gwt.user.client.ui.Widget;
+import com.vaadin.client.communication.RpcProxy;
+import com.vaadin.client.communication.StateChangeEvent;
+import com.vaadin.client.ui.AbstractComponentConnector;
+import com.vaadin.shared.ui.Connect;
+import com.vaadin.shared.ui.Connect.LoadStyle;
+import com.vaadin.shared.ui.colorpicker.ColorPickerGridServerRpc;
+import com.vaadin.shared.ui.colorpicker.ColorPickerGridState;
+import com.vaadin.ui.components.colorpicker.ColorPickerGrid;
+
+/**
+ * A class that defines the default implementation for a color picker grid
+ * connector. Connects the server side
+ * {@link com.vaadin.ui.components.colorpicker.ColorPickerGrid} with the
+ * client side counterpart {@link VColorPickerGrid}
+ *
+ * @since 7.0.0
+ */
+@Connect(value = ColorPickerGrid.class, loadStyle = LoadStyle.LAZY)
+public class ColorPickerGridConnector extends AbstractComponentConnector
+        implements ClickHandler {
+
+    private ColorPickerGridServerRpc rpc = RpcProxy
+            .create(ColorPickerGridServerRpc.class, this);
+
+    @Override
+    protected Widget createWidget() {
+        return GWT.create(VColorPickerGrid.class);
+    }
+
+    @Override
+    public VColorPickerGrid getWidget() {
+        return (VColorPickerGrid) super.getWidget();
+    }
+
+    @Override
+    public ColorPickerGridState getState() {
+        return (ColorPickerGridState) super.getState();
+    }
+
+    @Override
+    public void onClick(ClickEvent event) {
+        rpc.select(getWidget().getSelectedX(), getWidget().getSelectedY());
+    }
+
+    @Override
+    public void onStateChanged(StateChangeEvent stateChangeEvent) {
+        super.onStateChanged(stateChangeEvent);
+        if (stateChangeEvent.hasPropertyChanged("rowCount")
+                || stateChangeEvent.hasPropertyChanged("columnCount")
+                || stateChangeEvent.hasPropertyChanged("updateGrid")) {
+
+            getWidget().updateGrid(getState().rowCount, getState().columnCount);
+        }
+        if (stateChangeEvent.hasPropertyChanged("changedX")
+                || stateChangeEvent.hasPropertyChanged("changedY")
+                || stateChangeEvent.hasPropertyChanged("changedColor")
+                || stateChangeEvent.hasPropertyChanged("updateColor")) {
+
+            getWidget().updateColor(getState().changedColor,
+                    getState().changedX, getState().changedY);
+
+            if (!getWidget().isGridLoaded()) {
+                rpc.refresh();
+            }
+        }
+    }
+
+    @Override
+    protected void init() {
+        super.init();
+        getWidget().addClickHandler(this);
+    }
+}
diff --git a/client/src/main/java/com/vaadin/client/ui/colorpicker/VColorPickerGradient.java b/client/src/main/java/com/vaadin/client/ui/colorpicker/VColorPickerGradient.java
new file mode 100644
index 0000000000..b75bee23c1
--- /dev/null
+++ b/client/src/main/java/com/vaadin/client/ui/colorpicker/VColorPickerGradient.java
@@ -0,0 +1,211 @@
+/*
+ * Copyright 2000-2016 Vaadin Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.client.ui.colorpicker;
+
+import com.google.gwt.dom.client.Style.Unit;
+import com.google.gwt.event.dom.client.MouseDownEvent;
+import com.google.gwt.event.dom.client.MouseDownHandler;
+import com.google.gwt.event.dom.client.MouseMoveEvent;
+import com.google.gwt.event.dom.client.MouseMoveHandler;
+import com.google.gwt.event.dom.client.MouseUpEvent;
+import com.google.gwt.event.dom.client.MouseUpHandler;
+import com.google.gwt.user.client.ui.AbsolutePanel;
+import com.google.gwt.user.client.ui.FocusPanel;
+import com.google.gwt.user.client.ui.HTML;
+import com.vaadin.client.ui.SubPartAware;
+
+/**
+ * Client side implementation for ColorPickerGradient.
+ *
+ * @since 7.0.0
+ *
+ */
+public class VColorPickerGradient extends FocusPanel implements
+        MouseDownHandler, MouseUpHandler, MouseMoveHandler, SubPartAware {
+
+    /** Set the CSS class name to allow styling. */
+    public static final String CLASSNAME = "v-colorpicker-gradient";
+    public static final String CLASSNAME_BACKGROUND = CLASSNAME + "-background";
+    public static final String CLASSNAME_FOREGROUND = CLASSNAME + "-foreground";
+    public static final String CLASSNAME_LOWERBOX = CLASSNAME + "-lowerbox";
+    public static final String CLASSNAME_HIGHERBOX = CLASSNAME + "-higherbox";
+    public static final String CLASSNAME_CONTAINER = CLASSNAME + "-container";
+    public static final String CLASSNAME_CLICKLAYER = CLASSNAME + "-clicklayer";
+    private static final String CLICKLAYER_ID = "clicklayer";
+
+    private final HTML background;
+    private final HTML foreground;
+    private final HTML lowercross;
+    private final HTML highercross;
+    private final HTML clicklayer;
+    private final AbsolutePanel container;
+
+    private boolean mouseIsDown = false;
+
+    private int cursorX;
+    private int cursorY;
+
+    private int width = 220;
+    private int height = 220;
+
+    /**
+     * Instantiates the client side component for a color picker gradient.
+     */
+    public VColorPickerGradient() {
+        super();
+
+        setStyleName(CLASSNAME);
+
+        background = new HTML();
+        background.setStyleName(CLASSNAME_BACKGROUND);
+        background.setPixelSize(width, height);
+
+        foreground = new HTML();
+        foreground.setStyleName(CLASSNAME_FOREGROUND);
+        foreground.setPixelSize(width, height);
+
+        clicklayer = new HTML();
+        clicklayer.setStyleName(CLASSNAME_CLICKLAYER);
+        clicklayer.setPixelSize(width, height);
+        clicklayer.addMouseDownHandler(this);
+        clicklayer.addMouseUpHandler(this);
+        clicklayer.addMouseMoveHandler(this);
+
+        lowercross = new HTML();
+        lowercross.setPixelSize(width / 2, height / 2);
+        lowercross.setStyleName(CLASSNAME_LOWERBOX);
+
+        highercross = new HTML();
+        highercross.setPixelSize(width / 2, height / 2);
+        highercross.setStyleName(CLASSNAME_HIGHERBOX);
+
+        container = new AbsolutePanel();
+        container.setStyleName(CLASSNAME_CONTAINER);
+        container.setPixelSize(width, height);
+        container.add(background, 0, 0);
+        container.add(foreground, 0, 0);
+        container.add(lowercross, 0, height / 2);
+        container.add(highercross, width / 2, 0);
+        container.add(clicklayer, 0, 0);
+
+        add(container);
+    }
+
+    /**
+     * Returns the latest x-coordinate for pressed-down mouse cursor.
+     */
+    protected int getCursorX() {
+        return cursorX;
+    }
+
+    /**
+     * Returns the latest y-coordinate for pressed-down mouse cursor.
+     */
+    protected int getCursorY() {
+        return cursorY;
+    }
+
+    /**
+     * Sets the given css color as the background.
+     *
+     * @param bgColor
+     */
+    protected void setBGColor(String bgColor) {
+        if (bgColor == null) {
+            background.getElement().getStyle().clearBackgroundColor();
+        } else {
+            background.getElement().getStyle().setBackgroundColor(bgColor);
+        }
+    }
+
+    @Override
+    public void onMouseDown(MouseDownEvent event) {
+        event.preventDefault();
+
+        mouseIsDown = true;
+        setCursor(event.getX(), event.getY());
+    }
+
+    @Override
+    public void onMouseUp(MouseUpEvent event) {
+        event.preventDefault();
+        mouseIsDown = false;
+        setCursor(event.getX(), event.getY());
+
+        cursorX = event.getX();
+        cursorY = event.getY();
+    }
+
+    @Override
+    public void onMouseMove(MouseMoveEvent event) {
+        event.preventDefault();
+
+        if (mouseIsDown) {
+            setCursor(event.getX(), event.getY());
+        }
+    }
+
+    /**
+     * Sets the latest coordinates for pressed-down mouse cursor and updates the
+     * cross elements.
+     *
+     * @param x
+     * @param y
+     */
+    public void setCursor(int x, int y) {
+        cursorX = x;
+        cursorY = y;
+        if (x >= 0) {
+            lowercross.getElement().getStyle().setWidth(x, Unit.PX);
+        }
+        if (y >= 0) {
+            lowercross.getElement().getStyle().setTop(y, Unit.PX);
+        }
+        if (y >= 0) {
+            lowercross.getElement().getStyle().setHeight(height - y, Unit.PX);
+        }
+
+        if (x >= 0) {
+            highercross.getElement().getStyle().setWidth(width - x, Unit.PX);
+        }
+        if (x >= 0) {
+            highercross.getElement().getStyle().setLeft(x, Unit.PX);
+        }
+        if (y >= 0) {
+            highercross.getElement().getStyle().setHeight(y, Unit.PX);
+        }
+    }
+
+    @Override
+    public com.google.gwt.user.client.Element getSubPartElement(
+            String subPart) {
+        if (subPart.equals(CLICKLAYER_ID)) {
+            return clicklayer.getElement();
+        }
+
+        return null;
+    }
+
+    @Override
+    public String getSubPartName(
+            com.google.gwt.user.client.Element subElement) {
+        if (clicklayer.getElement().isOrHasChild(subElement)) {
+            return CLICKLAYER_ID;
+        }
+
+        return null;
+    }
+}
diff --git a/client/src/main/java/com/vaadin/client/ui/colorpicker/VColorPickerGrid.java b/client/src/main/java/com/vaadin/client/ui/colorpicker/VColorPickerGrid.java
new file mode 100644
index 0000000000..67f2ce07dd
--- /dev/null
+++ b/client/src/main/java/com/vaadin/client/ui/colorpicker/VColorPickerGrid.java
@@ -0,0 +1,147 @@
+/*
+ * Copyright 2000-2016 Vaadin Ltd.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not
+ * use this file except in compliance with the License. You may obtain a copy of
+ * the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
+ * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
+ * License for the specific language governing permissions and limitations under
+ * the License.
+ */
+package com.vaadin.client.ui.colorpicker;
+
+import com.google.gwt.dom.client.Element;
+import com.google.gwt.event.dom.client.ClickEvent;
+import com.google.gwt.event.dom.client.ClickHandler;
+import com.google.gwt.event.dom.client.HasClickHandlers;
+import com.google.gwt.event.shared.HandlerRegistration;
+import com.google.gwt.user.client.ui.AbsolutePanel;
+import com.google.gwt.user.client.ui.Grid;
+import com.google.gwt.user.client.ui.HTMLTable.Cell;
+
+/**
+ * Client side implementation for ColorPickerGrid.
+ *
+ * @since 7.0.0
+ *
+ */
+public class VColorPickerGrid extends AbsolutePanel
+        implements ClickHandler, HasClickHandlers {
+
+    private int rows = 1;
+    private int columns = 1;
+
+    private Grid grid;
+
+    private boolean gridLoaded = false;
+
+    private int selectedX;
+    private int selectedY;
+
+    /**
+     * Instantiates the client side component for a color picker grid.
+     */
+    public VColorPickerGrid() {
+        super();
+
+        this.add(createGrid(), 0, 0);
+    }
+
+    /**
+     * Creates a grid according to the current row and column count information.
+     *
+     * @return grid
+     */
+    private Grid createGrid() {
+        grid = new Grid(rows, columns);
+        grid.setWidth("100%");
+        grid.setHeight("100%");
+        grid.addClickHandler(this);
+        return grid;
+    }
+
+    /**
+     * Updates the row and column count and creates a new grid based on them.
+     * The new grid replaces the old grid if one existed.
+     *
+     * @param rowCount
+     * @param columnCount
+     */
+    protected void updateGrid(int rowCount, int columnCount) {
+        rows = rowCount;
+        columns = columnCount;
+        this.remove(grid);
+        this.add(createGrid(), 0, 0);
+    }
+
+    /**
+     * Updates the changed colors within the grid based on the given x- and
+     * y-coordinates. Nothing happens if any of the parameters is null or the
+     * parameter lengths don't match.
+     *
+     * @param changedColor
+     * @param changedX
+     * @param changedY
+     */
+    protected void updateColor(String[] changedColor, String[] changedX,
+            String[] changedY) {
+        if (changedColor != null && changedX != null && changedY != null) {
+            if (changedColor.length == changedX.length
+                    && changedX.length == changedY.length) {
+                for (int c = 0; c < changedColor.length; c++) {
+                    Element element = grid.getCellFormatter().getElement(
+                            Integer.parseInt(changedX[c]),
+                            Integer.parseInt(changedY[c]));
+                    element.getStyle().setProperty("background",
+                            changedColor[c]);
+                }
+            }
+
+            gridLoaded = true;
+        }
+    }
+
+    /**
+     * Returns currently selected x-coordinate of the grid.
+     */
+    protected int getSelectedX() {
+        return selectedX;
+    }
+
+    /**
+     * Returns currently selected y-coordinate of the grid.
+     */
+    protected int getSelectedY() {
+        return selectedY;
+    }
+
+    /**
+     * Returns true if the colors have been successfully updated at least once,
+     * false otherwise.
+     */
+    protected boolean isGridLoaded() {
+        return gridLoaded;
+    }
+
+    @Override
+    public void onClick(ClickEvent event) {
+        Cell cell = grid.getCellForEvent(event);
+        if (cell == null) {
+            return;
+        }
+
+        selectedY = cell.getRowIndex();
+        selectedX = cell.getCellIndex();
+    }
+
+    @Override
+    public HandlerRegistration addClickHandler(ClickHandler handler) {
+        return addDomHandler(handler, ClickEvent.getType());
+    }
+
+}