wizardView: add scroll view in every page

Also fix the view layout that is affected by client string update

Gitlab: #85
Change-Id: I0f34496325ebe15cc651204130a3a89e12b37d14

src/wizardview/WizardView.qml

@@ -53,6 +53,7 @@ Rectangle {
     }
 
     readonly property int layoutSpacing: 12
+    readonly property int backButtonMargins: 20
 
     property int textFontSize: 9
     property int wizardMode: WizardView.CREATE
@@ -123,7 +124,7 @@ Rectangle {
             isRdv = false
             createAccountPage.nameRegistrationUIState = UsernameLineEdit.NameRegistrationState.BLANK
         } else if (pageIndex === WizardView.WizardViewPageIndex.CREATEACCOUNTPAGE) {
-            createAccountPage.initializeOnShowUp()
+            createAccountPage.initializeOnShowUp(false)
         } else if (pageIndex === WizardView.WizardViewPageIndex.CREATESIPACCOUNTPAGE) {
             createSIPAccountPage.initializeOnShowUp()
         } else if (pageIndex === WizardView.WizardViewPageIndex.IMPORTFROMDEVICEPAGE) {
@@ -169,16 +170,45 @@ Rectangle {
         onClicked: forceActiveFocus()
     }
 
-    StackLayout {
+    ScrollView {
-        id: controlPanelStackView
+        id: wizardViewScrollView
+
+        property ScrollBar vScrollBar: ScrollBar.vertical
 
         anchors.fill: parent
 
+        ScrollBar.horizontal.policy: ScrollBar.AlwaysOff
+        ScrollBar.vertical.policy: ScrollBar.AsNeeded
+
+        clip: true
+        contentHeight: controlPanelStackView.height
+
+        StackLayout {
+            id: controlPanelStackView
+
+            anchors.centerIn: parent
+
+            width: wizardViewScrollView.width
+
             currentIndex: WizardView.WizardViewPageIndex.WELCOMEPAGE
 
+            Component.onCompleted: {
+                // avoid binding loop
+                height = Qt.binding(function (){
+                    var index = currentIndex
+                            === WizardView.WizardViewPageIndex.CREATERENDEZVOUS ?
+                                WizardView.WizardViewPageIndex.CREATEACCOUNTPAGE : currentIndex
+                    return Math.max(
+                                controlPanelStackView.itemAt(index).preferredHeight,
+                                wizardViewScrollView.height)
+                })
+            }
+
             WelcomePage {
                 id: welcomePage
 
+                Layout.alignment: Qt.AlignCenter
+
                 onWelcomePageRedirectPage: {
                     changePageQML(toPageIndex)
                 }
@@ -186,11 +216,18 @@ Rectangle {
                 onLeavePage: {
                     wizardViewIsClosed()
                 }
+
+                onScrollToBottom: {
+                    if (welcomePage.preferredHeight > root.height)
+                        wizardViewScrollView.vScrollBar.position = 1
+                }
             }
 
             CreateAccountPage {
                 id: createAccountPage
 
+                Layout.alignment: Qt.AlignCenter
+
                 onCreateAccount: {
                     inputParaObject = {}
                     inputParaObject["isRendezVous"] = isRdv
@@ -213,6 +250,8 @@ Rectangle {
             CreateSIPAccountPage {
                 id: createSIPAccountPage
 
+                Layout.alignment: Qt.AlignCenter
+
                 onLeavePage: {
                     changePageQML(WizardView.WizardViewPageIndex.WELCOMEPAGE)
                 }
@@ -236,6 +275,8 @@ Rectangle {
             ImportFromBackupPage {
                 id: importFromBackupPage
 
+                Layout.alignment: Qt.AlignCenter
+
                 onLeavePage: {
                     changePageQML(WizardView.WizardViewPageIndex.WELCOMEPAGE)
                 }
@@ -255,6 +296,8 @@ Rectangle {
             BackupKeyPage {
                 id: backupKeysPage
 
+                Layout.alignment: Qt.AlignCenter
+
                 onNeverShowAgainBoxClicked: {
                     SettingsAdapter.setValue(Settings.NeverShowMeAgain, isChecked)
                 }
@@ -288,6 +331,8 @@ Rectangle {
             ImportFromDevicePage {
                 id: importFromDevicePage
 
+                Layout.alignment: Qt.AlignCenter
+
                 onLeavePage: {
                     changePageQML(WizardView.WizardViewPageIndex.WELCOMEPAGE)
                 }
@@ -308,6 +353,8 @@ Rectangle {
             ConnectToAccountManagerPage {
                 id: connectToAccountManagerPage
 
+                Layout.alignment: Qt.AlignCenter
+
                 onCreateAccount: {
                     inputParaObject = {}
                     inputParaObject["username"]
@@ -327,6 +374,8 @@ Rectangle {
             ProfilePage {
                 id: profilePage
 
+                Layout.alignment: Qt.AlignCenter
+
                 function leave() {
                     if (showBackUp)
                         changePageQML(WizardView.WizardViewPageIndex.BACKUPKEYSPAGE)
@@ -348,3 +397,4 @@ Rectangle {
             }
         }
     }
+}

src/wizardview/components/BackupKeyPage.qml

@@ -28,6 +28,8 @@ import "../../settingsview/components"
 Rectangle {
     id: root
 
+    property int preferredHeight: backupKeysPageColumnLayout.implicitHeight
+
     signal neverShowAgainBoxClicked(bool isChecked)
     signal leavePage
     signal export_Btn_FileDialogAccepted(bool accepted, string folderDir)
@@ -62,6 +64,8 @@ Rectangle {
     color: JamiTheme.backgroundColor
 
     ColumnLayout {
+        id: backupKeysPageColumnLayout
+
         spacing: layoutSpacing
 
         anchors.horizontalCenter: parent.horizontalCenter
@@ -71,6 +75,7 @@ Rectangle {
             spacing: layoutSpacing
 
             Layout.alignment: Qt.AlignCenter
+            Layout.topMargin: backButtonMargins
             Layout.preferredWidth: backupBtn.width
 
             Label {
@@ -151,6 +156,7 @@ Rectangle {
 
         MaterialButton {
             Layout.alignment: Qt.AlignCenter
+            Layout.bottomMargin: backButtonMargins
             Layout.preferredWidth: preferredWidth
             Layout.preferredHeight: preferredHeight
 

src/wizardview/components/ConnectToAccountManagerPage.qml

@@ -30,6 +30,7 @@ Rectangle {
     property alias text_passwordManagerEditAlias: passwordManagerEdit.text
     property alias text_accountManagerEditAlias: accountManagerEdit.text
     property string errorText: ""
+    property int preferredHeight: connectToAccountManagerPageColumnLayout.implicitHeight
 
     signal leavePage
     signal createAccount
@@ -59,6 +60,8 @@ Rectangle {
     }
 
     ColumnLayout {
+        id: connectToAccountManagerPageColumnLayout
+
         spacing: layoutSpacing
 
         anchors.horizontalCenter: parent.horizontalCenter
@@ -68,7 +71,8 @@ Rectangle {
             spacing: layoutSpacing
 
             Layout.alignment: Qt.AlignCenter
-            Layout.preferredWidth: connectBtn.width
+            Layout.topMargin: backButtonMargins
+            Layout.preferredWidth: implicitWidth
 
             Label {
                 text: JamiStrings.enterJAMSURL
@@ -108,10 +112,14 @@ Rectangle {
         }
 
         Label {
-            Layout.alignment: Qt.AlignLeft
+            Layout.alignment: Qt.AlignCenter
+            Layout.preferredWidth: connectBtn.width
 
             text: JamiStrings.jamsCredentials
             wrapMode: Text.Wrap
+
+            onTextChanged: Layout.preferredHeight =
+                           JamiQmlUtils.getTextBoundingRect(font, text).height
         }
 
         MaterialLineEdit {
@@ -153,6 +161,7 @@ Rectangle {
             id: connectBtn
 
             Layout.alignment: Qt.AlignCenter
+            Layout.bottomMargin: errorLabel.visible ? 0 : backButtonMargins
             Layout.preferredWidth: preferredWidth
             Layout.preferredHeight: preferredHeight
 
@@ -171,7 +180,10 @@ Rectangle {
         }
 
         Label {
+            id: errorLabel
+
             Layout.alignment: Qt.AlignCenter
+            Layout.bottomMargin: backButtonMargins
 
             visible: errorText.length !== 0
             text: errorText

src/wizardview/components/CreateAccountPage.qml

@@ -33,6 +33,11 @@ Rectangle {
     property alias nameRegistrationUIState: usernameEdit.nameRegistrationState
     property bool isRendezVous: false
     property alias text_passwordEditAlias: passwordEdit.text
+    property int preferredHeight: {
+        if (createAccountStack.currentIndex === 0)
+            return usernameColumnLayout.implicitHeight
+        return passwordColumnLayout.implicitHeight
+    }
 
     signal createAccount
     signal leavePage
@@ -94,19 +99,27 @@ Rectangle {
     StackLayout {
         id: createAccountStack
 
-        anchors.verticalCenter: root.verticalCenter
+        anchors.fill: parent
-        anchors.horizontalCenter: root.horizontalCenter
+
+        currentIndex: 0
+
+        Rectangle {
+            color: JamiTheme.backgroundColor
 
             ColumnLayout {
+                id: usernameColumnLayout
+
                 spacing: layoutSpacing
 
-            Layout.preferredWidth: root.width
+                anchors.centerIn: parent
-            Layout.alignment: Qt.AlignCenter
+
+                width: root.width
 
                 RowLayout {
                     spacing: layoutSpacing
 
                     Layout.alignment: Qt.AlignCenter
+                    Layout.topMargin: backButtonMargins
                     Layout.preferredWidth: usernameEdit.width
 
                     Label {
@@ -199,34 +212,53 @@ Rectangle {
                     onClicked: createAccountStack.currentIndex =
                                createAccountStack.currentIndex + 1
                 }
+
+                AccountCreationStepIndicator {
+                    Layout.topMargin: backButtonMargins
+                    Layout.bottomMargin: backButtonMargins
+                    Layout.alignment: Qt.AlignHCenter
+
+                    spacing: layoutSpacing
+                    steps: 3
+                    currentStep: 1
+                }
+            }
         }
 
+        Rectangle {
+            color: JamiTheme.backgroundColor
+
             ColumnLayout {
+                id: passwordColumnLayout
+
                 spacing: layoutSpacing
 
-            Layout.preferredWidth: root.width
+                anchors.centerIn: parent
-            Layout.alignment: Qt.AlignCenter
+                width: root.width
 
                 RowLayout {
                     spacing: layoutSpacing
 
                     Layout.alignment: Qt.AlignCenter
+                    Layout.topMargin: backButtonMargins
                     Layout.preferredWidth: usernameEdit.width
 
                     Label {
+                        Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
                         text: JamiStrings.createPassword
                         font.pointSize: JamiTheme.textFontSize + 3
+                    }
 
                     Switch {
                         id: passwordSwitch
 
-                        anchors.left: parent.right
+                        Layout.alignment: Qt.AlignLeft | Qt.AlignVCenter
-                        anchors.verticalCenter: parent.verticalCenter
+                        Layout.leftMargin:  -layoutSpacing
-                    }
+                        Layout.topMargin: 5
                     }
 
                     Label {
-                    Layout.alignment: Qt.AlignRight
+                        Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
 
                         text: JamiStrings.optional
                         color: "white"
@@ -274,18 +306,21 @@ Rectangle {
 
                 Label {
                     Layout.alignment: Qt.AlignLeft
-                Layout.topMargin: 10
+                    Layout.preferredWidth: createAccountButton.width - 10
                     Layout.leftMargin: (root.width - createAccountButton.width) / 2
 
                     text: JamiStrings.notePasswordRecovery
+                    wrapMode: Text.WordWrap
                     font.pointSize: JamiTheme.textFontSize
+
+                    onFontChanged: Layout.preferredHeight =
+                                   JamiQmlUtils.getTextBoundingRect(font, text).height * 2
                 }
 
                 MaterialButton {
                     id: createAccountButton
 
                     Layout.alignment: Qt.AlignCenter
-                Layout.topMargin: 10
                     Layout.preferredWidth: preferredWidth
                     Layout.preferredHeight: preferredHeight
 
@@ -308,6 +343,17 @@ Rectangle {
                         createAccountStack.currentIndex += 1
                     }
                 }
+
+                AccountCreationStepIndicator {
+                    Layout.topMargin: backButtonMargins
+                    Layout.bottomMargin: backButtonMargins
+                    Layout.alignment: Qt.AlignHCenter
+
+                    spacing: layoutSpacing
+                    steps: 3
+                    currentStep: 2
+                }
+            }
         }
     }
 
@@ -316,7 +362,7 @@ Rectangle {
 
         anchors.left: parent.left
         anchors.top: parent.top
-        anchors.margins: 20
+        anchors.margins: backButtonMargins
 
         width: 35
         height: 35
@@ -336,14 +382,4 @@ Rectangle {
                 createAccountStack.currentIndex -= 1
         }
     }
-
-    AccountCreationStepIndicator {
-        anchors.bottom: root.bottom
-        anchors.bottomMargin: 30
-        anchors.horizontalCenter: root.horizontalCenter
-
-        spacing: layoutSpacing
-        steps: 3
-        currentStep: usernameEdit.visible ? 1 : 2
-    }
 }

src/wizardview/components/CreateSIPAccountPage.qml

@@ -30,6 +30,7 @@ Rectangle {
     property alias text_sipProxyEditAlias: sipProxyEdit.text
     property alias text_sipUsernameEditAlias: sipUsernameEdit.text
     property alias text_sipPasswordEditAlias: sipPasswordEdit.text
+    property int preferredHeight: createSIPAccountPageColumnLayout.implicitHeight
 
     property var boothImgBase64: null
 
@@ -56,6 +57,8 @@ Rectangle {
     }
 
     ColumnLayout {
+        id: createSIPAccountPageColumnLayout
+
         spacing: layoutSpacing
 
         anchors.centerIn: parent
@@ -64,6 +67,7 @@ Rectangle {
             spacing: layoutSpacing
 
             Layout.alignment: Qt.AlignCenter
+            Layout.topMargin: backButtonMargins
             Layout.preferredWidth: createAccountButton.width
 
             Label {
@@ -143,6 +147,7 @@ Rectangle {
             id: createAccountButton
 
             Layout.alignment: Qt.AlignCenter
+            Layout.bottomMargin: backButtonMargins
             Layout.preferredWidth: preferredWidth
             Layout.preferredHeight: preferredHeight
 

src/wizardview/components/ImportFromBackupPage.qml

@@ -31,6 +31,7 @@ Rectangle {
 
     property alias text_passwordFromBackupEditAlias: passwordFromBackupEdit.text
     property string fileImportBtnText: JamiStrings.archive
+    property int preferredHeight: importFromBackupPageColumnLayout.implicitHeight
 
     property string filePath: ""
     property string errorText: ""
@@ -72,6 +73,8 @@ Rectangle {
     }
 
     ColumnLayout {
+        id: importFromBackupPageColumnLayout
+
         spacing: layoutSpacing
 
         anchors.horizontalCenter: parent.horizontalCenter
@@ -79,6 +82,7 @@ Rectangle {
 
         Text {
             Layout.alignment: Qt.AlignCenter
+            Layout.topMargin: backButtonMargins
 
             text: qsTr("Import from backup")
             font.pointSize: JamiTheme.menuFontSize
@@ -145,6 +149,7 @@ Rectangle {
             id: connectBtn
 
             Layout.alignment: Qt.AlignCenter
+            Layout.bottomMargin: errorLabel.visible ? 0 : backButtonMargins
             Layout.preferredWidth: preferredWidth
             Layout.preferredHeight: preferredHeight
 
@@ -166,7 +171,10 @@ Rectangle {
         }
 
         Label {
+            id: errorLabel
+
             Layout.alignment: Qt.AlignCenter
+            Layout.bottomMargin: backButtonMargins
 
             visible: errorText.length !== 0
 

src/wizardview/components/ImportFromDevicePage.qml

@@ -29,6 +29,7 @@ Rectangle {
     property alias text_pinFromDeviceAlias: pinFromDevice.text
     property alias text_passwordFromDeviceAlias: passwordFromDevice.text
     property string errorText: ""
+    property int preferredHeight: importFromDevicePageColumnLayout.implicitHeight
 
     signal leavePage
     signal importAccount
@@ -56,6 +57,8 @@ Rectangle {
     }
 
     ColumnLayout {
+        id: importFromDevicePageColumnLayout
+
         spacing: layoutSpacing
 
         // Prevent possible anchor loop detected on centerIn.
@@ -64,6 +67,7 @@ Rectangle {
 
         Text {
             Layout.alignment: Qt.AlignCenter
+            Layout.topMargin: backButtonMargins
 
             text: JamiStrings.mainAccountPassword
             font.pointSize: JamiTheme.menuFontSize
@@ -125,6 +129,7 @@ Rectangle {
             id: connectBtn
 
             Layout.alignment: Qt.AlignCenter
+            Layout.bottomMargin: errorLabel.visible ? 0 : backButtonMargins
             Layout.preferredWidth: preferredWidth
             Layout.preferredHeight: preferredHeight
 
@@ -140,7 +145,10 @@ Rectangle {
         }
 
         Label {
+            id: errorLabel
+
             Layout.alignment: Qt.AlignCenter
+            Layout.bottomMargin: backButtonMargins
 
             visible: errorText.length !== 0
 

src/wizardview/components/ProfilePage.qml

@@ -26,6 +26,8 @@ import "../../commoncomponents"
 Rectangle {
     id: root
 
+    property int preferredHeight: profilePageColumnLayout.implicitHeight
+
     function initializeOnShowUp() {
         clearAllTextFields()
         boothImgBase64 = ""
@@ -51,6 +53,8 @@ Rectangle {
     property bool isRdv: false
 
     ColumnLayout {
+        id: profilePageColumnLayout
+
         spacing: layoutSpacing
 
         width: parent.width
@@ -60,6 +64,7 @@ Rectangle {
         RowLayout {
             spacing: layoutSpacing
 
+            Layout.topMargin: backButtonMargins
             Layout.preferredWidth: saveProfileBtn.width
             Layout.alignment: Qt.AlignCenter
 
@@ -139,15 +144,15 @@ Rectangle {
                 leavePage()
             }
         }
-    }
 
         AccountCreationStepIndicator {
-        anchors.bottom: root.bottom
+            Layout.topMargin: backButtonMargins
-        anchors.bottomMargin: 30
+            Layout.bottomMargin: backButtonMargins
-        anchors.horizontalCenter: root.horizontalCenter
+            Layout.alignment: Qt.AlignHCenter
 
             spacing: layoutSpacing
             steps: 3
             currentStep: 3
         }
     }
+}

src/wizardview/components/WelcomePage.qml

@@ -30,12 +30,17 @@ import "../../commoncomponents"
 Rectangle {
     id: root
 
+    property int preferredHeight: welcomePageColumnLayout.implicitHeight
+
     signal welcomePageRedirectPage(int toPageIndex)
     signal leavePage
+    signal scrollToBottom
 
     color: JamiTheme.backgroundColor
 
     ColumnLayout {
+        id: welcomePageColumnLayout
+
         anchors.centerIn: parent
 
         spacing: layoutSpacing
@@ -44,6 +49,7 @@ Rectangle {
             id: welcomeLabel
 
             Layout.alignment: Qt.AlignCenter
+            Layout.topMargin: backButtonMargins
             Layout.preferredHeight: contentHeight
 
             text: qsTr("Welcome to")
@@ -154,6 +160,7 @@ Rectangle {
             id: showAdvancedButton
 
             Layout.alignment: Qt.AlignCenter
+            Layout.bottomMargin: newSIPAccountButton.visible ? 0 : backButtonMargins
             Layout.preferredWidth: preferredWidth
             Layout.preferredHeight: preferredHeight
 
@@ -203,6 +210,7 @@ Rectangle {
             id: newSIPAccountButton
 
             Layout.alignment: Qt.AlignCenter
+            Layout.bottomMargin: backButtonMargins
             Layout.preferredWidth: preferredWidth
             Layout.preferredHeight: preferredHeight
 
@@ -220,6 +228,8 @@ Rectangle {
                 welcomePageRedirectPage(2)
             }
         }
+
+        onHeightChanged: scrollToBottom()
     }
 
     HoverableButton {
@@ -227,7 +237,7 @@ Rectangle {
 
         anchors.left: parent.left
         anchors.top: parent.top
-        anchors.margins: 20
+        anchors.margins: backButtonMargins
 
         Connections {
             target: LRCInstance