From c54e1d527b37d6141d738a7ad6188f233c880333 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Sat, 26 Aug 2023 20:35:32 +0530
Subject: [PATCH] fix: show read only content in notes in grid view

changed tab action buttons
---
 frontend/src/components/Activities.vue | 25 +++++++++++++------------
 frontend/src/components/NoteModal.vue  |  2 +-
 frontend/src/pages/Notes.vue           |  9 ++++++---
 3 files changed, 20 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/Activities.vue b/frontend/src/components/Activities.vue
index 084e3b55..5fbc0175 100644
--- a/frontend/src/components/Activities.vue
+++ b/frontend/src/components/Activities.vue
@@ -1,18 +1,16 @@
 <template>
   <div class="p-5 flex items-center justify-between font-medium text-lg">
     <div>{{ title }}</div>
-    <Button
-      v-if="title == 'Calls'"
-      variant="solid"
-      label="Make a call"
-      @click="emit('makeCall')"
-    />
+    <Button v-if="title == 'Calls'" variant="solid" @click="emit('makeCall')">
+      <PhoneIcon class="w-4 h-4" />
+    </Button>
     <Button
       v-else-if="title == 'Notes'"
       variant="solid"
-      label="Create note"
       @click="emit('makeNote')"
-    />
+    >
+      <FeatherIcon name="plus" class="w-4 h-4" />
+    </Button>
   </div>
   <div v-if="activities.length">
     <div v-if="title == 'Notes'" class="grid grid-cols-2 gap-4 p-5 pt-0">
@@ -42,9 +40,12 @@
             />
           </Dropdown>
         </div>
-        <div
-          class="flex-1 text-base leading-5 text-gray-700 overflow-hidden"
-          v-html="note.content"
+        <TextEditor
+          v-if="note.content"
+          :content="note.content"
+          :options="{ readOnly: true }"
+          editor-class="!prose-sm max-w-none !text-sm focus:outline-none"
+          class="flex-1 overflow-hidden"
         />
         <div class="flex items-center justify-between gap-2">
           <div class="flex items-center gap-2">
@@ -178,7 +179,7 @@ import PhoneIcon from '@/components/Icons/PhoneIcon.vue'
 import NoteIcon from '@/components/Icons/NoteIcon.vue'
 import { timeAgo, dateFormat, dateTooltipFormat } from '@/utils'
 import { usersStore } from '@/stores/users'
-import { Button, FeatherIcon, Tooltip, Dropdown } from 'frappe-ui'
+import { Button, FeatherIcon, Tooltip, Dropdown, TextEditor } from 'frappe-ui'
 import { computed, h } from 'vue'
 
 const { getUser } = usersStore()
diff --git a/frontend/src/components/NoteModal.vue b/frontend/src/components/NoteModal.vue
index 11b9a7df..6c0f8aae 100644
--- a/frontend/src/components/NoteModal.vue
+++ b/frontend/src/components/NoteModal.vue
@@ -14,7 +14,7 @@
         />
         <TextEditor
           ref="content"
-          editor-class="!prose-sm max-w-none p-2 overflow-auto focus:outline-none"
+          editor-class="!prose-sm !leading-5 max-w-none p-2 overflow-auto focus:outline-none"
           :bubbleMenu="true"
           :content="updatedNote.content"
           @change="(val) => (updatedNote.content = val)"
diff --git a/frontend/src/pages/Notes.vue b/frontend/src/pages/Notes.vue
index 8f9065dc..326322be 100644
--- a/frontend/src/pages/Notes.vue
+++ b/frontend/src/pages/Notes.vue
@@ -37,9 +37,12 @@
           />
         </Dropdown>
       </div>
-      <div
-        class="flex-1 text-base leading-5 text-gray-700 overflow-hidden"
-        v-html="note.content"
+      <TextEditor
+        v-if="note.content"
+        :content="note.content"
+        :options="{ readOnly: true }"
+        editor-class="!prose-sm max-w-none !text-sm focus:outline-none"
+        class="flex-1 overflow-hidden"
       />
       <div class="flex items-center justify-between gap-2">
         <div class="flex items-center gap-2">