DeleteAccountDialog: new design

GitLab: #1417
Change-Id: I4f701c130722f4c25ea4d13525ab111368139f98

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>

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 {
+        Rectangle {
-            id: labelBestId
+            id: accountRectangle
 
-            Layout.alignment: Qt.AlignHCenter
+            color: JamiTheme.backgroundRectangleColor
 
-            color: JamiTheme.textColor
+            Layout.preferredWidth: parent.width
-            text: bestName
+            Layout.preferredHeight: userProfileDialogLayout.height
+            Layout.maximumWidth: root.width - 80
 
-            font.pointSize: JamiTheme.textFontSize
+            radius: 5
-            font.kerning: true
+
-            font.bold: true
+            ColumnLayout {
-            wrapMode: Text.Wrap
+                id: userProfileDialogLayout
+
+                anchors.centerIn: parent
+                width: parent.width
+
+                RowLayout {
+                    Layout.margins: 10
+                    Layout.fillWidth: true
+
+                    spacing: 10
+
+                    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 {
+            color: JamiTheme.warningRedRectangle
-            id: labelAccountHash
 
-            Layout.alignment: Qt.AlignHCenter
+            Layout.preferredWidth: parent.width
-            Layout.preferredWidth: root.width - 4*JamiTheme.preferredMarginSize
+            Layout.preferredHeight: labelWarning.height + 20
+            Layout.maximumWidth: root.width - 80
 
-            color: JamiTheme.textColor
+            radius: 5
-            text: accountId
 
-            font.pointSize: JamiTheme.textFontSize
+            RowLayout{
-            font.kerning: true
+                id: warningLayout
 
-            horizontalAlignment: Text.AlignHCenter
+                anchors.centerIn: parent
-            wrapMode: Text.Wrap
+                anchors.margins: 15
-        }
+                width: accountRectangle.width
 
-        Label {
+                Image{
-            id: labelWarning
+                    id: warningIcon
 
-            visible: !isSIP
+                    Layout.fillWidth: true
+                    Layout.leftMargin: 15
 
-            Layout.alignment: Qt.AlignHCenter
+                    source: JamiResources.notification_important_24dp_svg
-            Layout.preferredWidth: root.width - 4*JamiTheme.preferredMarginSize
+                    fillMode: Image.PreserveAspectFit
+                }
 
-            text: JamiStrings.deleteAccountInfos
+                Label {
+                    id: labelWarning
 
-            font.pointSize: JamiTheme.textFontSize
+                    Layout.fillWidth: true
-            font.kerning: true
+                    Layout.margins: 15
 
-            horizontalAlignment: Text.AlignHCenter
+                    visible: !isSIP
-            verticalAlignment: Text.AlignVCenter
-            wrapMode: Text.Wrap
 
-            color: JamiTheme.redColor
+
+                    text: JamiStrings.deleteAccountInfos
+
+                    font.pointSize: JamiTheme.textFontSize
+                    font.kerning: true
+
+                    horizontalAlignment: Text.AlignHCenter
+                    verticalAlignment: Text.AlignVCenter
+                    wrapMode: Text.Wrap
+
+                    color: JamiTheme.redColor
+                }
+            }
         }
     }
 }

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"

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);
                 }