From 17fbfe4e06a421dda00fbe70afe178f6ba6ef0aa Mon Sep 17 00:00:00 2001 From: alex-z Date: Tue, 12 Dec 2023 15:59:43 +0100 Subject: [PATCH] Bugfix. Fix incorrect size of the folderbutton size and scaling. Signed-off-by: alex-z --- src/gui/tray/TrayFoldersMenuButton.qml | 151 ++++++++++++++----------- src/gui/tray/Window.qml | 15 ++- theme/Style/Style.qml | 4 + 3 files changed, 102 insertions(+), 68 deletions(-) diff --git a/src/gui/tray/TrayFoldersMenuButton.qml b/src/gui/tray/TrayFoldersMenuButton.qml index 1b6d07e189db5..23a5f5942aefb 100644 --- a/src/gui/tray/TrayFoldersMenuButton.qml +++ b/src/gui/tray/TrayFoldersMenuButton.qml @@ -20,6 +20,8 @@ import Style 1.0 HeaderButton { id: root + implicitWidth: contentItem.implicitWidth + signal folderEntryTriggered(string fullFolderPath, bool isGroupFolder) required property var currentUser @@ -55,87 +57,104 @@ HeaderButton { text: root.userHasGroupFolders ? qsTr("Open local or group folders") : qsTr("Open local folder") } - Image { - id: folderStateIndicator - visible: root.currentUser.hasLocalFolder - source: root.currentUser.isConnected ? Style.stateOnlineImageSource : Style.stateOfflineImageSource - cache: false - - anchors.top: root.verticalCenter - anchors.left: root.horizontalCenter - sourceSize.width: Style.folderStateIndicatorSize - sourceSize.height: Style.folderStateIndicatorSize - - Accessible.role: Accessible.Indicator - Accessible.name: root.currentUser.isConnected ? qsTr("Connected") : qsTr("Disconnected") - z: 1 - - Rectangle { - id: folderStateIndicatorBackground - width: Style.folderStateIndicatorSize + Style.trayFolderStatusIndicatorSizeOffset - height: width - anchors.centerIn: parent - color: Style.currentUserHeaderColor - radius: width * Style.trayFolderStatusIndicatorRadiusFactor - z: -2 - } + contentItem: Item { + id: rootContent - Rectangle { - id: folderStateIndicatorBackgroundMouseHover - width: Style.folderStateIndicatorSize + Style.trayFolderStatusIndicatorSizeOffset - height: width + anchors.fill: parent + + Item { + id: contentContainer anchors.centerIn: parent - color: root.hovered ? Style.currentUserHeaderTextColor : "transparent" - opacity: Style.trayFolderStatusIndicatorMouseHoverOpacityFactor - radius: width * Style.trayFolderStatusIndicatorRadiusFactor - z: -1 - } - } - RowLayout { - id: openLocalFolderButtonRowLayout + implicitWidth: openLocalFolderButtonCaretIconLoader.active ? openLocalFolderButtonIcon.width + openLocalFolderButtonCaretIconLoader.width : openLocalFolderButtonIcon.width + implicitHeight: openLocalFolderButtonIcon.height + + Image { + id: folderStateIndicator + visible: root.currentUser.hasLocalFolder + source: root.currentUser.isConnected ? Style.stateOnlineImageSource : Style.stateOfflineImageSource + cache: false + + anchors.bottom: openLocalFolderButtonIcon.bottom + anchors.bottomMargin: Style.trayFoldersMenuButtonStateIndicatorBottomOffset + anchors.right: openLocalFolderButtonIcon.right + sourceSize.width: Style.folderStateIndicatorSize + sourceSize.height: Style.folderStateIndicatorSize + + Accessible.role: Accessible.Indicator + Accessible.name: root.currentUser.isConnected ? qsTr("Connected") : qsTr("Disconnected") + z: 1 + + Rectangle { + id: folderStateIndicatorBackground + width: Style.folderStateIndicatorSize + Style.trayFolderStatusIndicatorSizeOffset + height: width + anchors.centerIn: parent + color: Style.currentUserHeaderColor + radius: width * Style.trayFolderStatusIndicatorRadiusFactor + z: -2 + } - anchors.fill: parent - spacing: 0 + Rectangle { + id: folderStateIndicatorBackgroundMouseHover + width: Style.folderStateIndicatorSize + Style.trayFolderStatusIndicatorSizeOffset + height: width + anchors.centerIn: parent + color: root.hovered ? Style.currentUserHeaderTextColor : "transparent" + opacity: Style.trayFolderStatusIndicatorMouseHoverOpacityFactor + radius: width * Style.trayFolderStatusIndicatorRadiusFactor + z: -1 + } + } + + Image { + id: openLocalFolderButtonIcon - Image { - id: openLocalFolderButtonIcon - cache: true - source: "image://svgimage-custom-color/folder.svg/" + Style.currentUserHeaderTextColor + property int imageWidth: rootContent.width * Style.trayFoldersMenuButtonMainIconSizeFraction + property int imageHeight: rootContent.width * Style.trayFoldersMenuButtonMainIconSizeFraction - sourceSize { - width: Style.headerButtonIconSize - height: Style.headerButtonIconSize + cache: true + + source: "image://svgimage-custom-color/folder.svg/" + Style.currentUserHeaderTextColor + sourceSize { + width: imageWidth + height: imageHeight + } + + width: imageWidth + height: imageHeight + + anchors.verticalCenter: parent } - verticalAlignment: Qt.AlignCenter - Accessible.role: Accessible.Graphic - Accessible.name: qsTr("Group folder button") - Layout.leftMargin: Style.trayHorizontalMargin - } + Loader { + id: openLocalFolderButtonCaretIconLoader - Loader { - id: openLocalFolderButtonCaretIconLoader + active: root.userHasGroupFolders + visible: active - active: root.userHasGroupFolders - visible: active + anchors.left: openLocalFolderButtonIcon.right + anchors.verticalCenter: openLocalFolderButtonIcon.verticalCenter - sourceComponent: ColorOverlay { - width: source.width - height: source.height - cached: true - color: Style.currentUserHeaderTextColor - source: Image { - source: "image://svgimage-custom-color/caret-down.svg/" + Style.currentUserHeaderTextColor - sourceSize.width: Style.accountDropDownCaretSize - sourceSize.height: Style.accountDropDownCaretSize + property int imageWidth: rootContent.width * Style.trayFoldersMenuButtonDropDownCaretIconSizeFraction + property int imageHeight: rootContent.width * Style.trayFoldersMenuButtonDropDownCaretIconSizeFraction - verticalAlignment: Qt.AlignCenter + sourceComponent: Image { + id: openLocalFolderButtonCaretIcon - Layout.alignment: Qt.AlignRight - Layout.margins: Style.accountDropDownCaretMargin + cache: true + + source: "image://svgimage-custom-color/caret-down.svg/" + Style.currentUserHeaderTextColor + sourceSize: { + width: openLocalFolderButtonCaretIconLoader.imageWidth + height: openLocalFolderButtonCaretIconLoader.imageHeight + } } + + width: openLocalFolderButtonCaretIconLoader.imageWidth + height: openLocalFolderButtonCaretIconLoader.imageHeight + } } } diff --git a/src/gui/tray/Window.qml b/src/gui/tray/Window.qml index ce024c0d998ba..75380d5fddffd 100644 --- a/src/gui/tray/Window.qml +++ b/src/gui/tray/Window.qml @@ -622,12 +622,18 @@ ApplicationWindow { visible: currentUser.hasLocalFolder currentUser: UserModel.currentUser - Layout.preferredWidth: Style.iconButtonWidth * Style.trayFolderListButtonWidthScaleFactor - Layout.alignment: Qt.AlignHCenter onClicked: openLocalFolderButton.userHasGroupFolders ? openLocalFolderButton.toggleMenuOpen() : UserModel.openCurrentAccountLocalFolder() onFolderEntryTriggered: isGroupFolder ? UserModel.openCurrentAccountFolderFromTrayInfo(fullFolderPath) : UserModel.openCurrentAccountLocalFolder() + + Accessible.role: Accessible.Graphic + Accessible.name: qsTr("Open local or group folders") + Accessible.onPressAction: openLocalFolderButton.userHasGroupFolders ? openLocalFolderButton.toggleMenuOpen() : UserModel.openCurrentAccountLocalFolder() + + Layout.alignment: Qt.AlignRight + Layout.preferredWidth: Style.trayWindowHeaderHeight + Layout.preferredHeight: Style.trayWindowHeaderHeight } HeaderButton { @@ -641,6 +647,11 @@ ApplicationWindow { Accessible.role: Accessible.Button Accessible.name: qsTr("Open Nextcloud Talk in browser") Accessible.onPressAction: trayWindowTalkButton.clicked() + + Layout.alignment: Qt.AlignRight + Layout.preferredWidth: Style.trayWindowHeaderHeight + Layout.preferredHeight: Style.trayWindowHeaderHeight + } HeaderButton { diff --git a/theme/Style/Style.qml b/theme/Style/Style.qml index ae9abf7801f50..4d1360c31e0a1 100644 --- a/theme/Style/Style.qml +++ b/theme/Style/Style.qml @@ -83,6 +83,10 @@ QtObject { property int accountDropDownCaretSize: 20 property int accountDropDownCaretMargin: 8 + property int trayFoldersMenuButtonStateIndicatorBottomOffset: 5 + property double trayFoldersMenuButtonDropDownCaretIconSizeFraction: 0.3 + property double trayFoldersMenuButtonMainIconSizeFraction: 1.0 - trayFoldersMenuButtonDropDownCaretIconSizeFraction + property int addAccountButtonHeight: 50 property int headerButtonIconSize: 32