Truncate long messages

app/javascript/dashboard/i18n/locale/en/search.json

@@ -14,6 +14,7 @@
         "EMPTY_STATE": "No %{item} found for query '%{query}'",
         "PLACEHOLDER_KEYBINDING": "/ to focus",
         "INPUT_PLACEHOLDER": "Search message content, contact name, email or phone or conversations",
-        "BOT_LABEL": "Bot"
+        "BOT_LABEL": "Bot",
+        "READ_MORE": "Read more"
     }
 }

app/javascript/dashboard/routes/dashboard/search/components/ReadMore.vue

@@ -1,14 +1,16 @@
 <template>
   <div class="read-more">
-    <div ref="content" :class="{ content: applyReadMore }">
+    <div ref="content" :class="{ 'shrink-container': shrink }">
       <slot />
       <woot-button
+        v-if="shrink"
         size="tiny"
         variant="smooth"
         color-scheme="primary"
         class="read-more-button"
+        @click.prevent="$emit('expand')"
       >
-        Read more
+        {{ $t('SEARCH.READ_MORE') }}
       </woot-button>
     </div>
   </div>
@@ -17,7 +19,7 @@
 <script>
 export default {
   props: {
-    applyReadMore: {
+    shrink: {
       type: Boolean,
       default: false,
     },
@@ -26,13 +28,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.content {
+.shrink-container {
   max-height: 100px;
   overflow: hidden;
   position: relative;
 }
 
-.content::after {
+.shrink-container::after {
   content: '';
   position: absolute;
   bottom: 0;
@@ -46,10 +48,11 @@ export default {
 .read-more-button {
   max-width: max-content;
   position: absolute;
-  bottom: 0;
+  bottom: var(--space-small);
   left: 0;
   right: 0;
   margin: 0 auto;
   z-index: 5;
+  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
 }
 </style>

app/javascript/dashboard/routes/dashboard/search/components/SearchFocus.vue

@@ -6,6 +6,7 @@
 export default {
   mounted() {
     this.handler = event => {
+      event.preventDefault();
       this.$emit('keyup', event);
     };
     window.addEventListener('keyup', this.handler);

app/javascript/dashboard/routes/dashboard/search/components/SearchResultMessageItem.vue

@@ -3,7 +3,13 @@
     <thumbnail :src="getThumbnail" size="42px" :username="getName" />
     <div class="message-details">
       <p class="name">{{ getName }}</p>
-      <div v-dompurify-html="messageContent" class="message-content" />
+      <read-more :shrink="isOverflowing" @expand="isOverflowing = false">
+        <div
+          ref="messageContainer"
+          v-dompurify-html="messageContent"
+          class="message-content"
+        />
+      </read-more>
     </div>
   </router-link>
 </template>
@@ -13,9 +19,11 @@ import Thumbnail from 'dashboard/components/widgets/Thumbnail.vue';
 import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 import { mapGetters } from 'vuex';
 import { frontendURL } from 'dashboard/helper/URLHelper.js';
+import ReadMore from './ReadMore';
 export default {
   components: {
     Thumbnail,
+    ReadMore,
   },
   mixins: [messageFormatterMixin],
   props: {
@@ -24,6 +32,11 @@ export default {
       default: () => ({}),
     },
   },
+  data() {
+    return {
+      isOverflowing: false,
+    };
+  },
   computed: {
     messageContent() {
       return this.formatMessage(this.message.content);
@@ -47,6 +60,11 @@ export default {
         : this.$t('SEARCH.BOT_LABEL');
     },
   },
+  mounted() {
+    this.$nextTick(() => {
+      this.isOverflowing = this.$refs.messageContainer.offsetHeight > 150;
+    });
+  },
 };
 </script>
 
@@ -81,6 +99,15 @@ export default {
   }
   &:hover {
     background-color: var(--s-50);
+    ::v-deep {
+      &::after {
+        background: linear-gradient(
+          to bottom,
+          rgba(255, 255, 255, 0),
+          var(--s-50) 100%
+        );
+      }
+    }
   }
 }
 </style>