Improve flat buttons in share delegates

Signed-off-by: Claudio Cambra <claudio.cambra@nextcloud.com>

diff --git a/src/gui/filedetails/ShareDelegate.qml b/src/gui/filedetails/ShareDelegate.qml
index 56cbe9edf932612db780b0e3835fe313e7ee46c2..617e9af880d59367d26c56d9548bc102ad82899d 100644 (file)
--- a/src/gui/filedetails/ShareDelegate.qml
+++ b/src/gui/filedetails/ShareDelegate.qml
@@ -230,25 +230,27 @@ GridLayout {
         visible: text !== ""
     }
 
-    RowLayout {
+    RowLayout {        
         Layout.row: 0
         Layout.column: 2
         Layout.rowSpan: root.rows
         Layout.fillHeight: true
+
         spacing: 0
 
-        Button {
+        CustomButton {
             id: createLinkButton
 
             Layout.alignment: Qt.AlignCenter
-            Layout.preferredWidth: icon.width + (Style.standardSpacing * 2)
+            Layout.preferredWidth: Style.iconButtonWidth
+            Layout.preferredHeight: width
 
-            flat: true
-            display: AbstractButton.IconOnly
-            icon.color: Style.ncTextColor
-            icon.source: "qrc:///client/theme/add.svg"
-            icon.width: 16
-            icon.height: 16
+            toolTipText: qsTr("Create a new share link")
+
+            bgColor: Style.lightHover
+            bgNormalOpacity: 0
+
+            imageSource: "qrc:///client/theme/add.svg"
 
             visible: root.isPlaceholderLinkShare && root.canCreateLinkShares
             enabled: visible
@@ -256,16 +258,19 @@ GridLayout {
             onClicked: root.createNewLinkShare()
         }
 
-        Button {
+        CustomButton {
             id: copyLinkButton
 
             Layout.alignment: Qt.AlignCenter
-            Layout.preferredWidth: icon.width + (Style.standardSpacing * 2)
+            Layout.preferredWidth: Style.iconButtonWidth
+            Layout.preferredHeight: width
+
+            toolTipText: qsTr("Copy share link location")
 
-            flat: true
-            display: AbstractButton.IconOnly
-            icon.color: Style.ncTextColor
-            icon.source: "qrc:///client/theme/copy.svg"
+            bgColor: Style.lightHover
+            bgNormalOpacity: 0
+
+            imageSource: "qrc:///client/theme/copy.svg"
             icon.width: 16
             icon.height: 16
 
@@ -282,18 +287,19 @@ GridLayout {
             TextEdit { id: clipboardHelper; visible: false}
         }
 
-        Button {
+        CustomButton {
             id: moreButton
 
             Layout.alignment: Qt.AlignCenter
-            Layout.preferredWidth: icon.width + (Style.standardSpacing * 2)
+            Layout.preferredWidth: Style.iconButtonWidth
+            Layout.preferredHeight: width
 
-            flat: true
-            display: AbstractButton.IconOnly
-            icon.color: Style.ncTextColor
-            icon.source: "qrc:///client/theme/more.svg"
-            icon.width: 16
-            icon.height: 16
+            toolTipText: qsTr("Share options")
+
+            bgColor: Style.lightHover
+            bgNormalOpacity: 0
+
+            imageSource: "qrc:///client/theme/more.svg"
 
             visible: !root.isPlaceholderLinkShare
             enabled: visible

diff --git a/src/gui/tray/CustomButton.qml b/src/gui/tray/CustomButton.qml
index c132830be4ca8e8312b892777e1e038fdd019348..f07acc31c463397a00d34e16d6e730519ca93612 100644 (file)
--- a/src/gui/tray/CustomButton.qml
+++ b/src/gui/tray/CustomButton.qml
@@ -7,7 +7,8 @@ Button {
     id: root
 
     property string imageSource: ""
-    property string imageSourceHover: ""
+    property string imageSourceHover: imageSource
+    property var iconItem: icon
 
     property string toolTipText: ""
 

diff --git a/theme/Style/Style.qml b/theme/Style/Style.qml
index 9214c17eab5a0926322ca235ed91d349bc351df0..cba2ee9f3911b0a25ddf08d881fff5732f27f941 100644 (file)
--- a/theme/Style/Style.qml
+++ b/theme/Style/Style.qml
@@ -51,6 +51,8 @@ QtObject {
     property int standardSpacing: 10\r
     property int smallSpacing: 5\r
 \r
+    property int iconButtonWidth: 36\r
+\r
     property int minActivityHeight: variableSize(40)\r
 \r
     property int currentAccountButtonWidth: 220\r