flickable for wizardController

2 files changed, 85 insertions, 41 deletions

diff --git a/wizard/WizardController.qml b/wizard/WizardController.qml
index e380aed9..6bac1e6a 100644
--- a/wizard/WizardController.qml
+++ b/wizard/WizardController.qml
@@ -26,13 +26,15 @@
 // STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF
 // THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
 
+import QtQml 2.0
 import QtQuick 2.7
+import QtQuick.Controls 2.0
 import QtQuick.Controls 1.4
-import QtQuick.Controls.Styles 1.4
-import QtQuick.Layouts 1.2
+import QtQuick.Layouts 1.1
 import QtQuick.Dialogs 1.2
-
+import QtGraphicalEffects 1.0
 import moneroComponents.Wallet 1.0
+
 import "../js/Wizard.js" as Wizard
 import "../js/Windows.js" as Windows
 import "../js/Utils.js" as Utils
@@ -104,6 +106,9 @@ Rectangle {
     // recovery made (restore wallet)
     property string walletRestoreMode: 'seed'  // seed, keys, qr
 
+    // flickable margin
+    property int flickableHeightMargin
+
     property int layoutScale: {
         if(isMobile){
             return 0;
@@ -182,75 +187,109 @@ Rectangle {
             State {
                 name: "wizardLanguage"
                 PropertyChanges { target: wizardStateView; currentView: wizardStateView.wizardLanguageView }
+                PropertyChanges { target: wizardFlickable; contentHeight: wizardStateView.wizardLanguageView.childrenRect.height + wizardController.flickableHeightMargin }
             }, State {
                 name: "wizardHome"
                 PropertyChanges { target: wizardStateView; currentView: wizardStateView.wizardHomeView }
+                PropertyChanges { target: wizardFlickable; contentHeight: wizardStateView.wizardHomeView.childrenRect.height + wizardController.flickableHeightMargin }
             }, State {
                 name: "wizardCreateWallet1"
                 PropertyChanges { target: wizardStateView; currentView: wizardStateView.wizardCreateWallet1View }
+                PropertyChanges { target: wizardFlickable; contentHeight: wizardStateView.wizardCreateWallet1View.childrenRect.height + wizardController.flickableHeightMargin }
             }, State {
                 name: "wizardCreateWallet2"
                 PropertyChanges { target: wizardStateView; currentView: wizardStateView.wizardCreateWallet2View }
+                PropertyChanges { target: wizardFlickable; contentHeight: wizardStateView.wizardCreateWallet2View.childrenRect.height + wizardController.flickableHeightMargin }
             }, State {
                 name: "wizardCreateWallet3"
                 PropertyChanges { target: wizardStateView; currentView: wizardStateView.wizardCreateWallet3View }
+                PropertyChanges { target: wizardFlickable; contentHeight: wizardStateView.wizardCreateWallet3View.height + wizardController.flickableHeightMargin + 400 }
             }, State {
                 name: "wizardCreateWallet4"
                 PropertyChanges { target: wizardStateView; currentView: wizardStateView.wizardCreateWallet4View }
+                PropertyChanges { target: wizardFlickable; contentHeight: wizardStateView.wizardCreateWallet4View.childrenRect.height + wizardController.flickableHeightMargin }
             }, State {
                 name: "wizardRestoreWallet1"
                 PropertyChanges { target: wizardStateView; currentView: wizardStateView.wizardRestoreWallet1View }
+                PropertyChanges { target: wizardFlickable; contentHeight: wizardStateView.wizardRestoreWallet1View.childrenRect.height + wizardController.flickableHeightMargin }
             }, State {
                 name: "wizardRestoreWallet2"
                 PropertyChanges { target: wizardStateView; currentView: wizardStateView.wizardRestoreWallet2View }
+                PropertyChanges { target: wizardFlickable; contentHeight: wizardStateView.wizardRestoreWallet2View.childrenRect.height + wizardController.flickableHeightMargin }
             }, State {
                 name: "wizardRestoreWallet3"
                 PropertyChanges { target: wizardStateView; currentView: wizardStateView.wizardRestoreWallet3View }
+                PropertyChanges { target: wizardFlickable; contentHeight: wizardStateView.wizardRestoreWallet3View.childrenRect.height + wizardController.flickableHeightMargin + 400 }
             }, State {
                 name: "wizardRestoreWallet4"
                 PropertyChanges { target: wizardStateView; currentView: wizardStateView.wizardRestoreWallet4View }
+                PropertyChanges { target: wizardFlickable; contentHeight: wizardStateView.wizardRestoreWallet4View.childrenRect.height + wizardController.flickableHeightMargin }
             }, State {
                 name: "wizardCreateDevice1"
                 PropertyChanges { target: wizardStateView; currentView: wizardStateView.wizardCreateDevice1View }
+                PropertyChanges { target: wizardFlickable; contentHeight: wizardStateView.wizardCreateDevice1View.childrenRect.height + wizardController.flickableHeightMargin }
             }, State {
                 name: "wizardOpenWallet1"
                 PropertyChanges { target: wizardStateView; currentView: wizardStateView.wizardOpenWallet1View }
+                PropertyChanges { target: wizardFlickable; contentHeight: wizardStateView.wizardOpenWallet1View.childrenRect.height + wizardController.flickableHeightMargin }
             }, State {
                 name: "wizardModeSelection"
                 PropertyChanges { target: wizardStateView; currentView: wizardStateView.wizardModeSelectionView }
+                PropertyChanges { target: wizardFlickable; contentHeight: wizardStateView.wizardModeSelectionView.childrenRect.height + wizardController.flickableHeightMargin }
             }, State {
                 name: "wizardModeRemoteNodeWarning"
                 PropertyChanges { target: wizardStateView; currentView: wizardStateView.wizardModeRemoteNodeWarningView }
+                PropertyChanges { target: wizardFlickable; contentHeight: wizardStateView.wizardModeRemoteNodeWarningView.childrenRect.height + wizardController.flickableHeightMargin }
             }, State {
                 name: "wizardModeBootstrap"
                 PropertyChanges { target: wizardStateView; currentView: wizardStateView.wizardModeBootstrapView }
+                PropertyChanges { target: wizardFlickable; contentHeight: wizardStateView.wizardModeBootstrapView.childrenRect.height + wizardController.flickableHeightMargin }
             }
         ]
 
-        StackView {
-            id: stackView
-            initialItem: wizardStateView.wizardLanguageView
+        Flickable {
+            id: wizardFlickable
             anchors.fill: parent
-            clip: false
+            clip: true
+
+            ScrollBar.vertical: ScrollBar {
+                parent: wizardFlickable.parent
+                anchors.left: parent.right
+                anchors.leftMargin: 3
+                anchors.top: parent.top
+                anchors.topMargin: 4
+                anchors.bottom: parent.bottom
+            }
+
+            onFlickingChanged: {
+                releaseFocus();
+            }
+
+            StackView {
+                id: stackView
+                initialItem: wizardStateView.wizardLanguageView
+                anchors.fill: parent
+                clip: true
 
-            delegate: StackViewDelegate {
-                pushTransition: StackViewTransition {
-                     PropertyAnimation {
-                         target: enterItem
-                         property: "x"
-                         from: target.width
-                         to: 0
-                         duration: 300
-                         easing.type: Easing.OutCubic
-                     }
-                     PropertyAnimation {
-                         target: exitItem
-                         property: "x"
-                         from: 0
-                         to: 0 - target.width
-                         duration: 300
-                         easing.type: Easing.OutCubic
-                     }
+                delegate: StackViewDelegate {
+                    pushTransition: StackViewTransition {
+                         PropertyAnimation {
+                             target: enterItem
+                             property: "x"
+                             from: target.width
+                             to: 0
+                             duration: 300
+                             easing.type: Easing.OutCubic
+                         }
+                         PropertyAnimation {
+                             target: exitItem
+                             property: "x"
+                             from: 0
+                             to: 0 - target.width
+                             duration: 300
+                             easing.type: Easing.OutCubic
+                         }
+                    }
                 }
             }
         }
diff --git a/wizard/WizardDaemonSettings.qml b/wizard/WizardDaemonSettings.qml
index 62aa2cbe..3d672747 100644
--- a/wizard/WizardDaemonSettings.qml
+++ b/wizard/WizardDaemonSettings.qml
@@ -48,6 +48,7 @@ ColumnLayout {
 
     MoneroComponents.RadioButton {
         id: localNode
+        Layout.fillWidth: true
         text: qsTr("Start a node automatically in background (recommended)") + translationManager.emptyString
         fontSize: 16 * scaleRatio
         checked: !appWindow.persistentSettings.useRemoteNode && !isAndroid && !isIOS
@@ -59,8 +60,8 @@ ColumnLayout {
     }
 
     ColumnLayout {
-        visible: localNode.checked
         id: blockchainFolderRow
+        visible: localNode.checked
         spacing: 20 * scaleRatio
 
         Layout.topMargin: 8 * scaleRatio
@@ -148,7 +149,6 @@ ColumnLayout {
         ColumnLayout {
             spacing: 8
             Layout.fillWidth: true
-            Layout.bottomMargin: 12 * scaleRatio
 
             MoneroComponents.RemoteNodeEdit {
                 id: bootstrapNodeEdit
@@ -176,25 +176,30 @@ ColumnLayout {
         }
     }
 
-
-    RowLayout {
-        MoneroComponents.RadioButton {
-            id: remoteNode
-            text: qsTr("Connect to a remote node") + translationManager.emptyString
-            fontSize: 16 * scaleRatio
-            checked: appWindow.persistentSettings.useRemoteNode
-            onClicked: {
-                checked = true
-                localNode.checked = false
-            }
+    MoneroComponents.RadioButton {
+        id: remoteNode
+        Layout.fillWidth: true
+        Layout.topMargin: 8 * scaleRatio
+        text: qsTr("Connect to a remote node") + translationManager.emptyString
+        fontSize: 16 * scaleRatio
+        checked: appWindow.persistentSettings.useRemoteNode
+        onClicked: {
+            checked = true
+            localNode.checked = false
         }
     }
 
-    RowLayout {
+    ColumnLayout {
+        visible: remoteNode.checked
+        spacing: 0 * scaleRatio
+
+        Layout.topMargin: 8 * scaleRatio
+        Layout.fillWidth: true
+
         MoneroComponents.RemoteNodeEdit {
-            Layout.minimumWidth: 300 * scaleRatio
-            opacity: remoteNode.checked
             id: remoteNodeEdit
+            Layout.fillWidth: true
+
             property var rna: persistentSettings.remoteNodeAddress
             daemonAddrText: rna.search(":") != -1 ? rna.split(":")[0].trim() : ""
             daemonPortText: rna.search(":") != -1 ? (rna.split(":")[1].trim() == "") ? appWindow.getDefaultDaemonRpcPort(persistentSettings.nettype) : persistentSettings.remoteNodeAddress.split(":")[1] : ""