qml: network overview page

electrum/gui/qml/components/NetworkOverview.qml

@@ -0,0 +1,213 @@
+import QtQuick 2.6
+import QtQuick.Layouts 1.0
+import QtQuick.Controls 2.3
+import QtQuick.Controls.Material 2.0
+
+import "controls"
+
+Pane {
+    id: root
+    padding: 0
+
+    ColumnLayout {
+        anchors.fill: parent
+        spacing: 0
+
+        Flickable {
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+            Layout.topMargin: constants.paddingLarge
+            Layout.leftMargin: constants.paddingLarge
+            Layout.rightMargin: constants.paddingLarge
+
+            contentHeight: contentLayout.height
+            clip: true
+            interactive: height < contentHeight
+
+            GridLayout {
+                id: contentLayout
+                width: parent.width
+                columns: 2
+
+                Label {
+                    Layout.columnSpan: 2
+                    text: qsTr('Network')
+                    font.pixelSize: constants.fontSizeLarge
+                    color: Material.accentColor
+                }
+
+                Rectangle {
+                    Layout.columnSpan: 2
+                    Layout.fillWidth: true
+                    height: 1
+                    color: Material.accentColor
+                }
+
+                Label {
+                    text: qsTr('Proxy:');
+                    color: Material.accentColor
+                }
+                Label {
+                    text: 'mode' in Network.proxy ? qsTr('enabled') : qsTr('disabled')
+                }
+
+                Label {
+                    visible: 'mode' in Network.proxy
+                    text: qsTr('Proxy server:');
+                    color: Material.accentColor
+                }
+                Label {
+                    visible: 'mode' in Network.proxy
+                    text: Network.proxy['host'] ? Network.proxy['host'] + ':' + Network.proxy['port'] : ''
+                }
+
+                Label {
+                    Layout.columnSpan: 2
+                    text: qsTr('On-chain')
+                    font.pixelSize: constants.fontSizeLarge
+                    color: Material.accentColor
+                }
+
+                Rectangle {
+                    Layout.columnSpan: 2
+                    Layout.fillWidth: true
+                    height: 1
+                    color: Material.accentColor
+                }
+
+                Label {
+                    text: qsTr('Network:');
+                    color: Material.accentColor
+                }
+                Label {
+                    text: Network.networkName
+                }
+
+                Label {
+                    text: qsTr('Server:');
+                    color: Material.accentColor
+                }
+                Label {
+                    text: Network.server
+                }
+
+                Label {
+                    text: qsTr('Local Height:');
+                    color: Material.accentColor
+                }
+                Label {
+                    text: Network.height
+                }
+
+                Label {
+                    text: qsTr('Status:');
+                    color: Material.accentColor
+                }
+
+                RowLayout {
+                    NetworkStatusIndicator {}
+
+                    Label {
+                        text: Network.status
+                    }
+                }
+
+                Label {
+                    text: qsTr('Network fees:');
+                    color: Material.accentColor
+                }
+                Label {
+                    id: feeHistogram
+                }
+
+                Label {
+                    Layout.columnSpan: 2
+                    text: qsTr('Lightning')
+                    font.pixelSize: constants.fontSizeLarge
+                    color: Material.accentColor
+                }
+
+                Rectangle {
+                    Layout.columnSpan: 2
+                    Layout.fillWidth: true
+                    height: 1
+                    color: Material.accentColor
+                }
+
+                Label {
+                    text: qsTr('Gossip:');
+                    color: Material.accentColor
+                }
+                ColumnLayout {
+                    visible: Config.useGossip
+                    Label {
+                        text: qsTr('%1 peers').arg(Network.gossipInfo.peers)
+                    }
+                    Label {
+                        text: qsTr('%1 channels to fetch').arg(Network.gossipInfo.unknown_channels)
+                    }
+                    Label {
+                        text: qsTr('%1 nodes, %2 channels').arg(Network.gossipInfo.db_nodes).arg(Network.gossipInfo.db_channels)
+                    }
+                }
+                Label {
+                    text: qsTr('disabled');
+                    visible: !Config.useGossip
+                }
+            }
+
+        }
+
+        FlatButton {
+            Layout.fillWidth: true
+            text: qsTr('Server Settings');
+            icon.source: '../../icons/network.png'
+            onClicked: {
+                var dialog = serverConfig.createObject(root)
+                dialog.open()
+            }
+        }
+
+        FlatButton {
+            Layout.fillWidth: true
+            text: qsTr('Proxy Settings');
+            icon.source: '../../icons/status_connected_proxy.png'
+            onClicked: {
+                var dialog = proxyConfig.createObject(root)
+                dialog.open()
+            }
+        }
+
+    }
+
+    function setFeeHistogram() {
+        var txt = ''
+        Network.feeHistogram.forEach(function(item) {
+            txt = txt + item[0] + ': ' + item[1] + '\n';
+        })
+        feeHistogram.text = txt.trim()
+    }
+
+    Connections {
+        target: Network
+        function onFeeHistogramUpdated() {
+            setFeeHistogram()
+        }
+    }
+
+    Component {
+        id: serverConfig
+        ServerConfigDialog {
+            onClosed: destroy()
+        }
+    }
+
+    Component {
+        id: proxyConfig
+        ProxyConfigDialog {
+            onClosed: destroy()
+        }
+    }
+
+    Component.onCompleted: setFeeHistogram()
+}

