test/jcrm
1
0
Fork 0
forked from test/crm
Code Pull Requests Activity

fix: add emoji picker in comment box

Browse Source
This commit is contained in:
Shariq Ansari 2024-07-10 19:11:21 +05:30
parent 874d3b7447
commit b0478562c3
2 changed files with 58 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
frontend/src/components/CommentBox.vue
View File

@ -12,7 +12,8 @@
<template v-slot:editor="{ editor }">
<EditorContent
:class="[
editable && 'sm:mx-10 mx-4 max-h-[50vh] overflow-y-auto border-t py-3',
editable &&
'sm:mx-10 mx-4 max-h-[50vh] overflow-y-auto border-t py-3',
]"
:editor="editor"
/>
@ -37,11 +38,19 @@
<div
class="flex justify-between gap-2 overflow-hidden border-t sm:px-10 px-4 py-2.5"
>
<div class="flex items-center overflow-x-auto">
<TextEditorFixedMenu
class="-ml-1"
:buttons="textEditorMenuButtons"
/>
<div class="flex gap-1 items-center overflow-x-auto">
<TextEditorBubbleMenu :buttons="textEditorMenuButtons" />
<IconPicker
v-model="emoji"
v-slot="{ togglePopover }"
@update:modelValue="() => appendEmoji()"
>
<Button variant="ghost" @click="togglePopover()">
<template #icon>
<SmileIcon class="h-4" />
</template>
</Button>
</IconPicker>
<FileUploader
:upload-args="{
doctype: doctype,
@ -77,10 +86,12 @@
</TextEditor>
</template>
<script setup>
import IconPicker from '@/components/IconPicker.vue'
import SmileIcon from '@/components/Icons/SmileIcon.vue'
import AttachmentIcon from '@/components/Icons/AttachmentIcon.vue'
import AttachmentItem from '@/components/AttachmentItem.vue'
import { usersStore } from '@/stores/users'
import { TextEditorFixedMenu, TextEditor, FileUploader } from 'frappe-ui'
import { TextEditorBubbleMenu, TextEditor, FileUploader } from 'frappe-ui'
import { EditorContent } from '@tiptap/vue-3'
import { ref, computed, defineModel } from 'vue'
@ -118,11 +129,18 @@ const content = defineModel('content')
const { users: usersList } = usersStore()
const textEditor = ref(null)
const emoji = ref('')
const editor = computed(() => {
return textEditor.value.editor
})
function appendEmoji() {
editor.value.commands.insertContent(emoji.value)
editor.value.commands.focus()
emoji.value = ''
}
function removeAttachment(attachment) {
attachments.value = attachments.value.filter((a) => a !== attachment)
}

68
frontend/src/components/EmailEditor.vue
View File

@ -95,45 +95,43 @@
<div
class="flex justify-between gap-2 overflow-hidden border-t sm:px-10 px-4 py-2.5"
>
<div class="flex items-center overflow-x-auto">
<div class="flex gap-1 items-center overflow-x-auto">
<TextEditorBubbleMenu :buttons="textEditorMenuButtons" />
<div class="flex gap-1">
<IconPicker
v-model="emoji"
v-slot="{ togglePopover }"
@update:modelValue="() => appendEmoji()"
>
<Button variant="ghost" @click="togglePopover()">
<template #icon>
<SmileIcon class="h-4" />
</template>
</Button>
</IconPicker>
<FileUploader
:upload-args="{
doctype: doctype,
docname: modelValue.name,
private: true,
}"
@success="(f) => attachments.push(f)"
>
<template #default="{ openFileSelector }">
<Button variant="ghost" @click="openFileSelector()">
<template #icon>
<AttachmentIcon class="h-4" />
</template>
</Button>
</template>
</FileUploader>
<Button
variant="ghost"
@click="showEmailTemplateSelectorModal = true"
>
<IconPicker
v-model="emoji"
v-slot="{ togglePopover }"
@update:modelValue="() => appendEmoji()"
>
<Button variant="ghost" @click="togglePopover()">
<template #icon>
<EmailIcon class="h-4" />
<SmileIcon class="h-4" />
</template>
</Button>
</div>
</IconPicker>
<FileUploader
:upload-args="{
doctype: doctype,
docname: modelValue.name,
private: true,
}"
@success="(f) => attachments.push(f)"
>
<template #default="{ openFileSelector }">
<Button variant="ghost" @click="openFileSelector()">
<template #icon>
<AttachmentIcon class="h-4" />
</template>
</Button>
</template>
</FileUploader>
<Button
variant="ghost"
@click="showEmailTemplateSelectorModal = true"
>
<template #icon>
<EmailIcon class="h-4" />
</template>
</Button>
</div>
<div class="mt-2 flex items-center justify-end space-x-2 sm:mt-0">
<Button v-bind="discardButtonProps || {}" :label="__('Discard')" />