Merge pull request #6291 from nextcloud/bugfix/fix-tray-folderbutton-size

Bugfix. Fix incorrect size of the folderbutton size and scaling.

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,14 +57,27 @@ HeaderButton {
         text: root.userHasGroupFolders ? qsTr("Open local or group folders") : qsTr("Open local folder")
     }
 
+    contentItem: Item {
+        id: rootContent
+
+        anchors.fill: parent
+
+        Item {
+            id: contentContainer
+            anchors.centerIn: parent
+
+            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.top: root.verticalCenter
-        anchors.left: root.horizontalCenter
+                anchors.bottom: openLocalFolderButtonIcon.bottom
+                anchors.bottomMargin: Style.trayFoldersMenuButtonStateIndicatorBottomOffset
+                anchors.right: openLocalFolderButtonIcon.right
                 sourceSize.width: Style.folderStateIndicatorSize
                 sourceSize.height: Style.folderStateIndicatorSize
 
@@ -92,51 +107,55 @@ HeaderButton {
                 }
             }
 
-    RowLayout {
-        id: openLocalFolderButtonRowLayout
-
-        anchors.fill: parent
-        spacing: 0
-
             Image {
                 id: openLocalFolderButtonIcon
+
+                property int imageWidth: rootContent.width * Style.trayFoldersMenuButtonMainIconSizeFraction
+                property int imageHeight: rootContent.width * Style.trayFoldersMenuButtonMainIconSizeFraction
+
                 cache: true
+
                 source: "image://svgimage-custom-color/folder.svg/" + Style.currentUserHeaderTextColor
-
                 sourceSize {
-                width: Style.headerButtonIconSize
-                height: Style.headerButtonIconSize
+                    width: imageWidth
+                    height: imageHeight
                 }
 
-            verticalAlignment: Qt.AlignCenter
+                width: imageWidth
+                height: imageHeight
 
-            Accessible.role: Accessible.Graphic
-            Accessible.name: qsTr("Group folder button")
-            Layout.leftMargin: Style.trayHorizontalMargin
+                anchors.verticalCenter: parent
             }
 
+
             Loader {
                 id: openLocalFolderButtonCaretIconLoader
 
                 active: root.userHasGroupFolders
                 visible: active
 
-            sourceComponent: ColorOverlay {
-                width: source.width
-                height: source.height
-                cached: true
-                color: Style.currentUserHeaderTextColor
-                source: Image {
+                anchors.left: openLocalFolderButtonIcon.right
+                anchors.verticalCenter: openLocalFolderButtonIcon.verticalCenter
+
+                property int imageWidth: rootContent.width * Style.trayFoldersMenuButtonDropDownCaretIconSizeFraction
+                property int imageHeight: rootContent.width * Style.trayFoldersMenuButtonDropDownCaretIconSizeFraction
+
+                sourceComponent: Image {
+                    id: openLocalFolderButtonCaretIcon
+
+                    cache: true
+
                     source: "image://svgimage-custom-color/caret-down.svg/" + Style.currentUserHeaderTextColor
-                    sourceSize.width: Style.accountDropDownCaretSize
-                    sourceSize.height: Style.accountDropDownCaretSize
-
-                    verticalAlignment: Qt.AlignCenter
-
-                    Layout.alignment: Qt.AlignRight
-                    Layout.margins: Style.accountDropDownCaretMargin
+                    sourceSize: {
+                        width: openLocalFolderButtonCaretIconLoader.imageWidth
+                        height: openLocalFolderButtonCaretIconLoader.imageHeight
                     }
                 }
+
+                width: openLocalFolderButtonCaretIconLoader.imageWidth
+                height: openLocalFolderButtonCaretIconLoader.imageHeight
+
+            }
         }
     }
 

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 {

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