From d85f49fb155b6be3364ff92e9fe1b0cadd896f93 Mon Sep 17 00:00:00 2001
From: senderfm <dev@sender.fm>
Date: Wed, 19 Jun 2019 17:45:52 +0200
Subject: [PATCH] Fix: long comments can be folded up and down

---
 webapp/components/Comment.vue       | 26 ++++++++++++++++++++++++--
 webapp/graphql/PostCommentsQuery.js |  1 +
 webapp/locales/de.json              |  4 ++++
 webapp/locales/en.json              |  5 +++++
 4 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/webapp/components/Comment.vue b/webapp/components/Comment.vue
index 67bdb92a8..d265b7b70 100644
--- a/webapp/components/Comment.vue
+++ b/webapp/components/Comment.vue
@@ -23,10 +23,27 @@
     <!-- eslint-disable vue/no-v-html -->
     <!-- TODO: replace editor content with tiptap render view -->
     <ds-space margin-bottom="small" />
-    <div style="padding-left: 40px;" v-html="comment.contentExcerpt" />
-    <!-- eslint-enable vue/no-v-html -->
+    <div v-if="!isActive" v-html="comment.contentExcerpt" style="padding-left: 40px;" />
+    <div v-show="comment.content.length !== comment.contentExcerpt.length">
+      <span
+        v-if="!isActive"
+        style="padding-left: 40px; color: #17b53f; cursor:pointer"
+        @click="isActive = !isActive"
+      >
+        {{ $t('comment.show.more') }}
+      </span>
+    </div>
+    <div v-if="isActive" v-html="comment.content" style="padding-left: 40px;" />
+    <span
+      v-if="isActive"
+      @click="isActive = !isActive"
+      style="padding-left: 40px; color: #17b53f; cursor:pointer"
+    >
+      {{ $t('comment.show.less') }}
+    </span>
   </div>
 </template>
+<!-- eslint-enable vue/no-v-html -->
 
 <script>
 import gql from 'graphql-tag'
@@ -35,6 +52,11 @@ import HcUser from '~/components/User'
 import ContentMenu from '~/components/ContentMenu'
 
 export default {
+  data: function() {
+    return {
+      isActive: false,
+    }
+  },
   components: {
     HcUser,
     ContentMenu,
diff --git a/webapp/graphql/PostCommentsQuery.js b/webapp/graphql/PostCommentsQuery.js
index c0ab1320a..e9bd0f7e4 100644
--- a/webapp/graphql/PostCommentsQuery.js
+++ b/webapp/graphql/PostCommentsQuery.js
@@ -8,6 +8,7 @@ export default app => {
         comments(orderBy: createdAt_asc) {
           id
           contentExcerpt
+          content
           createdAt
           disabled
           deleted
diff --git a/webapp/locales/de.json b/webapp/locales/de.json
index 2f40bf165..5110590ab 100644
--- a/webapp/locales/de.json
+++ b/webapp/locales/de.json
@@ -169,6 +169,10 @@
     "menu": {
       "edit": "Kommentar bearbeiten",
       "delete": "Kommentar löschen"
+    },
+    "show": {
+      "more": "mehr anzeigen",
+      "less": "weniger anzeigen"
     }
   },
   "quotes": {
diff --git a/webapp/locales/en.json b/webapp/locales/en.json
index 2d105bc3b..076b76da1 100644
--- a/webapp/locales/en.json
+++ b/webapp/locales/en.json
@@ -169,7 +169,12 @@
     "menu": {
       "edit": "Edit Comment",
       "delete": "Delete Comment"
+    },
+    "show": {
+      "more": "show more",
+      "less": "show less"
     }
+
   },
   "quotes": {
     "african": {