chore(@desktop/syncing): syncing qr code related qml files move to shared location

ui/app/AppLayouts/Onboarding/views/SyncCodeView.qml

@@ -1,27 +1,9 @@
 import QtQuick 2.13
-import QtQuick.Layouts 1.12
-import QtQuick.Controls 2.13
-import QtQuick.Controls.Universal 2.12
 
-import StatusQ.Controls 0.1
-import StatusQ.Controls.Validators 0.1
-import StatusQ.Components 0.1
-import StatusQ.Core 0.1
-import StatusQ.Core.Theme 0.1
-import StatusQ.Popups.Dialog 0.1
-
-import shared 1.0
-import shared.panels 1.0
 import shared.popups 1.0
-import shared.controls 1.0
+import shared.views 1.0
 
-import "../popups"
-import "../controls"
 import "../stores"
-import "sync"
-import "../../Profile/stores"
-
-import utils 1.0
 
 Item {
     id: root
@@ -31,132 +13,27 @@ Item {
     implicitWidth: layout.implicitWidth
     implicitHeight: layout.implicitHeight
 
-    QtObject {
+    SyncingEnterCode {
-        id: d
-
-        function validateConnectionString(connectionString) {
-            const result = root.startupStore.validateLocalPairingConnectionString(connectionString)
-            return result === ""
-        }
-
-        function onConnectionStringFound(connectionString) {
-            root.startupStore.setConnectionString(connectionString)
-            root.startupStore.doPrimaryAction()
-        }
-    }
-
-    Timer {
-        id: nextStateDelay
-
-        property string connectionString
-
-        interval: 1000
-        repeat: false
-        onTriggered: {
-            d.onConnectionStringFound(connectionString)
-        }
-    }
-
-    Column {
         id: layout
 
         anchors.centerIn: parent
         width: 400
         spacing: 24
 
-        StatusBaseText {
+        validateConnectionString: function(connectionString) {
-            id: headlineText
+            const result = root.startupStore.validateLocalPairingConnectionString(connectionString)
-            width: parent.width
+            return result === ""
-            horizontalAlignment: Text.AlignHCenter
-            font.pixelSize: 22
-            font.weight: Font.Bold
-            color: Theme.palette.directColor1
-            text: qsTr("Sign in by syncing")
         }
 
-        StatusSwitchTabBar {
+        onProceed: {
-            id: switchTabBar
+            root.startupStore.setConnectionString(connectionString)
-            anchors.horizontalCenter: parent.horizontalCenter
+            root.startupStore.doPrimaryAction()
-            currentIndex: 0
-
-            StatusSwitchTabButton {
-                text: qsTr("Scan QR code")
         }
 
-            StatusSwitchTabButton {
+        onDisplayInstructions: {
-                text: qsTr("Enter sync code")
-            }
-        }
-
-        StackLayout {
-            anchors.horizontalCenter: parent.horizontalCenter
-            width: parent.width
-            height: Math.max(mobileSync.implicitHeight, desktopSync.implicitHeight)
-            currentIndex: switchTabBar.currentIndex
-
-            // StackLayout doesn't support alignment, so we create an `Item` wrappers
-
-            Item {
-                Layout.fillWidth: true
-                Layout.fillHeight: true
-
-                SyncDeviceFromMobile {
-                    id: mobileSync
-                    anchors {
-                        left: parent.left
-                        right: parent.right
-                        verticalCenter: parent.verticalCenter
-                    }
-                    validators: [
-                        StatusValidator {
-                            name: "isSyncQrCode"
-                            errorMessage: qsTr("This does not look like a sync QR code")
-                            validate: d.validateConnectionString
-                        }
-                    ]
-                    onConnectionStringFound: {
-                        d.onConnectionStringFound(connectionString)
-                    }
-                }
-            }
-
-            Item {
-                Layout.fillWidth: true
-                Layout.fillHeight: true
-
-                SyncDeviceFromDesktop {
-                    id: desktopSync
-                    anchors {
-                        left: parent.left
-                        right: parent.right
-                        verticalCenter: parent.verticalCenter
-                    }
-                    input.readOnly: nextStateDelay.running
-                    input.validators: [
-                        StatusValidator {
-                            name: "isSyncCode"
-                            errorMessage: qsTr("This does not look like a sync code")
-                            validate: d.validateConnectionString
-                        }
-                    ]
-                    input.onValidChanged: {
-                        if (!input.valid)
-                            return
-                        nextStateDelay.connectionString = desktopSync.input.text
-                        nextStateDelay.start()
-                    }
-                }
-            }
-        }
-
-        StatusFlatButton {
-            text: qsTr("How to get a sync code")
-            anchors.horizontalCenter: parent.horizontalCenter
-            onClicked: {
             instructionsPopup.open()
         }
     }
-    }
 
     GetSyncCodeInstructionsPopup {
         id: instructionsPopup

ui/app/AppLayouts/Onboarding/views/sync/SyncDeviceFromDesktop.qml

@@ -1,16 +0,0 @@
-import QtQuick 2.14
-import StatusQ.Controls 0.1
-
-import shared.controls 1.0
-
-Column {
-    id: root
-
-    property alias input: codeInput
-
-    StatusSyncCodeInput {
-        id: codeInput
-        width: parent.width
-        mode: StatusSyncCodeInput.WriteMode
-    }
-}

ui/imports/shared/controls/qmldir

@@ -38,6 +38,7 @@ TokenDelegate 1.0 TokenDelegate.qml
 StyledTextEditWithLoadingState 1.0 StyledTextEditWithLoadingState.qml
 LoadingTokenDelegate 1.0 LoadingTokenDelegate.qml
 StatusSyncCodeInput 1.0 StatusSyncCodeInput.qml
+StatusSyncCodeScan 1.0 StatusSyncCodeScan.qml
 GetSyncCodeMobileInstructions 1.0 GetSyncCodeMobileInstructions.qml
 GetSyncCodeDesktopInstructions 1.0 GetSyncCodeDesktopInstructions.qml
 ErrorDetails 1.0 ErrorDetails.qml

ui/imports/shared/popups/GetSyncCodeInstructionsPopup.qml

@@ -1,68 +1,16 @@
 import QtQuick 2.14
-import QtQuick.Layouts 1.14
 
-import StatusQ.Controls 0.1
 import StatusQ.Popups.Dialog 0.1
 
-import shared.controls 1.0
+import shared.views 1.0
 
 StatusDialog {
     id: root
 
-    enum Source {
-        Mobile,
-        Desktop
-    }
-
     title: qsTr("How to get a sync code on...")
     padding: 40
     footer: null
-    ColumnLayout {
-        anchors.fill: parent
-        spacing: 0
 
-        StatusSwitchTabBar {
+    SyncingCodeInstructions {
-            id: switchTabBar
-            Layout.fillWidth: true
-            Layout.minimumWidth: 400
-            currentIndex: 0
-
-            StatusSwitchTabButton {
-                text: qsTr("Mobile")
     }
-
-            StatusSwitchTabButton {
-                text: qsTr("Desktop")
-            }
-        }
-
-        Item {
-            Layout.fillWidth: true
-            implicitHeight: 41
-        }
-
-        StackLayout {
-            Layout.fillWidth: false
-            Layout.alignment: Qt.AlignHCenter
-            implicitWidth: Math.max(mobileSync.implicitWidth, desktopSync.implicitWidth)
-            implicitHeight: Math.max(mobileSync.implicitHeight, desktopSync.implicitHeight)
-            currentIndex: switchTabBar.currentIndex
-
-            GetSyncCodeMobileInstructions {
-                id: mobileSync
-                Layout.fillHeight: true
-                Layout.fillWidth: false
-                Layout.alignment: Qt.AlignHCenter
-            }
-
-            GetSyncCodeDesktopInstructions {
-                id: desktopSync
-                Layout.fillHeight: true
-                Layout.fillWidth: false
-                Layout.alignment: Qt.AlignHCenter
-            }
-        }
-
-    }
-
 }

ui/imports/shared/views/SyncingCodeInstructions.qml

@@ -0,0 +1,59 @@
+import QtQuick 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Controls 0.1
+
+import shared.controls 1.0
+
+ColumnLayout {
+    id: root
+
+    enum Source {
+        Mobile,
+        Desktop
+    }
+
+    spacing: 0
+
+    StatusSwitchTabBar {
+        id: switchTabBar
+        Layout.fillWidth: true
+        Layout.minimumWidth: 400
+        currentIndex: 0
+
+        StatusSwitchTabButton {
+            text: qsTr("Mobile")
+        }
+
+        StatusSwitchTabButton {
+            text: qsTr("Desktop")
+        }
+    }
+
+    Item {
+        Layout.fillWidth: true
+        implicitHeight: 41
+    }
+
+    StackLayout {
+        Layout.fillWidth: false
+        Layout.alignment: Qt.AlignHCenter
+        implicitWidth: Math.max(mobileSync.implicitWidth, desktopSync.implicitWidth)
+        implicitHeight: Math.max(mobileSync.implicitHeight, desktopSync.implicitHeight)
+        currentIndex: switchTabBar.currentIndex
+
+        GetSyncCodeMobileInstructions {
+            id: mobileSync
+            Layout.fillHeight: true
+            Layout.fillWidth: false
+            Layout.alignment: Qt.AlignHCenter
+        }
+
+        GetSyncCodeDesktopInstructions {
+            id: desktopSync
+            Layout.fillHeight: true
+            Layout.fillWidth: false
+            Layout.alignment: Qt.AlignHCenter
+        }
+    }
+}

ui/imports/shared/views/SyncingEnterCode.qml

@@ -0,0 +1,118 @@
+import QtQuick 2.14
+import QtQuick.Layouts 1.14
+
+import StatusQ.Controls 0.1
+import StatusQ.Controls.Validators 0.1
+
+import shared.controls 1.0
+
+ColumnLayout {
+    id: root
+
+    property string  firstTabName: qsTr("Scan QR code")
+    property string  secondTabName: qsTr("Enter sync code")
+    property string  syncQrErrorMessage: qsTr("This does not look like a sync QR code")
+    property string  syncCodeErrorMessage: qsTr("This does not look like a sync code")
+    property string  instructionButtonName: qsTr("How to get a sync code")
+
+    property var validateConnectionString: function(){}
+
+    signal displayInstructions()
+    signal proceed(string connectionString)
+
+    Timer {
+        id: nextStateDelay
+
+        property string connectionString
+
+        interval: 1000
+        repeat: false
+        onTriggered: {
+            root.proceed(connectionString)
+        }
+    }
+
+
+    StatusSwitchTabBar {
+        id: switchTabBar
+        Layout.alignment: Qt.AlignHCenter
+        currentIndex: 0
+
+        StatusSwitchTabButton {
+            text: root.firstTabName
+        }
+
+        StatusSwitchTabButton {
+            text: root.secondTabName
+        }
+    }
+
+    StackLayout {
+        Layout.fillWidth: true
+        Layout.preferredHeight: Math.max(mobileSync.implicitHeight, desktopSync.implicitHeight)
+        currentIndex: switchTabBar.currentIndex
+
+        // StackLayout doesn't support alignment, so we create an `Item` wrappers
+
+        Item {
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+
+            StatusSyncCodeScan {
+                id: mobileSync
+                anchors {
+                    left: parent.left
+                    right: parent.right
+                    verticalCenter: parent.verticalCenter
+                }
+                validators: [
+                    StatusValidator {
+                        name: "isSyncQrCode"
+                        errorMessage: root.syncQrErrorMessage
+                        validate: root.validateConnectionString
+                    }
+                ]
+                onConnectionStringFound: {
+                    root.proceed(connectionString)
+                }
+            }
+        }
+
+        Item {
+            Layout.fillWidth: true
+            Layout.fillHeight: true
+
+            StatusSyncCodeInput {
+                id: desktopSync
+                anchors {
+                    left: parent.left
+                    right: parent.right
+                    verticalCenter: parent.verticalCenter
+                }
+                readOnly: nextStateDelay.running
+                validators: [
+                    StatusValidator {
+                        name: "isSyncCode"
+                        errorMessage: root.syncCodeErrorMessage
+                        validate: root.validateConnectionString
+                    }
+                ]
+                input.onValidChanged: {
+                    if (!input.valid)
+                        return
+                    nextStateDelay.connectionString = desktopSync.text
+                    nextStateDelay.start()
+                }
+            }
+        }
+    }
+
+    StatusFlatButton {
+        Layout.alignment: Qt.AlignHCenter
+        visible: !!root.instructionButtonName
+        text: root.instructionButtonName
+        onClicked: {
+            root.displayInstructions()
+        }
+    }
+}

ui/imports/shared/views/qmldir

@@ -15,3 +15,5 @@ TransactionStackView 1.0 TransactionStackView.qml
 SyncingDeviceView 1.0 SyncingDeviceView.qml
 SyncingDisplayCode 1.0 SyncingDisplayCode.qml
 SyncingErrorMessage 1.0 SyncingErrorMessage.qml
+SyncingCodeInstructions 1.0 SyncingCodeInstructions.qml
+SyncingEnterCode 1.0 SyncingEnterCode.qml