Skip to content

Allow BlockClock to scale and maintain 1/3 of the available window real estate #306

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 5 commits into from
Closed

Allow BlockClock to scale and maintain 1/3 of the available window real estate #306

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5196b68
qml: marry BlockClock and NetworkIndicator
jarolrod Mar 29, 2023
af9d480
qml: allow to customize blockclockdial's pen width
jarolrod Mar 29, 2023
4e8f389
qml: allow to resize PeersIndicator component
jarolrod Mar 29, 2023
6eeb002
qml: introduce bitcoin-circle icon in larger dimensions
jarolrod Mar 29, 2023
cf6e327
qml: set BlockClock size values as a ratio of the parent width & height
jarolrod Mar 29, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 29 additions & 15 deletions src/qml/components/BlockClock.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,11 @@ import "../controls"

Item {
id: root
property real parentWidth: 600
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think these properties are needed. You can reference the parent with root.parent.width and root.parent.height.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think its better for clarity, and this in a small way documents what the proportions are based on by default - coming from the design file

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
Expand All @@ -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
Expand Down Expand Up @@ -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

Expand All @@ -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 {
Expand All @@ -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 {
Expand All @@ -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
Expand Down Expand Up @@ -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
}
},

Expand All @@ -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
}
}
]
Expand Down
13 changes: 8 additions & 5 deletions src/qml/components/PeersIndicator.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
22 changes: 15 additions & 7 deletions src/qml/components/blockclockdial.cpp
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,10 +10,12 @@
#include <QConicalGradient>
#include <QPen>
#include <QtMath>
#include <QtGlobal>

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<QColor>{}}
, m_time_tick_color{QColor("#000000")}
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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);
Expand All @@ -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);
}
Expand Down Expand Up @@ -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);
Expand All @@ -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);
Expand All @@ -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);

Expand All @@ -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) {
Expand Down
5 changes: 5 additions & 0 deletions src/qml/components/blockclockdial.h
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
#include <QConicalGradient>
#include <QPainter>
#include <QTimer>
#include <QtGlobal>

class BlockClockDial : public QQuickPaintedItem
{
Expand All @@ -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<QColor> confirmationColors READ confirmationColors WRITE setConfirmationColors )
Q_PROPERTY(QColor timeTickColor READ timeTickColor WRITE setTimeTickColor)
Expand All @@ -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<QColor> confirmationColors() const { return m_confirmation_colors; };
QColor timeTickColor() const { return m_time_tick_color; };
Expand All @@ -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<QColor> colorList);
void setTimeTickColor(QColor color);
Expand All @@ -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;
Expand Down
11 changes: 3 additions & 8 deletions src/qml/pages/node/NodeRunner.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
}
}
}
Binary file modified src/qml/res/icons/bitcoin-circle.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.