Skip to content

Bugfix/12746 Node management window is not scrollable #19503

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

Open
mmlado wants to merge 2 commits into
base: master
Choose a base branch
from
+175 −137
Open

Bugfix/12746 Node management window is not scrollable #19503

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f1df9f0
Refactor look of Node screen.
mmlado Dec 7, 2025
ac057c8
Merge branch 'master' into bugfix/12746-node_management_window_is_not…
mmlado Dec 7, 2025
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
312 changes: 175 additions & 137 deletions ui/app/AppLayouts/Node/NodeLayout.qml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import StatusQ.Controls

import utils
import shared
import shared.status
import shared.panels
import shared.controls

Expand All @@ -20,44 +21,97 @@ StatusSectionLayout {

property RootStore store: RootStore {}

Connections {
target: root.store.nodeModelInst
function onLog(logContent) {
if(logContent.indexOf("mailserver") > 0){
let lines = mailserverLogTxt.text.split("\n");
if (lines.length > 10){
lines.shift();
}
lines.push(logContent.trim())
mailserverLogTxt.text = lines.join("\n")
mailserverScrollView.contentItem.contentY = mailserverScrollView.contentItem.contentHeight - mailserverScrollView.height
} else {
let lines = logsTxt.text.split("\n");
if (lines.length > 5){
lines.shift();
}
lines.push(logContent.trim())
logsTxt.text = lines.join("\n")
logsScrollView.contentItem.contentY = logsScrollView.contentItem.contentHeight - logsScrollView.height
}
}
}

centerPanel: ColumnLayout {
id: rpcColumn
spacing: 0
anchors.fill: parent

RateView {
store: root.store
Layout.fillWidth: true
}

RowLayout {
id: peerContainer2

Column {
Layout.fillWidth: true
StatusBaseText {
id: peerDescription
color: Theme.palette.primaryColor1
text: "Peers"
Layout.rightMargin: Theme.padding
Layout.leftMargin: Theme.padding
Layout.fillWidth: true
font.weight: Font.Medium
font.pixelSize: Theme.fontSize(20)
}
StatusBaseText {
id: peerNumber
color: Theme.palette.primaryColor1
// Not Refactored Yet
text: root.store.nodeModelInst.peerSize
Layout.rightMargin: Theme.padding
Layout.leftMargin: Theme.padding
Layout.fillWidth: true
font.weight: Font.Medium
font.pixelSize: Theme.fontSize(20)
spacing: 0

Row {
width: parent.width
spacing: 10
topPadding: Theme.padding

StatusBaseText {
text: qsTr("Peers")
width: 250
anchors.verticalCenter: parent.verticalCenter
}

Item {
width: 140
height: 44
Input {
id: peerNumberInput
text: root.store.nodeModelInst.peerSize
width: parent.width
readOnly: true
customHeight: 44
placeholderText: "0"
anchors.top: parent.top
}
}

StatusBaseText {
text: qsTr("Latest Block")
width: 273
anchors.verticalCenter: parent.verticalCenter
}

Item {
width: 140
height: 44
Input {
id: latestBlockInput
text: root.store.nodeModelInst.lastMessage
width: parent.width
readOnly: true
customHeight: 44
placeholderText: "0"
anchors.top: parent.top
}
}
}
}

ColumnLayout {
id: mailserverLogsContainer
height: 300
Layout.fillWidth: true
Layout.fillHeight: true
Layout.preferredHeight: 0
spacing: Theme.halfPadding

StatusBaseText {
color: Theme.palette.primaryColor1
text: "Mailserver Interactions:"
Expand All @@ -67,20 +121,32 @@ StatusSectionLayout {
font.weight: Font.Medium
font.pixelSize: Theme.fontSize(20)
}
StatusTextArea {
id: mailserverLogTxt

StatusScrollView {
id: mailserverScrollView
Layout.rightMargin: Theme.padding
Layout.leftMargin: Theme.padding
Layout.fillWidth: true
Layout.preferredHeight: 200
text: ""
readOnly: true
Layout.fillHeight: true
contentWidth: availableWidth
padding: 0

StatusTextArea {
id: mailserverLogTxt
width: mailserverScrollView.availableWidth
text: ""
readOnly: true
}
}
}

ColumnLayout {
id: logContainer
height: 300
Layout.fillWidth: true
Layout.fillHeight: true
Layout.preferredHeight: 0
Copy link
Member

@caybro caybro Dec 8, 2025

Choose a reason for hiding this comment

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

Why the preferredHeight: 0, fillHeight: true should already do the thing right?

Copy link
Contributor Author

@mmlado mmlado Dec 8, 2025

Choose a reason for hiding this comment

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

When multiple items have fillHeight: true QML uses secondary, implicit, parameter for it's height, which by default is based on the based on it's contents, so Logs, as it has the most content, will take up disproportional amount of space compared to the other two sections. With preferredHeight: 0 it's telling it to ignore the natural size preference and to only fill the available space evenly as all the sections have the same preferences for their size.

Copy link
Member

@caybro caybro Dec 8, 2025

Choose a reason for hiding this comment

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

Ah right; these days you could use the new https://doc.qt.io/qt-6/qml-qtquick-layouts-layout.html#verticalStretchFactor-attached-prop

spacing: Theme.halfPadding

StatusBaseText {
id: logHeaderDesc
color: Theme.palette.primaryColor1
Expand All @@ -91,142 +157,114 @@ StatusSectionLayout {
font.weight: Font.Medium
font.pixelSize: Theme.fontSize(20)
}
StatusTextArea {
id: logsTxt

StatusScrollView {
id: logsScrollView
Layout.rightMargin: Theme.padding
Layout.leftMargin: Theme.padding
Layout.fillWidth: true
Layout.preferredHeight: 200
text: ""
readOnly: true
}
}

// Not Refactored Yet
Connections {
target: root.store.nodeModelInst
function onLog(logContent) {
// TODO: this is ugly, but there's not even a design for this section
if(logContent.indexOf("mailserver") > 0){
let lines = mailserverLogTxt.text.split("\n");
if (lines.length > 10){
lines.shift();
}
lines.push(logContent.trim())
mailserverLogTxt.text = lines.join("\n")
} else {
let lines = logsTxt.text.split("\n");
if (lines.length > 5){
lines.shift();
}
lines.push(logContent.trim())
logsTxt.text = lines.join("\n")
Layout.fillHeight: true
contentWidth: availableWidth
padding: 0

StatusTextArea {
id: logsTxt
width: logsScrollView.availableWidth
text: ""
readOnly: true
}
}
}

ColumnLayout {
id: messageContainer
id: rpcContainer
Layout.fillWidth: true
Layout.fillHeight: true
Layout.preferredHeight: 0
spacing: Theme.halfPadding

StatusBaseText {
id: testDescription
color: Theme.palette.primaryColor1
text: "latest block (auto updates):"
Layout.rightMargin: Theme.padding
Layout.leftMargin: Theme.padding
Layout.fillWidth: true
font.weight: Font.Medium
font.pixelSize: Theme.fontSize(20)
}
StatusBaseText {
id: test
color: Theme.palette.primaryColor1
// Not Refactored Yet
text: root.store.nodeModelInst.lastMessage
text: qsTr("JSON-RPC:")
Layout.rightMargin: Theme.padding
Layout.leftMargin: Theme.padding
Layout.fillWidth: true
font.weight: Font.Medium
font.pixelSize: Theme.fontSize(20)
}
}

RowLayout {
id: rpcInputContainer
height: 70
Layout.fillWidth: true
Layout.bottomMargin: 0
Layout.alignment: Qt.AlignLeft | Qt.AlignBottom
transformOrigin: Item.Bottom

Item {
id: element2
width: 200
height: 70
RowLayout {
id: rpcInputContainer
Layout.fillWidth: true
Layout.preferredHeight: 50
Layout.leftMargin: Theme.padding
Layout.rightMargin: Theme.padding
Layout.bottomMargin: 0

Rectangle {
id: rectangle
color: "#00000000"
border.color: Theme.palette.border
anchors.fill: parent

Button {
id: rpcSendBtn
x: 100
width: 30
height: 30
text: "\u2191"
font.bold: true
font.pointSize: 12
anchors.top: parent.top
anchors.topMargin: 20
anchors.right: parent.right
anchors.rightMargin: 16
onClicked: {
root.store.onSend(txtData.text)
txtData.text = ""
}
enabled: txtData.text !== ""
background: Rectangle {
color: parent.enabled ? Theme.palette.primaryColor1 : Theme.palette.baseColor1
radius: 50
}
}
Item {
id: element2
width: 200
height: 50
Layout.fillWidth: true

StatusTextField {
id: txtData
text: ""
leftPadding: 0
padding: 0
font.pixelSize: Theme.secondaryTextFontSize
placeholderText: qsTr("Type json-rpc message... e.g {\"method\": \"eth_accounts\"}")
anchors.right: rpcSendBtn.left
anchors.rightMargin: 16
anchors.top: parent.top
anchors.topMargin: 24
anchors.left: parent.left
anchors.leftMargin: 24
onAccepted: {
root.store.onSend(txtData.text)
txtData.text = ""
Rectangle {
id: rectangle
color: "#00000000"
border.color: Theme.palette.border
anchors.fill: parent

Button {
id: rpcSendBtn
x: 100
width: 30
height: 30
text: "\u2191"
font.bold: true
font.pointSize: 12
anchors.top: parent.top
anchors.topMargin: 12
anchors.right: parent.right
anchors.rightMargin: 16
onClicked: {
root.store.onSend(txtData.text)
txtData.text = ""
}
enabled: txtData.text !== ""
background: Rectangle {
color: parent.enabled ? Theme.palette.primaryColor1 : Theme.palette.baseColor1
radius: 50
}
}
background: Rectangle {
color: "#00000000"

StatusTextField {
id: txtData
text: ""
leftPadding: 0
padding: 0
font.pixelSize: Theme.secondaryTextFontSize
placeholderText: qsTr("Type json-rpc message... e.g {\"method\": \"eth_accounts\"}")
anchors.right: rpcSendBtn.left
anchors.rightMargin: 16
anchors.top: parent.top
anchors.topMargin: 12
anchors.left: parent.left
anchors.leftMargin: 24
onAccepted: {
root.store.onSend(txtData.text)
txtData.text = ""
}
background: Rectangle {
color: "#00000000"
}
}
}
}
}
}

RowLayout {
id: resultContainer
Layout.fillHeight: true
Layout.rightMargin: Theme.padding
Layout.leftMargin: Theme.padding

StatusScrollView {
id: resultScrollView
Layout.leftMargin: Theme.padding
Layout.rightMargin: Theme.padding
Layout.fillWidth: true
Layout.fillHeight: true
contentWidth: availableWidth
Expand Down
Loading