Improve share view tab buttons
authorClaudio Cambra <claudio.cambra@nextcloud.com>
Thu, 15 Sep 2022 16:25:41 +0000 (18:25 +0200)
committerClaudio Cambra <claudio.cambra@nextcloud.com>
Mon, 31 Oct 2022 17:06:07 +0000 (18:06 +0100)
Signed-off-by: Claudio Cambra <claudio.cambra@nextcloud.com>
src/gui/filedetails/NCTabButton.qml

index 6a5a2829a5a96048b5b2cca5856e7644394da63b..cd863cea846915b9f74434288df6e734cf28f35e 100644 (file)
@@ -25,15 +25,16 @@ TabButton {
 
     property string svgCustomColorSource: ""
 
-    padding: 0
+    padding: Style.smallSpacing
     background: Rectangle {
+        radius: Style.slightlyRoundedButtonRadius
         color: tabButton.pressed ? Style.lightHover : Style.backgroundColor
     }
 
     contentItem: ColumnLayout {
         id: tabButtonLayout
 
-        property var elementColors: tabButton.checked ? Style.ncTextColor : Style.ncSecondaryTextColor
+        property var elementColors: tabButton.checked || tabButton.hovered ? Style.ncTextColor : Style.ncSecondaryTextColor
 
         // We'd like to just set the height of the Image, but this causes crashing.
         // So we use a wrapping Item and use anchors to adjust the size.
@@ -76,9 +77,11 @@ TabButton {
 
             property int textWidth: fontMetrics.boundingRect(tabButtonLabel.text).width
 
+            Layout.fillWidth: true
             implicitWidth: textWidth + Style.standardSpacing * 2
             implicitHeight: 2
-            color: tabButton.checked ? Style.ncBlue : "transparent"
+
+            color: tabButton.checked ? Style.ncBlue : tabButton.hovered ? Style.lightHover : "transparent"
         }
     }
 }