diff --git a/ui/app/AppLayouts/Onboarding/views/SyncCodeView.qml b/ui/app/AppLayouts/Onboarding/views/SyncCodeView.qml index 01a3fb17e7..7f39111dc9 100644 --- a/ui/app/AppLayouts/Onboarding/views/SyncCodeView.qml +++ b/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,130 +13,25 @@ Item { implicitWidth: layout.implicitWidth implicitHeight: layout.implicitHeight - QtObject { - 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 { + SyncingEnterCode { id: layout anchors.centerIn: parent width: 400 spacing: 24 - StatusBaseText { - id: headlineText - width: parent.width - horizontalAlignment: Text.AlignHCenter - font.pixelSize: 22 - font.weight: Font.Bold - color: Theme.palette.directColor1 - text: qsTr("Sign in by syncing") + validateConnectionString: function(connectionString) { + const result = root.startupStore.validateLocalPairingConnectionString(connectionString) + return result === "" } - StatusSwitchTabBar { - id: switchTabBar - anchors.horizontalCenter: parent.horizontalCenter - currentIndex: 0 - - StatusSwitchTabButton { - text: qsTr("Scan QR code") - } - - StatusSwitchTabButton { - text: qsTr("Enter sync code") - } + onProceed: { + root.startupStore.setConnectionString(connectionString) + root.startupStore.doPrimaryAction() } - 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() - } + onDisplayInstructions: { + instructionsPopup.open() } } diff --git a/ui/app/AppLayouts/Onboarding/views/sync/SyncDeviceFromDesktop.qml b/ui/app/AppLayouts/Onboarding/views/sync/SyncDeviceFromDesktop.qml deleted file mode 100644 index f018d9261a..0000000000 --- a/ui/app/AppLayouts/Onboarding/views/sync/SyncDeviceFromDesktop.qml +++ /dev/null @@ -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 - } -} diff --git a/ui/app/AppLayouts/Onboarding/views/sync/SyncDeviceFromMobile.qml b/ui/imports/shared/controls/StatusSyncCodeScan.qml similarity index 100% rename from ui/app/AppLayouts/Onboarding/views/sync/SyncDeviceFromMobile.qml rename to ui/imports/shared/controls/StatusSyncCodeScan.qml diff --git a/ui/imports/shared/controls/qmldir b/ui/imports/shared/controls/qmldir index 046b5ced4a..ec685c6537 100644 --- a/ui/imports/shared/controls/qmldir +++ b/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 diff --git a/ui/imports/shared/popups/GetSyncCodeInstructionsPopup.qml b/ui/imports/shared/popups/GetSyncCodeInstructionsPopup.qml index 5470a069b8..f19ec97f48 100644 --- a/ui/imports/shared/popups/GetSyncCodeInstructionsPopup.qml +++ b/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 { - 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 - } - } + SyncingCodeInstructions { } - } diff --git a/ui/imports/shared/views/SyncingCodeInstructions.qml b/ui/imports/shared/views/SyncingCodeInstructions.qml new file mode 100644 index 0000000000..109de57b39 --- /dev/null +++ b/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 + } + } +} diff --git a/ui/imports/shared/views/SyncingEnterCode.qml b/ui/imports/shared/views/SyncingEnterCode.qml new file mode 100644 index 0000000000..ea95a3cf1e --- /dev/null +++ b/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() + } + } +} diff --git a/ui/imports/shared/views/qmldir b/ui/imports/shared/views/qmldir index 61f511b8c2..7c1852da75 100644 --- a/ui/imports/shared/views/qmldir +++ b/ui/imports/shared/views/qmldir @@ -14,4 +14,6 @@ TransactionSigner 1.0 TransactionSigner.qml TransactionStackView 1.0 TransactionStackView.qml SyncingDeviceView 1.0 SyncingDeviceView.qml SyncingDisplayCode 1.0 SyncingDisplayCode.qml -SyncingErrorMessage 1.0 SyncingErrorMessage.qml \ No newline at end of file +SyncingErrorMessage 1.0 SyncingErrorMessage.qml +SyncingCodeInstructions 1.0 SyncingCodeInstructions.qml +SyncingEnterCode 1.0 SyncingEnterCode.qml