From 4e2d337620ac490b8e99ee968e6f92477e09b900 Mon Sep 17 00:00:00 2001 From: Lauri Ojansivu Date: Mon, 2 Nov 2020 21:58:13 +0200 Subject: [PATCH] When RICHER_CARD_COMMENT_EDITOR=true, use richer editor also when editing card description. Thanks to xet7 ! --- client/components/cards/cardDescription.jade | 7 +++ client/components/cards/cardDescription.js | 33 +++++++++++ client/components/cards/cardDescription.styl | 60 ++++++++++++++++++++ client/components/cards/cardDetails.jade | 9 ++- client/components/main/editor.jade | 1 - client/components/main/editor.js | 1 + 6 files changed, 105 insertions(+), 6 deletions(-) create mode 100644 client/components/cards/cardDescription.jade create mode 100644 client/components/cards/cardDescription.js create mode 100644 client/components/cards/cardDescription.styl diff --git a/client/components/cards/cardDescription.jade b/client/components/cards/cardDescription.jade new file mode 100644 index 000000000..f42843eff --- /dev/null +++ b/client/components/cards/cardDescription.jade @@ -0,0 +1,7 @@ + +template(name="descriptionForm") + .new-description.js-new-description( + class="{{#if descriptionFormIsOpen}}is-open{{/if}}") + form.js-new-description-form + +editor(class="js-new-description-input" data-meteor-emoji-large="true") + | {{getUnsavedValue 'cardDescription' _id getDescription}} diff --git a/client/components/cards/cardDescription.js b/client/components/cards/cardDescription.js new file mode 100644 index 000000000..8e2bc77a8 --- /dev/null +++ b/client/components/cards/cardDescription.js @@ -0,0 +1,33 @@ +const descriptionFormIsOpen = new ReactiveVar(false); + +BlazeComponent.extendComponent({ + onDestroyed() { + descriptionFormIsOpen.set(false); + }, + + descriptionFormIsOpen() { + return descriptionFormIsOpen.get(); + }, + + getInput() { + return this.$('.js-new-description-input'); + }, + + events() { + return [ + { + 'submit .js-card-description'(event) { + event.preventDefault(); + const description = this.currentComponent().getValue(); + this.data().setDescription(description); + }, + // Pressing Ctrl+Enter should submit the form + 'keydown form textarea'(evt) { + if (evt.keyCode === 13 && (evt.metaKey || evt.ctrlKey)) { + this.find('button[type=submit]').click(); + } + }, + }, + ]; + }, +}).register('descriptionForm'); diff --git a/client/components/cards/cardDescription.styl b/client/components/cards/cardDescription.styl new file mode 100644 index 000000000..5af497c77 --- /dev/null +++ b/client/components/cards/cardDescription.styl @@ -0,0 +1,60 @@ +@import 'nib' + +.new-description + position: relative + margin: 0 0 20px 0 + + + &.is-open + .helper + display: inline-block + + textarea + min-height: 100px + color: #4d4d4d + cursor: auto + overflow: hidden + word-wrap: break-word + + .too-long + margin-top: 8px + + textarea + background-color: #fff + border: 0 + box-shadow: 0 1px 2px rgba(0, 0, 0, .23) + color: #8c8c8c + height: 36px + margin: 4px 4px 6px 0 + padding: 9px 11px + width: 100% + + &:hover, + &:is-open + background-color: #fff + box-shadow: 0 1px 3px rgba(0, 0, 0, .33) + border: 0 + cursor: pointer + + &:is-open + cursor: auto + +.description-item + background-color: #fff + border: 0 + box-shadow: 0 1px 2px rgba(0, 0, 0, .23) + color: #8c8c8c + height: 36px + margin: 4px 4px 6px 0 + width: 92% + + &:hover + background: darken(white, 12%) + + &.add-description + display: flex + margin: 5px + + a + display: block + margin: auto diff --git a/client/components/cards/cardDetails.jade b/client/components/cards/cardDetails.jade index 95d38965f..1f0cfc834 100644 --- a/client/components/cards/cardDetails.jade +++ b/client/components/cards/cardDetails.jade @@ -42,12 +42,12 @@ template(name="cardDetails") else p.warning {{_ 'card-archived'}} - .card-details-items + .card-details-items if currentBoard.allowsLabels .card-details-item.card-details-item-labels h3.card-details-item-title i.fa.fa-tags - | {{_ 'labels'}} + | {{_ 'labels'}} a(class="{{#if canModifyCard}}js-add-labels{{else}}is-disabled{{/if}}" title="{{_ 'card-labels-title'}}") each labels span.card-label(class="card-label-{{color}}" title=name) @@ -57,7 +57,7 @@ template(name="cardDetails") unless currentUser.isWorker a.card-label.add-label.js-add-labels(title="{{_ 'card-labels-title'}}") i.fa.fa-plus - + if currentBoard.allowsReceivedDate hr .card-details-item.card-details-item-received @@ -245,8 +245,7 @@ template(name="cardDetails") | {{_ 'description'}} if currentBoard.allowsDescriptionText +inlinedCardDescription(classNames="card-description js-card-description") - +editor(autofocus=true) - | {{getUnsavedValue 'cardDescription' _id getDescription}} + +descriptionForm .edit-controls.clearfix button.primary(type="submit") {{_ 'save'}} a.fa.fa-times-thin.js-close-inlined-form diff --git a/client/components/main/editor.jade b/client/components/main/editor.jade index dbd617154..98f85fa5c 100644 --- a/client/components/main/editor.jade +++ b/client/components/main/editor.jade @@ -3,7 +3,6 @@ template(name="editor") dir="auto" class="{{class}}" id=id - autofocus=autofocus placeholder="{{_ 'comment-placeholder'}}") +Template.contentBlock diff --git a/client/components/main/editor.js b/client/components/main/editor.js index 0c2e3186e..ed1304bb3 100755 --- a/client/components/main/editor.js +++ b/client/components/main/editor.js @@ -91,6 +91,7 @@ Template.editor.onRendered(() => { }; const editor = '.editor'; const selectors = [ + `.js-new-description-form ${editor}`, `.js-new-comment-form ${editor}`, `.js-edit-comment ${editor}`, ].join(','); // only new comment and edit comment