electrum/gui/qml/components/NetworkStats.qml

@@ -1,152 +0,0 @@
-import QtQuick 2.6
-import QtQuick.Layouts 1.0
-import QtQuick.Controls 2.3
-import QtQuick.Controls.Material 2.0
-import QtQml 2.6
-
-import "controls"
-
-Pane {
-    id: root
-
-    property string title: qsTr('Network')
-
-    property QtObject menu: Menu {
-        id: menu
-        parent: Overlay.overlay
-        dim: true
-        Overlay.modeless: Rectangle {
-            color: "#44000000"
-        }
-        MenuItem {
-            icon.color: 'transparent'
-            action: Action {
-                text: qsTr('Server Settings');
-                onTriggered: menu.openPage(sc_comp);
-                icon.source: '../../icons/network.png'
-            }
-        }
-        MenuItem {
-            icon.color: 'transparent'
-            action: Action {
-                text: qsTr('Proxy Settings');
-                onTriggered: menu.openPage(pc_comp);
-                icon.source: '../../icons/status_connected_proxy.png'
-            }
-        }
-
-        function openPage(comp) {
-            var dialog = comp.createObject(root)
-            dialog.open()
-            currentIndex = -1
-        }
-    }
-
-    Component {
-        id: sc_comp
-        ServerConfigDialog {
-            onClosed: destroy()
-        }
-    }
-
-    Component {
-        id: pc_comp
-        ProxyConfigDialog {
-            onClosed: destroy()
-        }
-    }
-
-    GridLayout {
-        columns: 2
-
-        Label {
-            text: qsTr("Network: ");
-            color: Material.primaryHighlightedTextColor;
-            font.bold: true
-        }
-        Label {
-            text: Network.networkName
-        }
-
-        Label {
-            text: qsTr("Server: ");
-            color: Material.primaryHighlightedTextColor;
-            font.bold: true
-        }
-        Label {
-            text: Network.server
-        }
-
-        Label {
-            text: qsTr("Local Height: ");
-            color: Material.primaryHighlightedTextColor;
-            font.bold: true
-
-        }
-        Label {
-            text: Network.height
-        }
-
-        Label {
-            text: qsTr("Status: ");
-            color: Material.primaryHighlightedTextColor;
-            font.bold: true
-        }
-
-        RowLayout {
-            NetworkStatusIndicator {}
-
-            Label {
-                text: Network.status
-            }
-        }
-
-        Label {
-            text: qsTr("Network fees: ");
-            color: Material.primaryHighlightedTextColor;
-            font.bold: true
-        }
-        Label {
-            id: feeHistogram
-        }
-
-        Label {
-            text: qsTr("Gossip: ");
-            color: Material.primaryHighlightedTextColor;
-            font.bold: true
-        }
-        ColumnLayout {
-            visible: Config.useGossip
-            Label {
-                text: qsTr('%1 peers').arg(Network.gossipInfo.peers)
-            }
-            Label {
-                text: qsTr('%1 channels to fetch').arg(Network.gossipInfo.unknown_channels)
-            }
-            Label {
-                text: qsTr('%1 nodes, %2 channels').arg(Network.gossipInfo.db_nodes).arg(Network.gossipInfo.db_channels)
-            }
-        }
-        Label {
-            text: qsTr("disabled");
-            visible: !Config.useGossip
-        }
-    }
-
-    function setFeeHistogram() {
-        var txt = ''
-        Network.feeHistogram.forEach(function(item) {
-            txt = txt + item[0] + ': ' + item[1] + '\n';
-        })
-        feeHistogram.text = txt.trim()
-    }
-
-    Connections {
-        target: Network
-        function onFeeHistogramUpdated() {
-            setFeeHistogram()
-        }
-    }
-
-    Component.onCompleted: setFeeHistogram()
-}

electrum/gui/qml/components/WalletMainView.qml

@@ -75,7 +75,7 @@ Item {
             icon.color: 'transparent'
             action: Action {
                 text: qsTr('Network');
-                onTriggered: menu.openPage(Qt.resolvedUrl('NetworkStats.qml'))
+                onTriggered: menu.openPage(Qt.resolvedUrl('NetworkOverview.qml'))
                 icon.source: '../../icons/network.png'
             }
         }