feat(markdown): added markdown preview in sidebar

Satellite-im · May 11, 2022 · 3d053b5 · 3d053b5
1 parent 11c649b
commit 3d053b5
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 1 deletion.
diff --git a/assets/styles/base.less b/assets/styles/base.less
@@ -601,3 +601,14 @@ strong {
 .sidebar-container.swiper-slide.swiper-slide-active {
   transform: none;
 }
+
+.user {
+  .user-info {
+    .subtitle {
+      * {
+        font-size: @micro-text-size;
+        color: @text-muted;
+      }
+    }
+  }
+}
diff --git a/components/views/user/User.html b/components/views/user/User.html
@@ -8,7 +8,7 @@
   <UiUserState :user="user" :isTyping="isTyping" :src="src" />
   <div class="user-info">
     <TypographyTitle :size="6" data-cy="sidebar-user-name" :text="user.name" />
-    <TypographySubtitle :size="6" :text="lastMessage" />
+    <VueMarkdown :source="lastMessage" class="subtitle" />
   </div>
   <div class="user-chat-details">
     <TypographyText :size="6" :text="timestamp" v-if="existConversation" />

diff --git a/components/views/user/User.vue b/components/views/user/User.vue
@@ -3,6 +3,7 @@
 <script lang="ts">
 import Vue, { PropType } from 'vue'
 import { mapState, mapGetters } from 'vuex'
+import VueMarkdown from 'vue-markdown'
 
 import { SmartphoneIcon, CircleIcon } from 'satellite-lucide-icons'
 
@@ -29,6 +30,7 @@ declare module 'vue/types/vue' {
 
 export default Vue.extend({
   components: {
+    VueMarkdown,
     SmartphoneIcon,
     CircleIcon,
   },