scottk/chatwoot
1
0
Fork 0
mirror of https://github.com/lingble/chatwoot.git synced 2025-11-03 04:27:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: UI improvements to compose new conversation form (#12173)

Browse Source
This commit is contained in:
Sivin Varghese
2025-08-12 20:21:05 +05:30
committed by GitHub
parent ad4ec9e93b
commit 0c101b1f6b
2 changed files with 16 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
app/javascript/dashboard/components-next/NewConversation/ComposeConversation.vue
View File

@@ -2,6 +2,7 @@
import { ref, computed, onMounted, watch } from 'vue'; import { ref, computed, onMounted, watch } from 'vue';
import { useStore, useMapGetter } from 'dashboard/composables/store'; import { useStore, useMapGetter } from 'dashboard/composables/store';
import { useI18n } from 'vue-i18n'; import { useI18n } from 'vue-i18n';
import { useWindowSize } from '@vueuse/core';
import { useUISettings } from 'dashboard/composables/useUISettings'; import { useUISettings } from 'dashboard/composables/useUISettings';
import { vOnClickOutside } from '@vueuse/components'; import { vOnClickOutside } from '@vueuse/components';
import { useAlert } from 'dashboard/composables'; import { useAlert } from 'dashboard/composables';
@@ -15,6 +16,7 @@ import {
processContactableInboxes, processContactableInboxes,
mergeInboxDetails, mergeInboxDetails,
} from 'dashboard/components-next/NewConversation/helpers/composeConversationHelper'; } from 'dashboard/components-next/NewConversation/helpers/composeConversationHelper';
import wootConstants from 'dashboard/constants/globals';
import ComposeNewConversationForm from 'dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue'; import ComposeNewConversationForm from 'dashboard/components-next/NewConversation/components/ComposeNewConversationForm.vue';
@@ -37,9 +39,16 @@ const emit = defineEmits(['close']);
const store = useStore(); const store = useStore();
const { t } = useI18n(); const { t } = useI18n();
const { width: windowWidth } = useWindowSize();
const { fetchSignatureFlagFromUISettings } = useUISettings(); const { fetchSignatureFlagFromUISettings } = useUISettings();
const isSmallScreen = computed(
() => windowWidth.value < wootConstants.SMALL_SCREEN_BREAKPOINT
);
const viewInModal = computed(() => props.isModal || isSmallScreen.value);
const contacts = ref([]); const contacts = ref([]);
const selectedContact = ref(null); const selectedContact = ref(null);
const targetInbox = ref(null); const targetInbox = ref(null);
@@ -67,7 +76,7 @@ const directUploadsEnabled = computed(
const activeContact = computed(() => contactById.value(props.contactId)); const activeContact = computed(() => contactById.value(props.contactId));
const composePopoverClass = computed(() => { const composePopoverClass = computed(() => {
if (props.isModal) return ''; if (viewInModal.value) return '';
return props.alignPosition === 'right' return props.alignPosition === 'right'
? 'absolute ltr:left-0 ltr:right-[unset] rtl:right-0 rtl:left-[unset]' ? 'absolute ltr:left-0 ltr:right-[unset] rtl:right-0 rtl:left-[unset]'
@@ -202,7 +211,7 @@ const handleClickOutside = () => {
}; };
const onModalBackdropClick = () => { const onModalBackdropClick = () => {
if (!props.isModal) return; if (!viewInModal.value) return;
handleClickOutside(); handleClickOutside();
}; };
@@ -231,7 +240,7 @@ useKeyboardEvents(keyboardEvents);
]" ]"
class="relative" class="relative"
:class="{ :class="{
'z-40': showComposeNewConversation, 'z-50': showComposeNewConversation && !viewInModal,
}" }"
> >
<slot <slot
@@ -243,12 +252,12 @@ useKeyboardEvents(keyboardEvents);
v-if="showComposeNewConversation" v-if="showComposeNewConversation"
:class="{ :class="{
'fixed z-50 bg-n-alpha-black1 backdrop-blur-[4px] flex items-start pt-[clamp(3rem,15vh,12rem)] justify-center inset-0': 'fixed z-50 bg-n-alpha-black1 backdrop-blur-[4px] flex items-start pt-[clamp(3rem,15vh,12rem)] justify-center inset-0':
isModal, viewInModal,
}" }"
@click.self="onModalBackdropClick" @click.self="onModalBackdropClick"
> >
<ComposeNewConversationForm <ComposeNewConversationForm
:class="[{ 'mt-2': !isModal }, composePopoverClass]" :class="[{ 'mt-2': !viewInModal }, composePopoverClass]"
:contacts="contacts" :contacts="contacts"
:contact-id="contactId" :contact-id="contactId"
:is-loading="isSearching" :is-loading="isSearching"

6
app/javascript/dashboard/components-next/sidebar/Sidebar.vue
View File

@@ -509,10 +509,8 @@ const menuItems = computed(() => {
class="bg-n-solid-2 rtl:border-l ltr:border-r border-n-weak flex flex-col text-sm pb-1 fixed top-0 ltr:left-0 rtl:right-0 h-full z-40 transition-transform duration-200 ease-in-out md:static w-[200px] basis-[200px] md:flex-shrink-0 md:ltr:translate-x-0 md:rtl:-translate-x-0" class="bg-n-solid-2 rtl:border-l ltr:border-r border-n-weak flex flex-col text-sm pb-1 fixed top-0 ltr:left-0 rtl:right-0 h-full z-40 transition-transform duration-200 ease-in-out md:static w-[200px] basis-[200px] md:flex-shrink-0 md:ltr:translate-x-0 md:rtl:-translate-x-0"
:class="[ :class="[
{ {
'ltr:translate-x-0 rtl:-translate-x-0 shadow-lg md:shadow-none': 'shadow-lg md:shadow-none': isMobileSidebarOpen,
isMobileSidebarOpen, 'ltr:-translate-x-full rtl:translate-x-full': !isMobileSidebarOpen,
'ltr:-translate-x-full rtl:translate-x-full md:translate-x-0':
!isMobileSidebarOpen,
}, },
]" ]"
> >