From c2220f86c39dd01618de6a820d1e5fb848afcbb3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Blin?=
<sebastien.blin@savoirfairelinux.com>
Date: Tue, 25 Aug 2020 21:12:14 -0400
Subject: [PATCH] button: add hover colors
Change-Id: I1e26a1672ac6fe23969fc7960be4aa8ccbd28fe4
Gitlab: #22
---
src/commoncomponents/MaterialButton.qml | 43 +++++++++++++++++--
src/constant/JamiTheme.qml | 4 ++
src/mainview/components/AboutPopUp.qml | 4 ++
src/wizardview/components/BackupKeyPage.qml | 4 ++
.../ConnectToAccountManagerPage.qml | 2 +
.../components/CreateAccountPage.qml | 6 +++
.../components/CreateSIPAccountPage.qml | 2 +
.../components/ImportFromBackupPage.qml | 4 ++
.../components/ImportFromDevicePage.qml | 2 +
src/wizardview/components/ProfilePage.qml | 4 ++
.../components/WelcomePageLayout.qml | 12 ++++++
11 files changed, 83 insertions(+), 4 deletions(-)
diff --git a/src/commoncomponents/MaterialButton.qml b/src/commoncomponents/MaterialButton.qml
index 357ad9f61..8c406bd8b 100644
--- a/src/commoncomponents/MaterialButton.qml
+++ b/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"
- border.color: outlined ? root.color : "transparent"
+ color: {
+ 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
}
}
\ No newline at end of file
diff --git a/src/constant/JamiTheme.qml b/src/constant/JamiTheme.qml
index d9086c69c..623de9d63 100644
--- a/src/constant/JamiTheme.qml
+++ b/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"
diff --git a/src/mainview/components/AboutPopUp.qml b/src/mainview/components/AboutPopUp.qml
index cedcf7e80..c4adffe8f 100644
--- a/src/mainview/components/AboutPopUp.qml
+++ b/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: {
diff --git a/src/wizardview/components/BackupKeyPage.qml b/src/wizardview/components/BackupKeyPage.qml
index fdfddfb3b..de1b3177c 100644
--- a/src/wizardview/components/BackupKeyPage.qml
+++ b/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: {
diff --git a/src/wizardview/components/ConnectToAccountManagerPage.qml b/src/wizardview/components/ConnectToAccountManagerPage.qml
index 4ecfa093a..356171ae7 100644
--- a/src/wizardview/components/ConnectToAccountManagerPage.qml
+++ b/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 = ""
diff --git a/src/wizardview/components/CreateAccountPage.qml b/src/wizardview/components/CreateAccountPage.qml
index f2e129c93..c3cc19bef 100644
--- a/src/wizardview/components/CreateAccountPage.qml
+++ b/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()
diff --git a/src/wizardview/components/CreateSIPAccountPage.qml b/src/wizardview/components/CreateSIPAccountPage.qml
index 1b355b8fa..13afb814c 100644
--- a/src/wizardview/components/CreateSIPAccountPage.qml
+++ b/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()
diff --git a/src/wizardview/components/ImportFromBackupPage.qml b/src/wizardview/components/ImportFromBackupPage.qml
index f379dfef9..9d5722496 100644
--- a/src/wizardview/components/ImportFromBackupPage.qml
+++ b/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 = ""
diff --git a/src/wizardview/components/ImportFromDevicePage.qml b/src/wizardview/components/ImportFromDevicePage.qml
index 3ecb20578..afb2b70eb 100644
--- a/src/wizardview/components/ImportFromDevicePage.qml
+++ b/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 = ""
diff --git a/src/wizardview/components/ProfilePage.qml b/src/wizardview/components/ProfilePage.qml
index 91188f435..794514f4e 100644
--- a/src/wizardview/components/ProfilePage.qml
+++ b/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: {
diff --git a/src/wizardview/components/WelcomePageLayout.qml b/src/wizardview/components/WelcomePageLayout.qml
index 5ec6cbd67..8023fd148 100644
--- a/src/wizardview/components/WelcomePageLayout.qml
+++ b/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)
--
GitLab