qml: keep QEAmount instances in qechanneldetails,

use millisat amounts for local/remote capacity and can send/receive,
refactor channel capacity graphic to ChannelBar and use that as well
in ChannelDetails

electrum/gui/qml/components/ChannelDetails.qml

@@ -31,16 +31,21 @@ Pane {
             clip:true
             interactive: height < contentHeight
 
-            GridLayout {
+            ColumnLayout {
                 id: rootLayout
                 width: parent.width
-                columns: 2
 
                 Heading {
-                    Layout.columnSpan: 2
+                    // Layout.columnSpan: 2
                     text: !channeldetails.isBackup ? qsTr('Lightning Channel') : qsTr('Channel Backup')
                 }
 
+                GridLayout {
+                    // id: rootLayout
+                    // width: parent.width
+                    Layout.fillWidth: true
+                    columns: 2
+
                     Label {
                         visible: channeldetails.name
                         text: qsTr('Node name')
@@ -48,6 +53,7 @@ Pane {
                     }
 
                     Label {
+                        Layout.fillWidth: true
                         visible: channeldetails.name
                         text: channeldetails.name
                     }
@@ -68,6 +74,9 @@ Pane {
 
                     Label {
                         text: channeldetails.state
+                        color: channeldetails.state == 'OPEN'
+                                ? constants.colorChannelOpen
+                                : Material.foreground
                     }
 
                     Label {
@@ -79,6 +88,72 @@ Pane {
                         text: channeldetails.initiator
                     }
 
+                    Label {
+                        text: qsTr('Channel type')
+                        color: Material.accentColor
+                    }
+
+                    Label {
+                        text: channeldetails.channelType
+                    }
+
+                    Label {
+                        text: qsTr('Remote node ID')
+                        Layout.columnSpan: 2
+                        color: Material.accentColor
+                    }
+
+                    TextHighlightPane {
+                        Layout.columnSpan: 2
+                        Layout.fillWidth: true
+
+                        RowLayout {
+                            width: parent.width
+                            Label {
+                                text: channeldetails.pubkey
+                                font.pixelSize: constants.fontSizeLarge
+                                font.family: FixedFont
+                                Layout.fillWidth: true
+                                wrapMode: Text.Wrap
+                            }
+                            ToolButton {
+                                icon.source: '../../icons/share.png'
+                                icon.color: 'transparent'
+                                onClicked: {
+                                    var dialog = app.genericShareDialog.createObject(root,
+                                        { title: qsTr('Channel node ID'), text: channeldetails.pubkey }
+                                    )
+                                    dialog.open()
+                                }
+                            }
+                        }
+                    }
+                }
+
+                Label {
+                    text: qsTr('Capacity and ratio')
+                    color: Material.accentColor
+                }
+
+                TextHighlightPane {
+                    Layout.fillWidth: true
+                    padding: constants.paddingLarge
+
+                    GridLayout {
+                        width: parent.width
+                        columns: 2
+                        rowSpacing: constants.paddingSmall
+
+                        ChannelBar {
+                            Layout.columnSpan: 2
+                            Layout.fillWidth: true
+                            Layout.topMargin: constants.paddingLarge
+                            Layout.bottomMargin: constants.paddingXLarge
+                            capacity: channeldetails.capacity
+                            localCapacity: channeldetails.localCapacity
+                            remoteCapacity: channeldetails.remoteCapacity
+                        }
+
                         Label {
                             text: qsTr('Capacity')
                             color: Material.accentColor
@@ -160,48 +235,9 @@ Pane {
                             visible: !channeldetails.isOpen
                             text: qsTr('n/a (channel not open)')
                         }
-
-                Label {
-                    text: qsTr('Channel type')
-                    color: Material.accentColor
-                }
-
-                Label {
-                    text: channeldetails.channelType
-                }
-
-                Label {
-                    text: qsTr('Remote node ID')
-                    Layout.columnSpan: 2
-                    color: Material.accentColor
                     }
 
-                TextHighlightPane {
-                    Layout.columnSpan: 2
-                    Layout.fillWidth: true
-
-                    RowLayout {
-                        width: parent.width
-                        Label {
-                            text: channeldetails.pubkey
-                            font.pixelSize: constants.fontSizeLarge
-                            font.family: FixedFont
-                            Layout.fillWidth: true
-                            wrapMode: Text.Wrap
                 }
-                        ToolButton {
-                            icon.source: '../../icons/share.png'
-                            icon.color: 'transparent'
-                            onClicked: {
-                                var dialog = app.genericShareDialog.createObject(root,
-                                    { title: qsTr('Channel node ID'), text: channeldetails.pubkey }
-                                )
-                                dialog.open()
-                            }
-                        }
-                    }
-                }
-
             }
         }
 

electrum/gui/qml/components/controls/ChannelBar.qml

@@ -0,0 +1,48 @@
+import QtQuick 2.6
+import QtQuick.Controls 2.0
+import QtQuick.Layouts 1.0
+import QtQuick.Controls.Material 2.0
+
+import org.electrum 1.0
+
+Item {
+    property Amount capacity
+    property Amount localCapacity
+    property Amount remoteCapacity
+
+    height: 10
+    implicitWidth: 100
+
+    onWidthChanged: {
+        var cap = capacity.satsInt * 1000
+        var twocap = cap * 2
+        b1.width = width * (cap - localCapacity.msatsInt) / twocap
+        b2.width = width * localCapacity.msatsInt / twocap
+        b3.width = width * remoteCapacity.msatsInt / twocap
+        b4.width = width * (cap - remoteCapacity.msatsInt) / twocap
+    }
+    Rectangle {
+        id: b1
+        x: 0
+        height: parent.height
+        color: 'gray'
+    }
+    Rectangle {
+        id: b2
+        anchors.left: b1.right
+        height: parent.height
+        color: constants.colorLightningLocal
+    }
+    Rectangle {
+        id: b3
+        anchors.left: b2.right
+        height: parent.height
+        color: constants.colorLightningRemote
+    }
+    Rectangle {
+        id: b4
+        anchors.left: b3.right
+        height: parent.height
+        color: 'gray'
+    }
+}

electrum/gui/qml/components/controls/ChannelDelegate.qml

@@ -105,44 +105,14 @@ ItemDelegate {
             }
         }
 
-        Item {
+        ChannelBar {
-            id: chviz
-            visible: !_closed
             Layout.fillWidth: true
-            height: 10
+            visible: !_closed
-            onWidthChanged: {
+            capacity: model.capacity
-                var cap = model.capacity.satsInt * 1000
+            localCapacity: model.local_capacity
-                var twocap = cap * 2
+            remoteCapacity: model.remote_capacity
-                b1.width = width * (cap - model.local_capacity.msatsInt) / twocap
-                b2.width = width * model.local_capacity.msatsInt / twocap
-                b3.width = width * model.remote_capacity.msatsInt / twocap
-                b4.width = width * (cap - model.remote_capacity.msatsInt) / twocap
-            }
-            Rectangle {
-                id: b1
-                x: 0
-                height: parent.height
-                color: 'gray'
-            }
-            Rectangle {
-                id: b2
-                anchors.left: b1.right
-                height: parent.height
-                color: constants.colorLightningLocal
-            }
-            Rectangle {
-                id: b3
-                anchors.left: b2.right
-                height: parent.height
-                color: constants.colorLightningRemote
-            }
-            Rectangle {
-                id: b4
-                anchors.left: b3.right
-                height: parent.height
-                color: 'gray'
-            }
         }
+
         Item {
             visible: _closed
             Layout.fillWidth: true

electrum/gui/qml/qechanneldetails.py

@@ -33,6 +33,12 @@ class QEChannelDetails(QObject, QtEventListener):
         self._channelid = None
         self._channel = None
 
+        self._capacity = QEAmount()
+        self._local_capacity = QEAmount()
+        self._remote_capacity = QEAmount()
+        self._can_receive = QEAmount()
+        self._can_send = QEAmount()
+
         self.register_callbacks()
         self.destroyed.connect(lambda: self.on_destroy())
 
@@ -101,23 +107,31 @@ class QEChannelDetails(QObject, QtEventListener):
 
     @pyqtProperty(QEAmount, notify=channelChanged)
     def capacity(self):
-        self._capacity = QEAmount(amount_sat=self._channel.get_capacity())
+        self._capacity.copyFrom(QEAmount(amount_sat=self._channel.get_capacity()))
         return self._capacity
 
+    @pyqtProperty(QEAmount, notify=channelChanged)
+    def localCapacity(self):
+        if not self._channel.is_backup():
+            self._local_capacity = QEAmount(amount_msat=self._channel.balance(LOCAL))
+        return self._local_capacity
+
+    @pyqtProperty(QEAmount, notify=channelChanged)
+    def remoteCapacity(self):
+        if not self._channel.is_backup():
+            self._remote_capacity.copyFrom(QEAmount(amount_msat=self._channel.balance(REMOTE)))
+        return self._remote_capacity
+
     @pyqtProperty(QEAmount, notify=channelChanged)
     def canSend(self):
-        if self._channel.is_backup():
+        if not self._channel.is_backup():
-            self._can_send = QEAmount()
+            self._can_send.copyFrom(QEAmount(amount_msat=self._channel.available_to_spend(LOCAL)))
-        else:
-            self._can_send = QEAmount(amount_sat=self._channel.available_to_spend(LOCAL)/1000)
         return self._can_send
 
     @pyqtProperty(QEAmount, notify=channelChanged)
     def canReceive(self):
-        if self._channel.is_backup():
+        if not self._channel.is_backup():
-            self._can_receive = QEAmount()
+            self._can_receive.copyFrom(QEAmount(amount_msat=self._channel.available_to_spend(REMOTE)))
-        else:
-            self._can_receive = QEAmount(amount_sat=self._channel.available_to_spend(REMOTE)/1000)
         return self._can_receive
 
     @pyqtProperty(bool, notify=channelChanged)