Merge pull request #1129 from Retrospring/feature/multiline-comments

Allow multi-line comments

app/assets/stylesheets/components/_comments.scss

@@ -24,18 +24,20 @@
   }
 
   &__input {
-    padding-right: 2.5rem;
-
     &.is-invalid {
       background-image: none;
     }
   }
 
-  &__character-count {
-    position: absolute;
-    z-index: 5;
-    right: .5rem;
-    top: .5rem;
+  &__compose-wrapper {
+    display: flex;
+  }
+
+  &__submit-wrapper {
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+    margin-left: 0.5rem;
   }
 }
 

app/javascript/retrospring/features/answerbox/comment/index.ts

@@ -1,6 +1,6 @@
 import registerEvents from "retrospring/utilities/registerEvents";
 import { commentDestroyHandler } from "./destroy";
-import {commentComposeEnd, commentComposeStart, commentCreateHandler} from "./new";
+import { commentComposeEnd, commentComposeStart, commentCreateClickHandler, commentCreateKeyboardHandler } from "./new";
 import { commentReportHandler } from "./report";
 import { commentSmileHandler } from "./smile";
 import { commentToggleHandler } from "./toggle";
@@ -13,6 +13,7 @@ export default (): void => {
     { type: 'click', target: '[data-action=ab-comment-destroy]', handler: commentDestroyHandler, global: true },
     { type: 'compositionstart', target: '[name=ab-comment-new]', handler: commentComposeStart, global: true },
     { type: 'compositionend', target: '[name=ab-comment-new]', handler: commentComposeEnd, global: true },
-    { type: 'keyup', target: '[name=ab-comment-new]', handler: commentCreateHandler, global: true }
+    { type: 'keydown', target: '[name=ab-comment-new]', handler: commentCreateKeyboardHandler, global: true },
+    { type: 'click', target: '[name=ab-comment-new-submit]', handler: commentCreateClickHandler, global: true }
   ]);
 }

app/javascript/retrospring/features/answerbox/comment/new.ts

@@ -5,7 +5,50 @@ import { showNotification, showErrorNotification } from 'utilities/notifications
 
 let compositionJustEnded = false;
 
