QmlJS Live Preview: Added color box to toolbar

src/plugins/qmljsinspector/qmlinspectortoolbar.cpp

@@ -1,5 +1,6 @@
 #include "qmlinspectortoolbar.h"
 #include "qmljsinspectorconstants.h"
+#include "qmljstoolbarcolorbox.h"
 
 #include <extensionsystem/pluginmanager.h>
 #include <coreplugin/icore.h>
@@ -41,6 +42,8 @@ QmlInspectorToolbar::QmlInspectorToolbar(QObject *parent) :
     m_fourthAnimSpeedAction(0),
     m_eighthAnimSpeedAction(0),
     m_tenthAnimSpeedAction(0),
+    m_menuPauseAction(0),
+    m_colorBox(0),
     m_emitSignals(true),
     m_isRunning(false),
     m_animationSpeed(1.0f),
@@ -242,6 +245,12 @@ void QmlInspectorToolbar::createActions(const Core::Context &context)
     configBarLayout->addWidget(createToolButton(am->command(QmlJSInspector::Constants::ZOOM_ACTION)->action()));
     configBarLayout->addWidget(createToolButton(am->command(QmlJSInspector::Constants::COLOR_PICKER_ACTION)->action()));
 
+    m_colorBox = new ToolBarColorBox(configBar);
+    m_colorBox->setMinimumSize(20, 20);
+    m_colorBox->setMaximumSize(20, 20);
+    m_colorBox->setInnerBorderColor(QColor(192,192,192));
+    m_colorBox->setOuterBorderColor(QColor(58,58,58));
+    configBarLayout->addWidget(m_colorBox);
     //configBarLayout->addWidget(createToolButton(am->command(QmlJSInspector::Constants::TO_QML_ACTION)->action()));
 
     configBarLayout->addStretch();
@@ -391,6 +400,11 @@ void QmlInspectorToolbar::activateZoomOnClick()
     }
 }
 
+void QmlInspectorToolbar::setSelectedColor(const QColor &color)
+{
+    m_colorBox->setColor(color);
+}
+
 void QmlInspectorToolbar::activateFromQml()
 {
     if (m_emitSignals)

src/plugins/qmljsinspector/qmlinspectortoolbar.h

@@ -4,12 +4,16 @@
 #include <QObject>
 
 QT_FORWARD_DECLARE_CLASS(QAction);
+QT_FORWARD_DECLARE_CLASS(QColor);
 
 namespace Core {
     class Context;
 }
 
 namespace QmlJSInspector {
+
+class ToolBarColorBox;
+
 namespace Internal {
 
 class QmlInspectorToolbar : public QObject
@@ -40,6 +44,7 @@ public slots:
     void activateZoomTool();
     void changeAnimationSpeed(qreal slowdownFactor);
     void setDesignModeBehavior(bool inDesignMode);
+    void setSelectedColor(const QColor &color);
 
 signals:
     void animationSpeedChanged(qreal slowdownFactor = 1.0f);
@@ -91,6 +96,8 @@ private:
     QAction *m_tenthAnimSpeedAction;
     QAction *m_menuPauseAction;
 
+    ToolBarColorBox *m_colorBox;
+
     bool m_emitSignals;
     bool m_isRunning;
     qreal m_animationSpeed;

src/plugins/qmljsinspector/qmljsclientproxy.cpp

@@ -80,6 +80,8 @@ bool ClientProxy::connectToViewer(const QString &host, quint16 port)
                    SIGNAL(animationSpeedChanged(qreal)), this, SIGNAL(animationSpeedChanged(qreal)));
         disconnect(m_designClient,
                    SIGNAL(designModeBehaviorChanged(bool)), this, SIGNAL(designModeBehaviorChanged(bool)));
+        disconnect(m_designClient,
+                   SIGNAL(selectedColorChanged(QColor)), this, SIGNAL(selectedColorChanged(QColor)));
 
         emit aboutToDisconnect();
 
@@ -224,6 +226,7 @@ void ClientProxy::connectionStateChanged()
                 connect(m_designClient,
                         SIGNAL(designModeBehaviorChanged(bool)), SIGNAL(designModeBehaviorChanged(bool)));
                 connect(m_designClient, SIGNAL(reloaded()), this, SIGNAL(serverReloaded()));
+                connect(m_designClient, SIGNAL(selectedColorChanged(QColor)), SIGNAL(selectedColorChanged(QColor)));
             }
 
             (void) new DebuggerClient(m_conn);

src/plugins/qmljsinspector/qmljsclientproxy.h

@@ -95,6 +95,7 @@ signals:
     void animationSpeedChanged(qreal slowdownFactor);
     void designModeBehaviorChanged(bool inDesignMode);
     void serverReloaded();
+    void selectedColorChanged(const QColor &color);
 
 public slots:
     void queryEngineContext(int id);

src/plugins/qmljsinspector/qmljsdesigndebugclient.cpp

@@ -43,6 +43,8 @@
 #include "qmljsclientproxy.h"
 #include "qmljsinspectorconstants.h"
 
+#include <QColor>
+
 namespace QmlJSInspector {
 namespace Internal {
 
@@ -98,6 +100,10 @@ void QmlJSDesignDebugClient::messageReceived(const QByteArray &message)
         emit designModeBehaviorChanged(inDesignMode);
     } else if (type == "RELOADED") {
         emit reloaded();
+    } else if (type == "COLOR_CHANGED") {
+        QColor col;
+        ds >> col;
+        emit selectedColorChanged(col);
     }
 }
 

src/plugins/qmljsinspector/qmljsdesigndebugclient.h

@@ -75,6 +75,7 @@ public:
 
 signals:
     void currentObjectsChanged(const QList<int> &debugIds);
+    void selectedColorChanged(const QColor &color);
     void colorPickerActivated();
     void selectToolActivated();
     void selectMarqueeToolActivated();

src/plugins/qmljsinspector/qmljsinspector.pro

@@ -19,6 +19,7 @@ qmljsclientproxy.h \
 qmljsinspector.h \
 qmlinspectortoolbar.h \
 qmljslivetextpreview.h \
+qmljstoolbarcolorbox.h \
 qmljsdesigndebugclient.h
 
 SOURCES += \
@@ -29,6 +30,7 @@ qmljsclientproxy.cpp \
 qmljsinspector.cpp \
 qmlinspectortoolbar.cpp \
 qmljslivetextpreview.cpp \
+qmljstoolbarcolorbox.cpp \
 qmljsdesigndebugclient.cpp
 
 OTHER_FILES += QmlJSInspector.pluginspec

src/plugins/qmljsinspector/qmljsinspector.qrc

@@ -18,5 +18,6 @@
         <file>images/zoom-small.png</file>
         <file>images/select-marquee-small.png</file>
         <file>images/designmode.png</file>
+        <file>images/color-picker-small-hicontrast.png</file>
     </qresource>
 </RCC>

src/plugins/qmljsinspector/qmljsinspectorplugin.cpp

@@ -173,6 +173,7 @@ void InspectorPlugin::extensionsInitialized()
     connect(_clientProxy, SIGNAL(selectMarqueeToolActivated()), m_toolbar, SLOT(activateMarqueeSelectTool()));
     connect(_clientProxy, SIGNAL(zoomToolActivated()), m_toolbar, SLOT(activateZoomTool()));
     connect(_clientProxy, SIGNAL(designModeBehaviorChanged(bool)), m_toolbar, SLOT(setDesignModeBehavior(bool)));
+    connect(_clientProxy, SIGNAL(selectedColorChanged(QColor)), m_toolbar, SLOT(setSelectedColor(QColor)));
 
     connect(_clientProxy, SIGNAL(animationSpeedChanged(qreal)), m_toolbar, SLOT(changeAnimationSpeed(qreal)));
 }

