Show a "copied!" tooltip after successfull URL copy

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'}}

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();

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

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;
   },
 };
 

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!"
 }