190 lines
5.9 KiB
QML
190 lines
5.9 KiB
QML
import QtQuick 2.15
|
|
import QtQuick.Layouts 1.15
|
|
|
|
import StatusQ.Core 0.1
|
|
import StatusQ.Core.Theme 0.1
|
|
import StatusQ.Controls 0.1
|
|
import StatusQ.Components 0.1
|
|
|
|
import shared.controls 1.0
|
|
import shared.controls.chat 1.0
|
|
import utils 1.0
|
|
|
|
Item {
|
|
id: root
|
|
|
|
property alias devicesModel: listView.model
|
|
property string userDisplayName
|
|
property string userColorId
|
|
property string userColorHash
|
|
property string userPublicKey
|
|
property string userImage
|
|
|
|
property int localPairingState: Constants.LocalPairingState.Idle
|
|
property string localPairingError
|
|
|
|
implicitWidth: layout.implicitWidth
|
|
implicitHeight: layout.implicitHeight
|
|
|
|
QtObject {
|
|
id: d
|
|
|
|
readonly property int deviceDelegateWidth: 220
|
|
readonly property bool pairingFailed: root.localPairingState === Constants.LocalPairingState.Error
|
|
readonly property bool pairingSuccess: root.localPairingState === Constants.LocalPairingState.Finished
|
|
readonly property bool pairingInProgress: !d.pairingFailed && !d.pairingSuccess
|
|
}
|
|
|
|
ColumnLayout {
|
|
id: layout
|
|
|
|
anchors.fill: parent
|
|
spacing: 0
|
|
|
|
// This is used in the profile section. The user's pubkey is available
|
|
// so we can calculate the hash and colorId
|
|
Loader {
|
|
id: profileSectionUserImage
|
|
active: root.userPublicKey != ""
|
|
Layout.alignment: Qt.AlignHCenter
|
|
sourceComponent: UserImage {
|
|
name: root.userDisplayName
|
|
pubkey: root.userPublicKey
|
|
image: root.userImage
|
|
interactive: false
|
|
imageWidth: 80
|
|
imageHeight: 80
|
|
}
|
|
}
|
|
|
|
// This is used in the onboarding once a sync code is received. The
|
|
// user's pubkey is unknown, but we have the multiaccount information
|
|
// available (from the plaintext accounts db), so we use the colorHash
|
|
// and colorId directly
|
|
Loader {
|
|
id: colorUserImage
|
|
active: root.userPublicKey == ""
|
|
Layout.alignment: Qt.AlignHCenter
|
|
sourceComponent: UserImage {
|
|
name: root.userDisplayName
|
|
colorId: root.userColorId
|
|
colorHash: root.userColorHash
|
|
image: root.userImage
|
|
interactive: false
|
|
imageWidth: 80
|
|
imageHeight: 80
|
|
}
|
|
}
|
|
|
|
StatusBaseText {
|
|
Layout.fillWidth: true
|
|
Layout.topMargin: 8
|
|
horizontalAlignment: Text.AlignHCenter
|
|
color: Theme.palette.directColor1
|
|
font.weight: Font.Bold
|
|
font.pixelSize: 22
|
|
elide: Text.ElideRight
|
|
wrapMode: Text.Wrap
|
|
text: root.userDisplayName
|
|
}
|
|
|
|
StatusBaseText {
|
|
Layout.fillWidth: true
|
|
Layout.topMargin: 31
|
|
horizontalAlignment: Text.AlignHCenter
|
|
font.pixelSize: 17
|
|
color: d.pairingFailed ? Theme.palette.dangerColor1 : Theme.palette.directColor1
|
|
text: {
|
|
if (d.pairingInProgress)
|
|
return qsTr("Device found!");
|
|
if (d.pairingSuccess)
|
|
return qsTr("Device synced!");
|
|
if (d.pairingFailed)
|
|
return qsTr("Device failed to sync");
|
|
return "";
|
|
}
|
|
}
|
|
|
|
StatusBaseText {
|
|
Layout.fillWidth: true
|
|
Layout.bottomMargin: 25
|
|
horizontalAlignment: Text.AlignHCenter
|
|
font.pixelSize: 15
|
|
color: Theme.palette.baseColor1
|
|
visible: !!text
|
|
text: {
|
|
if (d.pairingInProgress)
|
|
return qsTr("Syncing your profile and settings preferences");
|
|
if (d.pairingSuccess)
|
|
return qsTr("Your devices are now in sync");
|
|
return "";
|
|
}
|
|
}
|
|
|
|
StatusSyncDeviceDelegate {
|
|
Layout.alignment: Qt.AlignHCenter
|
|
implicitWidth: d.deviceDelegateWidth
|
|
visible: !d.pairingFailed
|
|
subTitle: qsTr("Synced device")
|
|
enabled: false
|
|
loading: d.pairingInProgress
|
|
deviceName: qsTr("No device name")
|
|
isCurrentDevice: false
|
|
showOnlineBadge: false
|
|
}
|
|
|
|
ErrorDetails {
|
|
Layout.fillWidth: true
|
|
Layout.leftMargin: 60
|
|
Layout.rightMargin: 60
|
|
Layout.preferredWidth: 360
|
|
Layout.topMargin: 12
|
|
visible: d.pairingFailed
|
|
title: qsTr("Failed to sync devices")
|
|
details: root.localPairingError
|
|
}
|
|
|
|
Rectangle {
|
|
Layout.alignment: Qt.AlignHCenter
|
|
Layout.topMargin: 25
|
|
Layout.bottomMargin: 25
|
|
implicitHeight: 1
|
|
implicitWidth: d.deviceDelegateWidth
|
|
color: Theme.palette.baseColor4
|
|
opacity: listView.count ? 1 : 0
|
|
}
|
|
|
|
StatusScrollView {
|
|
id: scrollView
|
|
Layout.alignment: Qt.AlignHCenter
|
|
Layout.fillHeight: true
|
|
|
|
clip: true
|
|
padding: 0
|
|
|
|
contentWidth: d.deviceDelegateWidth
|
|
contentHeight: listView.contentHeight
|
|
implicitWidth: contentWidth + leftPadding + rightPadding
|
|
implicitHeight: contentHeight + topPadding + bottomPadding
|
|
|
|
StatusListView {
|
|
id: listView
|
|
|
|
width: scrollView.availableWidth
|
|
height: scrollView.availableHeight
|
|
spacing: 4
|
|
clip: true
|
|
|
|
delegate: StatusSyncDeviceDelegate {
|
|
width: ListView.view.width
|
|
enabled: false
|
|
deviceName: model.name
|
|
deviceType: model.deviceType
|
|
timestamp: model.timestamp
|
|
isCurrentDevice: model.isCurrentDevice
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|