Replace drawer 'Done' button at bottom-right with close button at top-right

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

diff --git a/src/gui/filedetails/FileDetailsPage.qml b/src/gui/filedetails/FileDetailsPage.qml
index 85eb57c3fff3a7a604897f11199564166614d731..3147bbd6482869caaa7d0db3800bd7c0c2dd6e79 100644 (file)
--- a/src/gui/filedetails/FileDetailsPage.qml
+++ b/src/gui/filedetails/FileDetailsPage.qml
@@ -23,6 +23,8 @@ import "../tray"
 Page {
     id: root
 
+    signal closeButtonClicked
+
     property var accountState: ({})
     property string localPath: ""
 
@@ -34,6 +36,7 @@ Page {
     property int intendedPadding: Style.standardSpacing * 2
     property int iconSize: 32
     property StackView rootStackView: StackView {}
+    property bool showCloseButton: false
 
     property FileDetails fileDetails: FileDetails {
         id: fileDetails
@@ -70,11 +73,12 @@ Page {
             id: headerGridLayout
 
             readonly property bool showFileLockedString: root.fileDetails.lockExpireString !== ""
+            readonly property int textRightMargin: root.showCloseButton ? root.intendedPadding : 0
 
             Layout.fillWidth: parent
             Layout.topMargin: root.topPadding
 
-            columns: 2
+            columns: root.showCloseButton ? 3 : 2
             rows: showFileLockedString ? 3 : 2
 
             rowSpacing: Style.standardSpacing / 2
@@ -100,7 +104,7 @@ Page {
                 id: fileNameLabel
 
                 Layout.fillWidth: true
-                Layout.rightMargin: root.intendedPadding
+                Layout.rightMargin: headerGridLayout.textRightMargin
 
                 text: root.fileDetails.name
                 color: Style.ncTextColor
@@ -108,11 +112,29 @@ Page {
                 wrapMode: Text.Wrap
             }
 
+            CustomButton {
+                id: closeButton
+
+                Layout.rowSpan: headerGridLayout.rows
+                Layout.preferredWidth: Style.iconButtonWidth
+                Layout.preferredHeight: width
+                Layout.rightMargin: headerGridLayout.textRightMargin
+
+                imageSource: "image://svgimage-custom-color/clear.svg" + "/" + Style.ncTextColor
+                bgColor: Style.lightHover
+                bgNormalOpacity: 0
+                toolTipText: qsTr("Dismiss")
+
+                visible: root.showCloseButton
+
+                onClicked: root.closeButtonClicked()
+            }
+
             EnforcedPlainTextLabel {
                 id: fileDetailsLabel
 
                 Layout.fillWidth: true
-                Layout.rightMargin: root.intendedPadding
+                Layout.rightMargin: headerGridLayout.textRightMargin
 
                 text: `${root.fileDetails.sizeString} · ${root.fileDetails.lastChangedString}`
                 color: Style.ncSecondaryTextColor
@@ -123,7 +145,7 @@ Page {
                 id: fileLockedLabel
 
                 Layout.fillWidth: true
-                Layout.rightMargin: root.intendedPadding
+                Layout.rightMargin: headerGridLayout.textRightMargin
 
                 text: root.fileDetails.lockExpireString
                 color: Style.ncSecondaryTextColor

diff --git a/src/gui/tray/Window.qml b/src/gui/tray/Window.qml
index 331cb69c91e0e47ddc31211791454760b702cf4d..a084efa74ffb607d7022ce1aee3ce09fea4c68fe 100644 (file)
--- a/src/gui/tray/Window.qml
+++ b/src/gui/tray/Window.qml
@@ -188,47 +188,17 @@ ApplicationWindow {
                                                 fileDetailsDrawer.pageToShow);\r
                 }\r
             }\r
-            sourceComponent: ColumnLayout {\r
-                anchors.fill: parent\r
-\r
-                FileDetailsPage {\r
-                    id: fileDetails\r
-\r
-                    Layout.fillWidth: true\r
-                    Layout.fillHeight: true\r
-\r
-                    background: null\r
-                    accountState: fileDetailsDrawer.folderAccountState\r
-                    localPath: fileDetailsDrawer.fileLocalPath\r
-                }\r
+            sourceComponent:FileDetailsPage {\r
+                id: fileDetails\r
 \r
-                CustomButton {\r
-                    FontMetrics {\r
-                        id: doneButtonFm\r
-                        font: parent.contentsFont\r
-                    }\r
+                anchors.fill: parent\r
 \r
-                    Layout.alignment: Qt.AlignRight | Qt.AlignVCenter\r
-                    Layout.topMargin: fileDetails.intendedPadding\r
-                    Layout.bottomMargin: fileDetails.intendedPadding\r
-                    Layout.leftMargin: fileDetails.intendedPadding\r
-                    Layout.rightMargin: fileDetails.intendedPadding\r
-                    Layout.preferredWidth: doneButtonFm.boundingRect(text).width +\r
-                                           leftPadding +\r
-                                           rightPadding +\r
-                                           Style.standardSpacing * 2\r
-\r
-                    text: qsTr("Done")\r
-                    contentsFont.bold: true\r
-                    bgColor: Style.currentUserHeaderColor\r
-                    textColor: Style.adjustedCurrentUserHeaderColor\r
-                    textColorHovered: Style.currentUserHeaderTextColor\r
-                    onClicked: fileDetailsDrawer.close()\r
+                background: null\r
+                accountState: fileDetailsDrawer.folderAccountState\r
+                localPath: fileDetailsDrawer.fileLocalPath\r
+                showCloseButton: true\r
 \r
-                    Accessible.role: Accessible.Button\r
-                    Accessible.name: qsTr("Close the file details view")\r
-                    Accessible.onPressAction: clicked()\r
-                }\r
+                onCloseButtonClicked: fileDetailsDrawer.close()\r
             }\r
         }\r
     }\r