Create HeaderButton QML component

Deduplicate the Button code by moving it into a separate file.

Also use the same background code for the apps button since as far as I can tell it didn't behave any different

Signed-off-by: Nicolas Fella <nicolas.fella@gmx.de>

resources.qrc

@@ -2,6 +2,7 @@
     <qresource prefix="/qml">
         <file>src/gui/tray/Window.qml</file>
         <file>src/gui/tray/UserLine.qml</file>
+        <file>src/gui/tray/HeaderButton.qml</file>
         <file>theme/Style/Style.qml</file>
         <file>theme/Style/qmldir</file>
     </qresource>

src/gui/tray/HeaderButton.qml

@@ -0,0 +1,31 @@
+import QtQml 2.1
+import QtQml.Models 2.1
+import QtQuick 2.9
+import QtQuick.Window 2.3
+import QtQuick.Controls 2.2
+import QtQuick.Layouts 1.2
+import QtGraphicalEffects 1.0
+
+// Custom qml modules are in /theme (and included by resources.qrc)
+import Style 1.0
+
+Button {
+    id: root
+
+    display: AbstractButton.IconOnly
+    flat: true
+    hoverEnabled: Style.hoverEffectsEnabled
+
+    icon.width: Style.headerButtonIconSize
+    icon.height: Style.headerButtonIconSize
+    icon.color: "transparent"
+
+    Layout.alignment: Qt.AlignRight
+    Layout.preferredWidth:  Style.trayWindowHeaderHeight
+    Layout.preferredHeight: Style.trayWindowHeaderHeight
+
+    background: Rectangle {
+        color: root.hovered ? "white" : "transparent"
+        opacity: 0.2
+    }
+}

src/gui/tray/Window.qml

@@ -360,182 +360,66 @@ Window {
                     Layout.fillWidth: true
                 }
 
