HoveredButton: homogenise effects on hovering

Creating a JamiPushButton in oder to regroup definition
Color correction
Homogenization of the other button (Layout QR Code, Settings, and Hide conversation)

GitLab: #1209
Change-Id: If9f891dba1c1d4e83aaebc16a2202dc2a3b719f2

src/app/commoncomponents/MaterialButton.qml

@@ -51,12 +51,12 @@ AbstractButton {
     height: buttontextHeightMargin + textButton.height
     Layout.preferredHeight: height
 
-    Binding on width  {
+    Binding on width {
         when: root.preferredWidth !== undefined || root.Layout.fillWidth
         value: root.preferredWidth
     }
 
-    Binding on Layout.preferredWidth  {
+    Binding on Layout.preferredWidth {
         when: root.preferredWidth !== undefined || root.Layout.fillWidth
         value: width
     }
@@ -96,7 +96,7 @@ AbstractButton {
     contentItem: Item {
         id: item
 
-        Binding on implicitWidth  {
+        Binding on implicitWidth {
             when: root.preferredWidth === undefined || !root.Layout.fillWidth
             value: item.childrenRect.width
         }
@@ -105,7 +105,7 @@ AbstractButton {
 
         RowLayout {
             anchors.verticalCenter: parent.verticalCenter
-            Binding on width  {
+            Binding on width {
                 when: root.preferredWidth !== undefined || root.Layout.fillWidth
                 value: root.availableWidth
             }

src/app/constant/JamiTheme.qml

@@ -72,11 +72,11 @@ Item {
     property color greyBorderColor: "#333"
     property color selectionBlue: darkTheme ? "#0061a5" : "#109ede"
 
-    property color hoverColor: darkTheme ? "#303030" : "#c7c7c7"
+    property color hoverColor: darkTheme ? "#4d4d4d" : "#c7c7c7"
     property color pressColor: darkTheme ? "#777" : "#c0c0c0"
     property color selectedColor: darkTheme ? "#0e81c5" : "#e0e0e0"
-    property color smartListHoveredColor: darkTheme ? "#303030" : "#dedede"
-    property color smartListSelectedColor: darkTheme ? "#303030" : "#dbdbdb"
+    property color smartListHoveredColor: darkTheme ? "#4d4d4d" : "#dedede"
+    property color smartListSelectedColor: darkTheme ? "#4d4d4d" : "#dedede"
     property color editBackgroundColor: darkTheme ? "#373737" : lightGrey_
     property color textColor: primaryForegroundColor
     property color textColorHovered: darkTheme ? "#cccccc" : "#333333"
@@ -96,8 +96,8 @@ Item {
 
     // General buttons
     property color pressedButtonColor: darkTheme ? pressColor : "#a0a0a0"
-    property color hoveredButtonColor: darkTheme ? hoverColor : "#c7c7c7"
-    property color hoveredButtonColorWizard: darkTheme ? "#123F4A" : "#E5EEF5"
+    property color hoveredButtonColor: darkTheme ? "#4d4d4d" : "#dedede"
+    property color hoveredButtonColorWizard: darkTheme ? "#4d4d4d" : "#dedede"
     property color normalButtonColor: darkTheme ? backgroundColor : "#e0e0e0"
 
     property color invertedPressedButtonColor: Qt.rgba(0, 0, 0, 0.5)
@@ -239,6 +239,9 @@ Item {
     property color chatViewFooterSendButtonColor: darkTheme ? "#03B9E9" : "#005699"
     property color chatViewFooterSendButtonImgColor: darkTheme ? blackColor : whiteColor
 
+    // ChatView Header
+    property real chatViewHeaderButtonRadius: 5
+
     // mapPosition
     property color mapButtonsOverlayColor: darkTheme ? "#000000" : "#f0f0f0"
     property color mapButtonColor: darkTheme ? "#f0f0f0" : "#000000"

src/app/mainview/components/AccountComboBox.qml

@@ -181,7 +181,7 @@ Label {
                 source: !root.popup.opened ? JamiResources.expand_more_24dp_svg : JamiResources.expand_less_24dp_svg
             }
 
-            PushButton {
+            JamiPushButton {
                 id: shareButton
 
                 width: visible ? preferredSize : 0
@@ -199,7 +199,7 @@ Label {
                 onClicked: viewCoordinator.presentDialog(appWindow, "mainview/components/WelcomePageQrDialog.qml")
             }
 
-            PushButton {
+            JamiPushButton {
                 id: settingsButton
 
                 anchors.verticalCenter: parent.verticalCenter

src/app/mainview/components/ChatViewHeader.qml

@@ -77,7 +77,7 @@ Rectangle {
         anchors.rightMargin: 8
         spacing: 16
 
-        PushButton {
+        JamiPushButton {
             id: backToWelcomeViewButton
 
             Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
@@ -158,6 +158,8 @@ Rectangle {
             Layout.preferredWidth: 40 + (isOpen? JamiTheme.searchbarSize : 0)
             colorSearchBar: JamiTheme.backgroundColor
 
+            hoverButtonRadius: JamiTheme.chatViewHeaderButtonRadius
+
             Behavior on Layout.preferredWidth {
                 NumberAnimation {
                     duration: 150
@@ -184,88 +186,63 @@ Rectangle {
             }
         }
 
-        PushButton {
+        JamiPushButton {
             id: startAAudioCallButton
 
             visible: interactionButtonsVisibility && (!addMemberVisibility || UtilsAdapter.getAppValue(Settings.EnableExperimentalSwarm))
-
             source: JamiResources.place_audiocall_24dp_svg
             toolTipText: JamiStrings.placeAudioCall
 
-            normalColor: JamiTheme.chatviewBgColor
-            imageColor: JamiTheme.chatviewButtonColor
-
             onClicked: CallAdapter.placeAudioOnlyCall()
         }
 
-        PushButton {
+        JamiPushButton {
             id: startAVideoCallButton
 
             visible: CurrentAccount.videoEnabled_Video && interactionButtonsVisibility && (!addMemberVisibility || UtilsAdapter.getAppValue(Settings.EnableExperimentalSwarm))
             source: JamiResources.videocam_24dp_svg
             toolTipText: JamiStrings.placeVideoCall
 
-            normalColor: JamiTheme.chatviewBgColor
-            imageColor: JamiTheme.chatviewButtonColor
-
-            onClicked: {
-                CallAdapter.placeCall();
-            }
+            onClicked: CallAdapter.placeCall()
         }
 
-        PushButton {
+        JamiPushButton {
             id: addParticipantsButton
 
+            visible: interactionButtonsVisibility && addMemberVisibility
             source: JamiResources.add_people_24dp_svg
             toolTipText: JamiStrings.addParticipants
 
-            normalColor: JamiTheme.chatviewBgColor
-            imageColor: JamiTheme.chatviewButtonColor
-
-            visible: interactionButtonsVisibility && addMemberVisibility
-
             onClicked: addToConversationClicked()
         }
 
-        PushButton {
+        JamiPushButton {
             id: selectPluginButton
 
             visible: PluginAdapter.isEnabled && PluginAdapter.chatHandlersListCount && interactionButtonsVisibility
-
             source: JamiResources.plugins_24dp_svg
             toolTipText: JamiStrings.showPlugins
 
-            normalColor: JamiTheme.chatviewBgColor
-            imageColor: JamiTheme.chatviewButtonColor
-
             onClicked: pluginSelector()
         }
 
-        PushButton {
+        JamiPushButton {
             id: sendContactRequestButton
 
             visible: CurrentConversation.isTemporary || CurrentConversation.isBanned
-
             source: JamiResources.add_people_24dp_svg
             toolTipText: JamiStrings.addToConversations
 
-            normalColor: JamiTheme.chatviewBgColor
-            imageColor: JamiTheme.chatviewButtonColor
-
             onClicked: CurrentConversation.isBanned ? MessagesAdapter.unbanConversation(CurrentConversation.id) : MessagesAdapter.sendConversationRequest()
         }
 
-        PushButton {
+        JamiPushButton {
             id: detailsButton
 
             visible: interactionButtonsVisibility && (swarmDetailsVisibility || LRCInstance.currentAccountType === Profile.Type.SIP) // TODO if SIP not a request
-
             source: JamiResources.swarm_details_panel_svg
             toolTipText: JamiStrings.details
 
-            normalColor: JamiTheme.chatviewBgColor
-            imageColor: JamiTheme.chatviewButtonColor
-
             onClicked: showDetailsClicked()
         }
     }

src/app/mainview/components/JamiPushButton.qml

@@ -0,0 +1,28 @@
+/*
+ * Copyright (C) 2022-2023 Savoir-faire Linux Inc.
+ *
+ * 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 net.jami.Constants 1.1
+import "../../commoncomponents"
+
+PushButton {
+    pressedColor: JamiTheme.pressedButtonColor
+    hoveredColor: JamiTheme.hoveredButtonColor
+    radius: JamiTheme.chatViewHeaderButtonRadius
+
+    normalColor: JamiTheme.chatviewBgColor
+    imageColor: JamiTheme.chatviewButtonColor
+}

src/app/mainview/components/MessageBar.qml

@@ -381,7 +381,7 @@ ColumnLayout {
                         visible: width > 0
                         width: showTypo ? contentWidth + 2 * leftMargin : 0
 
-                        Behavior on width  {
+                        Behavior on width {
                             NumberAnimation {
                                 duration: JamiTheme.longFadeDuration / 2
                             }
@@ -473,7 +473,7 @@ ColumnLayout {
                         visible: width > 0
                         width: showTypo && showTypoSecond ? 2 : 0
 
-                        Behavior on width  {
+                        Behavior on width {
                             NumberAnimation {
                                 duration: JamiTheme.longFadeDuration / 2
                             }
@@ -548,7 +548,7 @@ ColumnLayout {
                         visible: width > 0
                         width: showTypo && showTypoSecond ? contentWidth + 2 * leftMargin : 0
 
-                        Behavior on width  {
+                        Behavior on width {
                             NumberAnimation {
                                 duration: JamiTheme.longFadeDuration / 2
                             }
@@ -649,7 +649,7 @@ ColumnLayout {
 
                     width: contentWidth + 2 * leftMargin
 
-                    Behavior on width  {
+                    Behavior on width {
                         NumberAnimation {
                             duration: JamiTheme.longFadeDuration / 2
                         }

src/app/mainview/components/Searchbar.qml

@@ -24,7 +24,6 @@ import "../../commoncomponents"
 Rectangle {
     id: root
 
-
     signal searchBarTextChanged(string text)
     signal returnPressedWhileSearching
     signal searchClicked
@@ -33,6 +32,8 @@ Rectangle {
     property alias textContent: textArea.text
     property alias placeHolderText: textArea.placeholderText
 
+    property real hoverButtonRadius: JamiTheme.chatViewHeaderButtonRadius
+
     property var colorSearchBar: JamiTheme.secondaryBackgroundColor
 
     property string currentConversationId: CurrentConversation.id
@@ -40,7 +41,7 @@ Rectangle {
     property bool isOpen: reductionEnabled ? extrasPanel.isOpen(ChatView.MessagesResearchPanel) : true
     onIsOpenChanged: {
         if (isOpen)
-            textArea.forceActiveFocus()
+            textArea.forceActiveFocus();
     }
 
     function clearText() {
@@ -71,8 +72,8 @@ Rectangle {
         anchors.leftMargin: 10
         hoverEnabled: reductionEnabled
         enabled: reductionEnabled
-
-
+        radius: hoverButtonRadius
+        hoveredColor: JamiTheme.hoveredButtonColor
         source: JamiResources.ic_baseline_search_24dp_svg
         normalColor: "transparent"
         imageColor: JamiTheme.chatviewButtonColor
@@ -83,7 +84,7 @@ Rectangle {
     Rectangle {
         id: rectTextArea
 
-        height: root.height-5
+        height: root.height - 5
         anchors.left: startSearch.right
         anchors.right: root.right
         anchors.verticalCenter: root.verticalCenter
@@ -111,7 +112,6 @@ Rectangle {
 
             background.visible: false
 
-
             anchors.verticalCenter: parent.verticalCenter
             anchors.left: parent.left
             anchors.right: textArea.text.length ? clearTextButton.left : parent.right
@@ -136,7 +136,6 @@ Rectangle {
         PushButton {
             id: clearTextButton
 
-
             anchors.verticalCenter: parent.verticalCenter
             anchors.right: parent.right
             anchors.rightMargin: 15

src/app/mainview/components/WelcomePage.qml

@@ -69,7 +69,7 @@ ListSelectionView {
                     height: childrenRect.height + 10
                     opacity: 1
 
-                    Behavior on width  {
+                    Behavior on width {
                         NumberAnimation {
                             duration: JamiTheme.shortFadeDuration
                         }

src/app/wizardview/components/AdvancedAccountSettings.qml

@@ -121,7 +121,7 @@ Rectangle {
                         return Math.max(cornerIcon1.height, labelEncrypt.height + 2 * JamiTheme.advancedAccountSettingsHeightMargin);
                     }
 
-                    Behavior on Layout.preferredWidth  {
+                    Behavior on Layout.preferredWidth {
                         NumberAnimation {
                             duration: 100
                         }
@@ -374,7 +374,7 @@ Rectangle {
                 Item {
                     Layout.alignment: Qt.AlignRight | Qt.AlignTop
 
-                    Behavior on Layout.preferredWidth  {
+                    Behavior on Layout.preferredWidth {
                         NumberAnimation {
                             duration: 100
                         }

src/app/wizardview/components/CreateAccountPage.qml

@@ -168,7 +168,7 @@ Rectangle {
 
                             visible: false
 
-                            Behavior on width  {
+                            Behavior on width {
                                 NumberAnimation {
                                     duration: JamiTheme.shortFadeDuration
                                 }
@@ -441,7 +441,7 @@ Rectangle {
 
         visible: false
 
-        Behavior on width  {
+        Behavior on width {
             NumberAnimation {
                 duration: JamiTheme.shortFadeDuration
             }