diff --git a/client/components/cards/cardDetails.jade b/client/components/cards/cardDetails.jade index cf049625c..c8e3515e5 100644 --- a/client/components/cards/cardDetails.jade +++ b/client/components/cards/cardDetails.jade @@ -576,6 +576,8 @@ template(name="cardDetails") +activities(card=this mode="card") template(name="editCardTitleForm") + a.fa.fa-copy(title="{{_ 'copy-text-to-clipboard'}}") + span.copied-tooltip {{_ 'copied'}} textarea.js-edit-card-title(rows='1' autofocus dir="auto") = getTitle .edit-controls.clearfix diff --git a/client/components/cards/cardDetails.js b/client/components/cards/cardDetails.js index 3c3d7df33..b596b2e0e 100644 --- a/client/components/cards/cardDetails.js +++ b/client/components/cards/cardDetails.js @@ -689,9 +689,31 @@ Template.cardDetailsActionsPopup.events({ }, }); -Template.editCardTitleForm.onRendered(function () { - autosize(this.$('.js-edit-card-title')); -}); +BlazeComponent.extendComponent({ + onRendered() { + autosize(this.$('textarea.js-edit-card-title')); + }, + events() { + return [ + { + 'click a.fa.fa-copy'(event) { + const $editor = this.$('textarea'); + const promise = Utils.copyTextToClipboard($editor[0].value); + + const $tooltip = this.$('.copied-tooltip'); + Utils.showCopied(promise, $tooltip); + }, + 'keydown .js-edit-card-title'(event) { + // If enter key was pressed, submit the data + // Unless the shift key is also being pressed + if (event.keyCode === 13 && !event.shiftKey) { + $('.js-submit-edit-card-title-form').click(); + } + }, + } + ]; + } +}).register('editCardTitleForm'); Template.cardMembersPopup.onCreated(function () { let currBoard = Boards.findOne(Session.get('currentBoard')); @@ -751,16 +773,6 @@ const filterMembers = (filterTerm) => { return members; } -Template.editCardTitleForm.events({ - 'keydown .js-edit-card-title'(event) { - // If enter key was pressed, submit the data - // Unless the shift key is also being pressed - if (event.keyCode === 13 && !event.shiftKey) { - $('.js-submit-edit-card-title-form').click(); - } - }, -}); - Template.editCardRequesterForm.onRendered(function () { autosize(this.$('.js-edit-card-requester')); }); diff --git a/client/components/cards/cardDetails.styl b/client/components/cards/cardDetails.styl index ac007b169..9301362a9 100644 --- a/client/components/cards/cardDetails.styl +++ b/client/components/cards/cardDetails.styl @@ -181,6 +181,9 @@ avatar-radius = 50% margin-top: 5px margin-bottom: 10px + .copied-tooltip + padding: 0px 10px + .card-details-list font-size: 0.85em margin-bottom: 3px @@ -195,12 +198,8 @@ avatar-radius = 50% 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