aboutPopupButton: make the button width grows with text width

Change-Id: I99d5e01dd7438361a6ddafe2f1d97be1536c288b

src/commoncomponents/MaterialButton.qml

@@ -41,7 +41,9 @@ Button {
     property var iconPreferredHeight: 18
     property var iconPreferredWidth: 18
 
+    property bool enableElide: true
     property int elide: Text.ElideRight
+    property int textActualWidth: buttonTextMetrics.boundingRect.width
 
     font.kerning: true
     font.pointSize: JamiTheme.textFontSize
@@ -71,26 +73,9 @@ Button {
                 visible: animatedImageSource.length !== 0
             }
 
-            Image {
+            ResponsiveImage {
                 id: buttonImage
 
-                property real pixelDensity: Screen.pixelDensity
-                property real isSvg: {
-                    var match = /[^.]+$/.exec(source)
-                    return match !== null && match[0] === 'svg'
-                }
-
-                function setSourceSize() {
-                    if (isSvg) {
-                        sourceSize.width = width
-                        sourceSize.height = height
-                    } else
-                        sourceSize = undefined
-                }
-
-                onPixelDensityChanged: setSourceSize()
-                Component.onCompleted: setSourceSize()
-
                 anchors.verticalCenter: parent.verticalCenter
                 anchors.left: parent.left
                 anchors.leftMargin: JamiTheme.preferredMarginSize / 2
@@ -99,20 +84,14 @@ Button {
                 width: iconPreferredWidth
 
                 visible: source.toString().length !== 0
-                layer {
-                    enabled: true
-                    effect: ColorOverlay {
-                        id: overlay
-                        color:{
-                            if (!outlined)
-                                return "white"
-                            if (hovered && root.hoveredColor)
-                                return root.hoveredColor
-                            if (checked && root.pressedColor)
-                                return root.pressedColor
-                            return root.color
-                        }
-                    }
+                color: {
+                    if (!outlined)
+                        return "white"
+                    if (hovered && root.hoveredColor)
+                        return root.hoveredColor
+                    if (checked && root.pressedColor)
+                        return root.pressedColor
+                    return root.color
                 }
             }
 
@@ -128,8 +107,15 @@ Button {
                             JamiTheme.preferredMarginSize / 2 - minimumIconTextSpacing) * 2
                 }
 
+                TextMetrics {
+                    id: buttonTextMetrics
+
+                    font: buttonText.font
+                    text: buttonText.text
+                }
+
                 text: root.text
-                elide: root.elide
+                elide: enableElide ? root.elide : Text.ElideNone
                 color: {
                     if (!outlined)
                         return "white"

src/constant/JamiTheme.qml

@@ -196,6 +196,7 @@ Item {
     property real smartListItemHeight: 64
     property real smartListAvatarSize: 52
     property real avatarSizeInCall: 130
+    property real aboutButtonPreferredWidth: 150
     property real callButtonPreferredSize: 50
     property real contextMenuItemTextPreferredWidth: 142
     property real contextMenuItemTextMaxWidth: 182

src/mainview/components/WelcomePage.qml

@@ -159,14 +159,21 @@ Rectangle {
 
             Layout.alignment: Qt.AlignBottom | Qt.AlignHCenter
             Layout.bottomMargin: JamiTheme.preferredMarginSize
-            Layout.preferredWidth: 150
-            Layout.preferredHeight: 30
+            Layout.preferredWidth: JamiTheme.aboutButtonPreferredWidth
+            Layout.preferredHeight: preferredHeight
 
             color: JamiTheme.buttonTintedBlack
+            enableElide: false
             hoveredColor: JamiTheme.buttonTintedBlackHovered
             pressedColor: JamiTheme.buttonTintedBlackPressed
             outlined: true
 
+            onTextActualWidthChanged: {
+                if (textActualWidth > btnAboutPopUp.Layout.preferredWidth)
+                    btnAboutPopUp.Layout.preferredWidth =
+                            textActualWidth + JamiTheme.preferredMarginSize * 2
+            }
+
             text: JamiStrings.aboutJami
 
             onClicked: aboutPopUpDialog.open()