diff --git a/src/qml/components/BlockClock.qml b/src/qml/components/BlockClock.qml index 47efc73606..69a64fbdb1 100644 --- a/src/qml/components/BlockClock.qml +++ b/src/qml/components/BlockClock.qml @@ -12,9 +12,11 @@ import "../controls" Item { id: root + property real parentWidth: 600 + property real parentHeight: 600 - implicitWidth: 200 - implicitHeight: 200 + width: dial.width + height: dial.height + networkIndicator.height + networkIndicator.anchors.topMargin property alias header: mainText.text property alias headerSize: mainText.font.pixelSize @@ -28,7 +30,10 @@ Item { BlockClockDial { id: dial - anchors.fill: parent + anchors.horizontalCenter: root.horizontalCenter + width: Math.min((root.parentWidth * (1/3)), (root.parentHeight * (1/3))) + height: dial.width + penWidth: dial.width / 50 timeRatioList: chainModel.timeRatioList verificationProgress: nodeModel.verificationProgress paused: root.paused @@ -56,8 +61,8 @@ Item { background: null icon.source: "image://images/bitcoin-circle" icon.color: Theme.color.neutral9 - icon.width: 40 - icon.height: 40 + icon.width: Math.max(dial.width / 5, 1) + icon.height: Math.max(dial.width / 5, 1) anchors.bottom: mainText.top anchors.horizontalCenter: root.horizontalCenter @@ -68,10 +73,10 @@ Item { Label { id: mainText - anchors.centerIn: parent + anchors.centerIn: dial font.family: "Inter" font.styleName: "Semi Bold" - font.pixelSize: 32 + font.pixelSize: dial.width * (4/25) color: Theme.color.neutral9 Behavior on color { @@ -85,7 +90,7 @@ Item { anchors.horizontalCenter: root.horizontalCenter font.family: "Inter" font.styleName: "Semi Bold" - font.pixelSize: 18 + font.pixelSize: dial.width * (9/100) color: Theme.color.neutral4 Behavior on color { @@ -95,13 +100,22 @@ Item { PeersIndicator { anchors.top: subText.bottom - anchors.topMargin: 20 + anchors.topMargin: dial.width / 10 anchors.horizontalCenter: root.horizontalCenter numOutboundPeers: nodeModel.numOutboundPeers maxNumOutboundPeers: nodeModel.maxNumOutboundPeers + indicatorDimensions: dial.width * (3/200) + indicatorSpacing: dial.width / 40 paused: root.paused } + NetworkIndicator { + id: networkIndicator + anchors.top: dial.bottom + anchors.topMargin: networkIndicator.visible ? 30 : 0 + anchors.horizontalCenter: root.horizontalCenter + } + MouseArea { anchors.fill: dial cursorShape: Qt.PointingHandCursor @@ -138,16 +152,16 @@ Item { PropertyChanges { target: root header: "Paused" - headerSize: 24 + headerSize: dial.width * (3/25) subText: "Tap to resume" } PropertyChanges { target: bitcoinIcon - anchors.bottomMargin: 5 + anchors.bottomMargin: dial.width / 40 } PropertyChanges { target: subText - anchors.topMargin: 4 + anchors.topMargin: dial.width / 50 } }, @@ -156,16 +170,16 @@ Item { PropertyChanges { target: root header: "Connecting" - headerSize: 24 + headerSize: dial.width * (3/25) subText: "Please wait" } PropertyChanges { target: bitcoinIcon - anchors.bottomMargin: 5 + anchors.bottomMargin: dial.width / 40 } PropertyChanges { target: subText - anchors.topMargin: 4 + anchors.topMargin: dial.width / 50 } } ] diff --git a/src/qml/components/PeersIndicator.qml b/src/qml/components/PeersIndicator.qml index 54a0d52402..7faedad947 100644 --- a/src/qml/components/PeersIndicator.qml +++ b/src/qml/components/PeersIndicator.qml @@ -3,22 +3,25 @@ // file COPYING or http://www.opensource.org/licenses/mit-license.php. import QtQuick 2.15 -import QtQuick.Layouts 1.15 import "../controls" -RowLayout { +Row { id: root required property int numOutboundPeers required property int maxNumOutboundPeers required property bool paused property int size: 5 + property real indicatorDimensions: 3 + property real indicatorSpacing: 5 - spacing: 5 + height: root.indicatorDimensions + + spacing: root.indicatorSpacing Repeater { model: 5 Rectangle { - width: 3 - height: 3 + width: root.indicatorDimensions + height: root.indicatorDimensions radius: width / 2 color: Theme.color.neutral9 opacity: (index === 0 && root.numOutboundPeers > 0) || (index + 1 <= root.size * root.numOutboundPeers / root.maxNumOutboundPeers) ? 0.95 : 0.45 diff --git a/src/qml/components/blockclockdial.cpp b/src/qml/components/blockclockdial.cpp index 2d4580e9e0..fb5fb30f1b 100644 --- a/src/qml/components/blockclockdial.cpp +++ b/src/qml/components/blockclockdial.cpp @@ -10,10 +10,12 @@ #include #include #include +#include BlockClockDial::BlockClockDial(QQuickItem *parent) : QQuickPaintedItem(parent) , m_time_ratio_list{0.0} +, m_pen_width{4} , m_background_color{QColor("#2D2D2D")} , m_confirmation_colors{QList{}} , m_time_tick_color{QColor("#000000")} @@ -132,6 +134,12 @@ void BlockClockDial::setPaused(bool paused) } } +void BlockClockDial::setPenWidth(qreal width) +{ + m_pen_width = width; + update(); +} + void BlockClockDial::setBackgroundColor(QColor color) { m_background_color = color; @@ -183,7 +191,7 @@ void BlockClockDial::paintBlocks(QPainter * painter) } QPen pen(m_confirmation_colors[5]); - pen.setWidth(4); + pen.setWidthF(m_pen_width); pen.setCapStyle(Qt::FlatCap); const QRectF bounds = getBoundsForPen(pen); painter->setPen(pen); @@ -196,7 +204,7 @@ void BlockClockDial::paintBlocks(QPainter * painter) for (int i = 1; i < numberOfBlocks; i++) { if (numberOfBlocks - i <= 6) { QPen pen(m_confirmation_colors[numberOfBlocks - i - 1]); - pen.setWidth(4); + pen.setWidthF(m_pen_width); pen.setCapStyle(Qt::FlatCap); painter->setPen(pen); } @@ -227,7 +235,7 @@ void BlockClockDial::paintBlocks(QPainter * painter) void BlockClockDial::paintProgress(QPainter * painter) { QPen pen(m_confirmation_colors[5]); - pen.setWidthF(4); + pen.setWidthF(m_pen_width); pen.setCapStyle(Qt::RoundCap); const QRectF bounds = getBoundsForPen(pen); painter->setPen(pen); @@ -250,7 +258,7 @@ void BlockClockDial::paintProgress(QPainter * painter) void BlockClockDial::paintConnectingAnimation(QPainter * painter) { QPen pen; - pen.setWidthF(4); + pen.setWidthF(m_pen_width); setupConnectingGradient(pen); pen.setBrush(QBrush(m_connecting_gradient)); pen.setCapStyle(Qt::RoundCap); @@ -267,7 +275,7 @@ void BlockClockDial::paintConnectingAnimation(QPainter * painter) void BlockClockDial::paintBackground(QPainter * painter) { QPen pen(m_background_color); - pen.setWidthF(4); + pen.setWidthF(m_pen_width); const QRectF bounds = getBoundsForPen(pen); painter->setPen(pen); @@ -283,12 +291,12 @@ double BlockClockDial::degreesPerPixel() void BlockClockDial::paintTimeTicks(QPainter * painter) { QPen pen(m_time_tick_color); - pen.setWidthF(4); + pen.setWidthF(m_pen_width); // Calculate bound based on width of default pen const QRectF bounds = getBoundsForPen(pen); QPen time_tick_pen = QPen(m_time_tick_color); - time_tick_pen.setWidth(2); + time_tick_pen.setWidthF(m_pen_width / 2); time_tick_pen.setCapStyle(Qt::RoundCap); painter->setPen(time_tick_pen); for (double angle = 0; angle < 360; angle += 30) { diff --git a/src/qml/components/blockclockdial.h b/src/qml/components/blockclockdial.h index ea3ed686b1..a750d10cd7 100644 --- a/src/qml/components/blockclockdial.h +++ b/src/qml/components/blockclockdial.h @@ -9,6 +9,7 @@ #include #include #include +#include class BlockClockDial : public QQuickPaintedItem { @@ -18,6 +19,7 @@ class BlockClockDial : public QQuickPaintedItem Q_PROPERTY(bool connected READ connected WRITE setConnected) Q_PROPERTY(bool synced READ synced WRITE setSynced) Q_PROPERTY(bool paused READ paused WRITE setPaused) + Q_PROPERTY(qreal penWidth READ penWidth WRITE setPenWidth) Q_PROPERTY(QColor backgroundColor READ backgroundColor WRITE setBackgroundColor) Q_PROPERTY(QList confirmationColors READ confirmationColors WRITE setConfirmationColors ) Q_PROPERTY(QColor timeTickColor READ timeTickColor WRITE setTimeTickColor) @@ -31,6 +33,7 @@ class BlockClockDial : public QQuickPaintedItem bool connected() const { return m_is_connected; }; bool synced() const { return m_is_synced; }; bool paused() const { return m_is_paused; }; + qreal penWidth() const { return m_pen_width; }; QColor backgroundColor() const { return m_background_color; }; QList confirmationColors() const { return m_confirmation_colors; }; QColor timeTickColor() const { return m_time_tick_color; }; @@ -41,6 +44,7 @@ public Q_SLOTS: void setConnected(bool connected); void setSynced(bool synced); void setPaused(bool paused); + void setPenWidth(qreal width); void setBackgroundColor(QColor color); void setConfirmationColors(QList colorList); void setTimeTickColor(QColor color); @@ -63,6 +67,7 @@ public Q_SLOTS: bool m_is_connected; bool m_is_synced; bool m_is_paused; + qreal m_pen_width; QColor m_background_color; QConicalGradient m_connecting_gradient; qreal m_connecting_start_angle = 90; diff --git a/src/qml/pages/node/NodeRunner.qml b/src/qml/pages/node/NodeRunner.qml index eda06f3ce6..dfea71e27c 100644 --- a/src/qml/pages/node/NodeRunner.qml +++ b/src/qml/pages/node/NodeRunner.qml @@ -18,14 +18,9 @@ Page { Component.onCompleted: nodeModel.startNodeInitializionThread(); - ColumnLayout { - spacing: 30 + BlockClock { + parentWidth: parent.width - 40 + parentHeight: parent.height anchors.centerIn: parent - BlockClock { - Layout.alignment: Qt.AlignCenter - } - NetworkIndicator { - Layout.alignment: Qt.AlignCenter - } } } diff --git a/src/qml/res/icons/bitcoin-circle.png b/src/qml/res/icons/bitcoin-circle.png index dac55c3610..9535609393 100644 Binary files a/src/qml/res/icons/bitcoin-circle.png and b/src/qml/res/icons/bitcoin-circle.png differ