diff --git a/src/gui/filedetails/FileDetailsPage.qml b/src/gui/filedetails/FileDetailsPage.qml index aa3f4f488c6f9..e215e013dd26c 100644 --- 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,7 +103,7 @@ Page { id: fileNameLabel Layout.fillWidth: true - Layout.rightMargin: root.intendedPadding + Layout.rightMargin: headerGridLayout.textRightMargin text: root.fileDetails.name color: Style.ncTextColor @@ -107,11 +111,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 @@ -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 index 331cb69c91e0e..a084efa74ffb6 100644 --- 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() } } }