mirror of
https://github.com/lingble/chatwoot.git
synced 2025-11-01 11:37:58 +00:00
ecd9cf0326
# Pull Request Template ## Description This PR fixes RTL alignment issues in the new conversation form, removes the unused [`form-checkbox`](https://github.com/chatwoot/chatwoot/pull/12151#discussion_r2266333315) class name and drops the `app-rtl--wrapper` class, which was previously used for RTL detection in `rtl.scss` (removed earlier) Fixes https://linear.app/chatwoot/issue/CW-5410/rtl-issues ## Type of change - [x] Bug fix (non-breaking change which fixes an issue) ## How Has This Been Tested? ### Screenshots <img width="868" height="474" alt="image" src="https://github.com/user-attachments/assets/45995652-2895-49d5-a651-179090c949ec" /> <img width="868" height="656" alt="image" src="https://github.com/user-attachments/assets/a1cb4415-3fd4-4c9a-bc46-5e07e437d757" /> <img width="868" height="656" alt="image" src="https://github.com/user-attachments/assets/77c8981f-364e-4bf0-bea8-a4c42a76d065" /> ## Checklist: - [x] My code follows the style guidelines of this project - [x] I have performed a self-review of my code - [ ] I have commented on my code, particularly in hard-to-understand areas - [ ] I have made corresponding changes to the documentation - [x] My changes generate no new warnings - [ ] I have added tests that prove my fix is effective or that my feature works - [x] New and existing unit tests pass locally with my changes - [ ] Any dependent changes have been merged and published in downstream modules
92 lines
2.5 KiB
Vue
92 lines
2.5 KiB
Vue
<script setup>
|
|
import { computed } from 'vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
import { vOnClickOutside } from '@vueuse/components';
|
|
import { generateLabelForContactableInboxesList } from 'dashboard/components-next/NewConversation/helpers/composeConversationHelper.js';
|
|
|
|
import Button from 'dashboard/components-next/button/Button.vue';
|
|
import DropdownMenu from 'dashboard/components-next/dropdown-menu/DropdownMenu.vue';
|
|
|
|
const props = defineProps({
|
|
targetInbox: {
|
|
type: Object,
|
|
default: null,
|
|
},
|
|
selectedContact: {
|
|
type: Object,
|
|
default: null,
|
|
},
|
|
showInboxesDropdown: {
|
|
type: Boolean,
|
|
required: true,
|
|
},
|
|
contactableInboxesList: {
|
|
type: Array,
|
|
default: () => [],
|
|
},
|
|
hasErrors: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits([
|
|
'updateInbox',
|
|
'toggleDropdown',
|
|
'handleInboxAction',
|
|
]);
|
|
|
|
const { t } = useI18n();
|
|
|
|
const targetInboxLabel = computed(() => {
|
|
return generateLabelForContactableInboxesList(props.targetInbox);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="flex items-center flex-1 w-full gap-3 px-4 py-3 overflow-y-visible"
|
|
>
|
|
<label class="mb-0.5 text-sm font-medium text-n-slate-11 whitespace-nowrap">
|
|
{{ t('COMPOSE_NEW_CONVERSATION.FORM.INBOX_SELECTOR.LABEL') }}
|
|
</label>
|
|
<div
|
|
v-if="targetInbox"
|
|
class="flex items-center gap-1.5 rounded-md bg-n-alpha-2 truncate ltr:pl-3 rtl:pr-3 ltr:pr-1 rtl:pl-1 h-7 min-w-0"
|
|
>
|
|
<span class="text-sm truncate text-n-slate-12">
|
|
{{ targetInboxLabel }}
|
|
</span>
|
|
<Button
|
|
variant="ghost"
|
|
icon="i-lucide-x"
|
|
color="slate"
|
|
size="xs"
|
|
class="flex-shrink-0"
|
|
@click="emit('updateInbox', null)"
|
|
/>
|
|
</div>
|
|
<div
|
|
v-else
|
|
v-on-click-outside="() => emit('toggleDropdown', false)"
|
|
class="relative flex items-center h-7"
|
|
>
|
|
<Button
|
|
:label="t('COMPOSE_NEW_CONVERSATION.FORM.INBOX_SELECTOR.BUTTON')"
|
|
variant="link"
|
|
size="sm"
|
|
:color="hasErrors ? 'ruby' : 'slate'"
|
|
:disabled="!selectedContact"
|
|
class="hover:!no-underline"
|
|
@click="emit('toggleDropdown', !showInboxesDropdown)"
|
|
/>
|
|
<DropdownMenu
|
|
v-if="contactableInboxesList?.length > 0 && showInboxesDropdown"
|
|
:menu-items="contactableInboxesList"
|
|
class="ltr:left-0 rtl:right-0 z-[100] top-8 overflow-y-auto max-h-60 w-fit max-w-sm dark:!outline-n-slate-5"
|
|
@action="emit('handleInboxAction', $event)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|