status-desktop/ui/imports/shared/views/DeviceSyncingView.qml

195 lines
6.1 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 {
opacity: name ? 1 : 0
name: root.userDisplayName
colorId: root.userColorId
colorHash: root.userColorHash
image: root.userImage
interactive: false
imageWidth: 80
imageHeight: 80
Behavior on opacity {
NumberAnimation { duration: 250 }
}
}
}
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
}
}
}
}
}