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>

diff --git a/resources.qrc b/resources.qrc
index 6ea8bb8fc1a1e9bdbcf2f6f477ced52348859592..437c9567ae0d0bc03693f0e1d0168dda6cad86a8 100644 (file)
--- a/resources.qrc
+++ b/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>

diff --git a/src/gui/tray/HeaderButton.qml b/src/gui/tray/HeaderButton.qml
new file mode 100644 (file)
index 0000000..a1a9fc6
--- /dev/null
+++ b/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
+    }
+}

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