From eab342fadf950596c7c110ab54146452c3f88c54 Mon Sep 17 00:00:00 2001 From: Claudio Cambra Date: Wed, 10 May 2023 11:22:37 +0800 Subject: [PATCH 1/7] Add positive colour to Style.qml Signed-off-by: Claudio Cambra --- theme/Style/Style.qml | 1 + 1 file changed, 1 insertion(+) diff --git a/theme/Style/Style.qml b/theme/Style/Style.qml index 7d2370b99a..ba90ed2fcd 100644 --- a/theme/Style/Style.qml +++ b/theme/Style/Style.qml @@ -17,6 +17,7 @@ QtObject { readonly property color menuBorder: Theme.darkMode ? Qt.lighter(backgroundColor, 2.5) : Qt.darker(backgroundColor, 1.5) readonly property color backgroundColor: Theme.systemPalette.base readonly property color buttonBackgroundColor: Theme.systemPalette.button + readonly property color positiveColor: Qt.rgba(0.38, 0.74, 0.38, 1) readonly property color currentUserHeaderColor: UserModel.currentUser ? UserModel.currentUser.headerColor : ncBlue readonly property color currentUserHeaderTextColor: UserModel.currentUser ? UserModel.currentUser.headerTextColor : ncHeaderTextColor From c345b22bf271370a8ef70d146473052a6c627fd1 Mon Sep 17 00:00:00 2001 From: Claudio Cambra Date: Wed, 10 May 2023 11:24:55 +0800 Subject: [PATCH 2/7] Upon copying share link, trigger a change in the button to make copy action completed obvious Signed-off-by: Claudio Cambra --- src/gui/filedetails/ShareDetailsPage.qml | 39 +++++++++++++++--------- 1 file changed, 24 insertions(+), 15 deletions(-) diff --git a/src/gui/filedetails/ShareDetailsPage.qml b/src/gui/filedetails/ShareDetailsPage.qml index a4bcc7cafd..17a5a75963 100644 --- a/src/gui/filedetails/ShareDetailsPage.qml +++ b/src/gui/filedetails/ShareDetailsPage.qml @@ -853,27 +853,36 @@ Page { CustomButton { id: copyShareLinkButton - height: Style.standardPrimaryButtonHeight - - imageSource: "image://svgimage-custom-color/copy.svg/" + Style.ncHeaderTextColor - text: qsTr("Copy share link") - textColor: Style.ncHeaderTextColor - contentsFont.bold: true - bgColor: Style.ncBlue - bgNormalOpacity: 1.0 - bgHoverOpacity: Style.hoverOpacity - - visible: root.isLinkShare - enabled: visible - - onClicked: { + function copyShareLink() { clipboardHelper.text = root.link; clipboardHelper.selectAll(); clipboardHelper.copy(); clipboardHelper.clear(); + + shareLinkCopied = true; } - TextEdit { id: clipboardHelper; visible: false } + property bool shareLinkCopied: false + + height: Style.standardPrimaryButtonHeight + + imageSource: "image://svgimage-custom-color/copy.svg/" + Style.ncHeaderTextColor + text: shareLinkCopied ? qsTr("Share link copied!") : qsTr("Copy share link") + textColor: Style.ncHeaderTextColor + contentsFont.bold: true + bgColor: shareLinkCopied ? Style.positiveColor : Style.ncBlue + bgNormalOpacity: 1.0 + bgHoverOpacity: shareLinkCopied ? 1.0 : Style.hoverOpacity + + visible: root.isLinkShare + enabled: visible + + onClicked: copyShareLink() + + TextEdit { + id: clipboardHelper + visible: false + } } } } From 7db143469a75b10c7e9cc48fd65cee2a2fad0fe2 Mon Sep 17 00:00:00 2001 From: Claudio Cambra Date: Wed, 10 May 2023 11:25:18 +0800 Subject: [PATCH 3/7] Reset state of copy share link button after 3 seconds Signed-off-by: Claudio Cambra --- src/gui/filedetails/ShareDetailsPage.qml | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/gui/filedetails/ShareDetailsPage.qml b/src/gui/filedetails/ShareDetailsPage.qml index 17a5a75963..5a56eb58c4 100644 --- a/src/gui/filedetails/ShareDetailsPage.qml +++ b/src/gui/filedetails/ShareDetailsPage.qml @@ -860,6 +860,7 @@ Page { clipboardHelper.clear(); shareLinkCopied = true; + shareLinkCopyTimer.start(); } property bool shareLinkCopied: false @@ -883,6 +884,12 @@ Page { id: clipboardHelper visible: false } + + Timer { + id: shareLinkCopyTimer + interval: 3000 + onTriggered: copyShareLinkButton.shareLinkCopied = false + } } } } From 4e12bbf3e4973731ef04b055e2257389fce961e7 Mon Sep 17 00:00:00 2001 From: Claudio Cambra Date: Wed, 10 May 2023 11:25:32 +0800 Subject: [PATCH 4/7] Smoothly animate change of state for copy share link button Signed-off-by: Claudio Cambra --- src/gui/filedetails/ShareDetailsPage.qml | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/gui/filedetails/ShareDetailsPage.qml b/src/gui/filedetails/ShareDetailsPage.qml index 5a56eb58c4..6f6ba36b92 100644 --- a/src/gui/filedetails/ShareDetailsPage.qml +++ b/src/gui/filedetails/ShareDetailsPage.qml @@ -880,6 +880,14 @@ Page { onClicked: copyShareLink() + Behavior on bgColor { + ColorAnimation { duration: 200 } + } + + Behavior on bgHoverOpacity { + NumberAnimation { duration: 200 } + } + TextEdit { id: clipboardHelper visible: false From 191d8350c11ea1a2b8adaa296b3b9ddb2a01b4ce Mon Sep 17 00:00:00 2001 From: Claudio Cambra Date: Wed, 10 May 2023 12:38:27 +0800 Subject: [PATCH 5/7] Replace use of magic numbers for animation durations in copy share link button with constants defined in Style.qml Signed-off-by: Claudio Cambra --- src/gui/filedetails/ShareDetailsPage.qml | 6 +++--- theme/Style/Style.qml | 4 ++++ 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/gui/filedetails/ShareDetailsPage.qml b/src/gui/filedetails/ShareDetailsPage.qml index 6f6ba36b92..17bd184bcc 100644 --- a/src/gui/filedetails/ShareDetailsPage.qml +++ b/src/gui/filedetails/ShareDetailsPage.qml @@ -881,11 +881,11 @@ Page { onClicked: copyShareLink() Behavior on bgColor { - ColorAnimation { duration: 200 } + ColorAnimation { duration: Style.shortAnimationDuration } } Behavior on bgHoverOpacity { - NumberAnimation { duration: 200 } + NumberAnimation { duration: Style.shortAnimationDuration } } TextEdit { @@ -895,7 +895,7 @@ Page { Timer { id: shareLinkCopyTimer - interval: 3000 + interval: Style.veryLongAnimationDuration onTriggered: copyShareLinkButton.shareLinkCopied = false } } diff --git a/theme/Style/Style.qml b/theme/Style/Style.qml index ba90ed2fcd..21bfeb460e 100644 --- a/theme/Style/Style.qml +++ b/theme/Style/Style.qml @@ -147,6 +147,10 @@ QtObject { readonly property int trayWindowMenuEntriesMargin: 6 + // animation durations + readonly property int shortAnimationDuration: 200 + readonly property int veryLongAnimationDuration: 3000 + function variableSize(size) { return size * (1 + Math.min(pixelSize / 100, 1)); } From 0419e293951fa894ac39b6444201fbeea6155983 Mon Sep 17 00:00:00 2001 From: Claudio Cambra Date: Thu, 11 May 2023 14:10:30 +0800 Subject: [PATCH 6/7] Also customise appearance of copy button in sharedelegate when clicked Signed-off-by: Claudio Cambra --- src/gui/filedetails/ShareDelegate.qml | 42 ++++++++++++++++++++------- 1 file changed, 31 insertions(+), 11 deletions(-) diff --git a/src/gui/filedetails/ShareDelegate.qml b/src/gui/filedetails/ShareDelegate.qml index e48deaf4d6..9c7d5a7305 100644 --- a/src/gui/filedetails/ShareDelegate.qml +++ b/src/gui/filedetails/ShareDelegate.qml @@ -175,30 +175,50 @@ GridLayout { CustomButton { id: copyLinkButton + function copyShareLink() { + clipboardHelper.text = root.link; + clipboardHelper.selectAll(); + clipboardHelper.copy(); + clipboardHelper.clear(); + + shareLinkCopied = true; + shareLinkCopyTimer.start(); + } + + property bool shareLinkCopied: false + Layout.alignment: Qt.AlignCenter - Layout.preferredWidth: Style.iconButtonWidth - Layout.preferredHeight: width + Layout.preferredWidth: shareLinkCopied ? implicitWidth : Style.iconButtonWidth + Layout.preferredHeight: Style.iconButtonWidth toolTipText: qsTr("Copy share link location") - bgColor: Style.lightHover - bgNormalOpacity: 0 + text: shareLinkCopied ? qsTr("Copied!") : "" + textColor: Style.ncHeaderTextColor + contentsFont.bold: true + bgColor: shareLinkCopied ? Style.positiveColor : Style.lightHover + bgNormalOpacity: shareLinkCopied ? 1 : 0 - imageSource: "image://svgimage-custom-color/copy.svg/" + Style.ncTextColor + imageSource: shareLinkCopied ? "image://svgimage-custom-color/copy.svg/" + Style.ncHeaderTextColor : + "image://svgimage-custom-color/copy.svg/" + Style.ncTextColor icon.width: 16 icon.height: 16 visible: root.isLinkShare || root.isInternalLinkShare enabled: visible - onClicked: { - clipboardHelper.text = root.link; - clipboardHelper.selectAll(); - clipboardHelper.copy(); - clipboardHelper.clear(); + onClicked: copyShareLink() + + TextEdit { + id: clipboardHelper + visible: false } - TextEdit { id: clipboardHelper; visible: false} + Timer { + id: shareLinkCopyTimer + interval: Style.veryLongAnimationDuration + onTriggered: copyLinkButton.shareLinkCopied = false + } } CustomButton { From a9375c4d64f6ead7480cd4515b5cdbf8cc62842c Mon Sep 17 00:00:00 2001 From: Claudio Cambra Date: Thu, 11 May 2023 14:10:47 +0800 Subject: [PATCH 7/7] Animate copy share link button in share delegate Signed-off-by: Claudio Cambra --- src/gui/filedetails/ShareDelegate.qml | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/src/gui/filedetails/ShareDelegate.qml b/src/gui/filedetails/ShareDelegate.qml index 9c7d5a7305..5efa922653 100644 --- a/src/gui/filedetails/ShareDelegate.qml +++ b/src/gui/filedetails/ShareDelegate.qml @@ -209,6 +209,18 @@ GridLayout { onClicked: copyShareLink() + Behavior on bgColor { + ColorAnimation { duration: Style.shortAnimationDuration } + } + + Behavior on bgNormalOpacity { + NumberAnimation { duration: Style.shortAnimationDuration } + } + + Behavior on Layout.preferredWidth { + SmoothedAnimation { duration: Style.shortAnimationDuration } + } + TextEdit { id: clipboardHelper visible: false