Skip to content
Snippets Groups Projects
Commit c2220f86 authored by Sébastien Blin's avatar Sébastien Blin
Browse files

button: add hover colors

Change-Id: I1e26a1672ac6fe23969fc7960be4aa8ccbd28fe4
Gitlab: #22
parent 74d62074
Branches
No related tags found
No related merge requests found
...@@ -27,6 +27,8 @@ Button { ...@@ -27,6 +27,8 @@ Button {
property alias source: root.icon.source property alias source: root.icon.source
property string toolTipText: "" property string toolTipText: ""
property var color: "transparent" property var color: "transparent"
property var hoveredColor: undefined
property var pressedColor: undefined
property var outlined: false property var outlined: false
Layout.alignment: Qt.AlignCenter Layout.alignment: Qt.AlignCenter
...@@ -38,6 +40,7 @@ Button { ...@@ -38,6 +40,7 @@ Button {
icon.source: "" icon.source: ""
icon.height: 18 icon.height: 18
icon.width: 18 icon.width: 18
hoverEnabled: hoverColor !== undefined
contentItem: Item { contentItem: Item {
Rectangle { Rectangle {
...@@ -54,13 +57,29 @@ Button { ...@@ -54,13 +57,29 @@ Button {
enabled: true enabled: true
effect: ColorOverlay { effect: ColorOverlay {
id: overlay 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 {
text: root.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 font: root.font
anchors.centerIn: parent anchors.centerIn: parent
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
...@@ -75,8 +94,24 @@ Button { ...@@ -75,8 +94,24 @@ Button {
background: Rectangle { background: Rectangle {
id: backgroundRect id: backgroundRect
anchors.fill: parent 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 radius: 4
} }
} }
\ No newline at end of file
...@@ -54,7 +54,11 @@ Item { ...@@ -54,7 +54,11 @@ Item {
property string hangUpButtonTintedRed: "#ff0000" property string hangUpButtonTintedRed: "#ff0000"
property string buttonTintedBlue: "#00aaff" property string buttonTintedBlue: "#00aaff"
property string buttonTintedBlueHovered: "#0e81c5"
property string buttonTintedBluePressed: "#273261"
property string buttonTintedGrey: "#999" property string buttonTintedGrey: "#999"
property string buttonTintedGreyHovered: "#777"
property string buttonTintedGreyPressed: "#777"
property string buttonTintedGreyInactive: "#bbb" property string buttonTintedGreyInactive: "#bbb"
property string selectionBlue: "#109ede" property string selectionBlue: "#109ede"
......
...@@ -245,6 +245,8 @@ Dialog { ...@@ -245,6 +245,8 @@ Dialog {
id: changeLogButton id: changeLogButton
text: qsTr("Changelog") text: qsTr("Changelog")
color: projectCreditsScrollView.visible? JamiTheme.buttonTintedGreyInactive : JamiTheme.buttonTintedGrey color: projectCreditsScrollView.visible? JamiTheme.buttonTintedGreyInactive : JamiTheme.buttonTintedGrey
hoveredColor: JamiTheme.buttonTintedGreyHovered
pressedColor: JamiTheme.buttonTintedGreyPressed
Layout.preferredWidth: 100 Layout.preferredWidth: 100
onClicked: { onClicked: {
...@@ -258,6 +260,8 @@ Dialog { ...@@ -258,6 +260,8 @@ Dialog {
id: creditsButton id: creditsButton
text: qsTr("Credit") text: qsTr("Credit")
color: projectCreditsScrollView.visible? JamiTheme.buttonTintedGrey : JamiTheme.buttonTintedGreyInactive color: projectCreditsScrollView.visible? JamiTheme.buttonTintedGrey : JamiTheme.buttonTintedGreyInactive
hoveredColor: JamiTheme.buttonTintedGreyHovered
pressedColor: JamiTheme.buttonTintedGreyPressed
Layout.preferredWidth: 100 Layout.preferredWidth: 100
onClicked: { onClicked: {
......
...@@ -136,6 +136,8 @@ Rectangle { ...@@ -136,6 +136,8 @@ Rectangle {
id: backupBtn id: backupBtn
text: qsTr("BACKUP ACCOUNT") text: qsTr("BACKUP ACCOUNT")
color: JamiTheme.buttonTintedGrey color: JamiTheme.buttonTintedGrey
hoveredColor: JamiTheme.buttonTintedGreyHovered
pressedColor: JamiTheme.buttonTintedGreyPressed
onClicked: { onClicked: {
exportBtn_Dialog.open() exportBtn_Dialog.open()
...@@ -146,6 +148,8 @@ Rectangle { ...@@ -146,6 +148,8 @@ Rectangle {
MaterialButton { MaterialButton {
text: qsTr("SKIP") text: qsTr("SKIP")
color: JamiTheme.buttonTintedGrey color: JamiTheme.buttonTintedGrey
hoveredColor: JamiTheme.buttonTintedGreyHovered
pressedColor: JamiTheme.buttonTintedGreyPressed
outlined: true outlined: true
onClicked: { onClicked: {
......
...@@ -139,6 +139,8 @@ Rectangle { ...@@ -139,6 +139,8 @@ Rectangle {
&& usernameManagerEdit.text.length !== 0 && usernameManagerEdit.text.length !== 0
&& passwordManagerEdit.text.length !== 0 && passwordManagerEdit.text.length !== 0
color: enabled? JamiTheme.wizardBlueButtons : JamiTheme.buttonTintedGreyInactive color: enabled? JamiTheme.wizardBlueButtons : JamiTheme.buttonTintedGreyInactive
hoveredColor: JamiTheme.buttonTintedBlueHovered
pressedColor: JamiTheme.buttonTintedBluePressed
onClicked: { onClicked: {
errorText = "" errorText = ""
......
...@@ -163,6 +163,8 @@ Rectangle { ...@@ -163,6 +163,8 @@ Rectangle {
color: nameRegistrationUIState === WizardView.FREE? color: nameRegistrationUIState === WizardView.FREE?
JamiTheme.buttonTintedGrey JamiTheme.buttonTintedGrey
: JamiTheme.buttonTintedGreyInactive : JamiTheme.buttonTintedGreyInactive
hoveredColor: JamiTheme.buttonTintedGreyHovered
pressedColor: JamiTheme.buttonTintedGreyPressed
onClicked: { onClicked: {
if (nameRegistrationUIState === WizardView.FREE) if (nameRegistrationUIState === WizardView.FREE)
...@@ -173,6 +175,8 @@ Rectangle { ...@@ -173,6 +175,8 @@ Rectangle {
MaterialButton { MaterialButton {
text: qsTr("SKIP CHOOSING USERNAME") text: qsTr("SKIP CHOOSING USERNAME")
color: JamiTheme.buttonTintedGrey color: JamiTheme.buttonTintedGrey
hoveredColor: JamiTheme.buttonTintedGreyHovered
pressedColor: JamiTheme.buttonTintedGreyPressed
outlined: true outlined: true
onClicked: { onClicked: {
...@@ -281,6 +285,8 @@ Rectangle { ...@@ -281,6 +285,8 @@ Rectangle {
color: !passwordSwitch.checked || color: !passwordSwitch.checked ||
(passwordEdit.text === passwordConfirmEdit.text && passwordEdit.text.length !== 0)? (passwordEdit.text === passwordConfirmEdit.text && passwordEdit.text.length !== 0)?
JamiTheme.wizardBlueButtons : JamiTheme.buttonTintedGreyInactive JamiTheme.wizardBlueButtons : JamiTheme.buttonTintedGreyInactive
hoveredColor: JamiTheme.buttonTintedBlueHovered
pressedColor: JamiTheme.buttonTintedBluePressed
onClicked: { onClicked: {
createAccount() createAccount()
......
...@@ -142,6 +142,8 @@ Rectangle { ...@@ -142,6 +142,8 @@ Rectangle {
id: createAccountButton id: createAccountButton
text: qsTr("CREATE SIP ACCOUNT") text: qsTr("CREATE SIP ACCOUNT")
color: JamiTheme.wizardBlueButtons color: JamiTheme.wizardBlueButtons
hoveredColor: JamiTheme.buttonTintedBlueHovered
pressedColor: JamiTheme.buttonTintedBluePressed
onClicked: { onClicked: {
createAccount() createAccount()
......
...@@ -89,6 +89,8 @@ Rectangle { ...@@ -89,6 +89,8 @@ Rectangle {
toolTipText: qsTr("Import your account's archive") toolTipText: qsTr("Import your account's archive")
source: "qrc:/images/icons/round-folder-24px.svg" source: "qrc:/images/icons/round-folder-24px.svg"
color: JamiTheme.buttonTintedGrey color: JamiTheme.buttonTintedGrey
hoveredColor: JamiTheme.buttonTintedGreyHovered
pressedColor: JamiTheme.buttonTintedGreyPressed
onClicked: { onClicked: {
importFromFile_Dialog.open() importFromFile_Dialog.open()
...@@ -123,6 +125,8 @@ Rectangle { ...@@ -123,6 +125,8 @@ Rectangle {
text: qsTr("CONNECT FROM BACKUP") text: qsTr("CONNECT FROM BACKUP")
color: filePath.length === 0? color: filePath.length === 0?
JamiTheme.buttonTintedGreyInactive : JamiTheme.buttonTintedGrey JamiTheme.buttonTintedGreyInactive : JamiTheme.buttonTintedGrey
hoveredColor: JamiTheme.buttonTintedGreyHovered
pressedColor: JamiTheme.buttonTintedGreyPressed
onClicked: { onClicked: {
errorText = "" errorText = ""
......
...@@ -103,6 +103,8 @@ Rectangle { ...@@ -103,6 +103,8 @@ Rectangle {
text: qsTr("CONNECT FROM ANOTHER DEVICE") text: qsTr("CONNECT FROM ANOTHER DEVICE")
color: pinFromDevice.text.length === 0? color: pinFromDevice.text.length === 0?
JamiTheme.buttonTintedGreyInactive : JamiTheme.buttonTintedGrey JamiTheme.buttonTintedGreyInactive : JamiTheme.buttonTintedGrey
hoveredColor: JamiTheme.buttonTintedGreyHovered
pressedColor: JamiTheme.buttonTintedGreyPressed
onClicked: { onClicked: {
errorText = "" errorText = ""
......
...@@ -114,6 +114,8 @@ Rectangle { ...@@ -114,6 +114,8 @@ Rectangle {
enabled: readyToSaveDetails enabled: readyToSaveDetails
text: enabled? qsTr("Save Profile") : qsTr("Generating account…") text: enabled? qsTr("Save Profile") : qsTr("Generating account…")
color: enabled? JamiTheme.wizardBlueButtons : JamiTheme.buttonTintedGreyInactive color: enabled? JamiTheme.wizardBlueButtons : JamiTheme.buttonTintedGreyInactive
hoveredColor: JamiTheme.buttonTintedBlueHovered
pressedColor: JamiTheme.buttonTintedBluePressed
onClicked: { onClicked: {
saveProfile() saveProfile()
...@@ -124,6 +126,8 @@ Rectangle { ...@@ -124,6 +126,8 @@ Rectangle {
text: qsTr("SKIP") text: qsTr("SKIP")
enabled: saveProfileBtn.enabled enabled: saveProfileBtn.enabled
color: enabled? JamiTheme.buttonTintedGrey : JamiTheme.buttonTintedGreyInactive color: enabled? JamiTheme.buttonTintedGrey : JamiTheme.buttonTintedGreyInactive
hoveredColor: JamiTheme.buttonTintedGreyHovered
pressedColor: JamiTheme.buttonTintedGreyPressed
outlined: true outlined: true
onClicked: { onClicked: {
......
...@@ -85,6 +85,8 @@ ColumnLayout { ...@@ -85,6 +85,8 @@ ColumnLayout {
toolTipText: qsTr("Create new Jami account") toolTipText: qsTr("Create new Jami account")
source: "qrc:/images/default_avatar_overlay.svg" source: "qrc:/images/default_avatar_overlay.svg"
color: JamiTheme.buttonTintedBlue color: JamiTheme.buttonTintedBlue
hoveredColor: JamiTheme.buttonTintedBlueHovered
pressedColor: JamiTheme.buttonTintedBluePressed
onClicked: { onClicked: {
welcomePageRedirectPage(1) welcomePageRedirectPage(1)
...@@ -104,6 +106,8 @@ ColumnLayout { ...@@ -104,6 +106,8 @@ ColumnLayout {
toolTipText: qsTr("Import account from other device") toolTipText: qsTr("Import account from other device")
source: "qrc:/images/icons/devices-24px.svg" source: "qrc:/images/icons/devices-24px.svg"
color: JamiTheme.buttonTintedBlue color: JamiTheme.buttonTintedBlue
hoveredColor: JamiTheme.buttonTintedBlueHovered
pressedColor: JamiTheme.buttonTintedBluePressed
onClicked: { onClicked: {
welcomePageRedirectPage(5) welcomePageRedirectPage(5)
...@@ -123,6 +127,8 @@ ColumnLayout { ...@@ -123,6 +127,8 @@ ColumnLayout {
toolTipText: qsTr("Import account from backup file") toolTipText: qsTr("Import account from backup file")
source: "qrc:/images/icons/backup-24px.svg" source: "qrc:/images/icons/backup-24px.svg"
color: JamiTheme.buttonTintedBlue color: JamiTheme.buttonTintedBlue
hoveredColor: JamiTheme.buttonTintedBlueHovered
pressedColor: JamiTheme.buttonTintedBluePressed
onClicked: { onClicked: {
welcomePageRedirectPage(3) welcomePageRedirectPage(3)
...@@ -141,6 +147,8 @@ ColumnLayout { ...@@ -141,6 +147,8 @@ ColumnLayout {
text: qsTr("SHOW ADVANCED") text: qsTr("SHOW ADVANCED")
toolTipText: qsTr("Show advanced options") toolTipText: qsTr("Show advanced options")
color: JamiTheme.buttonTintedBlue color: JamiTheme.buttonTintedBlue
hoveredColor: JamiTheme.buttonTintedBlueHovered
pressedColor: JamiTheme.buttonTintedBluePressed
outlined: true outlined: true
hoverEnabled: true hoverEnabled: true
...@@ -169,6 +177,8 @@ ColumnLayout { ...@@ -169,6 +177,8 @@ ColumnLayout {
toolTipText: qsTr("Login to account manager") toolTipText: qsTr("Login to account manager")
source: "qrc:/images/icons/router-24px.svg" source: "qrc:/images/icons/router-24px.svg"
color: JamiTheme.buttonTintedBlue color: JamiTheme.buttonTintedBlue
hoveredColor: JamiTheme.buttonTintedBlueHovered
pressedColor: JamiTheme.buttonTintedBluePressed
onClicked: { onClicked: {
welcomePageRedirectPage(6) welcomePageRedirectPage(6)
...@@ -188,6 +198,8 @@ ColumnLayout { ...@@ -188,6 +198,8 @@ ColumnLayout {
toolTipText: qsTr("Create new SIP account") toolTipText: qsTr("Create new SIP account")
source: "qrc:/images/default_avatar_overlay.svg" source: "qrc:/images/default_avatar_overlay.svg"
color: JamiTheme.buttonTintedBlue color: JamiTheme.buttonTintedBlue
hoveredColor: JamiTheme.buttonTintedBlueHovered
pressedColor: JamiTheme.buttonTintedBluePressed
onClicked: { onClicked: {
welcomePageRedirectPage(2) welcomePageRedirectPage(2)
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment