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 import SortFilterProxyModel 0.2 Item { id: root property alias devicesModel: sfpModel.sourceModel property string userDisplayName property string userColorId property string userColorHash property string userPublicKey property string userImage property string installationId property string installationName property string installationDeviceType 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 loading: name === "" } } 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: d.pairingInProgress ? qsTr("Syncing with device") : qsTr("Synced device") enabled: false loading: d.pairingInProgress loadingSubTitle: false deviceName: root.installationName deviceType: root.installationDeviceType 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 } StatusListView { id: listView Layout.alignment: Qt.AlignHCenter Layout.fillHeight: true implicitWidth: contentWidth implicitHeight: contentHeight contentWidth: d.deviceDelegateWidth spacing: 4 clip: true model: SortFilterProxyModel { id: sfpModel filters: [ ValueFilter { enabled: true roleName: "installationId" value: root.installationId inverted: true } ] } delegate: StatusSyncDeviceDelegate { width: ListView.view.width enabled: false deviceName: model.name deviceType: model.deviceType timestamp: model.timestamp isCurrentDevice: model.isCurrentDevice } } } }