LeadMagnet/leadchat
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

chore: Update reply editor design (#10575)

Browse Source 
# Pull Request Template

## Description

This PR will update the reply message editor’s design.

**Screen recording**


https://github.com/user-attachments/assets/40f61903-6bf7-4031-9a36-9027dffc46aa

---------

Co-authored-by: Pranav <pranavrajs@gmail.com>
Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
This commit is contained in:
Sivin Varghese
2025-01-08 17:49:53 +05:30
committed by GitHub
parent fa8f1d9b6f
commit dd595675bc
14 changed files with 216 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
app/javascript/dashboard/components/widgets/WootWriter/ReplyBottomPanel.vue
View File

@@ -15,10 +15,11 @@ import VideoCallButton from '../VideoCallButton.vue';
import AIAssistanceButton from '../AIAssistanceButton.vue';
import { REPLY_EDITOR_MODES } from './constants';
import { mapGetters } from 'vuex';
import NextButton from 'dashboard/components-next/button/Button.vue';
export default {
name: 'ReplyBottomPanel',
components: { FileUpload, VideoCallButton, AIAssistanceButton },
components: { NextButton, FileUpload, VideoCallButton, AIAssistanceButton },
mixins: [inboxMixin],
props: {
mode: {
@@ -207,13 +208,13 @@ export default {
switch (this.recordingAudioState) {
// playing paused recording stopped inactive destroyed
case 'playing':
return 'microphone-pause';
return 'i-ph-pause';
case 'paused':
return 'microphone-play';
return 'i-ph-play';
case 'stopped':
return 'microphone-play';
return 'i-ph-play';
default:
return 'microphone-stop';
return 'i-ph-stop';
}
},
showMessageSignatureButton() {
@@ -253,15 +254,14 @@ export default {
</script>
<template>
<div class="bottom-box" :class="wrapClass">
<div class="flex justify-between p-3" :class="wrapClass">
<div class="left-wrap">
<woot-button
<NextButton
v-tooltip.top-end="$t('CONVERSATION.REPLYBOX.TIP_EMOJI_ICON')"
:title="$t('CONVERSATION.REPLYBOX.TIP_EMOJI_ICON')"
icon="emoji"
color-scheme="secondary"
variant="smooth"
size="small"
icon="i-ph-smiley-sticker"
slate
faded
sm
@click="toggleEmojiPicker"
/>
<FileUpload
@@ -279,62 +279,59 @@ export default {
}"
@input-file="onFileUpload"
>
<woot-button
<NextButton
v-if="showAttachButton"
class-names="button--upload"
:title="$t('CONVERSATION.REPLYBOX.TIP_ATTACH_ICON')"
icon="attach"
color-scheme="secondary"
variant="smooth"
size="small"
v-tooltip.top-end="$t('CONVERSATION.REPLYBOX.TIP_ATTACH_ICON')"
icon="i-ph-paperclip"
slate
faded
sm
/>
</FileUpload>
<woot-button
<NextButton
v-if="showAudioRecorderButton"
v-tooltip.top-end="$t('CONVERSATION.REPLYBOX.TIP_AUDIORECORDER_ICON')"
:icon="!isRecordingAudio ? 'microphone' : 'microphone-off'"
:color-scheme="!isRecordingAudio ? 'secondary' : 'alert'"
variant="smooth"
size="small"
:icon="!isRecordingAudio ? 'i-ph-microphone' : 'i-ph-microphone-slash'"
slate
faded
sm
@click="toggleAudioRecorder"
/>
<woot-button
<NextButton
v-if="showEditorToggle"
v-tooltip.top-end="$t('CONVERSATION.REPLYBOX.TIP_FORMAT_ICON')"
icon="quote"
color-scheme="secondary"
variant="smooth"
size="small"
icon="i-ph-quotes"
slate
faded
sm
@click="$emit('toggleEditor')"
/>
<woot-button
<NextButton
v-if="showAudioPlayStopButton"
v-tooltip.top-end="$t('CONVERSATION.REPLYBOX.TIP_FORMAT_ICON')"
:icon="audioRecorderPlayStopIcon"
color-scheme="secondary"
variant="smooth"
size="small"
slate
faded
sm
:label="recordingAudioDurationText"
@click="toggleAudioRecorderPlayPause"
>
<span>{{ recordingAudioDurationText }}</span>
</woot-button>
<woot-button
/>
<NextButton
v-if="showMessageSignatureButton"
v-tooltip.top-end="signatureToggleTooltip"
icon="signature"
color-scheme="secondary"
variant="smooth"
size="small"
:title="signatureToggleTooltip"
icon="i-ph-signature"
slate
faded
sm
@click="toggleMessageSignature"
/>
<woot-button
<NextButton
v-if="hasWhatsappTemplates"
v-tooltip.top-end="$t('CONVERSATION.FOOTER.WHATSAPP_TEMPLATES')"
icon="whatsapp"
color-scheme="secondary"
variant="smooth"
size="small"
:title="$t('CONVERSATION.FOOTER.WHATSAPP_TEMPLATES')"
icon="i-ph-whatsapp"
slate
faded
sm
@click="$emit('selectWhatsappTemplate')"
/>
<VideoCallButton
@@ -359,14 +356,13 @@ export default {
</h4>
</div>
</transition>
<woot-button
<NextButton
v-if="enableInsertArticleInReply"
v-tooltip.top-end="$t('HELP_CENTER.ARTICLE_SEARCH.OPEN_ARTICLE_SEARCH')"
icon="document-text-link"
color-scheme="secondary"
variant="smooth"
size="small"
:title="$t('HELP_CENTER.ARTICLE_SEARCH.OPEN_ARTICLE_SEARCH')"
icon="i-ph-article-ny-times"
slate
faded
sm
@click="toggleInsertArticle"
/>
</div>
@@ -384,14 +380,6 @@ export default {
</template>
<style lang="scss" scoped>
.bottom-box {
@apply flex justify-between py-3 px-4;
&.is-note-mode {
@apply bg-yellow-100 dark:bg-yellow-800;
}
}
.left-wrap {
@apply items-center flex gap-2;
}