From 4f3bf839f7515d5a19488f44d91e11247001de66 Mon Sep 17 00:00:00 2001 From: Sander Ferdinand Date: Sun, 24 Dec 2017 21:52:29 +0100 Subject: [PATCH] Hover effects for titlebar buttons --- components/StandardButton.qml | 2 +- components/TitleBar.qml | 32 ++++++++++++++++++++++++-------- images/rightArrow.png | Bin 0 -> 437 bytes pages/Transfer.qml | 1 + qml.qrc | 1 + 5 files changed, 27 insertions(+), 9 deletions(-) create mode 100644 images/rightArrow.png diff --git a/components/StandardButton.qml b/components/StandardButton.qml index 76c8c889..0429c77e 100644 --- a/components/StandardButton.qml +++ b/components/StandardButton.qml @@ -32,6 +32,7 @@ import "." 1.0 Item { id: button + property string rightIcon: "" property string icon: "" property string textColor: button.enabled? Style.buttonTextColor: Style.buttonTextColorDisabled property bool small: false @@ -58,7 +59,6 @@ Item { anchors.right: parent.right height: parent.height - 1 radius: 3 -// color: parent.enabled ? Style.buttonBackgroundColor : Style.buttonBackgroundColorDisabled color: parent.enabled ? Style.buttonBackgroundColor : Style.buttonBackgroundColorDisabled border.width: parent.focus ? 1 : 0 diff --git a/components/TitleBar.qml b/components/TitleBar.qml index 5fe5ffa5..a6dfaadf 100644 --- a/components/TitleBar.qml +++ b/components/TitleBar.qml @@ -84,7 +84,7 @@ Rectangle { property bool checked: false anchors.top: parent.top anchors.left: parent.left - color: "black" + color: "transparent" height: 50 * scaleRatio width: height visible: isMobile @@ -101,6 +101,9 @@ Rectangle { id: basicMouseArea hoverEnabled: true anchors.fill: parent + cursorShape: Qt.PointingHandCursor + onEntered: goToBasicVersionButton.color = "#262626"; + onExited: goToBasicVersionButton.color = "transparent"; onClicked: { releaseFocus() parent.checked = !parent.checked @@ -118,7 +121,7 @@ Rectangle { z: 2 Rectangle { - property bool containsMouse: titleBar.mouseX >= x + row.x && titleBar.mouseX <= x + row.x + width && titleBar.containsMouse + id: whatIsAreaButton anchors.top: parent.top anchors.bottom: parent.bottom width: 42 @@ -134,6 +137,9 @@ Rectangle { MouseArea { id: whatIsArea anchors.fill: parent + cursorShape: Qt.PointingHandCursor + onEntered: whatIsAreaButton.color = "#262626"; + onExited: whatIsAreaButton.color = "transparent"; onClicked: { } @@ -141,11 +147,11 @@ Rectangle { } Rectangle { - property bool containsMouse: titleBar.mouseX >= x + row.x && titleBar.mouseX <= x + row.x + width && titleBar.containsMouse + id: minimizeButton anchors.top: parent.top anchors.bottom: parent.bottom width: 42 - color: containsMouse ? "#3665B3" : "#00000000" + color: "transparent" Image { anchors.centerIn: parent @@ -155,6 +161,10 @@ Rectangle { MouseArea { id: minimizeArea anchors.fill: parent + hoverEnabled: true + cursorShape: Qt.PointingHandCursor + onEntered: minimizeButton.color = "#262626"; + onExited: minimizeButton.color = "transparent"; onClicked: { appWindow.visibility = Window.Minimized } @@ -163,11 +173,10 @@ Rectangle { Rectangle { id: maximizeButton - property bool containsMouse: titleBar.mouseX >= x + row.x && titleBar.mouseX <= x + row.x + width && titleBar.containsMouse anchors.top: parent.top anchors.bottom: parent.bottom width: 42 - color: containsMouse ? "#FF6C3C" : "#00000000" + color: "transparent"; Image { anchors.centerIn: parent @@ -175,12 +184,15 @@ Rectangle { width: 16 source: appWindow.visibility === Window.FullScreen ? "../images/backToWindowIcon.png" : "../images/fullscreen.png" - } MouseArea { id: maximizeArea anchors.fill: parent + hoverEnabled: true + cursorShape: Qt.PointingHandCursor + onEntered: maximizeButton.color = "#262626"; + onExited: maximizeButton.color = "transparent"; onClicked: { appWindow.visibility = appWindow.visibility !== Window.FullScreen ? Window.FullScreen : Window.Windowed @@ -189,7 +201,7 @@ Rectangle { } Rectangle { - property bool containsMouse: titleBar.mouseX >= x + row.x && titleBar.mouseX <= x + row.x + width && titleBar.containsMouse + id: closeButton anchors.top: parent.top anchors.bottom: parent.bottom width: 42 @@ -205,6 +217,10 @@ Rectangle { MouseArea { anchors.fill: parent onClicked: appWindow.close(); + hoverEnabled: true + cursorShape: Qt.PointingHandCursor + onEntered: closeButton.color = "#262626"; + onExited: closeButton.color = "transparent"; } } } diff --git a/images/rightArrow.png b/images/rightArrow.png new file mode 100644 index 0000000000000000000000000000000000000000..2dd60c5d96cb86340573e121fced5f98347b78eb GIT binary patch literal 437 zcmV;m0ZRUfP)Px$Z%IT!R5%f1WWWOc|NqYl6b^u56Cf=GRrU->p8?_xAk4_f_!}yYn*tgZ0K|8I zm=L%PQ~D0dXfGQ?ST`^e|zVN~U2j^E*)t1d4*ZNhyGMA7~0I5QD;lAozD- z)&Ku*@8MDhGJ}-?NQB~2fiC{LR_N{T8li9hU*AHPg7HH^fr&e&Py&X5fhBW4Bg4;6 zKmJU#_{Q+|E}ATu8vt_QO_=dS(NE96`(4WX?su*5m;Z0?qHDRy2o(7YG@A!x{{M%^ z8UC%${|I!&7qERei2t8oa{d4QL6DJ0^czdTDJ}*<1(?b&nCS;5MIQa1LN8;)_)U-t zL3xun@ch#IKNCzD7})vQS@KVEGYBc7>pKH7a09w1F8-fs4*wb0`8ZhePjE2^D`Qi( z0pw*+!X~CL_)k>A23Z3%ka}4U=5C;&}I6z%V-Qo+$rNkDnpm4{?wu~@? fkZGVova0|9$IY5L$Pcb800000NkvXXu0mjf^L)FN literal 0 HcmV?d00001 diff --git a/pages/Transfer.qml b/pages/Transfer.qml index 88be98c8..73c85b2c 100644 --- a/pages/Transfer.qml +++ b/pages/Transfer.qml @@ -275,6 +275,7 @@ Rectangle { RowLayout { StandardButton { id: sendButton + rightIcon: "../images/rightIcon.png" Layout.bottomMargin: 17 * scaleRatio Layout.topMargin: 17 * scaleRatio text: qsTr("Send") + translationManager.emptyString diff --git a/qml.qrc b/qml.qrc index ac1000d6..c1826e1f 100644 --- a/qml.qrc +++ b/qml.qrc @@ -196,5 +196,6 @@ components/LabelButton.qml components/LabelSubheader.qml images/arrow-right-medium-white.png + images/rightArrow.png