Rework HBox-based pages and account settings
- Refactor everything about HBox, and adapt all the pages and popups that used it - Replace HTabContainer by HTabbedBox - Make boxes swippable - Make esc presses in boxes click the cancel button - Make all boxes and popups scrollable when needed - Replace generic apply button icons in popups - Fix tab focus for error and invite popups - Rework (still WIP) the account settings page: - Use the standard tabbed design of other pages - Ditch the horizontal profile layout, hacky and impossible to extend - Add real-time coloring for the display name field - Implement a device list in account settings (Sessions, still WIP)
This commit is contained in:
miruka
247
src/gui/Pages/AccountSettings/Account.qml
Normal file
247
src/gui/Pages/AccountSettings/Account.qml
Normal file
@@ -0,0 +1,247 @@
|
||||
// SPDX-License-Identifier: LGPL-3.0-or-later
|
||||
|
||||
import QtQuick 2.12
|
||||
import QtQuick.Controls 2.12
|
||||
import QtQuick.Layouts 1.12
|
||||
import "../.."
|
||||
import "../../Base"
|
||||
import "../../Base/ButtonLayout"
|
||||
import "../../Dialogs"
|
||||
|
||||
HFlickableColumnPage {
|
||||
id: page
|
||||
|
||||
|
||||
property string userId
|
||||
readonly property QtObject account: ModelStore.get("accounts").find(userId)
|
||||
|
||||
|
||||
function takeFocus() {
|
||||
nameField.item.forceActiveFocus()
|
||||
}
|
||||
|
||||
function applyChanges() {
|
||||
if (nameField.item.changed) {
|
||||
saveButton.nameChangeRunning = true
|
||||
|
||||
py.callClientCoro(
|
||||
userId, "set_displayname", [nameField.item.text], () => {
|
||||
py.callClientCoro(userId, "update_own_profile", [], () => {
|
||||
saveButton.nameChangeRunning = false
|
||||
})
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
if (aliasField.item.changed) {
|
||||
window.settings.writeAliases[userId] = aliasField.item.text
|
||||
window.settingsChanged()
|
||||
}
|
||||
|
||||
if (avatar.changed) {
|
||||
saveButton.avatarChangeRunning = true
|
||||
|
||||
const path =
|
||||
Qt.resolvedUrl(avatar.sourceOverride).replace(/^file:/, "")
|
||||
|
||||
py.callClientCoro(userId, "set_avatar_from_file", [path], () => {
|
||||
py.callClientCoro(userId, "update_own_profile", [], () => {
|
||||
saveButton.avatarChangeRunning = false
|
||||
})
|
||||
}, (errType, [httpCode]) => {
|
||||
console.error("Avatar upload failed:", httpCode, errType)
|
||||
saveButton.avatarChangeRunning = false
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function cancel() {
|
||||
nameField.item.reset()
|
||||
aliasField.item.reset()
|
||||
fileDialog.selectedFile = ""
|
||||
fileDialog.file = ""
|
||||
}
|
||||
|
||||
|
||||
footer: ButtonLayout {
|
||||
ApplyButton {
|
||||
id: saveButton
|
||||
|
||||
property bool nameChangeRunning: false
|
||||
property bool avatarChangeRunning: false
|
||||
|
||||
disableWhileLoading: false
|
||||
loading: nameChangeRunning || avatarChangeRunning
|
||||
enabled:
|
||||
avatar.changed ||
|
||||
nameField.item.changed ||
|
||||
(aliasField.item.changed && ! aliasField.alreadyTakenBy)
|
||||
|
||||
onClicked: applyChanges()
|
||||
}
|
||||
|
||||
CancelButton {
|
||||
enabled: saveButton.enabled && ! saveButton.loading
|
||||
onClicked: cancel()
|
||||
}
|
||||
}
|
||||
|
||||
Keys.onEscapePressed: cancel()
|
||||
|
||||
|
||||
HUserAvatar {
|
||||
property bool changed: Boolean(sourceOverride)
|
||||
|
||||
id: avatar
|
||||
userId: page.userId
|
||||
displayName: nameField.item.text
|
||||
mxc: account.avatar_url
|
||||
toolTipMxc: ""
|
||||
sourceOverride: fileDialog.selectedFile || fileDialog.file
|
||||
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
Layout.fillWidth: true
|
||||
// Layout.preferredWidth: 256 * theme.uiScale
|
||||
Layout.preferredHeight: width
|
||||
|
||||
Rectangle {
|
||||
z: 10
|
||||
visible: opacity > 0
|
||||
opacity: ! fileDialog.dialog.visible &&
|
||||
((! avatar.mxc && ! avatar.changed) || avatar.hovered) ?
|
||||
1 : 0
|
||||
|
||||
anchors.fill: parent
|
||||
color: utils.hsluv(
|
||||
0, 0, 0, (! avatar.mxc && overlayHover.hovered) ? 0.8 : 0.7,
|
||||
)
|
||||
|
||||
Behavior on opacity { HNumberAnimation {} }
|
||||
Behavior on color { HColorAnimation {} }
|
||||
|
||||
HoverHandler { id: overlayHover }
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
acceptedButtons: Qt.NoButton
|
||||
cursorShape:
|
||||
overlayHover.hovered ?
|
||||
Qt.PointingHandCursor : Qt.ArrowCursor
|
||||
}
|
||||
|
||||
HColumnLayout {
|
||||
anchors.centerIn: parent
|
||||
spacing: currentSpacing
|
||||
width: parent.width
|
||||
|
||||
HIcon {
|
||||
svgName: "upload-avatar"
|
||||
colorize: (! avatar.mxc && overlayHover.hovered) ?
|
||||
theme.colors.accentText : theme.icons.colorize
|
||||
dimension: avatar.width / 3
|
||||
|
||||
Layout.alignment: Qt.AlignCenter
|
||||
}
|
||||
|
||||
Item { Layout.preferredHeight: theme.spacing }
|
||||
|
||||
HLabel {
|
||||
text: avatar.mxc ?
|
||||
qsTr("Change profile picture") :
|
||||
qsTr("Upload profile picture")
|
||||
|
||||
color: (! avatar.mxc && overlayHover.hovered) ?
|
||||
theme.colors.accentText : theme.colors.brightText
|
||||
Behavior on color { HColorAnimation {} }
|
||||
|
||||
font.pixelSize: theme.fontSize.small
|
||||
wrapMode: Text.WordWrap
|
||||
horizontalAlignment: Qt.AlignHCenter
|
||||
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
HFileDialogOpener {
|
||||
id: fileDialog
|
||||
fileType: HFileDialogOpener.FileType.Images
|
||||
dialog.title: qsTr("Select profile picture for %1")
|
||||
.arg(account.display_name)
|
||||
}
|
||||
}
|
||||
|
||||
HLabel {
|
||||
text: qsTr("User ID:<br>%1")
|
||||
.arg(utils.coloredNameHtml(userId, userId, userId))
|
||||
textFormat: Text.StyledText
|
||||
wrapMode: Text.Wrap
|
||||
lineHeight: 1.1
|
||||
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
HLabeledItem {
|
||||
id: nameField
|
||||
label.text: qsTr("Display name:")
|
||||
|
||||
Layout.fillWidth: true
|
||||
|
||||
HTextField {
|
||||
width: parent.width
|
||||
defaultText: account.display_name
|
||||
maximumLength: 255
|
||||
|
||||
// TODO: Qt 5.14+: use a Binding enabled when text not empty
|
||||
color: utils.nameColor(text)
|
||||
|
||||
onAccepted: applyChanges()
|
||||
}
|
||||
}
|
||||
|
||||
HLabeledItem {
|
||||
readonly property var aliases: window.settings.writeAliases
|
||||
readonly property string currentAlias: aliases[userId] || ""
|
||||
|
||||
readonly property string alreadyTakenBy: {
|
||||
if (! item.text) return ""
|
||||
|
||||
for (const [id, idAlias] of Object.entries(aliases))
|
||||
if (id !== userId && idAlias === item.text) return id
|
||||
|
||||
return ""
|
||||
}
|
||||
|
||||
|
||||
id: aliasField
|
||||
|
||||
label.text: qsTr("Composer alias:")
|
||||
|
||||
errorLabel.text:
|
||||
alreadyTakenBy ?
|
||||
qsTr("Taken by %1").arg(alreadyTakenBy) :
|
||||
""
|
||||
|
||||
toolTip.text: qsTr(
|
||||
"From any chat, start a message with specified alias " +
|
||||
"followed by a space to type and send as this " +
|
||||
"account.\n" +
|
||||
"The account must have permission to talk in the room.\n"+
|
||||
"To ignore the alias when typing, prepend it with a space."
|
||||
)
|
||||
|
||||
Layout.fillWidth: true
|
||||
|
||||
HTextField {
|
||||
width: parent.width
|
||||
error: aliasField.alreadyTakenBy !== ""
|
||||
onAccepted: applyChanges()
|
||||
defaultText: aliasField.currentAlias
|
||||
placeholderText: qsTr("e.g. %1").arg((
|
||||
nameField.item.text ||
|
||||
account.display_name ||
|
||||
userId.substring(1)
|
||||
)[0])
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -6,55 +6,26 @@ import QtQuick.Layouts 1.12
|
||||
import "../.."
|
||||
import "../../Base"
|
||||
|
||||
HFlickableColumnPage {
|
||||
id: accountSettings
|
||||
title: qsTr("Account settings")
|
||||
header: HPageHeader {}
|
||||
HPage {
|
||||
id: page
|
||||
|
||||
|
||||
property int avatarPreferredSize: 256 * theme.uiScale
|
||||
|
||||
property string userId: ""
|
||||
|
||||
readonly property bool ready:
|
||||
accountInfo !== null && accountInfo.profile_updated > new Date(1)
|
||||
|
||||
readonly property QtObject accountInfo:
|
||||
ModelStore.get("accounts").find(userId)
|
||||
|
||||
property string headerName: ready ? accountInfo.display_name : userId
|
||||
property string userId
|
||||
|
||||
|
||||
HSpacer {}
|
||||
HTabbedBox {
|
||||
anchors.centerIn: parent
|
||||
width: Math.min(implicitWidth, page.availableWidth)
|
||||
height: Math.min(implicitHeight, page.availableHeight)
|
||||
|
||||
Repeater {
|
||||
id: repeater
|
||||
model: ["Profile.qml", "ImportExportKeys.qml"]
|
||||
|
||||
Rectangle {
|
||||
color: ready ? theme.controls.box.background : "transparent"
|
||||
Behavior on color { HColorAnimation {} }
|
||||
|
||||
Layout.alignment: Qt.AlignCenter
|
||||
Layout.topMargin: index > 0 ? theme.spacing : 0
|
||||
Layout.bottomMargin: index < repeater.count - 1 ? theme.spacing : 0
|
||||
|
||||
Layout.maximumWidth: Math.min(parent.width, 640)
|
||||
Layout.preferredWidth:
|
||||
pageLoader.isWide ? parent.width : avatarPreferredSize
|
||||
|
||||
Layout.preferredHeight: childrenRect.height
|
||||
|
||||
HLoader {
|
||||
anchors.centerIn: parent
|
||||
width: ready ? parent.width : 96
|
||||
source: ready ?
|
||||
modelData :
|
||||
(modelData === "Profile.qml" ?
|
||||
"../../Base/HBusyIndicator.qml" : "")
|
||||
}
|
||||
header: HTabBar {
|
||||
HTabButton { text: qsTr("Account") }
|
||||
HTabButton { text: qsTr("Encryption") }
|
||||
HTabButton { text: qsTr("Sessions") }
|
||||
}
|
||||
}
|
||||
|
||||
HSpacer {}
|
||||
Account { userId: page.userId }
|
||||
Encryption { userId: page.userId }
|
||||
Sessions { userId: page.userId }
|
||||
}
|
||||
}
|
||||
|
||||
113
src/gui/Pages/AccountSettings/DeviceDelegate.qml
Normal file
113
src/gui/Pages/AccountSettings/DeviceDelegate.qml
Normal file
@@ -0,0 +1,113 @@
|
||||
// SPDX-License-Identifier: LGPL-3.0-or-later
|
||||
|
||||
import QtQuick 2.12
|
||||
import QtQuick.Layouts 1.12
|
||||
import "../../Base"
|
||||
import "../../Base/ButtonLayout"
|
||||
import "../../Base/HTile"
|
||||
|
||||
HTile {
|
||||
id: device
|
||||
|
||||
|
||||
property HListView view
|
||||
|
||||
|
||||
backgroundColor: "transparent"
|
||||
compact: false
|
||||
|
||||
leftPadding: theme.spacing * 2
|
||||
rightPadding: 0
|
||||
|
||||
contentItem: ContentRow {
|
||||
tile: device
|
||||
spacing: 0
|
||||
|
||||
HCheckBox {
|
||||
id: checkBox
|
||||
checked: view.checked[model.id] || false
|
||||
onClicked: view.toggleCheck(model.index)
|
||||
}
|
||||
|
||||
HColumnLayout {
|
||||
Layout.leftMargin: theme.spacing
|
||||
|
||||
HRowLayout {
|
||||
spacing: theme.spacing
|
||||
|
||||
TitleLabel {
|
||||
text: model.display_name || qsTr("Unnamed")
|
||||
}
|
||||
|
||||
TitleRightInfoLabel {
|
||||
tile: device
|
||||
text: utils.smartFormatDate(model.last_seen_date)
|
||||
}
|
||||
}
|
||||
|
||||
SubtitleLabel {
|
||||
tile: device
|
||||
font.family: theme.fontFamily.mono
|
||||
text:
|
||||
model.last_seen_ip ?
|
||||
model.id + " " + model.last_seen_ip :
|
||||
model.id
|
||||
}
|
||||
}
|
||||
|
||||
HButton {
|
||||
icon.name: "device-action-menu"
|
||||
toolTip.text: qsTr("Rename, verify or sign out")
|
||||
backgroundColor: "transparent"
|
||||
onClicked: contextMenuLoader.active = true
|
||||
|
||||
Layout.fillHeight: true
|
||||
}
|
||||
}
|
||||
|
||||
contextMenu: HMenu {
|
||||
id: actionMenu
|
||||
implicitWidth: Math.min(320 * theme.uiScale, window.width)
|
||||
onOpened: nameField.forceActiveFocus()
|
||||
|
||||
HLabeledItem {
|
||||
width: parent.width
|
||||
label.topPadding: theme.spacing / 2
|
||||
label.text: qsTr("Public display name:")
|
||||
label.horizontalAlignment: Qt.AlignHCenter
|
||||
|
||||
HTextField {
|
||||
id: nameField
|
||||
width: parent.width
|
||||
defaultText: model.display_name
|
||||
horizontalAlignment: Qt.AlignHCenter
|
||||
}
|
||||
}
|
||||
|
||||
HMenuSeparator {}
|
||||
|
||||
HLabeledItem {
|
||||
width: parent.width
|
||||
label.text: qsTr("Actions:")
|
||||
label.horizontalAlignment: Qt.AlignHCenter
|
||||
|
||||
ButtonLayout {
|
||||
width: parent.width
|
||||
|
||||
ApplyButton {
|
||||
enabled:
|
||||
model.type !== "current" && model.type !== "verified"
|
||||
text: qsTr("Verify")
|
||||
icon.name: "device-verify"
|
||||
}
|
||||
|
||||
CancelButton {
|
||||
text: qsTr("Sign out")
|
||||
icon.name: "device-delete"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
onLeftClicked: checkBox.clicked()
|
||||
}
|
||||
75
src/gui/Pages/AccountSettings/DeviceSection.qml
Normal file
75
src/gui/Pages/AccountSettings/DeviceSection.qml
Normal file
@@ -0,0 +1,75 @@
|
||||
// SPDX-License-Identifier: LGPL-3.0-or-later
|
||||
|
||||
import QtQuick 2.12
|
||||
import QtQuick.Layouts 1.12
|
||||
import "../../Base"
|
||||
|
||||
HRowLayout {
|
||||
property HListView view
|
||||
|
||||
readonly property int sectionCheckedCount:
|
||||
Object.values(deviceList.checked).filter(
|
||||
item => item.type === section
|
||||
).length
|
||||
|
||||
readonly property int sectionTotalCount:
|
||||
deviceList.sectionItemCounts[section] || 0
|
||||
|
||||
|
||||
HCheckBox {
|
||||
padding: theme.spacing
|
||||
topPadding: padding * (section === "current" ? 1 : 2)
|
||||
|
||||
text:
|
||||
section === "current" ? qsTr("Current session") :
|
||||
section === "verified" ? qsTr("Verified") :
|
||||
section === "ignored" ? qsTr("Ignored") :
|
||||
section === "blacklisted" ? qsTr("Blacklisted") :
|
||||
qsTr("Unverified")
|
||||
|
||||
tristate: true
|
||||
|
||||
checkState:
|
||||
sectionTotalCount === sectionCheckedCount ? Qt.Checked :
|
||||
! sectionCheckedCount ? Qt.Unchecked :
|
||||
Qt.PartiallyChecked
|
||||
|
||||
nextCheckState:
|
||||
checkState === Qt.Checked ? Qt.Unchecked : Qt.Checked
|
||||
|
||||
onClicked: {
|
||||
const indice = []
|
||||
|
||||
for (let i = 0; i < deviceList.count; i++) {
|
||||
if (deviceList.model.get(i).type === section)
|
||||
indice.push(i)
|
||||
}
|
||||
|
||||
const checkedItems = Object.values(deviceList.checked)
|
||||
|
||||
checkedItems.some(item => item.type === section) ?
|
||||
deviceList.uncheck(...indice) :
|
||||
deviceList.check(...indice)
|
||||
}
|
||||
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
HLabel {
|
||||
text:
|
||||
sectionCheckedCount ?
|
||||
qsTr("%1 / %2")
|
||||
.arg(sectionCheckedCount).arg(sectionTotalCount) :
|
||||
sectionTotalCount
|
||||
|
||||
rightPadding: theme.spacing * 1.5
|
||||
color:
|
||||
section === "current" || section === "verified" ?
|
||||
theme.colors.positiveText :
|
||||
|
||||
section === "unset" || section === "ignored" ?
|
||||
theme.colors.warningText :
|
||||
|
||||
theme.colors.errorText
|
||||
}
|
||||
}
|
||||
@@ -3,41 +3,53 @@
|
||||
import QtQuick 2.12
|
||||
import QtQuick.Layouts 1.12
|
||||
import "../../Base"
|
||||
import "../../Base/ButtonLayout"
|
||||
|
||||
HBox {
|
||||
buttonModel: [
|
||||
{ name: "export", text: qsTr("Export"), iconName: "export-keys"},
|
||||
{ name: "import", text: qsTr("Import"), iconName: "import-keys"},
|
||||
]
|
||||
HFlickableColumnPage {
|
||||
id: page
|
||||
|
||||
buttonCallbacks: ({
|
||||
export: button => {
|
||||
utils.makeObject(
|
||||
|
||||
property string userId
|
||||
|
||||
|
||||
function takeFocus() { exportButton.forceActiveFocus() }
|
||||
|
||||
|
||||
footer: ButtonLayout {
|
||||
OtherButton {
|
||||
id: exportButton
|
||||
text: qsTr("Export")
|
||||
icon.name: "export-keys"
|
||||
|
||||
onClicked: utils.makeObject(
|
||||
"Dialogs/ExportKeys.qml",
|
||||
accountSettings,
|
||||
{ userId: accountSettings.userId },
|
||||
page,
|
||||
{ userId: page.userId },
|
||||
obj => {
|
||||
button.loading = Qt.binding(() => obj.exporting)
|
||||
loading = Qt.binding(() => obj.exporting)
|
||||
obj.dialog.open()
|
||||
}
|
||||
)
|
||||
},
|
||||
import: button => {
|
||||
utils.makeObject(
|
||||
}
|
||||
|
||||
OtherButton {
|
||||
text: qsTr("Import")
|
||||
icon.name: "import-keys"
|
||||
|
||||
onClicked: utils.makeObject(
|
||||
"Dialogs/ImportKeys.qml",
|
||||
accountSettings,
|
||||
{ userId: accountSettings.userId },
|
||||
page,
|
||||
{ userId: page.userId },
|
||||
obj => { obj.dialog.open() }
|
||||
)
|
||||
},
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
HLabel {
|
||||
wrapMode: Text.Wrap
|
||||
text: qsTr(
|
||||
"The decryption keys for messages received in encrypted rooms " +
|
||||
"<b>until present time</b> can be backed up " +
|
||||
"<b>until present time</b> can be saved " +
|
||||
"to a passphrase-protected file.<br><br>" +
|
||||
|
||||
"You can then import this file on any Matrix account or " +
|
||||
@@ -1,271 +0,0 @@
|
||||
// SPDX-License-Identifier: LGPL-3.0-or-later
|
||||
|
||||
import QtQuick 2.12
|
||||
import QtQuick.Controls 2.12
|
||||
import QtQuick.Layouts 1.12
|
||||
import "../../Base"
|
||||
import "../../Dialogs"
|
||||
|
||||
HGridLayout {
|
||||
function applyChanges() {
|
||||
if (nameField.changed) {
|
||||
saveButton.nameChangeRunning = true
|
||||
|
||||
py.callClientCoro(
|
||||
userId, "set_displayname", [nameField.item.text], () => {
|
||||
py.callClientCoro(userId, "update_own_profile", [], () => {
|
||||
saveButton.nameChangeRunning = false
|
||||
accountSettings.headerName =
|
||||
Qt.binding(() => accountInfo.display_name)
|
||||
})
|
||||
}
|
||||
)
|
||||
}
|
||||
|
||||
if (aliasField.changed) {
|
||||
window.settings.writeAliases[userId] = aliasField.item.text
|
||||
window.settingsChanged()
|
||||
}
|
||||
|
||||
if (avatar.changed) {
|
||||
saveButton.avatarChangeRunning = true
|
||||
|
||||
const path =
|
||||
Qt.resolvedUrl(avatar.sourceOverride).replace(/^file:/, "")
|
||||
|
||||
py.callClientCoro(userId, "set_avatar_from_file", [path], () => {
|
||||
py.callClientCoro(userId, "update_own_profile", [], () => {
|
||||
saveButton.avatarChangeRunning = false
|
||||
})
|
||||
}, (errType, [httpCode]) => {
|
||||
console.error("Avatar upload failed:", httpCode, errType)
|
||||
saveButton.avatarChangeRunning = false
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
function cancelChanges() {
|
||||
nameField.item.text = accountInfo.display_name
|
||||
aliasField.item.text = aliasField.currentAlias
|
||||
fileDialog.selectedFile = ""
|
||||
fileDialog.file = ""
|
||||
|
||||
accountSettings.headerName = Qt.binding(() => accountInfo.display_name)
|
||||
}
|
||||
|
||||
columns: 2
|
||||
flow: pageLoader.isWide ? GridLayout.LeftToRight : GridLayout.TopToBottom
|
||||
rowSpacing: currentSpacing
|
||||
|
||||
Component.onCompleted: nameField.item.forceActiveFocus()
|
||||
|
||||
HUserAvatar {
|
||||
property bool changed: Boolean(sourceOverride)
|
||||
|
||||
id: avatar
|
||||
userId: accountSettings.userId
|
||||
displayName: nameField.item.text
|
||||
mxc: accountInfo.avatar_url
|
||||
toolTipMxc: ""
|
||||
sourceOverride: fileDialog.selectedFile || fileDialog.file
|
||||
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
|
||||
Layout.preferredWidth: Math.min(flickable.height, avatarPreferredSize)
|
||||
Layout.preferredHeight: Layout.preferredWidth
|
||||
|
||||
Rectangle {
|
||||
z: 10
|
||||
visible: opacity > 0
|
||||
opacity: ! fileDialog.dialog.visible &&
|
||||
((! avatar.mxc && ! avatar.changed) || avatar.hovered) ?
|
||||
1 : 0
|
||||
|
||||
anchors.fill: parent
|
||||
color: utils.hsluv(0, 0, 0,
|
||||
(! avatar.mxc && overlayHover.hovered) ? 0.8 : 0.7
|
||||
)
|
||||
|
||||
Behavior on opacity { HNumberAnimation {} }
|
||||
Behavior on color { HColorAnimation {} }
|
||||
|
||||
HoverHandler { id: overlayHover }
|
||||
|
||||
MouseArea {
|
||||
anchors.fill: parent
|
||||
acceptedButtons: Qt.NoButton
|
||||
cursorShape:
|
||||
overlayHover.hovered ?
|
||||
Qt.PointingHandCursor : Qt.ArrowCursor
|
||||
}
|
||||
|
||||
HColumnLayout {
|
||||
anchors.centerIn: parent
|
||||
spacing: currentSpacing
|
||||
width: parent.width
|
||||
|
||||
HIcon {
|
||||
svgName: "upload-avatar"
|
||||
colorize: (! avatar.mxc && overlayHover.hovered) ?
|
||||
theme.colors.accentText : theme.icons.colorize
|
||||
dimension: avatar.width / 3
|
||||
|
||||
Layout.alignment: Qt.AlignCenter
|
||||
}
|
||||
|
||||
Item { Layout.preferredHeight: theme.spacing }
|
||||
|
||||
HLabel {
|
||||
text: avatar.mxc ?
|
||||
qsTr("Change profile picture") :
|
||||
qsTr("Upload profile picture")
|
||||
|
||||
color: (! avatar.mxc && overlayHover.hovered) ?
|
||||
theme.colors.accentText : theme.colors.brightText
|
||||
Behavior on color { HColorAnimation {} }
|
||||
|
||||
font.pixelSize: theme.fontSize.big *
|
||||
avatar.height / avatarPreferredSize
|
||||
wrapMode: Text.WordWrap
|
||||
horizontalAlignment: Qt.AlignHCenter
|
||||
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
HFileDialogOpener {
|
||||
id: fileDialog
|
||||
fileType: HFileDialogOpener.FileType.Images
|
||||
dialog.title: qsTr("Select profile picture for %1")
|
||||
.arg(accountInfo.display_name)
|
||||
}
|
||||
}
|
||||
|
||||
HColumnLayout {
|
||||
id: profileInfo
|
||||
spacing: theme.spacing
|
||||
|
||||
HColumnLayout {
|
||||
spacing: theme.spacing
|
||||
Layout.margins: currentSpacing
|
||||
|
||||
HLabel {
|
||||
text: qsTr("User ID:<br>%1")
|
||||
.arg(utils.coloredNameHtml(userId, userId, userId))
|
||||
textFormat: Text.StyledText
|
||||
wrapMode: Text.Wrap
|
||||
|
||||
Layout.fillWidth: true
|
||||
}
|
||||
|
||||
HLabeledItem {
|
||||
property bool changed: item.text !== accountInfo.display_name
|
||||
|
||||
id: nameField
|
||||
label.text: qsTr("Display name:")
|
||||
|
||||
Layout.fillWidth: true
|
||||
Layout.maximumWidth: 480
|
||||
|
||||
HTextField {
|
||||
width: parent.width
|
||||
maximumLength: 255
|
||||
|
||||
onAccepted: applyChanges()
|
||||
onTextChanged: accountSettings.headerName = text
|
||||
Component.onCompleted: text = accountInfo.display_name
|
||||
|
||||
Keys.onEscapePressed: cancelChanges()
|
||||
}
|
||||
}
|
||||
|
||||
HLabeledItem {
|
||||
property string currentAlias: aliases[userId] || ""
|
||||
property bool changed: item.text !== currentAlias
|
||||
|
||||
readonly property var aliases: window.settings.writeAliases
|
||||
|
||||
readonly property string alreadyTakenBy: {
|
||||
if (! item.text) return ""
|
||||
|
||||
for (const [id, idAlias] of Object.entries(aliases))
|
||||
if (id !== userId && idAlias === item.text) return id
|
||||
|
||||
return ""
|
||||
}
|
||||
|
||||
|
||||
id: aliasField
|
||||
|
||||
label.text: qsTr("Composer alias:")
|
||||
|
||||
errorLabel.text:
|
||||
alreadyTakenBy ?
|
||||
qsTr("Taken by %1").arg(alreadyTakenBy) :
|
||||
""
|
||||
|
||||
toolTip.text: qsTr(
|
||||
"From any chat, start a message with specified alias " +
|
||||
"followed by a space to type and send as this " +
|
||||
"account.\n" +
|
||||
"The account must have permission to talk in the room.\n"+
|
||||
"To ignore the alias when typing, prepend it with a space."
|
||||
)
|
||||
|
||||
Layout.fillWidth: true
|
||||
Layout.maximumWidth: 480
|
||||
|
||||
HTextField {
|
||||
width: parent.width
|
||||
error: aliasField.alreadyTakenBy !== ""
|
||||
onAccepted: applyChanges()
|
||||
placeholderText: qsTr("e.g. %1").arg((
|
||||
nameField.item.text ||
|
||||
accountInfo.display_name ||
|
||||
userId.substring(1)
|
||||
)[0])
|
||||
|
||||
Component.onCompleted: text = aliasField.currentAlias
|
||||
|
||||
Keys.onEscapePressed: cancelChanges()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
HRowLayout {
|
||||
Layout.alignment: Qt.AlignBottom
|
||||
|
||||
HButton {
|
||||
property bool nameChangeRunning: false
|
||||
property bool avatarChangeRunning: false
|
||||
|
||||
id: saveButton
|
||||
icon.name: "apply"
|
||||
icon.color: theme.colors.positiveBackground
|
||||
text: qsTr("Save")
|
||||
loading: nameChangeRunning || avatarChangeRunning
|
||||
enabled:
|
||||
avatar.changed ||
|
||||
nameField.changed ||
|
||||
(aliasField.changed && ! aliasField.alreadyTakenBy)
|
||||
|
||||
onClicked: applyChanges()
|
||||
|
||||
Layout.fillWidth: true
|
||||
Layout.alignment: Qt.AlignBottom
|
||||
}
|
||||
|
||||
HButton {
|
||||
icon.name: "cancel"
|
||||
icon.color: theme.colors.negativeBackground
|
||||
text: qsTr("Cancel")
|
||||
enabled: saveButton.enabled && ! saveButton.loading
|
||||
onClicked: cancelChanges()
|
||||
|
||||
Layout.fillWidth: true
|
||||
Layout.alignment: Qt.AlignBottom
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
95
src/gui/Pages/AccountSettings/Sessions.qml
Normal file
95
src/gui/Pages/AccountSettings/Sessions.qml
Normal file
@@ -0,0 +1,95 @@
|
||||
// SPDX-License-Identifier: LGPL-3.0-or-later
|
||||
|
||||
import QtQuick 2.12
|
||||
import QtQuick.Layouts 1.12
|
||||
import "../../Base"
|
||||
import "../../Base/ButtonLayout"
|
||||
import "../../PythonBridge"
|
||||
|
||||
HColumnPage {
|
||||
id: page
|
||||
|
||||
|
||||
property string userId
|
||||
|
||||
property Future loadFuture: null
|
||||
|
||||
|
||||
function takeFocus() {} // XXX
|
||||
|
||||
function loadDevices() {
|
||||
loadFuture = py.callClientCoro(userId, "devices_info", [], devices => {
|
||||
deviceList.checked = {}
|
||||
deviceList.model.clear()
|
||||
|
||||
for (const device of devices)
|
||||
deviceList.model.append(device)
|
||||
|
||||
loadFuture = null
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
footer: ButtonLayout {
|
||||
visible: height >= 0
|
||||
height: deviceList.selectedCount ? implicitHeight : 0
|
||||
|
||||
Behavior on height { HNumberAnimation {} }
|
||||
|
||||
OtherButton {
|
||||
text:
|
||||
deviceList.selectedCount === 1 ?
|
||||
qsTr("Sign out checked session") :
|
||||
qsTr("Sign out %1 sessions").arg(deviceList.selectedCount)
|
||||
|
||||
icon.name: "device-delete-checked"
|
||||
icon.color: theme.colors.negativeBackground
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
HListView {
|
||||
id: deviceList
|
||||
|
||||
readonly property var sectionItemCounts: {
|
||||
const counts = {}
|
||||
|
||||
for (let i = 0; i < count; i++) {
|
||||
const section = model.get(i).type
|
||||
section in counts ? counts[section] += 1 : counts[section] = 1
|
||||
}
|
||||
|
||||
return counts
|
||||
}
|
||||
|
||||
clip: true
|
||||
model: ListModel {}
|
||||
delegate: DeviceDelegate {
|
||||
width: deviceList.width
|
||||
view: deviceList
|
||||
}
|
||||
|
||||
section.property: "type"
|
||||
section.delegate: DeviceSection {
|
||||
width: deviceList.width
|
||||
view: deviceList
|
||||
}
|
||||
|
||||
Component.onCompleted: page.loadDevices()
|
||||
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
|
||||
HLoader {
|
||||
anchors.centerIn: parent
|
||||
width: 96 * theme.uiScale
|
||||
height: width
|
||||
|
||||
source: "../../Base/HBusyIndicator.qml"
|
||||
active: page.loadFuture
|
||||
opacity: active ? 1 : 0
|
||||
|
||||
Behavior on opacity { HNumberAnimation { factor: 2 } }
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user