AboutPopup: new design

GitLab: #1417
Change-Id: Ibbdaa074ac6e6a7c778ef4710f334e23d04dd121

resources/misc/projectcredits.html

@@ -1,4 +1,4 @@
-<h3 align="center"><span style="font-weight:600"> CREATED BY:</span></h3>
+<h4 align="left"><span style="font-weight:600"> Created by</span></h4>
 <p>Adrien Béraud<br>
 Albert Babí<br>
 Alexandre Lision<br>
@@ -54,6 +54,6 @@ Thomas Ballasi<br>
 Trevor Tabah<br>
 Vsevolod Ivanov<br>
 Yang Wang<br></p>
-<h3 align="center"><span style="font-weight:600"> ARTWORK BY:</span></h3>
+<h4 align="left"><span style="font-weight:600"> Artwork by</span></h4>
 <p>Charlotte Hoffmann<br>
 Marianne Forget<br></p>

src/app/constant/JamiStrings.qml

@@ -48,7 +48,10 @@ Item {
     property string version: qsTr("Version") + (AppVersionManager.isCurrentVersionBeta() ? " (Beta)" : "")
     property string declarationYear: "© 2015-2023"
     property string slogan: "Eleutheria"
-    property string declaration: qsTr("Jami is a free universal communication software that respects the freedom and privacy of its users.")
+    property string declaration: qsTr('Jami, a GNU package, is software for universal and distributed peer-to-peer communication that respects the freedom and privacy of its users. Visit <a href="https://jami.net" style="color: ' + JamiTheme.buttonTintedBlue + '">jami.net</a>' + ' to learn more.')
+    property string noWarranty: qsTr('This program comes with absolutely no warranty. See the <a href="https://www.gnu.org/licenses/gpl-3.0.html" style="color: ' + JamiTheme.buttonTintedBlue + '">GNU General Public License</a>, version 3 or later for details.')
+    property string contribute: qsTr('Contribute')
+    property string feedback: qsTr('Feedback')
 
     // AccountComboBox
     property string displayQRCode: qsTr("Display QR code")

src/app/mainview/components/AboutPopUp.qml

@@ -27,96 +27,107 @@ import "../../commoncomponents"
 BaseModalDialog {
     id: root
     margins: JamiTheme.preferredMarginSize
+    title: JamiStrings.aboutJami
+
+    button1.text: JamiStrings.contribute
+    button2.text: JamiStrings.feedback
+
+    button1.onClicked: { Qt.openUrlExternally("https://jami.net/contribute/")}
+    button2.onClicked: { Qt.openUrlExternally("mailto:jami@gnu.org")}
 
     popupContent: JamiFlickable {
             id: aboutPopUpScrollView
-            width: aboutPopUpContentRectColumnLayout.implicitWidth
-            height: JamiTheme.preferredDialogHeight
 
+            width: aboutPopUpContentRectColumnLayout.implicitWidth
+            height: Math.min(root.implicitHeight, aboutPopUpContentRectColumnLayout.implicitHeight)
+
+            Component.onCompleted: print(root.height, aboutPopUpContentRectColumnLayout.implicitHeight)
             contentHeight: aboutPopUpContentRectColumnLayout.implicitHeight
 
             ColumnLayout {
                 id: aboutPopUpContentRectColumnLayout
                 anchors.centerIn: parent
 
-                ResponsiveImage {
+                RowLayout{
-                    id: aboutPopUPJamiLogoImage
+                    Layout.fillWidth: true
-
                     Layout.alignment: Qt.AlignCenter
-                    Layout.preferredWidth: JamiTheme.aboutLogoPreferredWidth
+                    spacing: 10
-                    Layout.preferredHeight: JamiTheme.aboutLogoPreferredHeight
 
-                    source: JamiTheme.darkTheme ? JamiResources.logo_jami_standard_coul_white_svg : JamiResources.logo_jami_standard_coul_svg
+                    ResponsiveImage {
-                }
+                        id: aboutPopUPJamiLogoImage
 
-                TextEdit {
+                        Layout.alignment: Qt.AlignCenter
-                    id: jamiSlogansText
+                        Layout.margins: 10
+                        Layout.preferredWidth: 150
+                        Layout.preferredHeight: 50
 
-                    Layout.alignment: Qt.AlignCenter
+                        source: JamiTheme.darkTheme ? JamiResources.logo_jami_standard_coul_white_svg : JamiResources.logo_jami_standard_coul_svg
-                    Layout.maximumWidth: JamiTheme.preferredDialogWidth - 2*JamiTheme.preferredMarginSize
-                    Layout.topMargin: 26
-
-                    wrapMode: Text.WordWrap
-                    font.pixelSize: JamiTheme.bigFontSize
-
-                    horizontalAlignment: Text.AlignHCenter
-                    verticalAlignment: Text.AlignVCenter
-
-                    text: textMetricsjamiSlogansText.text
-                    selectByMouse: true
-                    readOnly: true
-                    color: JamiTheme.tintedBlue
-
-                    TextMetrics {
-                        id: textMetricsjamiSlogansText
-                        font: jamiSlogansText.font
-                        text: JamiStrings.slogan
                     }
-                }
 
-                TextEdit {
+                    Rectangle {
-                    id: jamiVersionText
+                        color: JamiTheme.backgroundRectangleColor
+                        Layout.fillHeight: true
+                        Layout.fillWidth: true
+                        radius: 5
 
-                    Layout.alignment: Qt.AlignCenter
+                        ColumnLayout {
-                    Layout.maximumWidth: JamiTheme.preferredDialogWidth - 2*JamiTheme.preferredMarginSize
+                            id: sloganLayout
 
-                    font.pixelSize: JamiTheme.tinyCreditsTextSize
+                            anchors.verticalCenter: parent.verticalCenter
 
-                    padding: 0
+                            TextEdit {
+                                id: jamiSlogansText
 
-                    text: JamiStrings.version + ": " + UtilsAdapter.getVersionStr()
+                                Layout.alignment: Qt.AlignLeft
-                    selectByMouse: true
+                                Layout.margins: 10
-                    readOnly: true
+                                Layout.bottomMargin: 0
-                    color: JamiTheme.textColor
 
-                    horizontalAlignment: Text.AlignHCenter
+                                wrapMode: Text.WordWrap
-                    verticalAlignment: Text.AlignVCenter
+                                font.pixelSize: JamiTheme.menuFontSize
-                }
+                                font.bold: true
 
-                TextEdit {
+                                horizontalAlignment: Text.AlignHCenter
-                    id: jamiDeclarationText
+                                verticalAlignment: Text.AlignVCenter
 
-                    Layout.alignment: Qt.AlignCenter
+                                text: textMetricsjamiSlogansText.text
-                    Layout.maximumWidth: JamiTheme.preferredDialogWidth - 2*JamiTheme.preferredMarginSize
+                                selectByMouse: true
-                    Layout.topMargin: 15
+                                readOnly: true
+                                color: JamiTheme.textColor
 
-                    wrapMode: Text.WordWrap
+                                TextMetrics {
-                    font.pixelSize: JamiTheme.creditsTextSize
+                                    id: textMetricsjamiSlogansText
-                    color: JamiTheme.textColor
+                                    font: jamiSlogansText.font
+                                    text: JamiStrings.slogan
+                                }
+                            }
+                            TextEdit {
+                                id: jamiVersionText
 
-                    horizontalAlignment: Text.AlignHCenter
+                                Layout.alignment: Qt.AlignLeft
-                    verticalAlignment: Text.AlignVCenter
+                                Layout.margins: 10
+                                Layout.topMargin: 0
+                                Layout.maximumWidth: JamiTheme.preferredDialogWidth - 2*JamiTheme.preferredMarginSize
 
-                    // TextMetrics does not work for multi-line.
+                                font.pixelSize: JamiTheme.textFontSize
-                    text: JamiStrings.declaration
+                                padding: 0
-                    selectByMouse: true
+                                text: JamiStrings.version + ": " + UtilsAdapter.getVersionStr()
-                    readOnly: true
+
+                                selectByMouse: true
+                                readOnly: true
+
+                                color: JamiTheme.faddedFontColor
+                                horizontalAlignment: Text.AlignHCenter
+                                verticalAlignment: Text.AlignVCenter
+                            }
+                        }
+                    }
                 }
 
                 TextEdit {
                     id: jamiDeclarationHyperText
 
-                    Layout.alignment: Qt.AlignCenter
+                    Layout.alignment: Qt.AlignLeft
+                    Layout.fillWidth: true
 
                     // Strangely, hoveredLink works badly when width grows too large
                     Layout.maximumWidth: JamiTheme.preferredDialogWidth - 2*JamiTheme.preferredMarginSize
@@ -124,12 +135,12 @@ BaseModalDialog {
 
                     color: JamiTheme.textColor
 
-                    font.pixelSize: JamiTheme.creditsTextSize
+                    font.pixelSize: JamiTheme.menuFontSize
-                    horizontalAlignment: Text.AlignHCenter
                     verticalAlignment: Text.AlignVCenter
 
                     text: textMetricsjamiDeclarationHyperText.text
                     textFormat: TextEdit.RichText
+                    wrapMode: TextEdit.WordWrap
                     selectByMouse: true
                     readOnly: true
                     onLinkActivated: Qt.openUrlExternally(link)
@@ -137,7 +148,7 @@ BaseModalDialog {
                     TextMetrics {
                         id: textMetricsjamiDeclarationHyperText
                         font: jamiDeclarationHyperText.font
-                        text: '<a href="https://jami.net" style="color: ' + JamiTheme.blueLinkColor + '">jami.net</a>'
+                        text: JamiStrings.declaration
                     }
 
                     MouseArea {
@@ -152,13 +163,12 @@ BaseModalDialog {
                 TextEdit {
                     id: jamiNoneWarrantyHyperText
 
-                    Layout.alignment: Qt.AlignCenter
+                    Layout.alignment: Qt.AlignLeft
                     Layout.maximumWidth: JamiTheme.preferredDialogWidth - 2*JamiTheme.preferredMarginSize
                     Layout.topMargin: 15
                     wrapMode: Text.WordWrap
-                    font.pixelSize: JamiTheme.tinyCreditsTextSize
+                    font.pixelSize: JamiTheme.menuFontSize
 
-                    horizontalAlignment: Text.AlignHCenter
                     verticalAlignment: Text.AlignTop
                     color: JamiTheme.textColor
 
@@ -171,7 +181,7 @@ BaseModalDialog {
                     TextMetrics {
                         id: textMetricsjamiNoneWarrantyHyperText
                         font: jamiDeclarationHyperText.font
-                        text: JamiStrings.declarationYear + " " + '<a href="https://savoirfairelinux.com" style="color: ' + JamiTheme.blueLinkColor + '">Savoir-faire Linux Inc.</a><br>' + 'This program comes with absolutely no warranty. See the <a href="http://www.gnu.org/licenses/gpl-3.0.html" style="color: ' + JamiTheme.blueLinkColor + '">GNU General Public License</a>, version 3 or later for details.'
+                        text: JamiStrings.noWarranty
                     }
 
                     MouseArea {
@@ -181,14 +191,56 @@ BaseModalDialog {
                     }
                 }
 
-                ProjectCreditsScrollView {
+                TextEdit {
-                    id: projectCreditsScrollView
+                    id: jamiYears
-                    Layout.alignment: Qt.AlignCenter
+
+                    Layout.alignment: Qt.AlignLeft
                     Layout.maximumWidth: JamiTheme.preferredDialogWidth - 2*JamiTheme.preferredMarginSize
-                    Layout.preferredHeight: 100
+                    Layout.topMargin: 15
-                    Layout.topMargin: 25
+
-                    Layout.margins: JamiTheme.preferredMarginSize
+                    wrapMode: Text.WordWrap
+                    font.pixelSize: JamiTheme.menuFontSize
+                    verticalAlignment: Text.AlignTop
+
+                    color: JamiTheme.textColor
+
+                    text: textMetricsYears.text
+                    textFormat: TextEdit.RichText
+                    selectByMouse: true
+                    readOnly: true
+
+                    onLinkActivated: Qt.openUrlExternally(link)
+
+                    TextMetrics {
+                        id: textMetricsYears
+                        font: jamiDeclarationHyperText.font
+                        text: JamiStrings.declarationYear + " " + '<a href="https://savoirfairelinux.com" style="color: ' + JamiTheme.buttonTintedBlue + '">Savoir-faire Linux</a><br>'
+                    }
+
+                    MouseArea {
+                        anchors.fill: parent
+                        acceptedButtons: Qt.NoButton
+                        cursorShape: parent.hoveredLink ? Qt.PointingHandCursor : Qt.ArrowCursor
+                    }
                 }
+
+                Rectangle {
+                    width: projectCreditsScrollView.width + 20
+                    height: projectCreditsScrollView.height + 20
+
+                    color: JamiTheme.backgroundRectangleColor
+                    radius: 5
+
+                    ProjectCreditsScrollView {
+                        id: projectCreditsScrollView
+
+                        anchors.centerIn: parent
+                        width: JamiTheme.preferredDialogWidth - 2*JamiTheme.preferredMarginSize
+                        height: 140
+                        anchors.margins: 10
+                    }
+                }
+
         }
     }
 }

src/app/mainview/components/ProjectCreditsScrollView.qml

@@ -36,7 +36,7 @@ Rectangle {
         TextEdit {
             id: projectCreditsTextArea
 
-            horizontalAlignment: Text.AlignHCenter
+            horizontalAlignment: Text.AlignLeft
 
             width: projectCreditsFlickable.width
             color: JamiTheme.textColor