From be2e5266aa1d00da5600c6cb7a96b5cfe17cae6b Mon Sep 17 00:00:00 2001 From: Nicolas Fella Date: Mon, 15 Jun 2020 15:35:34 +0200 Subject: [PATCH] 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 --- resources.qrc | 1 + src/gui/tray/HeaderButton.qml | 31 ++++++ src/gui/tray/Window.qml | 196 +++++++--------------------------- 3 files changed, 72 insertions(+), 156 deletions(-) create mode 100644 src/gui/tray/HeaderButton.qml diff --git a/resources.qrc b/resources.qrc index 6ea8bb8fc1..437c9567ae 100644 --- a/resources.qrc +++ b/resources.qrc @@ -2,6 +2,7 @@ src/gui/tray/Window.qml src/gui/tray/UserLine.qml + src/gui/tray/HeaderButton.qml theme/Style/Style.qml theme/Style/qmldir diff --git a/src/gui/tray/HeaderButton.qml b/src/gui/tray/HeaderButton.qml new file mode 100644 index 0000000000..a1a9fc69aa --- /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 2ec850d4af..0d352c293a 100644 --- a/src/gui/tray/Window.qml +++ b/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" + 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 - 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(); + 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" - - background: Rectangle { - border.color: Style.ncBlue - radius: 2 - } - - 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) - } - } - } + appsMenu.open(); + userModelBackend.openCurrentAccountServer(); } - 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 + Menu { + id: appsMenu + y: (trayWindowAppsButton.y + trayWindowAppsButton.height + 2) + width: Math.min(contentItem.childrenRect.width + 4, Style.trayWindowWidth / 2) + closePolicy: "CloseOnPressOutside" + + background: Rectangle { + border.color: Style.ncBlue + radius: 2 } - 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) } } }