test/crm
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: emoji picker in email box

Browse Source
This commit is contained in:
Shariq Ansari 2024-07-10 19:01:23 +05:30
parent 2f036a2a1b
commit fa8f4ddd50
1 changed files with 22 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -96,11 +96,19 @@
class="flex justify-between gap-2 overflow-hidden border-t sm:px-10 px-4 py-2.5" 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 items-center overflow-x-auto">
<TextEditorFixedMenu <TextEditorBubbleMenu :buttons="textEditorMenuButtons" />
class="-ml-1"
:buttons="textEditorMenuButtons"
/>
<div class="flex gap-1"> <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 <FileUploader
:upload-args="{ :upload-args="{
doctype: doctype, doctype: doctype,
@ -147,12 +155,14 @@
</template> </template>
<script setup> <script setup>
import IconPicker from '@/components/IconPicker.vue'
import SmileIcon from '@/components/Icons/SmileIcon.vue'
import EmailIcon from '@/components/Icons/EmailIcon.vue' import EmailIcon from '@/components/Icons/EmailIcon.vue'
import AttachmentIcon from '@/components/Icons/AttachmentIcon.vue' import AttachmentIcon from '@/components/Icons/AttachmentIcon.vue'
import AttachmentItem from '@/components/AttachmentItem.vue' import AttachmentItem from '@/components/AttachmentItem.vue'
import MultiselectInput from '@/components/Controls/MultiselectInput.vue' import MultiselectInput from '@/components/Controls/MultiselectInput.vue'
import EmailTemplateSelectorModal from '@/components/Modals/EmailTemplateSelectorModal.vue' import EmailTemplateSelectorModal from '@/components/Modals/EmailTemplateSelectorModal.vue'
import { TextEditorFixedMenu, TextEditor, FileUploader, call } from 'frappe-ui' import { TextEditorBubbleMenu, TextEditor, FileUploader, call } from 'frappe-ui'
import { validateEmail } from '@/utils' import { validateEmail } from '@/utils'
import { EditorContent } from '@tiptap/vue-3' import { EditorContent } from '@tiptap/vue-3'
import { ref, computed, defineModel, nextTick } from 'vue' import { ref, computed, defineModel, nextTick } from 'vue'
@ -195,6 +205,7 @@ const content = defineModel('content')
const textEditor = ref(null) const textEditor = ref(null)
const cc = ref(false) const cc = ref(false)
const bcc = ref(false) const bcc = ref(false)
const emoji = ref('')
const subject = ref(props.subject) const subject = ref(props.subject)
const toEmails = ref(modelValue.value.email ? [modelValue.value.email] : []) const toEmails = ref(modelValue.value.email ? [modelValue.value.email] : [])
@ -233,6 +244,12 @@ async function applyEmailTemplate(template) {
showEmailTemplateSelectorModal.value = false showEmailTemplateSelectorModal.value = false
} }
function appendEmoji() {
editor.value.commands.insertContent(emoji.value)
editor.value.commands.focus()
emoji.value = ''
}
function toggleCC() { function toggleCC() {
cc.value = !cc.value cc.value = !cc.value
cc.value && nextTick(() => ccInput.value.setFocus()) cc.value && nextTick(() => ccInput.value.setFocus())