-export function commentCreateHandler(event: KeyboardEvent): boolean {
+function createComment(input: HTMLInputElement, id: string, counter: Element, group: Element) {
+  if (input.value.length > 512) {
+    group.classList.add('has-error');
+    return true;
+  }
+
+  input.disabled = true;
+
+  post('/ajax/create_comment', {
+    body: {
+      answer: id,
+      comment: input.value
+    },
+    contentType: 'application/json'
+  })
+    .then(async response => {
+      const data = await response.json;
+
+      if (data.success) {
+        document.querySelector(`#ab-comments-${id}`).innerHTML = data.render;
+        const commentCount = document.getElementById(`#ab-comment-count-${id}`);
+        if (commentCount) {
+          commentCount.innerHTML = data.count;
+        }
+        input.value = '';
+        counter.innerHTML = String(512);
+
+        const sub = document.querySelector<HTMLElement>(`[data-action=ab-submarine][data-a-id="${id}"]`);
+        sub.dataset.torpedo = "no"
+        sub.children[0].nextSibling.textContent = ' ' + I18n.translate('voc.unsubscribe');
+      }
+
+      showNotification(data.message, data.success);
+    })
+    .catch(err => {
+      console.log(err);
+      showErrorNotification(I18n.translate('frontend.error.message'));
+    })
+    .finally(() => {
+      input.disabled = false;
+    });
+}
+
+export function commentCreateKeyboardHandler(event: KeyboardEvent): boolean {
   if (compositionJustEnded && event.which == 13) {
     compositionJustEnded = false;
     return;
@@ -16,52 +59,25 @@ export function commentCreateHandler(event: KeyboardEvent): boolean {
   const counter = document.querySelector(`#ab-comment-charcount-${id}`);
   const group = document.querySelector(`[name=ab-comment-new-group][data-a-id="${id}"]`);
 
-  if (event.which === 13) {
+  if ((event.ctrlKey || event.metaKey) && event.which === 13) {
     event.preventDefault();
 
-    if (input.value.length > 512) {
-      group.classList.add('has-error');
-      return true;
-    }
-
-    input.disabled = true;
-
-    post('/ajax/create_comment', {
-      body: {
-        answer: id,
-        comment: input.value
-      },
-      contentType: 'application/json'
-    })
-      .then(async response => {
-        const data = await response.json;
-
-        if (data.success) {
-          document.querySelector(`#ab-comments-${id}`).innerHTML = data.render;
-          const commentCount = document.getElementById(`#ab-comment-count-${id}`);
-          if (commentCount) {
-            commentCount.innerHTML = data.count;
-          }
-          input.value = '';
-          counter.innerHTML = String(512);
-
-          const sub = document.querySelector<HTMLElement>(`[data-action=ab-submarine][data-a-id="${id}"]`);
-          sub.dataset.torpedo = "no"
-          sub.children[0].nextSibling.textContent = ' ' + I18n.translate('voc.unsubscribe');
-        }
-
-        showNotification(data.message, data.success);
-      })
-      .catch(err => {
-        console.log(err);
-        showErrorNotification(I18n.translate('frontend.error.message'));
-      })
-      .finally(() => {
-        input.disabled = false;
-      });
+    createComment(input, id, counter, group);
   }
 }
 
+export function commentCreateClickHandler(event: MouseEvent): void {
+  event.preventDefault();
+
+  const button = event.target as HTMLButtonElement;
+  const id = button.dataset.aId;
+  const input = document.querySelector<HTMLInputElement>(`[name="ab-comment-new"][data-a-id="${id}"]`);
+  const counter = document.querySelector(`#ab-comment-charcount-${id}`);
+  const group = document.querySelector(`[name=ab-comment-new-group][data-a-id="${id}"]`);
+
+  createComment(input, id, counter, group);
+}
+
 export function commentComposeStart(): boolean {
   compositionJustEnded = false;
   return true;

app/views/answerbox/_comments.html.haml

@@ -25,10 +25,18 @@
                 %span.caret
               = render "actions/comment", comment: comment, answer: a
 - if user_signed_in?
-  .form-group.has-feedback.comment__input-group.input-group{
+  .comment__compose-wrapper{
     name: "ab-comment-new-group",
     data: { a_id: a.id, controller: "character-count", character_count_max_value: 512 }
   }
-    %input.form-control.comment__input{ type: :text, placeholder: t(".placeholder"), name: "ab-comment-new", data: { a_id: a.id, "character-count-target": "input" } }
-    %span.text-muted.form-control-feedback.comment__character-count{ id: "ab-comment-charcount-#{a.id}", data: { "character-count-target": "counter" } } 512
-    %button.btn.btn-primary.d-none{ type: :button, name: "ab-comment-new-submit", data: { a_id: a.id, "character-count-target": "action" } }= t(".action")
+    .form-group.has-feedback.comment__input-group.input-group
+      %textarea.form-control.comment__input{ type: :text, placeholder: t(".placeholder"), name: "ab-comment-new", data: { a_id: a.id, "character-count-target": "input" } }
+    .comment__submit-wrapper
+      %button.btn.btn-primary{
+        type: :button,
+        name: "ab-comment-new-submit",
+        title: t(".action"),
+        data: { a_id: a.id, "character-count-target": "action" }
+      }
+        %i.fa.fa-paper-plane-o
+      %span.text-muted.form-control-feedback.comment__character-count{ id: "ab-comment-charcount-#{a.id}", data: { "character-count-target": "counter" } } 512

config/locales/views.en.yml

@@ -120,6 +120,7 @@ en:
     comments:
       none: "There are no comments yet."
       placeholder: "Comment..."
+      action: "Post comment"
     smiles:
       none: "No one smiled this yet."
   application: