button: add hover colors

Change-Id: I1e26a1672ac6fe23969fc7960be4aa8ccbd28fe4
Gitlab: #22

src/commoncomponents/MaterialButton.qml

@@ -27,6 +27,8 @@ Button {
     property alias source: root.icon.source
     property string toolTipText: ""
     property var color: "transparent"
+    property var hoveredColor: undefined
+    property var pressedColor: undefined
     property var outlined: false
 
     Layout.alignment: Qt.AlignCenter
@@ -38,6 +40,7 @@ Button {
     icon.source: ""
     icon.height: 18
     icon.width: 18
+    hoverEnabled: hoverColor !== undefined
 
     contentItem: Item {
         Rectangle {
@@ -54,13 +57,29 @@ Button {
                     enabled: true
                     effect: ColorOverlay {
                         id: overlay
-                        color: outlined ? root.color : "white"
+                        color:{
+                            if (!outlined)
+                                return "white"
+                            if (hovered && root.hoveredColor)
+                                return root.hoveredColor
+                            if (checked && root.pressedColor)
+                                return root.pressedColor
+                            return root.color
+                        }
                     }
                 }
             }
             Text {
                 text: root.text
-                color: outlined? root.color : "white"
+                color: {
+                    if (!outlined)
+                        return "white"
+                    if (hovered && root.hoveredColor)
+                        return root.hoveredColor
+                    if (checked && root.pressedColor)
+                        return root.pressedColor
+                    return root.color
+                }
                 font: root.font
                 anchors.centerIn: parent
                 horizontalAlignment: Text.AlignHCenter
@@ -75,8 +94,24 @@ Button {
     background: Rectangle {
         id: backgroundRect
         anchors.fill: parent
-        color: !outlined ? root.color : "transparent"
+        color: {
-        border.color: outlined ? root.color : "transparent"
+            if (outlined)
+                return "transparent"
+            if (hovered && root.hoveredColor)
+                return root.hoveredColor
+            if (checked && root.pressedColor)
+                return root.pressedColor
+            return root.color
+        }
+        border.color: {
+            if (!outlined)
+                return "transparent"
+            if (hovered && root.hoveredColor)
+                return root.hoveredColor
+            if (checked && root.pressedColor)
+                return root.pressedColor
+            return root.color
+        }
         radius: 4
     }
 }

src/constant/JamiTheme.qml

@@ -54,7 +54,11 @@ Item {
 
     property string hangUpButtonTintedRed: "#ff0000"
     property string buttonTintedBlue: "#00aaff"
+    property string buttonTintedBlueHovered: "#0e81c5"
+    property string buttonTintedBluePressed: "#273261"
     property string buttonTintedGrey: "#999"
+    property string buttonTintedGreyHovered: "#777"
+    property string buttonTintedGreyPressed: "#777"
     property string buttonTintedGreyInactive: "#bbb"
 
     property string selectionBlue: "#109ede"

src/mainview/components/AboutPopUp.qml

@@ -245,6 +245,8 @@ Dialog {
                         id: changeLogButton
                         text: qsTr("Changelog")
                         color: projectCreditsScrollView.visible? JamiTheme.buttonTintedGreyInactive : JamiTheme.buttonTintedGrey
+                        hoveredColor: JamiTheme.buttonTintedGreyHovered
+                        pressedColor: JamiTheme.buttonTintedGreyPressed
                         Layout.preferredWidth: 100
 
                         onClicked: {
@@ -258,6 +260,8 @@ Dialog {
                         id: creditsButton
                         text: qsTr("Credit")
                         color: projectCreditsScrollView.visible? JamiTheme.buttonTintedGrey : JamiTheme.buttonTintedGreyInactive
+                        hoveredColor: JamiTheme.buttonTintedGreyHovered
+                        pressedColor: JamiTheme.buttonTintedGreyPressed
                         Layout.preferredWidth: 100
 
                         onClicked: {

src/wizardview/components/BackupKeyPage.qml

@@ -136,6 +136,8 @@ Rectangle {
             id: backupBtn
             text: qsTr("BACKUP ACCOUNT")
             color: JamiTheme.buttonTintedGrey
+            hoveredColor: JamiTheme.buttonTintedGreyHovered
+            pressedColor: JamiTheme.buttonTintedGreyPressed
 
             onClicked: {
                 exportBtn_Dialog.open()
@@ -146,6 +148,8 @@ Rectangle {
         MaterialButton {
             text: qsTr("SKIP")
             color: JamiTheme.buttonTintedGrey
+            hoveredColor: JamiTheme.buttonTintedGreyHovered
+            pressedColor: JamiTheme.buttonTintedGreyPressed
             outlined: true
 
             onClicked: {

src/wizardview/components/ConnectToAccountManagerPage.qml

@@ -139,6 +139,8 @@ Rectangle {
                 && usernameManagerEdit.text.length !== 0
                 && passwordManagerEdit.text.length !== 0
             color: enabled? JamiTheme.wizardBlueButtons : JamiTheme.buttonTintedGreyInactive
+            hoveredColor: JamiTheme.buttonTintedBlueHovered
+            pressedColor: JamiTheme.buttonTintedBluePressed
 
             onClicked: {
                 errorText = ""

src/wizardview/components/CreateAccountPage.qml

@@ -163,6 +163,8 @@ Rectangle {
                 color: nameRegistrationUIState === WizardView.FREE?
                         JamiTheme.buttonTintedGrey
                         : JamiTheme.buttonTintedGreyInactive
+                hoveredColor: JamiTheme.buttonTintedGreyHovered
+                pressedColor: JamiTheme.buttonTintedGreyPressed
 
                 onClicked: {
                     if (nameRegistrationUIState === WizardView.FREE)
@@ -173,6 +175,8 @@ Rectangle {
             MaterialButton {
                 text: qsTr("SKIP CHOOSING USERNAME")
                 color: JamiTheme.buttonTintedGrey
+                hoveredColor: JamiTheme.buttonTintedGreyHovered
+                pressedColor: JamiTheme.buttonTintedGreyPressed
                 outlined: true
 
                 onClicked: {
@@ -281,6 +285,8 @@ Rectangle {
                 color: !passwordSwitch.checked ||
                     (passwordEdit.text === passwordConfirmEdit.text && passwordEdit.text.length !== 0)?
                     JamiTheme.wizardBlueButtons : JamiTheme.buttonTintedGreyInactive
+                hoveredColor: JamiTheme.buttonTintedBlueHovered
+                pressedColor: JamiTheme.buttonTintedBluePressed
 
                 onClicked: {
                     createAccount()

src/wizardview/components/CreateSIPAccountPage.qml

@@ -142,6 +142,8 @@ Rectangle {
             id: createAccountButton
             text: qsTr("CREATE SIP ACCOUNT")
             color: JamiTheme.wizardBlueButtons
+            hoveredColor: JamiTheme.buttonTintedBlueHovered
+            pressedColor: JamiTheme.buttonTintedBluePressed
 
             onClicked: {
                 createAccount()

src/wizardview/components/ImportFromBackupPage.qml

@@ -89,6 +89,8 @@ Rectangle {
             toolTipText: qsTr("Import your account's archive")
             source: "qrc:/images/icons/round-folder-24px.svg"
             color: JamiTheme.buttonTintedGrey
+            hoveredColor: JamiTheme.buttonTintedGreyHovered
+            pressedColor: JamiTheme.buttonTintedGreyPressed
 
             onClicked: {
                 importFromFile_Dialog.open()
@@ -123,6 +125,8 @@ Rectangle {
             text: qsTr("CONNECT FROM BACKUP")
             color: filePath.length === 0?
                 JamiTheme.buttonTintedGreyInactive : JamiTheme.buttonTintedGrey
+            hoveredColor: JamiTheme.buttonTintedGreyHovered
+            pressedColor: JamiTheme.buttonTintedGreyPressed
 
             onClicked: {
                 errorText = ""

src/wizardview/components/ImportFromDevicePage.qml

@@ -103,6 +103,8 @@ Rectangle {
             text: qsTr("CONNECT FROM ANOTHER DEVICE")
             color: pinFromDevice.text.length === 0?
                 JamiTheme.buttonTintedGreyInactive : JamiTheme.buttonTintedGrey
+            hoveredColor: JamiTheme.buttonTintedGreyHovered
+            pressedColor: JamiTheme.buttonTintedGreyPressed
 
             onClicked: {
                 errorText = ""

src/wizardview/components/ProfilePage.qml

@@ -114,6 +114,8 @@ Rectangle {
             enabled: readyToSaveDetails
             text: enabled? qsTr("Save Profile") : qsTr("Generating account…")
             color: enabled? JamiTheme.wizardBlueButtons : JamiTheme.buttonTintedGreyInactive
+            hoveredColor: JamiTheme.buttonTintedBlueHovered
+            pressedColor: JamiTheme.buttonTintedBluePressed
 
             onClicked: {
                 saveProfile()
@@ -124,6 +126,8 @@ Rectangle {
             text: qsTr("SKIP")
             enabled: saveProfileBtn.enabled
             color: enabled? JamiTheme.buttonTintedGrey : JamiTheme.buttonTintedGreyInactive
+            hoveredColor: JamiTheme.buttonTintedGreyHovered
+            pressedColor: JamiTheme.buttonTintedGreyPressed
             outlined: true
 
             onClicked: {

src/wizardview/components/WelcomePageLayout.qml

@@ -85,6 +85,8 @@ ColumnLayout {
             toolTipText: qsTr("Create new Jami account")
             source: "qrc:/images/default_avatar_overlay.svg"
             color: JamiTheme.buttonTintedBlue
+            hoveredColor: JamiTheme.buttonTintedBlueHovered
+            pressedColor: JamiTheme.buttonTintedBluePressed
 
             onClicked: {
                 welcomePageRedirectPage(1)
@@ -104,6 +106,8 @@ ColumnLayout {
             toolTipText: qsTr("Import account from other device")
             source: "qrc:/images/icons/devices-24px.svg"
             color: JamiTheme.buttonTintedBlue
+            hoveredColor: JamiTheme.buttonTintedBlueHovered
+            pressedColor: JamiTheme.buttonTintedBluePressed
 
             onClicked: {
                 welcomePageRedirectPage(5)
@@ -123,6 +127,8 @@ ColumnLayout {
             toolTipText: qsTr("Import account from backup file")
             source: "qrc:/images/icons/backup-24px.svg"
             color: JamiTheme.buttonTintedBlue
+            hoveredColor: JamiTheme.buttonTintedBlueHovered
+            pressedColor: JamiTheme.buttonTintedBluePressed
 
             onClicked: {
                 welcomePageRedirectPage(3)
@@ -141,6 +147,8 @@ ColumnLayout {
             text: qsTr("SHOW ADVANCED")
             toolTipText: qsTr("Show advanced options")
             color: JamiTheme.buttonTintedBlue
+            hoveredColor: JamiTheme.buttonTintedBlueHovered
+            pressedColor: JamiTheme.buttonTintedBluePressed
             outlined: true
 
             hoverEnabled: true
@@ -169,6 +177,8 @@ ColumnLayout {
             toolTipText: qsTr("Login to account manager")
             source: "qrc:/images/icons/router-24px.svg"
             color: JamiTheme.buttonTintedBlue
+            hoveredColor: JamiTheme.buttonTintedBlueHovered
+            pressedColor: JamiTheme.buttonTintedBluePressed
 
             onClicked: {
                 welcomePageRedirectPage(6)
@@ -188,6 +198,8 @@ ColumnLayout {
             toolTipText: qsTr("Create new SIP account")
             source: "qrc:/images/default_avatar_overlay.svg"
             color: JamiTheme.buttonTintedBlue
+            hoveredColor: JamiTheme.buttonTintedBlueHovered
+            pressedColor: JamiTheme.buttonTintedBluePressed
 
             onClicked: {
                 welcomePageRedirectPage(2)