From a6b7ef76f8082dec02a4f9837eb58435cdce36b9 Mon Sep 17 00:00:00 2001
From: cberthet <capucine.berthet@savoirfairelinux.com>
Date: Tue, 7 Nov 2023 14:55:34 -0500
Subject: [PATCH] DeleteAccountDialog: new design
GitLab: #1417
Change-Id: I4f701c130722f4c25ea4d13525ab111368139f98
---
.../icons/notification_important_24dp.svg | 3 +
.../commoncomponents/DeleteAccountDialog.qml | 220 +++++++++++++++---
src/app/constant/JamiTheme.qml | 5 +
.../components/ManageAccountPage.qml | 2 -
4 files changed, 193 insertions(+), 37 deletions(-)
create mode 100644 resources/icons/notification_important_24dp.svg
diff --git a/resources/icons/notification_important_24dp.svg b/resources/icons/notification_important_24dp.svg
new file mode 100644
index 000000000..73c8fc458
--- /dev/null
+++ b/resources/icons/notification_important_24dp.svg
@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="18" height="21.5" viewBox="0 0 18 21.5">
+ <path id="notification_important_black_24dp" d="M10.01,21.01a1.99,1.99,0,0,0,3.98,0ZM12,6a5,5,0,0,1,5,5v7H7V11A5,5,0,0,1,12,6Zm0-4.5A1.5,1.5,0,0,0,10.5,3V4.17A6.993,6.993,0,0,0,5,11v6L3,19v1H21V19l-2-2V11a6.993,6.993,0,0,0-5.5-6.83V3A1.5,1.5,0,0,0,12,1.5ZM11,8h2v4H11Zm0,6h2v2H11Z" transform="translate(-3 -1.5)" fill="#c02"/>
+</svg>
diff --git a/src/app/commoncomponents/DeleteAccountDialog.qml b/src/app/commoncomponents/DeleteAccountDialog.qml
index 8dedfbe42..82dd2ff4f 100644
--- a/src/app/commoncomponents/DeleteAccountDialog.qml
+++ b/src/app/commoncomponents/DeleteAccountDialog.qml
@@ -26,8 +26,6 @@ BaseModalDialog {
id: root
property bool isSIP: false
- property string bestName: ""
- property string accountId: ""
signal accepted
@@ -35,6 +33,7 @@ BaseModalDialog {
closeButtonVisible: false
button1.text: JamiStrings.optionDelete
+
button1Role: DialogButtonBox.DestructiveRole
button1.onClicked: {
button1.enabled = false;
@@ -43,9 +42,12 @@ BaseModalDialog {
close();
accepted();
}
+
button2.text: JamiStrings.optionCancel
button2Role: DialogButtonBox.RejectRole
button2.onClicked: close();
+ button1.contentColorProvider: JamiTheme.deleteRedButton
+
BusyIndicator {
id: busyInd
@@ -61,12 +63,14 @@ BaseModalDialog {
popupContent: ColumnLayout {
id: deleteAccountContentColumnLayout
anchors.centerIn: parent
+ spacing: 10
Label {
id: labelDeletion
- Layout.alignment: Qt.AlignHCenter
+ Layout.alignment: Qt.AlignLeft
Layout.maximumWidth: root.width - 4*JamiTheme.preferredMarginSize
+ Layout.bottomMargin: 5
color: JamiTheme.textColor
text: JamiStrings.confirmDeleteQuestion
@@ -77,54 +81,200 @@ BaseModalDialog {
wrapMode: Text.Wrap
}
- Label {
- id: labelBestId
+ Rectangle {
+ id: accountRectangle
- Layout.alignment: Qt.AlignHCenter
+ color: JamiTheme.backgroundRectangleColor
- color: JamiTheme.textColor
- text: bestName
+ Layout.preferredWidth: parent.width
+ Layout.preferredHeight: userProfileDialogLayout.height
+ Layout.maximumWidth: root.width - 80
- font.pointSize: JamiTheme.textFontSize
- font.kerning: true
- font.bold: true
- wrapMode: Text.Wrap
- }
+ radius: 5
- Label {
- id: labelAccountHash
+ ColumnLayout {
+ id: userProfileDialogLayout
- Layout.alignment: Qt.AlignHCenter
- Layout.preferredWidth: root.width - 4*JamiTheme.preferredMarginSize
+ anchors.centerIn: parent
+ width: parent.width
- color: JamiTheme.textColor
- text: accountId
+ RowLayout {
+ Layout.margins: 10
+ Layout.fillWidth: true
- font.pointSize: JamiTheme.textFontSize
- font.kerning: true
+ spacing: 10
- horizontalAlignment: Text.AlignHCenter
- wrapMode: Text.Wrap
+ Avatar {
+ id: currentAccountImage
+
+ Layout.preferredWidth: 56
+ Layout.preferredHeight: 56
+
+ imageId: CurrentAccount.id
+ showPresenceIndicator: false
+ mode: Avatar.Mode.Account
+ }
+
+ ColumnLayout {
+
+ spacing: 10
+ Layout.alignment: Qt.AlignLeft
+
+ // Visible when user alias is not empty and not equal to id.
+ TextEdit {
+ id: accountAlias
+
+ Layout.alignment: Qt.AlignLeft
+
+ font.pointSize: JamiTheme.settingsFontSize
+ font.kerning: true
+
+ color: JamiTheme.textColor
+ visible: accountDisplayName.text ? (CurrentAccount.alias === CurrentAccount.bestId ? false : true) : false
+ selectByMouse: true
+ readOnly: true
+
+ wrapMode: Text.NoWrap
+ text: textMetricsAccountAliasText.elidedText
+ horizontalAlignment: Text.AlignLeft
+ verticalAlignment: Text.AlignVCenter
+
+ TextMetrics {
+ id: textMetricsAccountAliasText
+
+ font: accountAlias.font
+ text: CurrentAccount.alias
+ elideWidth: root.width - 200
+ elide: Qt.ElideMiddle
+ }
+ }
+
+ // Visible when user name is not empty or equals to id.
+ TextEdit {
+ id: accountDisplayName
+
+ Layout.alignment: Qt.AlignLeft
+
+ font.pointSize: JamiTheme.textFontSize
+ font.kerning: true
+ color: JamiTheme.faddedFontColor
+
+ visible: text.length && text !== CurrentAccount.alias
+ readOnly: true
+ selectByMouse: true
+
+ wrapMode: Text.NoWrap
+ text: textMetricsAccountDisplayNameText.elidedText
+ horizontalAlignment: Text.AlignLeft
+ verticalAlignment: Text.AlignVCenter
+
+ TextMetrics {
+ id: textMetricsAccountDisplayNameText
+
+ font: accountDisplayName.font
+ text: CurrentAccount.bestId
+ elideWidth: root.width - 200
+ elide: Qt.ElideMiddle
+ }
+ }
+ }
+ }
+ Rectangle {
+ Layout.fillWidth: true
+
+ radius: 5
+ color: root.backgroundColor
+
+ Layout.preferredHeight: accountId.height + 10
+ Layout.margins: 10
+ Layout.topMargin: 0
+ RowLayout {
+ anchors.horizontalCenter: parent.horizontalCenter
+ anchors.verticalCenter: parent.verticalCenter
+
+ spacing: 20
+
+ Text {
+ id: identifierText
+
+ font.pointSize: JamiTheme.textFontSize
+ text: JamiStrings.identifier
+
+ color: JamiTheme.faddedFontColor
+ horizontalAlignment: Text.AlignLeft
+ verticalAlignment: Text.AlignVCenter
+
+ Layout.leftMargin: JamiTheme.preferredMarginSize
+ }
+ Label {
+ id: accountId
+
+ Layout.alignment: Qt.AlignLeft
+ Layout.preferredWidth: root.width - 250
+ Layout.rightMargin: JamiTheme.preferredMarginSize
+
+ font.pointSize: JamiTheme.textFontSize
+ font.kerning: true
+ color: JamiTheme.textColor
+
+ elide: Text.ElideRight
+ text: CurrentAccount.uri
+ horizontalAlignment: Text.AlignLeft
+ verticalAlignment: Text.AlignVCenter
+ }
+ }
+ }
+ }
}
+ Rectangle {
+ id: warningRectangle
- Label {
- id: labelWarning
+ color: JamiTheme.warningRedRectangle
- visible: !isSIP
+ Layout.preferredWidth: parent.width
+ Layout.preferredHeight: labelWarning.height + 20
+ Layout.maximumWidth: root.width - 80
- Layout.alignment: Qt.AlignHCenter
- Layout.preferredWidth: root.width - 4*JamiTheme.preferredMarginSize
+ radius: 5
- text: JamiStrings.deleteAccountInfos
+ RowLayout{
+ id: warningLayout
- font.pointSize: JamiTheme.textFontSize
- font.kerning: true
+ anchors.centerIn: parent
+ anchors.margins: 15
+ width: accountRectangle.width
- horizontalAlignment: Text.AlignHCenter
- verticalAlignment: Text.AlignVCenter
- wrapMode: Text.Wrap
+ Image{
+ id: warningIcon
+
+ Layout.fillWidth: true
+ Layout.leftMargin: 15
+
+ source: JamiResources.notification_important_24dp_svg
+ fillMode: Image.PreserveAspectFit
+ }
+
+ Label {
+ id: labelWarning
- color: JamiTheme.redColor
+ Layout.fillWidth: true
+ Layout.margins: 15
+
+ visible: !isSIP
+
+
+ text: JamiStrings.deleteAccountInfos
+
+ font.pointSize: JamiTheme.textFontSize
+ font.kerning: true
+
+ horizontalAlignment: Text.AlignHCenter
+ verticalAlignment: Text.AlignVCenter
+ wrapMode: Text.Wrap
+
+ color: JamiTheme.redColor
+ }
+ }
}
}
}
diff --git a/src/app/constant/JamiTheme.qml b/src/app/constant/JamiTheme.qml
index ac02212d0..ff1b69520 100644
--- a/src/app/constant/JamiTheme.qml
+++ b/src/app/constant/JamiTheme.qml
@@ -88,6 +88,8 @@ Item {
property color popupOverlayColor: darkTheme ? Qt.rgba(255, 255, 255, 0.22) : Qt.rgba(0, 0, 0, 0.33)
property real formsRadius: 30
+ property color warningRedRectangle: darkTheme ? "#3c131a" : "#fae5e8"
+
// Side panel
property color presenceGreen: "#4cd964"
property color notificationRed: "#ff3b30"
@@ -140,6 +142,9 @@ Item {
property color redButtonColor: darkTheme ? "#FA2E30" : "#CC0022"
+ property color backgroundRectangleColor: darkTheme ? "#333333" : "#F0EFEF"
+ property color deleteRedButton: "#CC0022"
+
// Jami switch
property color switchBackgroundCheckedColor: "#8dbaea"
property color switchBackgroundColor: darkTheme ? "#626262" : "#E5EEF5"
diff --git a/src/app/settingsview/components/ManageAccountPage.qml b/src/app/settingsview/components/ManageAccountPage.qml
index 8cbd7cdb3..89c75ccdc 100644
--- a/src/app/settingsview/components/ManageAccountPage.qml
+++ b/src/app/settingsview/components/ManageAccountPage.qml
@@ -467,8 +467,6 @@ SettingsPageBase {
onClicked: {
var dlg = viewCoordinator.presentDialog(appWindow, "commoncomponents/DeleteAccountDialog.qml", {
"isSIP": CurrentAccount.type === Profile.Type.SIP,
- "bestName": CurrentAccount.bestName,
- "accountId": CurrentAccount.uri
});
dlg.accepted.connect(navigateToMainView);
}
--
GitLab