diff --git a/client/components/cards/cardDetails.jade b/client/components/cards/cardDetails.jade index 659f70918..cf049625c 100644 --- a/client/components/cards/cardDetails.jade +++ b/client/components/cards/cardDetails.jade @@ -22,6 +22,7 @@ template(name="cardDetails") title="{{_ 'copy-card-link-to-clipboard'}}" href="{{ originRelativeUrl }}" ) + span.copied-tooltip {{_ 'copied'}} else unless isPopup a.fa.fa-times-thin.close-card-details.js-close-card-details(title="{{_ 'close-card'}}") @@ -33,6 +34,7 @@ template(name="cardDetails") title="{{_ 'copy-card-link-to-clipboard'}}" href="{{ originRelativeUrl }}" ) + span.copied-tooltip {{_ 'copied'}} h2.card-details-title.js-card-title( class="{{#if canModifyCard}}js-open-inlined-form is-editable{{/if}}") +viewer @@ -798,6 +800,7 @@ template(name="cardMorePopup") i.fa.colorful(class="{{#if board.isPublic}}fa-globe{{else}}fa-lock{{/if}}") input.inline-input(type="text" id="cardURL" readonly value="{{ originRelativeUrl }}" autofocus="autofocus") button.js-copy-card-link-to-clipboard(class="btn" id="clipboard") {{_ 'copy-card-link-to-clipboard'}} + .copied-tooltip {{_ 'copied'}} span.clearfix br h2 {{_ 'change-card-parent'}} diff --git a/client/components/cards/cardDetails.js b/client/components/cards/cardDetails.js index b967ca087..b5885d890 100644 --- a/client/components/cards/cardDetails.js +++ b/client/components/cards/cardDetails.js @@ -325,7 +325,14 @@ BlazeComponent.extendComponent({ }, 'click .js-copy-link'(event) { event.preventDefault(); - Utils.copyTextToClipboard(event.target.href); + const promise = Utils.copyTextToClipboard(event.target.href); + if (promise) { + promise.then(() => { + const $tooltip = this.$('span.copied-tooltip'); + $tooltip.css('display', 'inline'); + setTimeout(() => $tooltip.css('display', 'none'), 1000); + }); + } }, 'click .js-open-card-details-menu': Popup.open('cardDetailsActions'), 'submit .js-card-description'(event) { @@ -1068,7 +1075,14 @@ BlazeComponent.extendComponent({ return [ { 'click .js-copy-card-link-to-clipboard'(event) { - Utils.copyTextToClipboard(location.origin + document.getElementById('cardURL').value); + const promise = Utils.copyTextToClipboard(location.origin + document.getElementById('cardURL').value); + if (promise) { + promise.then(() => { + const $tooltip = this.$('.copied-tooltip'); + $tooltip.css('display', 'inline'); + setTimeout(() => $tooltip.css('display', 'none'), 1000); + }); + } }, 'click .js-delete': Popup.afterConfirm('cardDelete', function () { Popup.close(); diff --git a/client/components/cards/cardDetails.styl b/client/components/cards/cardDetails.styl index 202600e2e..feaad903e 100644 --- a/client/components/cards/cardDetails.styl +++ b/client/components/cards/cardDetails.styl @@ -118,7 +118,8 @@ avatar-radius = 50% .card-copy-button, .card-copy-mobile-button, .close-card-details-mobile-web, - .card-details-menu-mobile-web + .card-details-menu-mobile-web, + .copied-tooltip float: right .close-card-details, @@ -187,6 +188,14 @@ avatar-radius = 50% border-radius: 3px padding: 0px 5px + .copied-tooltip + display: none + margin-right: 10px + padding: 10px; + background-color: #000000df; + color: #fff; + border-radius: 5px; + .card-description textarea min-height: 100px @@ -233,6 +242,13 @@ avatar-radius = 50% .activities padding-top: 10px +.pop-over + .copied-tooltip + display: none + padding: 0px 10px; + background-color: #000000df; + color: #fff; + border-radius: 5px; @media screen and (min-width: 801px) .card-details-maximized padding: 0 diff --git a/client/lib/utils.js b/client/lib/utils.js index ebc76f22f..4bf1ccc20 100644 --- a/client/lib/utils.js +++ b/client/lib/utils.js @@ -481,6 +481,9 @@ Utils = { try { document.execCommand('copy'); + return Promise.resolve(true); + } catch (e) { + return Promise.reject(false); } finally { document.body.removeChild(textArea); } @@ -489,16 +492,19 @@ Utils = { /** copy the text to the clipboard * @see https://stackoverflow.com/questions/400212/how-do-i-copy-to-the-clipboard-in-javascript/30810322#30810322 * @param string copy this text to the clipboard + * @return Promise */ copyTextToClipboard(text) { + let ret; if (navigator.clipboard) { - navigator.clipboard.writeText(text).then(function() { + ret = navigator.clipboard.writeText(text).then(function() { }, function(err) { console.error('Async: Could not copy text: ', err); }); } else { - fallbackCopyTextToClipboard(text); + ret = Utils.fallbackCopyTextToClipboard(text); } + return ret; }, }; diff --git a/i18n/en.i18n.json b/i18n/en.i18n.json index 8e6170397..24a6a1b1f 100644 --- a/i18n/en.i18n.json +++ b/i18n/en.i18n.json @@ -1122,5 +1122,6 @@ "to-create-organizations-contact-admin": "To create organizations, please contact administrator.", "custom-legal-notice-link-url": "Custom legal notice page URL", "acceptance_of_our_legalNotice": "By continuing, you accept our", - "legalNotice": "legal notice" + "legalNotice": "legal notice", + "copied": "copied!" }