From b772b5e349c48260a1c0458f841b2e6e82daf0b1 Mon Sep 17 00:00:00 2001 From: Mitch Curtis Date: Mon, 4 Apr 2016 10:29:43 +0200 Subject: Update Default style Dial to match new design specs Change-Id: Id3a1ce6257ab999c08130549b43414b17df6168d Task-number: QTBUG-50993 Reviewed-by: J-P Nurmi --- src/imports/controls/Dial.qml | 17 +-- src/imports/controls/controls.pri | 6 +- .../controls/images/dial-indicator-focus.png | Bin 0 -> 1029 bytes .../controls/images/dial-indicator-focus@2x.png | Bin 0 -> 1103 bytes .../controls/images/dial-indicator-focus@3x.png | Bin 0 -> 1158 bytes .../controls/images/dial-indicator-focus@4x.png | Bin 0 -> 1209 bytes src/imports/controls/qquickdialring.cpp | 116 +++++++++++++++++++++ src/imports/controls/qquickdialring_p.h | 84 +++++++++++++++ src/imports/controls/qtquickcontrols2plugin.cpp | 2 + src/imports/controls/qtquickcontrols2plugin.qrc | 4 + 10 files changed, 219 insertions(+), 10 deletions(-) create mode 100644 src/imports/controls/images/dial-indicator-focus.png create mode 100644 src/imports/controls/images/dial-indicator-focus@2x.png create mode 100644 src/imports/controls/images/dial-indicator-focus@3x.png create mode 100644 src/imports/controls/images/dial-indicator-focus@4x.png create mode 100644 src/imports/controls/qquickdialring.cpp create mode 100644 src/imports/controls/qquickdialring_p.h diff --git a/src/imports/controls/Dial.qml b/src/imports/controls/Dial.qml index 2ce2a014..a92bc112 100644 --- a/src/imports/controls/Dial.qml +++ b/src/imports/controls/Dial.qml @@ -35,6 +35,7 @@ ****************************************************************************/ import QtQuick 2.6 +import Qt.labs.controls.impl 1.0 import Qt.labs.templates 1.0 as T T.Dial { @@ -44,13 +45,12 @@ T.Dial { implicitHeight: 184 //! [background] - background: Rectangle { - x: control.width / 2 - width / 2 - y: control.height / 2 - height / 2 - width: Math.max(64, Math.min(control.width, control.height)) - height: width - radius: width / 2 - border.color: "#353637" + background: DialRing { + width: control.availableWidth + height: control.availableHeight + color: control.activeFocus ? "#0066ff" : "#353637" + progress: control.position + opacity: control.enabled ? 1 : 0.3 } //! [background] @@ -61,8 +61,9 @@ T.Dial { y: background.y + background.height / 2 - handle.height / 2 width: 14 height: 10 - source: "qrc:/qt-project.org/imports/Qt/labs/controls/images/dial-indicator.png" + source: "qrc:/qt-project.org/imports/Qt/labs/controls/images/dial-indicator" + (control.activeKeyFocus ? "-focus.png" : ".png") antialiasing: true + opacity: control.enabled ? 1 : 0.3 transform: [ Translate { y: -background.height * 0.4 + handle.height / 2 diff --git a/src/imports/controls/controls.pri b/src/imports/controls/controls.pri index 5c32824b..523356a1 100644 --- a/src/imports/controls/controls.pri +++ b/src/imports/controls/controls.pri @@ -1,10 +1,12 @@ HEADERS += \ $$PWD/qquickbusyindicatorring_p.h \ - $$PWD/qquickprogressstrip_p.h + $$PWD/qquickprogressstrip_p.h \ + $$PWD/qquickdialring_p.h SOURCES += \ $$PWD/qquickbusyindicatorring.cpp \ - $$PWD/qquickprogressstrip.cpp + $$PWD/qquickprogressstrip.cpp \ + $$PWD/qquickdialring.cpp QML_CONTROLS = \ ApplicationWindow.qml \ diff --git a/src/imports/controls/images/dial-indicator-focus.png b/src/imports/controls/images/dial-indicator-focus.png new file mode 100644 index 00000000..21fd5889 Binary files /dev/null and b/src/imports/controls/images/dial-indicator-focus.png differ diff --git a/src/imports/controls/images/dial-indicator-focus@2x.png b/src/imports/controls/images/dial-indicator-focus@2x.png new file mode 100644 index 00000000..d120a4ac Binary files /dev/null and b/src/imports/controls/images/dial-indicator-focus@2x.png differ diff --git a/src/imports/controls/images/dial-indicator-focus@3x.png b/src/imports/controls/images/dial-indicator-focus@3x.png new file mode 100644 index 00000000..02820654 Binary files /dev/null and b/src/imports/controls/images/dial-indicator-focus@3x.png differ diff --git a/src/imports/controls/images/dial-indicator-focus@4x.png b/src/imports/controls/images/dial-indicator-focus@4x.png new file mode 100644 index 00000000..d838669c Binary files /dev/null and b/src/imports/controls/images/dial-indicator-focus@4x.png differ diff --git a/src/imports/controls/qquickdialring.cpp b/src/imports/controls/qquickdialring.cpp new file mode 100644 index 00000000..b00e67d8 --- /dev/null +++ b/src/imports/controls/qquickdialring.cpp @@ -0,0 +1,116 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the Qt Labs Controls module of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:LGPL3$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see http://www.qt.io/terms-conditions. For further +** information use the contact form at http://www.qt.io/contact-us. +** +** GNU Lesser General Public License Usage +** Alternatively, this file may be used under the terms of the GNU Lesser +** General Public License version 3 as published by the Free Software +** Foundation and appearing in the file LICENSE.LGPLv3 included in the +** packaging of this file. Please review the following information to +** ensure the GNU Lesser General Public License version 3 requirements +** will be met: https://www.gnu.org/licenses/lgpl.html. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 2.0 or later as published by the Free +** Software Foundation and appearing in the file LICENSE.GPL included in +** the packaging of this file. Please review the following information to +** ensure the GNU General Public License version 2.0 requirements will be +** met: http://www.gnu.org/licenses/gpl-2.0.html. +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +#include "qquickdialring_p.h" + +#include +#include +#include + +QT_BEGIN_NAMESPACE + +QQuickDialRing::QQuickDialRing(QQuickItem *parent) : + QQuickPaintedItem(parent), + m_progress(0), + m_color(Qt::black) +{ +} + +qreal QQuickDialRing::progress() const +{ + return m_progress; +} + +void QQuickDialRing::setProgress(qreal progress) +{ + if (progress == m_progress) + return; + + m_progress = progress; + update(); + emit progressChanged(); +} + +QColor QQuickDialRing::color() const +{ + return m_color; +} + +void QQuickDialRing::setColor(const QColor &color) +{ + if (color == m_color) + return; + + m_color = color; + update(); + emit colorChanged(); +} + +void QQuickDialRing::paint(QPainter *painter) +{ + if (width() <= 0 || height() <= 0) + return; + + QPen pen(m_color); + pen.setWidth(8); + painter->setPen(pen); + + const QRectF bounds = boundingRect(); + const qreal smallest = qMin(bounds.width(), bounds.height()); + QRectF rect = QRectF(pen.widthF() / 2.0 + 1, pen.widthF() / 2.0 + 1, smallest - pen.widthF() - 2, smallest - pen.widthF() - 2); + + // Make sure the arc is aligned to whole pixels. + if (rect.x() - int(rect.x()) > 0) + rect.setX(qCeil(rect.x())); + if (rect.y() - int(rect.y()) > 0) + rect.setY(qCeil(rect.y())); + if (rect.width() - int(rect.width()) > 0) + rect.setWidth(qFloor(rect.width())); + if (rect.height() - int(rect.height()) > 0) + rect.setHeight(qFloor(rect.height())); + + painter->setRenderHint(QPainter::Antialiasing); + + const qreal startAngle = (140 + 90) * 16; + const qreal spanAngle = (m_progress * 280) * -16; + painter->drawArc(rect, startAngle, spanAngle); + + pen.setWidth(1); + painter->setPen(pen); + painter->drawArc(QRect(1, 1, width() - 2, height() - 2), 0, 360 * 16); +} + +QT_END_NAMESPACE diff --git a/src/imports/controls/qquickdialring_p.h b/src/imports/controls/qquickdialring_p.h new file mode 100644 index 00000000..3ab8218a --- /dev/null +++ b/src/imports/controls/qquickdialring_p.h @@ -0,0 +1,84 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: http://www.qt.io/licensing/ +** +** This file is part of the Qt Labs Controls module of the Qt Toolkit. +** +** $QT_BEGIN_LICENSE:LGPL3$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see http://www.qt.io/terms-conditions. For further +** information use the contact form at http://www.qt.io/contact-us. +** +** GNU Lesser General Public License Usage +** Alternatively, this file may be used under the terms of the GNU Lesser +** General Public License version 3 as published by the Free Software +** Foundation and appearing in the file LICENSE.LGPLv3 included in the +** packaging of this file. Please review the following information to +** ensure the GNU Lesser General Public License version 3 requirements +** will be met: https://www.gnu.org/licenses/lgpl.html. +** +** GNU General Public License Usage +** Alternatively, this file may be used under the terms of the GNU +** General Public License version 2.0 or later as published by the Free +** Software Foundation and appearing in the file LICENSE.GPL included in +** the packaging of this file. Please review the following information to +** ensure the GNU General Public License version 2.0 requirements will be +** met: http://www.gnu.org/licenses/gpl-2.0.html. +** +** $QT_END_LICENSE$ +** +****************************************************************************/ + +#ifndef QQUICKDIALRING_P_H +#define QQUICKDIALRING_P_H + +// +// W A R N I N G +// ------------- +// +// This file is not part of the Qt API. It exists purely as an +// implementation detail. This header file may change from version to +// version without notice, or even be removed. +// +// We mean it. +// + +#include +#include + +QT_BEGIN_NAMESPACE + +class QQuickDialRing : public QQuickPaintedItem +{ + Q_OBJECT + Q_PROPERTY(qreal progress READ progress WRITE setProgress NOTIFY progressChanged) + Q_PROPERTY(QColor color READ color WRITE setColor NOTIFY colorChanged) + +public: + QQuickDialRing(QQuickItem *parent = nullptr); + + qreal progress() const; + void setProgress(qreal progress); + + QColor color() const; + void setColor(const QColor &color); + + void paint(QPainter *painter) override; + +Q_SIGNALS: + void progressChanged(); + void colorChanged(); + +private: + qreal m_progress; + QColor m_color; +}; + +QT_END_NAMESPACE + +#endif // QQUICKDIALRING_P_H diff --git a/src/imports/controls/qtquickcontrols2plugin.cpp b/src/imports/controls/qtquickcontrols2plugin.cpp index d3ae1905..672e6591 100644 --- a/src/imports/controls/qtquickcontrols2plugin.cpp +++ b/src/imports/controls/qtquickcontrols2plugin.cpp @@ -50,6 +50,7 @@ #include #include "qquickbusyindicatorring_p.h" +#include "qquickdialring_p.h" #include "qquickprogressstrip_p.h" static inline void initResources() @@ -144,6 +145,7 @@ void QtQuickControls2Plugin::initializeEngine(QQmlEngine *engine, const char *ur qmlRegisterType(import, 1, 0, "BusyRingAnimator"); qmlRegisterType(import, 1, 0, "ProgressStrip"); qmlRegisterType(import, 1, 0, "ProgressStripAnimator"); + qmlRegisterType(import, 1, 0, "DialRing"); qmlRegisterType(typeUrl(QStringLiteral("CheckIndicator.qml")), import, 1, 0, "CheckIndicator"); qmlRegisterType(typeUrl(QStringLiteral("RadioIndicator.qml")), import, 1, 0, "RadioIndicator"); diff --git a/src/imports/controls/qtquickcontrols2plugin.qrc b/src/imports/controls/qtquickcontrols2plugin.qrc index 75fe80c2..ecac3d2b 100644 --- a/src/imports/controls/qtquickcontrols2plugin.qrc +++ b/src/imports/controls/qtquickcontrols2plugin.qrc @@ -8,6 +8,10 @@ images/dial-indicator@2x.png images/dial-indicator@3x.png images/dial-indicator@4x.png + images/dial-indicator-focus.png + images/dial-indicator-focus@2x.png + images/dial-indicator-focus@3x.png + images/dial-indicator-focus@4x.png images/drop-indicator.png images/drop-indicator@2x.png images/drop-indicator@3x.png -- cgit v1.2.3