src/plugins/qmljsinspector/qmljstoolbarcolorbox.cpp

@@ -0,0 +1,108 @@
+#include "qmljstoolbarcolorbox.h"
+
+#include <QPixmap>
+#include <QPainter>
+#include <QMenu>
+#include <QAction>
+#include <QContextMenuEvent>
+#include <QClipboard>
+#include <QApplication>
+#include <QColorDialog>
+#include <QDrag>
+#include <QMimeData>
+
+#include <QDebug>
+
+namespace QmlJSInspector {
+
+ToolBarColorBox::ToolBarColorBox(QWidget *parent) :
+    QLabel(parent)
+{
+    m_color = Qt::white;
+    m_borderColorOuter = Qt::white;
+    m_borderColorInner = QColor(143, 143 ,143);
+
+    m_copyHexColorAction = new QAction(QIcon(":/qml/images/color-picker-small-hicontrast.png"), tr("Copy Color"), this);
+    connect(m_copyHexColorAction, SIGNAL(triggered()), SLOT(copyColorToClipboard()));
+    setScaledContents(false);
+}
+
+void ToolBarColorBox::setColor(const QColor &color)
+{
+    m_color = color;
+
+    QPixmap pix = createDragPixmap(width());
+    setPixmap(pix);
+    update();
+}
+
+void ToolBarColorBox::setInnerBorderColor(const QColor &color)
+{
+    m_borderColorInner = color;
+    setColor(m_color);
+}
+
+void ToolBarColorBox::setOuterBorderColor(const QColor &color)
+ {
+     m_borderColorOuter = color;
+     setColor(m_color);
+ }
+
+void ToolBarColorBox::mousePressEvent(QMouseEvent *event)
+{
+    m_dragBeginPoint = event->pos();
+    m_dragStarted = false;
+}
+
+void ToolBarColorBox::mouseMoveEvent(QMouseEvent *event)
+{
+    if (event->buttons() & Qt::LeftButton
+        && QPoint(event->pos() - m_dragBeginPoint).manhattanLength() > QApplication::startDragDistance()
+        && !m_dragStarted)
+    {
+        m_dragStarted = true;
+        QDrag *drag = new QDrag(this);
+        QMimeData *mimeData = new QMimeData;
+
+        mimeData->setText(m_color.name());
+        drag->setMimeData(mimeData);
+        drag->setPixmap(createDragPixmap());
+
+        drag->exec();
+    }
+}
+
+QPixmap ToolBarColorBox::createDragPixmap(int size) const
+{
+    QPixmap pix(size, size);
+    QPainter p(&pix);
+
+    p.setBrush(QBrush(m_color));
+    p.setPen(QPen(QBrush(m_borderColorInner),1));
+
+    p.fillRect(0, 0, size, size, m_borderColorOuter);
+    p.drawRect(1,1, size - 3, size - 3);
+    return pix;
+}
+
+void ToolBarColorBox::contextMenuEvent(QContextMenuEvent *ev)
+{
+    QMenu contextMenu;
+    contextMenu.addAction(m_copyHexColorAction);
+    contextMenu.exec(ev->globalPos());
+}
+
+void ToolBarColorBox::mouseDoubleClickEvent(QMouseEvent *)
+{
+    QColorDialog dialog(m_color);
+    dialog.show();
+}
+
+void ToolBarColorBox::copyColorToClipboard()
+{
+    QClipboard *clipboard = QApplication::clipboard();
+    clipboard->setText(m_color.name());
+}
+
+
+} // namespace QmlJSInspector

