[network/kaidan] src/qml: Fix various UI problems
Melvin Keskin <[email protected]>
| Newsgroups | gmane.comp.kde.cvs |
|---|---|
| Message-ID | <[email protected]> |
Git commit 77399372d12bb15728b6be7ca8ea7b2daf7421af by Melvin Keskin.
Committed on 06/08/2026 at 12:44.
Pushed by melvo into branch 'master'.
Fix various UI problems
* Fix dimensions/margins to be consistent with remaining UI
* Fix hiding password if corresponding setting is enabled
* GroupChatUserDelegate: Fix background color of button for banning
M +91 -88 src/qml/details/AccountDetailsContent.qml
M +0 -2 src/qml/details/GroupChatDetailsContent.qml
M +3 -5 src/qml/details/RosterItemDetailsContent.qml
M +0 -1 src/qml/elements/ConfirmationArea.qml
M +3 -0 src/qml/elements/ContactDelegate.qml
M +0 -2 src/qml/elements/GroupChatUserDelegate.qml
M +0 -1 src/qml/elements/RosterItemDelegate.qml
https://invent.kde.org/network/kaidan/-/commit/77399372d12bb15728b6be7ca8ea7b2daf7421af
diff --git a/src/qml/details/AccountDetailsContent.qml b/src/qml/details/AccountDetailsContent.qml
index 15f2d0edc..d30ae0636 100644
--- a/src/qml/details/AccountDetailsContent.qml
+++ b/src/qml/details/AccountDetailsContent.qml
@@ -492,7 +492,7 @@ DetailsContent {
FormCard.AbstractFormDelegate {
background: null
contentItem: RowLayout {
- spacing: Kirigami.Units.largeSpacing * 3
+ spacing: FormCard.FormCardUnits.horizontalSpacing
Controls.Label {
text: qsTr("You must be connected to block or unblock chat addresses")
@@ -522,7 +522,6 @@ DetailsContent {
icon.source: "list-add-symbolic"
visible: !root.account.blockingController.busy
enabled: blockingTextField.text.length
- Layout.rightMargin: Kirigami.Units.largeSpacing
onClicked: {
const jid = blockingTextField.text
@@ -539,9 +538,8 @@ DetailsContent {
Controls.BusyIndicator {
visible: root.account.blockingController.busy
- Layout.preferredWidth: blockingButton.Layout.preferredWidth
- Layout.preferredHeight: Layout.preferredWidth
- Layout.rightMargin: blockingButton.Layout.rightMargin
+ implicitWidth: blockingButton.implicitWidth
+ implicitHeight: blockingButton.implicitHeight
}
}
}
@@ -678,6 +676,7 @@ DetailsContent {
}
FormCard.FormCard {
+ id: passwordChangeArea
visible: root.account.settings.enabled && root.account.settings.inBandRegistrationFeaturesSupported
enabled: accountRemovalArea.enabled
Layout.fillWidth: true
@@ -690,100 +689,104 @@ DetailsContent {
text: qsTr("Change your password. You need to enter the new password on all your other devices!")
}
- FormCardCustomContentArea {
- contentItem: ColumnLayout {
- id: passwordChangeArea
-
- PasswordField {
- id: passwordVerificationField
- label: qsTr("Current password")
- placeholderText: qsTr("Enter your current password")
- invalidHintText: placeholderText
- valid: acceptableInput && text === root.account.settings.password
- visible: root.account.settings.passwordVisibility !== AccountSettings.PasswordVisibility.Visible
- enabled: !passwordBusyIndicator.visible
- Layout.rightMargin: passwordChangeButton.Layout.preferredWidth + passwordButtonFieldArea.spacing
- onAccepted: passwordChangeArea.confirm()
- }
+ PasswordField {
+ id: passwordVerificationField
+ label: qsTr("Current password")
+ placeholderText: qsTr("Enter your current password")
+ invalidHintText: placeholderText
+ valid: acceptableInput && text === root.account.settings.password
+ visible: root.account.settings.passwordVisibility !== AccountSettings.PasswordVisibility.Visible
+ enabled: !passwordBusyIndicator.visible
+ Layout.rightMargin: passwordButtonFieldArea.spacing + passwordChangeButton.implicitWidth + passwordButtonFieldArea.Layout.rightMargin
+ onAccepted: passwordChangeArea.confirm()
+ }
- RowLayout {
- id: passwordButtonFieldArea
-
- PasswordField {
- id: passwordField
- label: passwordVerificationField.visible ? qsTr("New password") : qsTr("Password")
- placeholderText: qsTr("Enter your new password")
- text: passwordVerificationField.visible ? "" : root.account.settings.password
- invalidHintText: qsTr("Enter a different password to change it")
- valid: acceptableInput && text !== root.account.settings.password
- showPasswordQuality: true
- enabled: !passwordBusyIndicator.visible
- onAccepted: passwordChangeArea.confirm()
- }
+ RowLayout {
+ id: passwordButtonFieldArea
+ spacing: 0
+ Layout.rightMargin: FormCard.FormCardUnits.horizontalPadding
+
+ PasswordField {
+ id: passwordField
+ label: passwordVerificationField.visible ? qsTr("New password") : qsTr("Password")
+ placeholderText: qsTr("Enter your new password")
+ text: passwordVerificationField.visible ? "" : root.account.settings.password
+ invalidHintText: qsTr("Enter a different password to change it")
+ valid: acceptableInput && text !== root.account.settings.password
+ showPasswordQuality: true
+ enabled: !passwordBusyIndicator.visible
+ onAccepted: passwordChangeArea.confirm()
- IconButton {
- id: passwordChangeButton
- text: qsTr("Change password")
- icon.source: "emblem-ok-symbolic"
- visible: !passwordBusyIndicator.visible
- Layout.alignment: Qt.AlignTop
- Layout.topMargin: Kirigami.Units.largeSpacing * 4
- onClicked: passwordChangeArea.confirm()
- }
+ Connections {
+ target: passwordVerificationField
- Controls.BusyIndicator {
- id: passwordBusyIndicator
- visible: false
- implicitWidth: passwordChangeButton.width
- implicitHeight: passwordChangeButton.height
- Layout.alignment: passwordChangeButton.Layout.alignment
- Layout.topMargin: passwordChangeButton.Layout.topMargin
+ function onVisibleChanged() {
+ // Ensure that the text is hidden if passwordVerificationField becomes visible.
+ // That is needed because passwordField.text is internally overwritten.
+ passwordField.text = passwordVerificationField.visible ? "" : root.account.settings.password
}
}
+ }
- Controls.Label {
- id: passwordChangeErrorMessage
- visible: false
- font.weight: Font.Medium
- wrapMode: Text.WordWrap
- padding: 10
- Layout.fillWidth: true
- background: RoundedRectangle {
- color: Kirigami.Theme.negativeBackgroundColor
- }
- }
+ IconButton {
+ id: passwordChangeButton
+ text: qsTr("Change password")
+ icon.source: "emblem-ok-symbolic"
+ visible: !passwordBusyIndicator.visible
+ Layout.alignment: Qt.AlignTop
+ Layout.topMargin: Kirigami.Units.largeSpacing * 4
+ onClicked: passwordChangeArea.confirm()
+ }
- Connections {
- target: root.account.registrationController
+ Controls.BusyIndicator {
+ id: passwordBusyIndicator
+ visible: false
+ implicitWidth: passwordChangeButton.width
+ implicitHeight: passwordChangeButton.height
+ Layout.alignment: passwordChangeButton.Layout.alignment
+ Layout.topMargin: passwordChangeButton.Layout.topMargin
+ }
+ }
- function onPasswordChangeFailed(errorMessage) {
- passwordBusyIndicator.visible = false
- passwordChangeErrorMessage.visible = true
- passwordChangeErrorMessage.text = qsTr("Failed to change password: %1", "%1 is an error message").arg(errorMessage)
- }
+ Controls.Label {
+ id: passwordChangeErrorMessage
+ visible: false
+ font.weight: Font.Medium
+ wrapMode: Text.WordWrap
+ padding: 10
+ Layout.fillWidth: true
+ background: RoundedRectangle {
+ color: Kirigami.Theme.negativeBackgroundColor
+ }
+ }
- function onPasswordChangeSucceeded() {
- passwordBusyIndicator.visible = false
- passwordChangeErrorMessage.visible = false
- passiveNotification(qsTr("Password changed successfully"))
- }
- }
+ Connections {
+ target: root.account.registrationController
- function confirm() {
- if (passwordVerificationField.visible) {
- if (!passwordVerificationField.valid) {
- passwordVerificationField.forceActiveFocus()
- return
- }
- }
+ function onPasswordChangeFailed(errorMessage) {
+ passwordBusyIndicator.visible = false
+ passwordChangeErrorMessage.visible = true
+ passwordChangeErrorMessage.text = qsTr("Failed to change password: %1", "%1 is an error message").arg(errorMessage)
+ }
- if (passwordField.valid) {
- passwordBusyIndicator.visible = true
- root.account.registrationController.changePassword(passwordField.text)
- } else {
- passwordField.forceActiveFocus()
- }
- }
+ function onPasswordChangeSucceeded() {
+ passwordBusyIndicator.visible = false
+ passwordChangeErrorMessage.visible = false
+ passiveNotification(qsTr("Password changed successfully"))
+ }
+ }
+
+ function confirm() {
+ if (passwordVerificationField.visible && !passwordVerificationField.valid) {
+ passwordVerificationField.forceActiveFocus()
+ return
+ }
+
+ if (passwordField.valid) {
+ passwordBusyIndicator.visible = true
+ root.account.registrationController.changePassword(passwordField.text)
+ } else {
+ passwordField.forceActiveFocus()
}
}
}
diff --git a/src/qml/details/GroupChatDetailsContent.qml b/src/qml/details/GroupChatDetailsContent.qml
index c4d992b16..c62f45dbd 100644
--- a/src/qml/details/GroupChatDetailsContent.qml
+++ b/src/qml/details/GroupChatDetailsContent.qml
@@ -253,8 +253,6 @@ RosterItemDetailsContent {
FormCard.AbstractFormDelegate {
background: null
contentItem: RowLayout {
- spacing: Kirigami.Units.largeSpacing * 3
-
SimpleListViewSearchField {
listView: keyAuthenticationUserListView
Layout.fillWidth: true
diff --git a/src/qml/details/RosterItemDetailsContent.qml b/src/qml/details/RosterItemDetailsContent.qml
index 1e0eb9812..623562264 100644
--- a/src/qml/details/RosterItemDetailsContent.qml
+++ b/src/qml/details/RosterItemDetailsContent.qml
@@ -58,7 +58,7 @@ DetailsContent {
FormCard.AbstractFormDelegate {
background: null
contentItem: RowLayout {
- spacing: Kirigami.Units.largeSpacing * 3
+ spacing: FormCard.FormCardUnits.horizontalSpacing
Controls.TextField {
id: rosterGroupField
@@ -80,7 +80,6 @@ DetailsContent {
icon.source: "list-add-symbolic"
enabled: rosterGroupField.text.length
visible: !rosterGroupBusyIndicator.visible
- Layout.rightMargin: Kirigami.Units.largeSpacing
onClicked: {
let groups = root.chatController.rosterItem.groups
@@ -102,9 +101,8 @@ DetailsContent {
Controls.BusyIndicator {
id: rosterGroupBusyIndicator
visible: false
- Layout.preferredWidth: rosterGroupAdditionButton.Layout.preferredWidth
- Layout.preferredHeight: Layout.preferredWidth
- Layout.rightMargin: rosterGroupAdditionButton.Layout.rightMargin
+ implicitWidth: rosterGroupAdditionButton.implicitWidth
+ implicitHeight: rosterGroupAdditionButton.implicitHeight
}
Connections {
diff --git a/src/qml/elements/ConfirmationArea.qml b/src/qml/elements/ConfirmationArea.qml
index 150c2fb38..be3e51a7c 100644
--- a/src/qml/elements/ConfirmationArea.qml
+++ b/src/qml/elements/ConfirmationArea.qml
@@ -23,7 +23,6 @@ LoadingStackArea {
CenteredAdaptiveButton {
id: confirmationButton
- Layout.topMargin: FormCard.FormCardUnits.verticalPadding
Layout.bottomMargin: FormCard.FormCardUnits.verticalPadding
Layout.leftMargin: FormCard.FormCardUnits.horizontalPadding
Layout.rightMargin: FormCard.FormCardUnits.horizontalPadding
diff --git a/src/qml/elements/ContactDelegate.qml b/src/qml/elements/ContactDelegate.qml
index 124363b72..ef9d41b89 100644
--- a/src/qml/elements/ContactDelegate.qml
+++ b/src/qml/elements/ContactDelegate.qml
@@ -17,6 +17,9 @@ ClickableItemDelegate {
id: avatar
jid: root.jid
name: root.name
+ Layout.topMargin: Kirigami.Units.smallSpacing
+ Layout.bottomMargin: Kirigami.Units.smallSpacing
+ Layout.leftMargin: Kirigami.Units.smallSpacing
}
Kirigami.Heading {
diff --git a/src/qml/elements/GroupChatUserDelegate.qml b/src/qml/elements/GroupChatUserDelegate.qml
index 452989834..4a296de99 100644
--- a/src/qml/elements/GroupChatUserDelegate.qml
+++ b/src/qml/elements/GroupChatUserDelegate.qml
@@ -17,8 +17,6 @@ ContactDelegate {
text: qsTr("Ban")
icon.source: "edit-delete-symbolic"
visible: root.account.settings.enabled && root.account.connection.state === Enums.StateConnected
- flat: !root.hovered
- Layout.rightMargin: Kirigami.Units.smallSpacing * 3
onClicked: root.account.groupChatController.banUser(root.account.settings.jid, root.chatJid, root.jid)
}
}
diff --git a/src/qml/elements/RosterItemDelegate.qml b/src/qml/elements/RosterItemDelegate.qml
index 127abc0f4..ccd7533aa 100644
--- a/src/qml/elements/RosterItemDelegate.qml
+++ b/src/qml/elements/RosterItemDelegate.qml
@@ -41,7 +41,6 @@ ClickableItemDelegate {
signal moveRequested(int oldIndex, int newIndex)
signal dropRequested(int oldIndex, int newIndex)
-
interactiveBackground.color: {
let color
let colorOpacity