-                Button {
+                HeaderButton {
                     id: openLocalFolderButton
 
-                    Layout.alignment: Qt.AlignRight
-                    display: AbstractButton.IconOnly
-                    Layout.preferredWidth:  Style.trayWindowHeaderHeight
-                    Layout.preferredHeight: Style.trayWindowHeaderHeight
-                    flat: true
                     visible: userModelBackend.currentUserHasLocalFolder()
-
                     icon.source: "qrc:///client/theme/white/folder.svg"
-                    icon.width: Style.headerButtonIconSize
-                    icon.height: Style.headerButtonIconSize
-                    icon.color: "transparent"
-
-                    MouseArea {
-                        id: folderBtnMouseArea
-
-                        anchors.fill: parent
-                        hoverEnabled: Style.hoverEffectsEnabled
-                        onClicked:
-                        {
-                            userModelBackend.openCurrentAccountLocalFolder();
-                        }
-                    }
-
-                    background:
-                        Rectangle {
-                        color: folderBtnMouseArea.containsMouse ? "white" : "transparent"
-                        opacity: 0.2
-                    }
+                    onClicked: userModelBackend.openCurrentAccountLocalFolder()
                 }
 
-                Button {
+                HeaderButton {
                     id: trayWindowTalkButton
 
-                    Layout.alignment: Qt.AlignRight
-                    display: AbstractButton.IconOnly
-                    Layout.preferredWidth:  Style.trayWindowHeaderHeight
-                    Layout.preferredHeight: Style.trayWindowHeaderHeight
-                    flat: true
-                    visible: userModelBackend.currentServerHasTalk() ? true : false
-
+                    visible: userModelBackend.currentServerHasTalk()
                     icon.source: "qrc:///client/theme/white/talk-app.svg"
-                    icon.width: Style.headerButtonIconSize
-                    icon.height: Style.headerButtonIconSize
-                    icon.color: "transparent"
-
-                    MouseArea {
-                        id: talkBtnMouseArea
-
-                        anchors.fill: parent
-                        hoverEnabled: Style.hoverEffectsEnabled
-                        onClicked:
-                        {
-                            userModelBackend.openCurrentAccountTalk();
-                        }
-                    }
-
-                    background:
-                        Rectangle {
-                        color: talkBtnMouseArea.containsMouse ? "white" : "transparent"
-                        opacity: 0.2
-                    }
+                    onClicked: userModelBackend.openCurrentAccountTalk()
                 }
 
-                Button {
+                HeaderButton {
                     id: trayWindowAppsButton
-
-                    Layout.alignment: Qt.AlignRight
-                    display: AbstractButton.IconOnly
-                    Layout.preferredWidth:  Style.trayWindowHeaderHeight
-                    Layout.preferredHeight: Style.trayWindowHeaderHeight
-                    flat: true
-
                     icon.source: "qrc:///client/theme/white/more-apps.svg"
-                    icon.width: Style.headerButtonIconSize
-                    icon.height: Style.headerButtonIconSize
-                    icon.color: "transparent"
-
-                    MouseArea {
-                        id: appsBtnMouseArea
-
-                        anchors.fill: parent
-                        hoverEnabled: Style.hoverEffectsEnabled
-                        onClicked:
-                        {
-                            /*
-                            // The count() property was introduced in QtQuick.Controls 2.3 (Qt 5.10)
-                            // so we handle this with userModelBackend.openCurrentAccountServer()
-                            //
-                            // See UserModel::openCurrentAccountServer() to disable this workaround
-                            // in the future for Qt >= 5.10
-
-                            if(appsMenu.count() > 0) {
-                                appsMenu.popup();
-                            } else {
-                                userModelBackend.openCurrentAccountServer();
-                            }
-                            */
-
-                            appsMenu.open();
+                    onClicked: {
+                        /*
+                        // The count() property was introduced in QtQuick.Controls 2.3 (Qt 5.10)
+                        // so we handle this with userModelBackend.openCurrentAccountServer()
+                        //
+                        // See UserModel::openCurrentAccountServer() to disable this workaround
+                        // in the future for Qt >= 5.10
+
+                        if(appsMenu.count() > 0) {
+                            appsMenu.popup();
+                        } else {
                             userModelBackend.openCurrentAccountServer();
                         }
+                        */
 
-                        Menu {
-                            id: appsMenu
-                            y: (trayWindowAppsButton.y + trayWindowAppsButton.height + 2)
-                            width: Math.min(contentItem.childrenRect.width + 4, Style.trayWindowWidth / 2)
-                            closePolicy: "CloseOnPressOutside"
+                        appsMenu.open();
+                        userModelBackend.openCurrentAccountServer();
+                    }
 
-                            background: Rectangle {
-                                border.color: Style.ncBlue
-                                radius: 2
-                            }
+                    Menu {
+                        id: appsMenu
+                        y: (trayWindowAppsButton.y + trayWindowAppsButton.height + 2)
+                        width: Math.min(contentItem.childrenRect.width + 4, Style.trayWindowWidth / 2)
+                        closePolicy: "CloseOnPressOutside"
 
-                            Instantiator {
-                                id: appsMenuInstantiator
-                                model: appsMenuModelBackend
-                                onObjectAdded: appsMenu.insertItem(index, object)
-                                onObjectRemoved: appsMenu.removeItem(object)
-                                delegate: MenuItem {
-                                    text: appName
-                                    font.pixelSize: Style.topLinePixelSize
-                                    icon.source: appIconUrl
-                                    width: contentItem.implicitWidth + leftPadding + rightPadding
-                                    onTriggered: appsMenuModelBackend.openAppUrl(appUrl)
-                                }
-                            }
+                        background: Rectangle {
+                            border.color: Style.ncBlue
+                            radius: 2
                         }
-                    }
 
-                    background:
-                        Item {
-                        id: rightHoverContainer
-                        height: Style.trayWindowHeaderHeight
-                        width: Style.trayWindowHeaderHeight
-                        Rectangle {
-                            width: Style.trayWindowHeaderHeight / 2
-                            height: Style.trayWindowHeaderHeight / 2
-                            color: "white"
-                            opacity: 0.2
-                            visible: appsBtnMouseArea.containsMouse
-                        }
-                        Rectangle {
-                            width: Style.trayWindowHeaderHeight / 2
-                            height: Style.trayWindowHeaderHeight / 2
-                            anchors.bottom: rightHoverContainer.bottom
-                            color: "white"
-                            opacity: 0.2
-                            visible: appsBtnMouseArea.containsMouse
-                        }
-                        Rectangle {
-                            width: Style.trayWindowHeaderHeight / 2
-                            height: Style.trayWindowHeaderHeight / 2
-                            anchors.bottom: rightHoverContainer.bottom
-                            anchors.right: rightHoverContainer.right
-                            color: "white"
-                            opacity: 0.2
-                            visible: appsBtnMouseArea.containsMouse
-                        }
-                        Rectangle {
-                            id: rightHoverContainerClipper
-                            anchors.right: rightHoverContainer.right
-                            width: Style.trayWindowHeaderHeight / 2
-                            height: Style.trayWindowHeaderHeight / 2
-                            color: "transparent"
-                            clip: true
-                            Rectangle {
-                                width: Style.trayWindowHeaderHeight
-                                height: Style.trayWindowHeaderHeight
-                                anchors.right: rightHoverContainerClipper.right
-                                radius: Style.trayWindowRadius
-                                color: "white"
-                                opacity: 0.2
-                                visible: appsBtnMouseArea.containsMouse
+                        Instantiator {
+                            id: appsMenuInstantiator
+                            model: appsMenuModelBackend
+                            onObjectAdded: appsMenu.insertItem(index, object)
+                            onObjectRemoved: appsMenu.removeItem(object)
+                            delegate: MenuItem {
+                                text: appName
+                                font.pixelSize: Style.topLinePixelSize
+                                icon.source: appIconUrl
+                                width: contentItem.implicitWidth + leftPadding + rightPadding
+                                onTriggered: appsMenuModelBackend.openAppUrl(appUrl)
                             }
                         }
                     }