src/plugins/qmljsinspector/qmljstoolbarcolorbox.h

@@ -0,0 +1,46 @@
+#ifndef TOOLBARCOLORBOX_H
+#define TOOLBARCOLORBOX_H
+
+#include <QLabel>
+#include <QColor>
+#include <QPoint>
+
+QT_FORWARD_DECLARE_CLASS(QContextMenuEvent);
+QT_FORWARD_DECLARE_CLASS(QAction);
+
+namespace QmlJSInspector {
+
+class ToolBarColorBox : public QLabel
+{
+    Q_OBJECT
+public:
+    explicit ToolBarColorBox(QWidget *parent = 0);
+    void setColor(const QColor &color);
+    void setInnerBorderColor(const QColor &color);
+    void setOuterBorderColor(const QColor &color);
+
+protected:
+    void contextMenuEvent(QContextMenuEvent *ev);
+    void mouseDoubleClickEvent(QMouseEvent *);
+    void mousePressEvent(QMouseEvent *ev);
+    void mouseMoveEvent(QMouseEvent *ev);
+private slots:
+    void copyColorToClipboard();
+
+private:
+    QPixmap createDragPixmap(int size = 24) const;
+
+private:
+    bool m_dragStarted;
+    QPoint m_dragBeginPoint;
+    QAction *m_copyHexColorAction;
+    QColor m_color;
+
+    QColor m_borderColorOuter;
+    QColor m_borderColorInner;
+
+};
+
+} // namespace QmlJSInspector
+
+#endif // TOOLBARCOLORBOX_H

src/tools/qml/qmlobserver/qdeclarativedesigndebugserver.cpp

@@ -1,5 +1,7 @@
 #include "qdeclarativedesigndebugserver.h"
+
 #include <QStringList>
+#include <QColor>
 
 #include <QDebug>
 
@@ -128,3 +130,13 @@ void QDeclarativeDesignDebugServer::reloaded()
     sendMessage(message);
 }
 
+void QDeclarativeDesignDebugServer::selectedColorChanged(const QColor &color)
+{
+    QByteArray message;
+    QDataStream ds(&message, QIODevice::WriteOnly);
+
+    ds << QByteArray("COLOR_CHANGED")
+       << color;
+
+    sendMessage(message);
+}

src/tools/qml/qmlobserver/qdeclarativedesigndebugserver.h

@@ -47,6 +47,7 @@
 
 QT_BEGIN_NAMESPACE
 
+class QColor;
 class QDeclarativeEngine;
 class QDeclarativeContext;
 class QDeclarativeWatcher;
@@ -64,6 +65,9 @@ public:
     void setCurrentTool(QmlViewer::Constants::DesignTool toolId);
     void reloaded();
 
+public Q_SLOTS:
+    void selectedColorChanged(const QColor &color);
+
 Q_SIGNALS:
     void currentObjectsChanged(const QList<QObject*> &objects);
     void designModeBehaviorChanged(bool inDesignMode);

src/tools/qml/qmlobserver/qdeclarativedesignview.cpp

@@ -58,6 +58,8 @@ QDeclarativeDesignView::QDeclarativeDesignView(QWidget *parent) :
     connect(this, SIGNAL(statusChanged(QDeclarativeView::Status)), SLOT(onStatusChanged(QDeclarativeView::Status)));
 
     connect(m_colorPickerTool, SIGNAL(selectedColorChanged(QColor)), SIGNAL(selectedColorChanged(QColor)));
+    connect(m_colorPickerTool, SIGNAL(selectedColorChanged(QColor)),
+            qmlDesignDebugServer(), SLOT(selectedColorChanged(QColor)));
 
     createToolbar();
 }