1
0
Fork 0
mirror of https://git.jami.net/savoirfairelinux/jami-client-qt.git synced 2025-07-13 20:15:23 +02:00

button: add hover colors

Change-Id: I1e26a1672ac6fe23969fc7960be4aa8ccbd28fe4
Gitlab: #22
This commit is contained in:
Sébastien Blin 2020-08-25 21:12:14 -04:00
parent 74d6207417
commit c2220f86c3
11 changed files with 83 additions and 4 deletions

View file

@ -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
}
}

View file

@ -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"

View file

@ -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: {

View file

@ -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: {

View file

@ -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 = ""

View file

@ -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()

View file

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

View file

@ -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 = ""

View file

@ -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 = ""

View file

@ -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: {

View file

@ -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)