From 741073c187a8188ae11f63e66066effeea7d24b2 Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Thu, 19 Aug 2021 16:49:45 +0200
Subject: [PATCH] Add emoji bar and comment input to article view

---
 .../frontend/rooms/article-page.spec.js       |  6 +--
 client/src/components/rooms/CommentInput.vue  | 40 +++++++++++++++++++
 client/src/pages/article.vue                  |  5 +++
 client/src/styles/_mixins.scss                | 21 ++++++++++
 4 files changed, 69 insertions(+), 3 deletions(-)
 create mode 100644 client/src/components/rooms/CommentInput.vue

diff --git a/client/cypress/integration/frontend/rooms/article-page.spec.js b/client/cypress/integration/frontend/rooms/article-page.spec.js
index f0d3398f..f9926d9b 100644
--- a/client/cypress/integration/frontend/rooms/article-page.spec.js
+++ b/client/cypress/integration/frontend/rooms/article-page.spec.js
@@ -15,10 +15,10 @@ describe('Article page', () => {
       operations
     });
 
-    const commentText = 'First!';
+    const commentText = 'First! 🖐️';
     cy.visit('/article/this-article-has-a-slug');
-    cy.getByDataCy('emoji-button').should('have.length', 9);
-    cy.getByDataCy('add-comment-input').type(commentText);
+    cy.getByDataCy('comment-textarea').type(commentText);
+    cy.getByDataCy('emoji-button').should('have.length', 9).first().click();
     cy.getByDataCy('submit-comment').should('contain', 'Kommentar teilen').click();
     cy.getByDataCy('comment').first().should('contain', commentText);
   });
diff --git a/client/src/components/rooms/CommentInput.vue b/client/src/components/rooms/CommentInput.vue
new file mode 100644
index 00000000..c1d557e7
--- /dev/null
+++ b/client/src/components/rooms/CommentInput.vue
@@ -0,0 +1,40 @@
+<template>
+  <div class="comment-input">
+    <emoji-bar/>
+    <textarea
+      v-auto-grow
+      :value="value"
+      data-cy="comment-textarea"
+      class="comment-input__textarea"
+      placeholder="Kommentar erfassen"
+      @input="$emit('input', $event.target.value)"/>
+  </div>
+</template>
+
+<script>
+  import EmojiBar from '@/components/ui/EmojiBar';
+
+  export default {
+    props: {
+      value: {
+        type: String,
+        default: '',
+      },
+    },
+    components: {
+      EmojiBar,
+    },
+  };
+</script>
+
+<style scoped lang="scss">
+  @import '~styles/helpers';
+
+  .comment-input {
+    @include form-with-border;
+
+    &__textarea {
+      @include borderless-textarea;
+    }
+  }
+</style>
diff --git a/client/src/pages/article.vue b/client/src/pages/article.vue
index 4b5b725a..8c320d15 100644
--- a/client/src/pages/article.vue
+++ b/client/src/pages/article.vue
@@ -14,6 +14,9 @@
         v-bind="component"
         v-for="component in roomEntry.contents"/>
     </div>
+    <div class="article__comments">
+      <comment-input />
+    </div>
   </div>
 </template>
 
@@ -27,9 +30,11 @@
   import UserMetaWidget from '@/components/UserMetaWidget';
 
   import ROOM_ENTRY_QUERY from '@/graphql/gql/queries/roomEntryQuery.gql';
+  import CommentInput from '@/components/rooms/CommentInput';
 
   export default {
     components: {
+      CommentInput,
       'text_block': TextBlock,
       'image_block': ImageBlock,
       'image_url_block': ImageUrlBlock,
diff --git a/client/src/styles/_mixins.scss b/client/src/styles/_mixins.scss
index 6cb79683..6fec7552 100644
--- a/client/src/styles/_mixins.scss
+++ b/client/src/styles/_mixins.scss
@@ -281,3 +281,24 @@
     border-bottom: 1px solid $color;
   }
 }
+
+
+@mixin form-with-border {
+  @include input-box-shadow;
+  background-color: $color-white;
+  border-radius: $input-border-radius;
+  border: 1px solid $color-silver;
+  padding: $medium-spacing;
+}
+
+@mixin borderless-textarea {
+  display: flex;
+  width: 95%;
+  padding: 0;
+  box-sizing: border-box;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  line-height: 1.5;
+  border: 0;
+  min-height: 110px;
+}