status-im
/
status-desktop
mirror of https://github.com/status-im/status-desktop.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix(SyncingEnterCode): tweak to local pairing messaging 

... to clarify both devices should be on the same network

- add the view to storybook
- fix some layout/margin issues

Fixes #12261
This commit is contained in:
Lukáš Tinkl 2023-10-03 20:40:20 +02:00 committed by Lukáš Tinkl
parent 621090174a
commit bcb89c8818
5 changed files with 88 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
storybook/figma.json
View File

@ -270,6 +270,10 @@
"https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=8159%3A416159",
"https://www.figma.com/file/17fc13UBFvInrLgNUKJJg5/Kuba%E2%8E%9CDesktop?node-id=8159%3A416160"
],
"SyncingEnterCode": [
"https://www.figma.com/file/idUoxN7OIW2Jpp3PMJ1Rl8/%E2%9A%99%EF%B8%8F-Settings-%7C-Desktop?type=design&node-id=1930-136137&mode=design&t=RSriG02fbmVOMAEx-0",
"https://www.figma.com/file/idUoxN7OIW2Jpp3PMJ1Rl8/%E2%9A%99%EF%B8%8F-Settings-%7C-Desktop?type=design&node-id=13578-276069&mode=design&t=RSriG02fbmVOMAEx-0"
],
"TransferOwnershipAlertPopup": [
"https://www.figma.com/file/qHfFm7C9LwtXpfdbxssCK3/Kuba%E2%8E%9CDesktop---Communities?type=design&node-id=37206%3A86828&mode=design&t=coHVo1E6fHrKNNhQ-1",
"https://www.figma.com/file/qHfFm7C9LwtXpfdbxssCK3/Kuba%E2%8E%9CDesktop---Communities?type=design&node-id=37206%3A86847&mode=design&t=coHVo1E6fHrKNNhQ-1"

49
storybook/pages/SyncingEnterCodePage.qml Normal file
View File

@ -0,0 +1,49 @@
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Layouts 1.15
import Storybook 1.0
import mainui 1.0
import shared.views 1.0
SplitView {
id: root
orientation: Qt.Vertical
Logs { id: logs }
Popups {
popupParent: root
rootStore: QtObject {}
}
Item {
SplitView.fillWidth: true
SplitView.fillHeight: true
SyncingEnterCode {
id: syncView
width: 400
anchors.horizontalCenter: parent.horizontalCenter
validateConnectionString: (stringValue) => !Number.isNaN(parseInt(stringValue))
onDisplayInstructions: logs.logEvent("SyncingEnterCode::displayInstructions")
onProceed: (connectionString) => logs.logEvent("SyncingEnterCode::proceed", ["connectionString"], arguments)
}
}
LogsAndControlsPanel {
id: logsAndControlsPanel
SplitView.minimumHeight: 100
SplitView.preferredHeight: 200
logsView.logText: logs.logText
}
}
// category: Views
// "https://www.figma.com/file/idUoxN7OIW2Jpp3PMJ1Rl8/%E2%9A%99%EF%B8%8F-Settings-%7C-Desktop?type=design&node-id=1930-136137&mode=design&t=RSriG02fbmVOMAEx-0"
// "https://www.figma.com/file/idUoxN7OIW2Jpp3PMJ1Rl8/%E2%9A%99%EF%B8%8F-Settings-%7C-Desktop?type=design&node-id=13578-276069&mode=design&t=RSriG02fbmVOMAEx-0"

2
storybook/pages/SyncingViewPage.qml
View File

@ -129,3 +129,5 @@ SplitView {
}
// category: Views
// https://www.figma.com/file/idUoxN7OIW2Jpp3PMJ1Rl8/%E2%9A%99%EF%B8%8F-Settings-%7C-Desktop?type=design&node-id=1592-128606&mode=design&t=1xZLPCet6yRCZCuz-0

18
ui/imports/shared/controls/StatusSyncCodeScan.qml
View File

@ -77,9 +77,9 @@ Column {
Component {
id: btnComponent
Rectangle {
ShapeRectangle {
anchors.fill: parent
color: Theme.palette.baseColor4
path.fillColor: Theme.palette.baseColor4
radius: d.radius
ColumnLayout {
@ -145,7 +145,7 @@ Column {
Item {
width: parent.width
height: 16
height: 8
}
StatusBaseText {
@ -158,12 +158,24 @@ Column {
text: d.errorMessage
}
StatusBaseText {
visible: !d.showCamera
width: parent.width
height: visible ? implicitHeight : 0
wrapMode: Text.WordWrap
color: Theme.palette.baseColor1
font.pixelSize: Theme.tertiaryTextFontSize
horizontalAlignment: Text.AlignHCenter
text: qsTr("Ensure both devices are on the same network")
}
StatusBaseText {
visible: d.showCamera && cameraLoader.item.camera ? true : false
width: parent.width
height: visible ? implicitHeight : 0
wrapMode: Text.WordWrap
color: Theme.palette.baseColor1
font.pixelSize: Theme.tertiaryTextFontSize
horizontalAlignment: Text.AlignHCenter
text: qsTr("Ensure that the QR code is in focus to scan")
}

23
ui/imports/shared/views/SyncingEnterCode.qml
View File

@ -1,6 +1,8 @@
import QtQuick 2.14
import QtQuick.Layouts 1.14
import StatusQ.Core 0.1
import StatusQ.Core.Theme 0.1
import StatusQ.Controls 0.1
import StatusQ.Controls.Validators 0.1
@ -17,13 +19,14 @@ ColumnLayout {
property string syncCodeErrorMessage: qsTr("This does not look like a sync code")
property string syncCodeLabel: qsTr("Paste sync code")
property var validateConnectionString: function(){}
property var validateConnectionString: function(stringValue) { return true }
readonly property bool syncViaQr: !switchTabBar.currentIndex
signal displayInstructions()
signal proceed(string connectionString)
spacing: 8
StatusSwitchTabBar {
id: switchTabBar
@ -44,6 +47,7 @@ ColumnLayout {
StackLayout {
Layout.fillWidth: true
Layout.preferredHeight: Math.max(syncQr.implicitHeight, syncCode.implicitHeight)
Layout.topMargin: 24
currentIndex: switchTabBar.currentIndex
// StackLayout doesn't support alignment, so we create an `Item` wrappers
@ -68,14 +72,15 @@ ColumnLayout {
}
}
Item {
ColumnLayout {
spacing: 20
StatusSyncCodeInput {
id: syncCode
anchors.horizontalCenter: parent.horizontalCenter
width: 424
Layout.alignment: Qt.AlignHCenter
Layout.preferredWidth: 424
mode: StatusSyncCodeInput.Mode.WriteMode
label:root.syncCodeLabel
label: root.syncCodeLabel
input.placeholderText: qsTr("eg. %1").arg("0x2Ef19")
validators: [
@ -91,6 +96,14 @@ ColumnLayout {
root.proceed(syncCode.text)
}
}
StatusBaseText {
Layout.fillWidth: true
Layout.alignment: Qt.AlignHCenter
horizontalAlignment: Text.AlignHCenter
color: Theme.palette.baseColor1
font.pixelSize: Theme.tertiaryTextFontSize
text: qsTr("Ensure both devices are on the same network")
}
}
}