diff --git a/src/gui/filedetails/ShareDelegate.qml b/src/gui/filedetails/ShareDelegate.qml index e48deaf4d6..5efa922653 100644 --- a/src/gui/filedetails/ShareDelegate.qml +++ b/src/gui/filedetails/ShareDelegate.qml @@ -175,30 +175,62 @@ 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() + + Behavior on bgColor { + ColorAnimation { duration: Style.shortAnimationDuration } } - TextEdit { id: clipboardHelper; visible: false} + Behavior on bgNormalOpacity { + NumberAnimation { duration: Style.shortAnimationDuration } + } + + Behavior on Layout.preferredWidth { + SmoothedAnimation { duration: Style.shortAnimationDuration } + } + + TextEdit { + id: clipboardHelper + visible: false + } + + Timer { + id: shareLinkCopyTimer + interval: Style.veryLongAnimationDuration + onTriggered: copyLinkButton.shareLinkCopied = false + } } CustomButton { diff --git a/src/gui/filedetails/ShareDetailsPage.qml b/src/gui/filedetails/ShareDetailsPage.qml index a4bcc7cafd..17bd184bcc 100644 --- a/src/gui/filedetails/ShareDetailsPage.qml +++ b/src/gui/filedetails/ShareDetailsPage.qml @@ -853,27 +853,51 @@ 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; + shareLinkCopyTimer.start(); } - 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() + + Behavior on bgColor { + ColorAnimation { duration: Style.shortAnimationDuration } + } + + Behavior on bgHoverOpacity { + NumberAnimation { duration: Style.shortAnimationDuration } + } + + TextEdit { + id: clipboardHelper + visible: false + } + + Timer { + id: shareLinkCopyTimer + interval: Style.veryLongAnimationDuration + onTriggered: copyShareLinkButton.shareLinkCopied = false + } } } } diff --git a/theme/Style/Style.qml b/theme/Style/Style.qml index 7d2370b99a..21bfeb460e 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 @@ -146,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)); }