dialog: use popup dialogs to replace the existing Qt.labs.platform ones

Dialog in Qt.labs.platform which is used to be native in Qt 5.15
cannnot be accessed in Qt 6.2 for now, use popup dialogs instead

1. Add tittle
2. DropShadow revisit
3. Dim properly

Change-Id: I8804ae0c30e3450c9a800d9a1c3946ff0bf44b46

qml.qrc

@@ -21,8 +21,7 @@
         <file>src/commoncomponents/UsernameLineEdit.qml</file>
         <file>src/commoncomponents/Scaffold.qml</file>
         <file>src/commoncomponents/LineEditContextMenu.qml</file>
-        <file>src/commoncomponents/BaseDialog.qml</file>
-        <file>src/commoncomponents/ModalPopup.qml</file>
+        <file>src/commoncomponents/BaseModalDialog.qml</file>
         <file>src/commoncomponents/SimpleMessageDialog.qml</file>
         <file>src/commoncomponents/ResponsiveImage.qml</file>
         <file>src/commoncomponents/PresenceIndicator.qml</file>

src/DaemonReconnectWindow.qml

@@ -198,17 +198,6 @@ ApplicationWindow {
         }
     }
 
-    Overlay.modal: ColorOverlay {
-        source: root.contentItem
-        color: "transparent"
-
-        // Color animation for overlay when pop up is shown.
-        ColorAnimation on color {
-            to: Qt.rgba(0, 0, 0, 0.33)
-            duration: 500
-        }
-    }
-
     Component.onCompleted: {
         DBusErrorHandler.setActive(true)
 

src/MainApplicationWindow.qml

@@ -202,17 +202,6 @@ ApplicationWindow {
         }
     }
 
-    Overlay.modal: ColorOverlay {
-        source: root.contentItem
-        color: "transparent"
-
-        // Color animation for overlay when pop up is shown.
-        ColorAnimation on color {
-            to: Qt.rgba(0, 0, 0, 0.33)
-            duration: 500
-        }
-    }
-
     onClosing: root.close()
 
     onScreenChanged: JamiQmlUtils.mainApplicationScreen = root.screen

src/commoncomponents/BaseDialog.qml

-/*
- * Copyright (C) 2020 by Savoir-faire Linux
- * Author: Albert Babí <albert.babi@savoirfairelinux.com>
- *
- * This program is free software; you can redistribute it and/or modify
- * it under the terms of the GNU General Public License as published by
- * the Free Software Foundation; either version 3 of the License, or
- * (at your option) any later version.
- *
- * This program is distributed in the hope that it will be useful,
- * but WITHOUT ANY WARRANTY; without even the implied warranty of
- * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
- * GNU General Public License for more details.
- *
- * You should have received a copy of the GNU General Public License
- * along with this program.  If not, see <https://www.gnu.org/licenses/>.
- */
-
-import QtQuick
-import QtQuick.Controls
-
-Dialog {
-    id: root
-
-    visible: false
-}

src/commoncomponents/ModalPopup.qml → src/commoncomponents/BaseModalDialog.qml

@@ -18,6 +18,7 @@
 
 import QtQuick
 import QtQuick.Controls
+import QtQuick.Layouts
 import Qt5Compat.GraphicalEffects
 
 import net.jami.Constants 1.1
