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

…size Bugfix. Fix incorrect size of the folderbutton size and scaling.
nextcloud · Dec 12, 2023 · 64ce74e · 64ce74e
2 parents 2a58a0a + 17fbfe4
commit 64ce74e
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 68 deletions.
diff --git 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
@@ -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
@@ -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