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

…-right Signed-off-by: Claudio Cambra <claudio.cambra@nextcloud.com>
nextcloud · Dec 8, 2022 · 7822b7f · 7822b7f
1 parent 52d2ceb
commit 7822b7f
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 42 deletions.
diff --git 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: ({})
 
@@ -33,6 +35,7 @@ Page {
     // padding, which we have to apply selectively to achieve our desired effect.
     property int intendedPadding: Style.standardSpacing * 2
     property int iconSize: 32
+    property bool showCloseButton: false
 
     property FileDetails fileDetails: FileDetails {
         id: fileDetails
@@ -69,11 +72,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
@@ -99,19 +103,37 @@ Page {
                 id: fileNameLabel
 
                 Layout.fillWidth: true
-                Layout.rightMargin: root.intendedPadding
+                Layout.rightMargin: headerGridLayout.textRightMargin
 
                 text: root.fileDetails.name
                 color: Style.ncTextColor
                 font.bold: true
                 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
@@ -122,7 +144,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
@@ -188,47 +188,17 @@ ApplicationWindow {
                                                 fileDetailsDrawer.pageToShow);
                 }
             }
-            sourceComponent: ColumnLayout {
-                anchors.fill: parent
-
-                FileDetailsPage {
-                    id: fileDetails
-
-                    Layout.fillWidth: true
-                    Layout.fillHeight: true
-
-                    background: null
-                    accountState: fileDetailsDrawer.folderAccountState
-                    localPath: fileDetailsDrawer.fileLocalPath
-                }
+            sourceComponent:FileDetailsPage {
+                id: fileDetails
 
-                CustomButton {
-                    FontMetrics {
-                        id: doneButtonFm
-                        font: parent.contentsFont
-                    }
+                anchors.fill: parent
 
-                    Layout.alignment: Qt.AlignRight | Qt.AlignVCenter
-                    Layout.topMargin: fileDetails.intendedPadding
-                    Layout.bottomMargin: fileDetails.intendedPadding
-                    Layout.leftMargin: fileDetails.intendedPadding
-                    Layout.rightMargin: fileDetails.intendedPadding
-                    Layout.preferredWidth: doneButtonFm.boundingRect(text).width +
-                                           leftPadding +
-                                           rightPadding +
-                                           Style.standardSpacing * 2
-
-                    text: qsTr("Done")
-                    contentsFont.bold: true
-                    bgColor: Style.currentUserHeaderColor
-                    textColor: Style.adjustedCurrentUserHeaderColor
-                    textColorHovered: Style.currentUserHeaderTextColor
-                    onClicked: fileDetailsDrawer.close()
+                background: null
+                accountState: fileDetailsDrawer.folderAccountState
+                localPath: fileDetailsDrawer.fileLocalPath
+                showCloseButton: true
 
-                    Accessible.role: Accessible.Button
-                    Accessible.name: qsTr("Close the file details view")
-                    Accessible.onPressAction: clicked()
-                }
+                onCloseButtonClicked: fileDetailsDrawer.close()
             }
         }
     }