@@ -28,6 +29,12 @@ Popup {
     // convient access to closePolicy
     property bool autoClose: true
     property alias backgroundColor: container.color
+    property alias title: titleText.text
+    property var popupContentLoader: containerSubContentLoader
+    property alias popupContentLoadStatus: containerSubContentLoader.status
+    property alias popupContent: containerSubContentLoader.sourceComponent
+    property int popupContentPreferredHeight: 0
+    property int popupContentPreferredWidth: 0
 
     parent: Overlay.overlay
 
@@ -37,20 +44,64 @@ Popup {
 
     modal: true
 
+    padding: 0
+
     // A popup is invisible until opened.
     visible: false
     closePolicy:  autoClose ?
                       (Popup.CloseOnEscape | Popup.CloseOnPressOutside) :
                       Popup.NoAutoClose
 
-    padding: 0
-
-    background: Rectangle {
+    Rectangle {
         id: container
 
+        anchors.fill: parent
+
+        ColumnLayout {
+            anchors.fill: parent
+
+            spacing: 0
+
+            Text {
+                id: titleText
+
+                Layout.alignment: Qt.AlignTop | Qt.AlignLeft
+                Layout.margins: text.length === 0 ? 0 : 10
+
+                Layout.preferredHeight: text.length === 0 ? 0 : contentHeight
+
+                font.pointSize: 12
+                color: JamiTheme.textColor
+            }
+
+            Loader {
+                id: containerSubContentLoader
+
+                Layout.alignment: Qt.AlignCenter
+
+                Layout.fillWidth: popupContentPreferredWidth === 0
+                Layout.fillHeight: popupContentPreferredHeight === 0
+                Layout.preferredHeight: popupContentPreferredHeight
+                Layout.preferredWidth: popupContentPreferredWidth
+            }
+        }
+
         radius: JamiTheme.modalPopupRadius
-        width: root.width
-        height: root.height
+        color: JamiTheme.secondaryBackgroundColor
+    }
+
+    background: Rectangle {
+        color: JamiTheme.transparentColor
+    }
+
+    Overlay.modal: Rectangle {
+        color: JamiTheme.transparentColor
+
+        // Color animation for overlay when pop up is shown.
+        ColorAnimation on color {
+            to: JamiTheme.popupOverlayColor
+            duration: 500
+        }
     }
 
     DropShadow {

src/commoncomponents/DaemonReconnectPopup.qml

@@ -23,7 +23,7 @@ import QtQuick.Layouts
 import net.jami.Constants 1.1
 import net.jami.Models 1.1
 
-ModalPopup {
+BaseModalDialog {
     id: root
 
     property bool connectionFailed: false
@@ -31,73 +31,69 @@ ModalPopup {
 
     autoClose: false
 
-    contentItem: Rectangle {
-        id: contentRect
-
-        implicitHeight: daemonReconnectPopupColumnLayout.implicitHeight + 50
-
-        color: JamiTheme.secondaryBackgroundColor
-
-        ColumnLayout {
-            id: daemonReconnectPopupColumnLayout
-
-            anchors.fill: parent
+    onPopupContentLoadStatusChanged: {
+        if (popupContentLoadStatus === Loader.Ready) {
+            root.height = Qt.binding(function() {
+                return popupContentLoader.item.implicitHeight + 50
+            })
+            root.width = Qt.binding(function() {
+                return popupContentLoader.item.implicitWidth + 50
+            })
+        }
+    }
 
-            spacing: 0
+    popupContent: ColumnLayout {
+        id: daemonReconnectPopupColumnLayout
 
-            Text {
-                id: daemonReconnectPopupTextLabel
+        spacing: 0
 
-                Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
-                Layout.topMargin: preferredMargin
+        Text {
+            id: daemonReconnectPopupTextLabel
 
-                text: connectionFailed ? JamiStrings.reconnectionFailed :
-                                         JamiStrings.reconnectDaemon
-                font.pointSize: JamiTheme.textFontSize + 2
-                horizontalAlignment: Text.AlignHCenter
-                verticalAlignment: Text.AlignVCenter
-                color: JamiTheme.textColor
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignTop
+            Layout.topMargin: preferredMargin
 
-                Component.onCompleted: {
-                    contentRect.implicitWidth = JamiQmlUtils.getTextBoundingRect(
-                                font, text).width + 100
-                }
-            }
+            text: connectionFailed ? JamiStrings.reconnectionFailed :
+                                     JamiStrings.reconnectDaemon
+            font.pointSize: JamiTheme.textFontSize + 2
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            color: JamiTheme.textColor
+        }
 
-            AnimatedImage {
-                Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
-                Layout.preferredHeight: 30
-                Layout.preferredWidth: 30
-                Layout.bottomMargin: preferredMargin
+        AnimatedImage {
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
+            Layout.preferredHeight: 30
+            Layout.preferredWidth: 30
+            Layout.bottomMargin: preferredMargin
 
-                visible: !connectionFailed
+            visible: !connectionFailed
 
-                source: JamiResources.jami_rolling_spinner_gif
+            source: JamiResources.jami_rolling_spinner_gif
 
-                playing: true
-                paused: false
-                mipmap: true
-                smooth: true
-                fillMode: Image.PreserveAspectFit
-            }
+            playing: true
+            paused: false
+            mipmap: true
+            smooth: true
+            fillMode: Image.PreserveAspectFit
+        }
 
-            MaterialButton {
-                id: btnOk
+        MaterialButton {
+            id: btnOk
 
-                Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
+            Layout.alignment: Qt.AlignHCenter | Qt.AlignBottom
 
-                preferredWidth: JamiTheme.preferredFieldWidth / 2
+            preferredWidth: JamiTheme.preferredFieldWidth / 2
 
-                visible: connectionFailed
+            visible: connectionFailed
 
-                text: qsTr("Ok")
-                color: JamiTheme.buttonTintedBlue
-                hoveredColor: JamiTheme.buttonTintedBlueHovered
-                pressedColor: JamiTheme.buttonTintedBluePressed
-                outlined: true
+            text: JamiStrings.optionOk
+            color: JamiTheme.buttonTintedBlue
+            hoveredColor: JamiTheme.buttonTintedBlueHovered
+            pressedColor: JamiTheme.buttonTintedBluePressed
+            outlined: true
 
-                onClicked: Qt.quit()
-            }
+            onClicked: Qt.quit()
         }
     }
 }

src/commoncomponents/DeleteAccountDialog.qml

@@ -26,7 +26,7 @@ import net.jami.Constants 1.1
 
 import "../commoncomponents"
 
-BaseDialog {
+BaseModalDialog {
     id: root
 
     property bool isSIP: {
@@ -42,140 +42,131 @@ BaseDialog {
 
     title: JamiStrings.deleteAccount
 
-    contentItem: Rectangle {
-        id: deleteAccountContentRect
+    width: JamiTheme.preferredDialogWidth
+    height: JamiTheme.preferredDialogHeight
 
-        implicitWidth: JamiTheme.preferredDialogWidth
-        implicitHeight: JamiTheme.preferredDialogHeight
-        color: JamiTheme.secondaryBackgroundColor
+    popupContent: ColumnLayout {
+        id: deleteAccountContentColumnLayout
 
-        ColumnLayout {
-            anchors.centerIn: parent
-            anchors.fill: parent
-            anchors.margins: JamiTheme.preferredMarginSize
+        Label {
+            id: labelDeletion
 
-            Label {
-                id: labelDeletion
+            Layout.alignment: Qt.AlignHCenter
+            Layout.preferredWidth: deleteAccountContentColumnLayout.width -
+                                   JamiTheme.preferredMarginSize * 2
 
-                Layout.alignment: Qt.AlignHCenter
-                Layout.preferredWidth: deleteAccountContentRect.width -
-                                       JamiTheme.preferredMarginSize * 2
-
-                color: JamiTheme.textColor
-                text: JamiStrings.confirmDeleteQuestion
+            color: JamiTheme.textColor
+            text: JamiStrings.confirmDeleteQuestion
 
-                font.pointSize: JamiTheme.textFontSize
-                font.kerning: true
+            font.pointSize: JamiTheme.textFontSize
+            font.kerning: true
 
-                horizontalAlignment: Text.AlignHCenter
-                verticalAlignment: Text.AlignVCenter
-                wrapMode: Text.Wrap
-            }
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            wrapMode: Text.Wrap
+        }
 
-            Label {
-                id: labelBestId
+        Label {
+            id: labelBestId
 
-                Layout.alignment: Qt.AlignHCenter
-                Layout.preferredWidth: deleteAccountContentRect.width -
-                                       JamiTheme.preferredMarginSize * 2
+            Layout.alignment: Qt.AlignHCenter
+            Layout.preferredWidth: deleteAccountContentColumnLayout.width -
+                                   JamiTheme.preferredMarginSize * 2
 
-                color: JamiTheme.textColor
-                text: CurrentAccount.bestName
+            color: JamiTheme.textColor
+            text: CurrentAccount.bestName
 
-                font.pointSize: JamiTheme.textFontSize
-                font.kerning: true
-                font.bold: true
+            font.pointSize: JamiTheme.textFontSize
+            font.kerning: true
+            font.bold: true
 
-                horizontalAlignment: Text.AlignHCenter
-                verticalAlignment: Text.AlignVCenter
-                wrapMode: Text.Wrap
-            }
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            wrapMode: Text.Wrap
+        }
 
-            Label {
-                id: labelAccountHash
+        Label {
+            id: labelAccountHash
 
-                Layout.alignment: Qt.AlignHCenter
-                Layout.preferredWidth: deleteAccountContentRect.width -
-                                       JamiTheme.preferredMarginSize * 2
+            Layout.alignment: Qt.AlignHCenter
+            Layout.preferredWidth: deleteAccountContentColumnLayout.width -
+                                   JamiTheme.preferredMarginSize * 2
 
-                color: JamiTheme.textColor
-                text: CurrentAccount.uri
+            color: JamiTheme.textColor
+            text: CurrentAccount.uri
 
-                font.pointSize: JamiTheme.textFontSize
-                font.kerning: true
+            font.pointSize: JamiTheme.textFontSize
+            font.kerning: true
 
-                horizontalAlignment: Text.AlignHCenter
-                verticalAlignment: Text.AlignVCenter
-                wrapMode: Text.Wrap
-            }
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            wrapMode: Text.Wrap
+        }
 
-            Label {
-                id: labelWarning
+        Label {
+            id: labelWarning
 
-                visible: !isSIP
+            visible: !isSIP
 
-                Layout.alignment: Qt.AlignHCenter
-                Layout.preferredWidth: deleteAccountContentRect.width -
-                                       JamiTheme.preferredMarginSize * 2
+            Layout.alignment: Qt.AlignHCenter
+            Layout.preferredWidth: deleteAccountContentColumnLayout.width -
+                                   JamiTheme.preferredMarginSize * 2
 
-                text: JamiStrings.deleteAccountInfos
+            text: JamiStrings.deleteAccountInfos
 
-                font.pointSize: JamiTheme.textFontSize
-                font.kerning: true
+            font.pointSize: JamiTheme.textFontSize
+            font.kerning: true
 
-                horizontalAlignment: Text.AlignHCenter
-                verticalAlignment: Text.AlignVCenter
-                wrapMode: Text.Wrap
+            horizontalAlignment: Text.AlignHCenter
+            verticalAlignment: Text.AlignVCenter
+            wrapMode: Text.Wrap
 
-                color: "red"
-            }
+            color: JamiTheme.redColor
+        }
 
-            RowLayout {
-                spacing: 16
-                Layout.fillWidth: true
-                Layout.alignment: Qt.AlignCenter
+        RowLayout {
+            spacing: 16
+            Layout.fillWidth: true
+            Layout.alignment: Qt.AlignCenter
 
-                MaterialButton {
-                    id: btnDelete
+            MaterialButton {
+                id: btnDelete
 
-                    Layout.alignment: Qt.AlignHCenter
+                Layout.alignment: Qt.AlignHCenter
 
-                    preferredWidth: JamiTheme.preferredFieldWidth / 2 - 8
-                    preferredHeight: JamiTheme.preferredFieldHeight
+                preferredWidth: JamiTheme.preferredFieldWidth / 2 - 8
+                preferredHeight: JamiTheme.preferredFieldHeight
 
-                    color: JamiTheme.buttonTintedRed
-                    hoveredColor: JamiTheme.buttonTintedRedHovered
-                    pressedColor: JamiTheme.buttonTintedRedPressed
-                    outlined: true
+                color: JamiTheme.buttonTintedRed
+                hoveredColor: JamiTheme.buttonTintedRedHovered
+                pressedColor: JamiTheme.buttonTintedRedPressed
+                outlined: true
 
-                    text: qsTr("Delete")
+                text: JamiStrings.optionDelete
 
-                    onClicked: {
-                        AccountAdapter.deleteCurrentAccount()
-                        accepted()
-                        close()
-                    }
+                onClicked: {
+                    AccountAdapter.deleteCurrentAccount()
+                    accepted()
+                    close()
                 }
+            }
 
-                MaterialButton {
-                    id: btnCancel
+            MaterialButton {
+                id: btnCancel
 
-                    Layout.alignment: Qt.AlignHCenter
+                Layout.alignment: Qt.AlignHCenter
 
-                    preferredWidth: JamiTheme.preferredFieldWidth / 2 - 8
-                    preferredHeight: JamiTheme.preferredFieldHeight
+                preferredWidth: JamiTheme.preferredFieldWidth / 2 - 8
+                preferredHeight: JamiTheme.preferredFieldHeight
 
-                    color: JamiTheme.buttonTintedBlack
-                    hoveredColor: JamiTheme.buttonTintedBlackHovered
-                    pressedColor: JamiTheme.buttonTintedBlackPressed
-                    outlined: true
+                color: JamiTheme.buttonTintedBlack
+                hoveredColor: JamiTheme.buttonTintedBlackHovered
+                pressedColor: JamiTheme.buttonTintedBlackPressed
+                outlined: true
 
-                    text: qsTr("Cancel")
+                text: JamiStrings.optionCancel
 
-                    onClicked: {
-                        close()
-                    }
-                }
+                onClicked: close()
             }
         }
     }

src/commoncomponents/PasswordDialog.qml

@@ -23,7 +23,7 @@ import net.jami.Adapters 1.1
 import net.jami.Constants 1.1
 
 // PasswordDialog for changing password and exporting account
-BaseDialog {
+BaseModalDialog {
     id: root
 
     enum PasswordEnteringPurpose {
@@ -40,52 +40,12 @@ BaseDialog {
     function openDialog(purposeIn, exportPathIn = "") {
         purpose = purposeIn
         path = exportPathIn
-        currentPasswordEdit.clear()
-        passwordEdit.clear()
-        confirmPasswordEdit.clear()
-        validatePassword()
-        open()
-    }
-
-    function validatePassword() {
-        switch (purpose) {
-        case PasswordDialog.ExportAccount:
-            btnConfirm.enabled = currentPasswordEdit.length > 0
-            break
-        case PasswordDialog.SetPassword:
-            btnConfirm.enabled = passwordEdit.length > 0 &&
-                    passwordEdit.text === confirmPasswordEdit.text
-            break
-        default:
-            btnConfirm.enabled = currentPasswordEdit.length > 0 &&
-                    passwordEdit.text === confirmPasswordEdit.text
-        }
-    }
 
-    function exportAccountQML() {
-        var success = false
-        if (path.length > 0) {
-            success = AccountAdapter.exportToFile(
-                        LRCInstance.currentAccountId,
-                        path,
-                        currentPasswordEdit.text)
-        }
-        doneSignal(success, purpose)
-        close()
+        open()
     }
 
-    function savePasswordQML() {
-        var success = false
-        success = AccountAdapter.savePassword(
-                    LRCInstance.currentAccountId,
-                    currentPasswordEdit.text,
-                    passwordEdit.text)
-        if (success) {
-            AccountAdapter.setArchiveHasPassword(passwordEdit.text.length !== 0)
-        }
-        doneSignal(success, purpose)
-        close()
-    }
+    height: JamiTheme.preferredDialogHeight
+    width: JamiTheme.preferredDialogWidth
 
     title: {
         switch(purpose){
@@ -98,131 +58,161 @@ BaseDialog {