diff --git a/ui/app/AppLayouts/Node/NodeLayout.qml b/ui/app/AppLayouts/Node/NodeLayout.qml index a3517a4239b..76a05d2628e 100644 --- a/ui/app/AppLayouts/Node/NodeLayout.qml +++ b/ui/app/AppLayouts/Node/NodeLayout.qml @@ -9,6 +9,7 @@ import StatusQ.Controls import utils import shared +import shared.status import shared.panels import shared.controls @@ -20,6 +21,29 @@ 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 @@ -27,37 +51,67 @@ StatusSectionLayout { 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:" @@ -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 + spacing: Theme.halfPadding + StatusBaseText { id: logHeaderDesc color: Theme.palette.primaryColor1 @@ -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