qml: generalize Wizard

electrum/gui/qml/components/NewWalletWizard.qml

@@ -2,66 +2,31 @@ import QtQuick 2.6
 import QtQuick.Layouts 1.0
 import QtQuick.Controls 2.1
 
-Dialog {
+Wizard {
     id: walletwizard
 
     title: qsTr('New Wallet')
-    modal: true
 
     enter: null // disable transition
 
-    property var wizard_data
-
-    function _setWizardData(wdata) {
-        wizard_data = {}
-        Object.assign(wizard_data, wdata) // deep copy
-        console.log('wizard data is now :' + JSON.stringify(wizard_data))
-    }
-
-    // helper function to dynamically load wizard page components
-    // and add them to the SwipeView
-    // Here we do some manual binding of page.valid -> pages.pagevalid
-    // to propagate the state without the binding going stale
-    function _loadNextComponent(comp, wdata={}) {
-        var page = comp.createObject(pages, {
-            'visible': Qt.binding(function() {
-                return pages.currentItem === this
-            })
-        })
-        page.validChanged.connect(function() {
-            pages.pagevalid = page.valid
-        } )
-        page.lastChanged.connect(function() {
-            pages.lastpage = page.last
-        } )
-        Object.assign(page.wizard_data, wdata) // deep copy
-        pages.pagevalid = page.valid
-
-        return page
-    }
-
     // State transition functions. These functions are called when the 'Next'
-    // button is pressed. They take data from the component, add it to the
+    // button is pressed. Depending on the data create the next page
-    // wizard_data object, and depending on the data create the next page
     // in the conversation.
 
     function walletnameDone(d) {
         console.log('wallet name done')
-        wizard_data['wallet_name'] = pages.currentItem.wallet_name
         var page = _loadNextComponent(components.wallettype, wizard_data)
         page.next.connect(function() {wallettypeDone()})
     }
 
     function wallettypeDone(d) {
         console.log('wallet type done')
-        wizard_data['wallet_type'] = pages.currentItem.wallet_type
         var page = _loadNextComponent(components.keystore, wizard_data)
         page.next.connect(function() {keystoretypeDone()})
     }
 
     function keystoretypeDone(d) {
         console.log('keystore type done')
-        wizard_data['keystore_type'] = pages.currentItem.keystore_type
         var page
         switch(wizard_data['keystore_type']) {
         case 'createseed':
@@ -79,7 +44,6 @@ Dialog {
 
     function createseedDone(d) {
         console.log('create seed done')
-        wizard_data['seed'] = pages.currentItem.seed
         var page = _loadNextComponent(components.confirmseed, wizard_data)
         page.next.connect(function() {confirmseedDone()})
     }
@@ -93,7 +57,6 @@ Dialog {
 
     function haveseedDone(d) {
         console.log('have seed done')
-        wizard_data['seed'] = pages.currentItem.seed
         var page = _loadNextComponent(components.walletpassword, wizard_data)
         page.next.connect(function() {walletpasswordDone()})
         page.last = true
@@ -101,39 +64,13 @@ Dialog {
 
     function walletpasswordDone(d) {
         console.log('walletpassword done')
-        wizard_data['password'] = pages.currentItem.password
-        wizard_data['encrypt'] = pages.currentItem.encrypt
         var page = _loadNextComponent(components.walletpassword, wizard_data)
     }
 
-
+    WizardComponents {
-    ColumnLayout {
+        id: components
-        anchors.fill: parent
-
-        SwipeView {
-            id: pages
-            Layout.fillHeight: true
-            interactive: false
-
-            function prev() {
-                currentIndex = currentIndex - 1
-                _setWizardData(pages.contentChildren[currentIndex].wizard_data)
-                pages.pagevalid = pages.contentChildren[currentIndex].valid
-                pages.contentChildren[currentIndex+1].destroy()
-            }
-
-            function next() {
-                currentItem.next()
-                currentIndex = currentIndex + 1
-            }
-
-            function finalize() {
-                walletwizard.accept()
     }
 
-            property bool pagevalid: false
-            property bool lastpage: false
-
     Component.onCompleted: {
         _setWizardData({})
         var start = _loadNextComponent(components.walletname)
@@ -142,49 +79,3 @@ Dialog {
 
 }
 
-        PageIndicator {
-            id: indicator
-
-            Layout.alignment: Qt.AlignHCenter
-
-            count: pages.count
-            currentIndex: pages.currentIndex
-        }
-
-        RowLayout {
-            Layout.alignment: Qt.AlignHCenter
-            Button {
-                visible: pages.currentIndex == 0
-                text: qsTr("Cancel")
-                onClicked: walletwizard.close()
-            }
-
-            Button {
-                visible: pages.currentIndex > 0
-                text: qsTr('Back')
-                onClicked: pages.prev()
-            }
-
-            Button {
-                text: "Next"
-                visible: !pages.lastpage
-                enabled: pages.pagevalid
-                onClicked: pages.next()
-            }
-
-            Button {
-                text: "Create"
-                visible: pages.lastpage
-                enabled: pages.pagevalid
-                onClicked: pages.finalize()
-            }
-
-        }
-    }
-
-    WizardComponents {
-        id: components
-    }
-
-}
-

electrum/gui/qml/components/Wizard.qml

@@ -0,0 +1,127 @@
+import QtQuick 2.6
+import QtQuick.Layouts 1.0
+import QtQuick.Controls 2.1
+
+Dialog {
+    id: wizard
+    modal: true
+
+    width: parent.width
+    height: parent.height
+
+    property var wizard_data
+    property alias pages : pages
+
+    function _setWizardData(wdata) {
+        wizard_data = {}
+        Object.assign(wizard_data, wdata) // deep copy
+        console.log('wizard data is now :' + JSON.stringify(wizard_data))
+    }
+
+    // helper function to dynamically load wizard page components
+    // and add them to the SwipeView
+    // Here we do some manual binding of page.valid -> pages.pagevalid and
+    // page.last -> pages.lastpage to propagate the state without the binding
+    // going stale.
+    function _loadNextComponent(comp, wdata={}) {
+        var page = comp.createObject(pages, {
+            'visible': Qt.binding(function() {
+                return pages.currentItem === this
+            })
+        })
+        page.validChanged.connect(function() {
+            pages.pagevalid = page.valid
+        } )
+        page.lastChanged.connect(function() {
+            pages.lastpage = page.last
+        } )
+        Object.assign(page.wizard_data, wdata) // deep copy
+        pages.pagevalid = page.valid
+        pages.lastpage = page.last
+
+        return page
+    }
+
+    ColumnLayout {
+        anchors.fill: parent
+
+        SwipeView {
+            id: pages
+            Layout.fillWidth: true
+            interactive: false
+
+            function prev() {
+                currentIndex = currentIndex - 1
+                _setWizardData(pages.contentChildren[currentIndex].wizard_data)
+                pages.pagevalid = pages.contentChildren[currentIndex].valid
+                pages.lastpage = pages.contentChildren[currentIndex].last
+                pages.contentChildren[currentIndex+1].destroy()
+            }
+
+            function next() {
+                currentItem.accept()
+                _setWizardData(pages.contentChildren[currentIndex].wizard_data)
+                currentItem.next()
+                currentIndex = currentIndex + 1
+            }
+
+            function finish() {
+                currentItem.accept()
+                _setWizardData(pages.contentChildren[currentIndex].wizard_data)
+                wizard.accept()
+            }
+
+            property bool pagevalid: false
+            property bool lastpage: false
+
+            Component.onCompleted: {
+                _setWizardData({})
+            }
+
+        }
+
+        ColumnLayout {
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
+
+            PageIndicator {
+                id: indicator
+
+                Layout.alignment: Qt.AlignHCenter
+
+                count: pages.count
+                currentIndex: pages.currentIndex
+            }
+
+            RowLayout {
+                Layout.alignment: Qt.AlignHCenter
+                Button {
+                    visible: pages.currentIndex == 0
+                    text: qsTr("Cancel")
+                    onClicked: wizard.reject()
+                }
+
+                Button {
+                    visible: pages.currentIndex > 0
+                    text: qsTr('Back')
+                    onClicked: pages.prev()
+                }
+
+                Button {
+                    text: qsTr("Next")
+                    visible: !pages.lastpage
+                    enabled: pages.pagevalid
+                    onClicked: pages.next()
+                }
+
+                Button {
+                    text: qsTr("Finish")
+                    visible: pages.lastpage
+                    enabled: pages.pagevalid
+                    onClicked: pages.finish()
+                }
+
+            }
+        }
+    }
+
+}

electrum/gui/qml/components/WizardComponent.qml

@@ -2,6 +2,7 @@ import QtQuick 2.0
 
 Item {
     signal next
+    signal accept
     property var wizard_data : ({})
     property bool valid
     property bool last: false

electrum/gui/qml/components/WizardComponents.qml

@@ -6,7 +6,11 @@ Item {
     property Component walletname: Component {
         WizardComponent {
             valid: wallet_name.text.length > 0
-            property alias wallet_name: wallet_name.text
+            //property alias wallet_name: wallet_name.text
+            onAccept: {
+                wizard_data['wallet_name'] = wallet_name.text
+            }
+
             GridLayout {
                 columns: 1
                 Label { text: qsTr('Wallet name') }
@@ -20,13 +24,13 @@ Item {
     property Component wallettype: Component {
         WizardComponent {
             valid: wallettypegroup.checkedButton !== null
-            property string wallet_type
+
+            onAccept: {
+                wizard_data['wallet_type'] = wallettypegroup.checkedButton.wallettype
+            }
 
             ButtonGroup {
                 id: wallettypegroup
-                onCheckedButtonChanged: {
-                    wallet_type = checkedButton.wallettype
-                }
             }
 
             GridLayout {
@@ -63,13 +67,13 @@ Item {
     property Component keystore: Component {
         WizardComponent {
             valid: keystoregroup.checkedButton !== null
-            property string keystore_type
+
+            onAccept: {
+                wizard_data['keystore_type'] = keystoregroup.checkedButton.keystoretype
+            }
 
             ButtonGroup {
                 id: keystoregroup
-                onCheckedButtonChanged: {
-                    keystore_type = checkedButton.keystoretype
-                }
             }
 
             GridLayout {
@@ -106,8 +110,12 @@ Item {
     property Component createseed: Component {
         WizardComponent {
             valid: true
-            property alias seed: seedtext.text
+
-            property alias extend: extendcb.checked
+            onAccept: {
+                wizard_data['seed'] = seedtext.text
+                wizard_data['seed_extend'] = extendcb.checked
+            }
+
             GridLayout {
                 columns: 1
                 Label { text: qsTr('Generating seed') }
@@ -129,9 +137,13 @@ Item {
     property Component haveseed: Component {
         WizardComponent {
             valid: true
-            property alias seed: seedtext.text
+
-            property alias extend: extendcb.checked
+            onAccept: {
-            property alias bip39: bip39cb.checked
+                wizard_data['seed'] = seedtext.text
+                wizard_data['seed_extend'] = extendcb.checked
+                wizard_data['seed_bip39'] = bip39cb.checked
+            }
+
             GridLayout {
                 columns: 1
                 Label { text: qsTr('Enter your seed') }
@@ -179,8 +191,11 @@ Item {
         WizardComponent {
             valid: password1.text === password2.text
 
-            property alias password: password1.text
+            onAccept: {
-            property alias encrypt: doencrypt.checked
+                wizard_data['password'] = password1.text
+                wizard_data['encrypt'] = doencrypt.checked
+            }
+
             GridLayout {
                 columns: 1
                 Label { text: qsTr('Password protect wallet?') }