qml: styling channel details

electrum/gui/qml/components/ChannelDetails.qml

@@ -11,85 +11,22 @@ Pane {
     id: root
     width: parent.width
     height: parent.height
+    padding: 0
 
     property string channelid
 
-    property string title: qsTr("Channel details")
-
-    property QtObject menu: Menu {
-        id: menu
-        MenuItem {
-            icon.color: 'transparent'
-            action: Action {
-                text: qsTr('Backup');
-                onTriggered: {
-                    var dialog = app.genericShareDialog.createObject(root,
-                        {
-                            title: qsTr('Channel Backup for %1').arg(channeldetails.short_cid),
-                            text: channeldetails.channelBackup(),
-                            text_help: channeldetails.channelBackupHelpText()
-                        }
-                    )
-                    dialog.open()
-                }
-                icon.source: '../../icons/file.png'
-            }
-        }
-        MenuItem {
-            icon.color: 'transparent'
-            action: Action {
-                text: qsTr('Close channel');
-                enabled: channeldetails.canClose
-                onTriggered: {
-                    var dialog = closechannel.createObject(root, { 'channelid': channelid })
-                    dialog.open()
-                }
-                icon.source: '../../icons/closebutton.png'
-            }
-        }
-        MenuItem {
-            icon.color: 'transparent'
-            action: Action {
-                text: qsTr('Delete channel');
-                enabled: channeldetails.canDelete
-                onTriggered: {
-                    var dialog = app.messageDialog.createObject(root,
-                            {
-                                'text': qsTr('Are you sure you want to delete this channel? This will purge associated transactions from your wallet history.'),
-                                'yesno': true
-                            }
-                    )
-                    dialog.yesClicked.connect(function() {
-                        channeldetails.deleteChannel()
-                        app.stack.pop()
-                        Daemon.currentWallet.historyModel.init_model() // needed here?
-                        Daemon.currentWallet.channelModel.remove_channel(channelid)
-                    })
-                    dialog.open()
-                }
-                icon.source: '../../icons/delete.png'
-            }
-        }
-        MenuItem {
-            icon.color: 'transparent'
-            action: Action {
-                enabled: channeldetails.isOpen
-                text: channeldetails.frozenForSending ? qsTr('Unfreeze (for sending)') : qsTr('Freeze (for sending)')
-                onTriggered: channeldetails.freezeForSending()
-            }
-        }
-        MenuItem {
-            icon.color: 'transparent'
-            action: Action {
-                enabled: channeldetails.isOpen
-                text: channeldetails.frozenForReceiving ? qsTr('Unfreeze (for receiving)') : qsTr('Freeze (for receiving)')
-                onTriggered: channeldetails.freezeForReceiving()
-            }
-        }
-    }
+    ColumnLayout {
+        anchors.fill: parent
+        spacing: 0
 
         Flickable {
-        anchors.fill: parent
+            Layout.preferredWidth: parent.width
+            Layout.fillHeight: true
+
+            leftMargin: constants.paddingLarge
+            rightMargin: constants.paddingLarge
+            topMargin: constants.paddingLarge
+
             contentHeight: rootLayout.height
             clip:true
             interactive: height < contentHeight
@@ -99,6 +36,20 @@ Pane {
                 width: parent.width
                 columns: 2
 
+                Label {
+                    Layout.columnSpan: 2
+                    text: qsTr('Channel details')
+                    font.pixelSize: constants.fontSizeLarge
+                    color: Material.accentColor
+                }
+
+                Rectangle {
+                    Layout.columnSpan: 2
+                    Layout.fillWidth: true
+                    height: 1
+                    color: Material.accentColor
+                }
+
                 Label {
                     text: qsTr('Node name')
                     color: Material.accentColor
@@ -262,6 +213,83 @@ Pane {
             }
         }
 
+        FlatButton {
+            Layout.fillWidth: true
+            text: qsTr('Backup');
+            onClicked: {
+                var dialog = app.genericShareDialog.createObject(root,
+                    {
+                        title: qsTr('Channel Backup for %1').arg(channeldetails.short_cid),
+                        text: channeldetails.channelBackup(),
+                        text_help: channeldetails.channelBackupHelpText()
+                    }
+                )
+                dialog.open()
+            }
+            icon.source: '../../icons/file.png'
+        }
+
+        RowLayout {
+            Layout.fillWidth: true
+            FlatButton {
+                Layout.fillWidth: true
+                Layout.preferredWidth: 1
+                text: qsTr('Close channel');
+                enabled: channeldetails.canClose
+                onClicked: {
+                    var dialog = closechannel.createObject(root, { 'channelid': channelid })
+                    dialog.open()
+                }
+                icon.source: '../../icons/closebutton.png'
+            }
+
+            FlatButton {
+                Layout.fillWidth: true
+                Layout.preferredWidth: 1
+                text: qsTr('Delete channel');
+                enabled: channeldetails.canDelete
+                onClicked: {
+                    var dialog = app.messageDialog.createObject(root,
+                            {
+                                'text': qsTr('Are you sure you want to delete this channel? This will purge associated transactions from your wallet history.'),
+                                'yesno': true
+                            }
+                    )
+                    dialog.yesClicked.connect(function() {
+                        channeldetails.deleteChannel()
+                        app.stack.pop()
+                        Daemon.currentWallet.historyModel.init_model() // needed here?
+                        Daemon.currentWallet.channelModel.remove_channel(channelid)
+                    })
+                    dialog.open()
+                }
+                icon.source: '../../icons/delete.png'
+            }
+        }
+
+        RowLayout {
+            Layout.fillWidth: true
+
+            FlatButton {
+                Layout.fillWidth: true
+                Layout.preferredWidth: 1
+                enabled: channeldetails.isOpen
+                text: channeldetails.frozenForSending ? qsTr('Unfreeze (for sending)') : qsTr('Freeze (for sending)')
+                icon.source: '../../icons/seal.png'
+                onClicked: channeldetails.freezeForSending()
+            }
+            FlatButton {
+                Layout.fillWidth: true
+                Layout.preferredWidth: 1
+                enabled: channeldetails.isOpen
+                text: channeldetails.frozenForReceiving ? qsTr('Unfreeze (for receiving)') : qsTr('Freeze (for receiving)')
+                icon.source: '../../icons/seal.png'
+                onClicked: channeldetails.freezeForReceiving()
+            }
+        }
+
+    }
+
     ChannelDetails {
         id: channeldetails
         wallet: Daemon.currentWallet