Read more/less for long channel text messages

src/assets/css/channel.scss

@@ -71,6 +71,22 @@
         color: black !important;
         display: flex;
         flex-direction: column;
+        .more-less-control__content {
+          transition: height 0.3s linear;
+          overflow: hidden;
+        }
+        .more-less-control.collapsed .more-less-control__content {
+          max-height: 4 * 24 * $chat-text-size; // Four lines - font size is 16 and line height 1.5
+        }
+        .more-less-control__read-more, .more-less-control__read-less {
+          font-family: "Inter", sans-serif;
+          font-size: 16 * $chat-text-size;
+          font-weight: 500;
+          line-height: 20.8 * $chat-text-size;
+          letter-spacing: 0.400 * $chat-text-size;
+          text-align: left;
+          color: #6360F0;
+        }
       }
     }
     .bubble {
@@ -128,7 +144,7 @@
     color: black;
   }
   .poll-answer {
-    
+
     &.selected {
       font-weight: 500;
     }

src/components/MoreLessControl.vue

@@ -0,0 +1,61 @@
+<template>
+  <div :class="{ 'more-less-control': true, 'collapsed': collapsed }">
+    <div ref="content" class="more-less-control__content">
+      <slot></slot>
+    </div>
+    <div class="more-less-control__read-more clickable" v-if="useExpansion && collapsed" @click="readMore">{{
+      $t('global.show_more') }}</div>
+    <div class="more-less-control__read-less clickable" v-else-if="useExpansion" @click="readLess">{{
+      $t('global.show_less') }}</div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "MoreLessControl",
+  props: {
+    event: {
+      type: Object,
+      default: function () {
+        return {};
+      },
+    },
+  },
+  mounted() {
+    if (this.event.isChannelMessage) {
+      const el = this.$refs.content;
+      if (el) {
+        this.useExpansion = el.scrollHeight > el.clientHeight;
+      }
+    }
+  },
+  data() {
+    return {
+      collapsed: (this.event.isChannelMessage ? true : false),
+      collapsedSize: 100,
+      useExpansion: false,
+    }
+  },
+  methods: {
+    readMore() {
+      const el = this.$refs.content;
+      this.collapsedSize = el.clientHeight;
+      this.collapsed = false;
+      el.style.height = el.clientHeight + "px";
+      el.style.maxHeight = "unset";
+      requestAnimationFrame(() => {
+        el.style.height = el.scrollHeight + "px";
+      });
+    },
+    readLess() {
+      const el = this.$refs.content;
+      el.style.height = this.collapsedSize + "px";
+      this.collapsed = true;
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+@import "@/assets/css/chat.scss";
+</style>

src/components/messages/MessageIncomingText.vue

@@ -14,10 +14,12 @@
           <v-icon :color="this.senderIsAdminOrModerator(this.event)?'white':''" size="small">block</v-icon>
           {{ redactedBySomeoneElse(event) ? $t('message.incoming_message_deleted_text') : $t('message.outgoing_message_deleted_text')}}
         </i>
-        <span v-html="linkify($sanitize(messageText))" v-else/>
-        <span class="edit-marker" v-if="event.replacingEventId() && !event.isRedacted()">
-          {{ $t('message.edited') }}
-        </span>
+        <more-less-control :event="originalEvent" v-else>
+          <span v-html="linkify($sanitize(messageText))" />
+          <span class="edit-marker" v-if="event.replacingEventId() && !event.isRedacted()">
+            {{ $t('message.edited') }}
+          </span>
+        </more-less-control>
       </div>
       <!-- <div>{{ JSON.stringify(event) }}</div> -->
     </div>
@@ -26,11 +28,12 @@
 
 <script>
 import MessageIncoming from "./MessageIncoming.vue";
+import MoreLessControl from '../MoreLessControl.vue';
 import messageMixin from "./messageMixin";
 
 export default {
   extends: MessageIncoming,
-  components: { MessageIncoming },
+  components: { MessageIncoming, MoreLessControl },
   mixins: [messageMixin],
 };
 </script>

src/components/messages/MessageOutgoingText.vue

@@ -14,10 +14,12 @@
            <v-icon size="small">block</v-icon>
           {{ redactedBySomeoneElse(event) ? $t('message.incoming_message_deleted_text') : $t('message.outgoing_message_deleted_text')}}
         </i>
-        <span v-html="linkify($sanitize(messageText))" v-else/>
-        <span class="edit-marker" v-if="event.replacingEventId() && !event.isRedacted()">
-          {{ $t('message.edited') }}
-        </span>
+        <more-less-control :event="originalEvent" v-else>
+          <span v-html="linkify($sanitize(messageText))" />
+          <span class="edit-marker" v-if="event.replacingEventId() && !event.isRedacted()">
+            {{ $t('message.edited') }}
+          </span>
+        </more-less-control>
       </div>
     </div>
   </message-outgoing>
@@ -25,10 +27,11 @@
 
 <script>
 import MessageOutgoing from "./MessageOutgoing.vue";
+import MoreLessControl from '../MoreLessControl.vue';
 
 export default {
   extends: MessageOutgoing,
-  components: { MessageOutgoing },
+  components: { MessageOutgoing, MoreLessControl },
 };
 </script>
 <style lang="scss">