akadmin/chatwoot
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

chore: Update typography in contacts page

Browse Source
This commit is contained in:
iamsivin
2026-01-07 13:31:21 +05:30
parent 3813a25eae
commit e42f2deab5
10 changed files with 86 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/dashboard/components-next/Companies/CompaniesDropdown.vue
+34 -3
View File
@@ -1,5 +1,5 @@
<script setup>
import { ref, computed } from 'vue';
import { ref, computed, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { vOnClickOutside } from '@vueuse/components';
import { debounce } from '@chatwoot/utils';
@@ -35,6 +35,12 @@ const isSearching = ref(false);
const companies = computed(() => companiesStore.getCompaniesList || []);
const isLoading = computed(() => companiesStore.uiFlags.fetchingList);
const clearOption = computed(() => ({
label: t('DROPDOWN_MENU.CLEAR_SELECTION'),
value: 'clear',
action: 'clear',
}));
const companyOptions = computed(() =>
companies.value.map(company => ({
label: company.name,
@@ -44,6 +50,17 @@ const companyOptions = computed(() =>
}))
);
const menuItems = computed(() => {
const items = [];
// Show clear option if a company is selected (either by ID or by name prop)
if (companyId.value || props.selectedCompanyName) {
items.push(clearOption.value);
}
// Add company options after clear option
items.push(...companyOptions.value);
return items;
});
const selectedCompany = computed(() => {
return companies.value.find(company => company.id === companyId.value);
});
@@ -77,7 +94,14 @@ const debouncedSearch = debounce(query => {
fetchCompanies(query);
}, 300);
const handleAction = ({ value }) => {
const handleAction = ({ value, action }) => {
if (action === 'clear') {
companyId.value = null;
emit('change', null);
toggleCompanyDropdown(false);
return;
}
if (companyId.value === value) {
companyId.value = null;
emit('change', null);
@@ -96,6 +120,13 @@ const handleSearch = query => {
const handleClickOutside = () => {
toggleCompanyDropdown(false);
};
watch(showCompanyDropdown, isOpen => {
if (!isOpen) {
searchQuery.value = '';
companiesStore.clearRecords();
}
});
</script>
<template>
@@ -123,7 +154,7 @@ const handleClickOutside = () => {
>
<DropdownMenu
v-if="showCompanyDropdown"
:menu-items="companyOptions"
:menu-items="menuItems"
show-search
disable-local-filtering
:search-placeholder="t('DROPDOWN_MENU.SEARCH_PLACEHOLDER')"
app/javascript/dashboard/components-next/Contacts/ContactsCard/AddContactNote.vue
+1 -1
View File
@@ -48,7 +48,7 @@ useKeyboardEvents(keyboardEvents);
<template>
<div class="flex flex-col items-start gap-4 py-3">
<span
class="py-1 text-sm font-medium text-n-slate-12 z-10 h-6 bg-n-surface-1 inline-flex items-center gap-2"
class="py-1 text-heading-3 text-n-slate-12 z-10 h-6 bg-n-surface-1 inline-flex items-center gap-2"
>
<Icon
icon="i-lucide-file-plus-corner"
app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactCardForm.vue
+2 -2
View File
@@ -166,7 +166,7 @@ defineExpose({
<div class="flex flex-col items-start gap-4 pt-2 pb-3">
<span
class="py-1 text-sm font-medium text-n-slate-12 z-10 h-6 bg-n-surface-1 inline-flex items-center gap-2"
class="py-1 text-heading-3 text-n-slate-12 z-10 h-6 bg-n-surface-1 inline-flex items-center gap-2"
>
<Icon
icon="i-lucide-settings-2"
@@ -288,7 +288,7 @@ defineExpose({
<div class="flex flex-col items-start gap-4 py-2">
<span
class="py-1 text-sm font-medium text-n-slate-12 z-10 h-6 bg-n-surface-1 inline-flex items-center gap-2"
class="py-1 text-heading-3 text-n-slate-12 z-10 h-6 bg-n-surface-1 inline-flex items-center gap-2"
>
<Icon
icon="i-lucide-globe"
app/javascript/dashboard/components-next/Contacts/ContactsCard/ContactsCard.vue
+7 -7
View File
@@ -176,7 +176,7 @@ const handleAvatarHover = isHovered => {
</div>
<h4
class="text-sm my-0 capitalize hover:cursor-pointer truncate text-n-slate-12 font-medium lg:max-w-40"
class="text-heading-3 my-0 capitalize hover:cursor-pointer truncate text-n-slate-12 lg:max-w-40"
@click="onClickViewDetails"
>
{{ name }}
@@ -229,14 +229,14 @@ const handleAvatarHover = isHovered => {
<div
v-if="companyName"
class="text-xs my-0 capitalize h-6 px-1 inline-flex items-center gap-1 rounded-md text-n-slate-12 font-440 max-w-40 min-w-0 outline outline-1 outline-n-weak"
class="my-0 capitalize h-6 px-1 inline-flex items-center gap-1 rounded-md text-n-slate-12 max-w-40 min-w-0 outline outline-1 outline-n-weak"
:class="{ 'lg:hidden': isExpanded }"
>
<Icon
icon="i-lucide-briefcase-business"
class="size-3.5 flex-shrink-0 text-n-slate-11"
/>
<span class="truncate">{{ companyName }}</span>
<span class="truncate text-label-small">{{ companyName }}</span>
</div>
<div
@@ -247,14 +247,14 @@ const handleAvatarHover = isHovered => {
<span
v-if="countryDetails"
class="inline-flex items-center gap-2 text-sm min-w-0 text-n-slate-11"
class="inline-flex items-center gap-2 min-w-0 text-n-slate-11"
:class="{ 'lg:hidden': isExpanded }"
>
<Flag
:country="countryDetails.countryCode"
class="size-3.5 flex-shrink-0"
/>
<span class="truncate">{{ formattedLocation }}</span>
<span class="truncate text-label-small">{{ formattedLocation }}</span>
</span>
<div
@@ -289,7 +289,7 @@ const handleAvatarHover = isHovered => {
icon="i-woot-mail"
class="size-4 flex-shrink-0 text-n-slate-11"
/>
<span class="text-sm text-n-slate-12 font-420 truncate">
<span class="text-body-main text-n-slate-12 truncate">
{{ email }}
</span>
</div>
@@ -311,7 +311,7 @@ const handleAvatarHover = isHovered => {
icon="i-lucide-phone"
class="size-3 flex-shrink-0 text-n-slate-11"
/>
<span class="text-sm text-n-slate-12 font-420 truncate">
<span class="text-body-main text-n-slate-12 truncate">
{{ phoneNumber }}
</span>
</div>
app/javascript/dashboard/components-next/Contacts/ContactsHeader/ContactHeader.vue
+1 -1
View File
@@ -36,7 +36,7 @@ const emit = defineEmits([
<div
class="flex items-start sm:items-center justify-between w-full py-6 px-6 gap-2 mx-auto max-w-[105rem] after:absolute after:inset-x-0 after:-bottom-4 after:bg-gradient-to-b after:from-n-surface-1 after:from-10% after:dark:from-0% after:to-transparent after:h-4 after:pointer-events-none"
>
<span class="text-xl font-medium truncate text-n-slate-12">
<span class="text-lg leading-6 font-520 truncate text-n-slate-12">
{{ headerTitle }}
</span>
<div class="flex items-center flex-col sm:flex-row flex-shrink-0 gap-4">
app/javascript/dashboard/components-next/Countries/CountryDropdown.vue
+33 -4
View File
@@ -1,5 +1,5 @@
<script setup>
import { ref, computed } from 'vue';
import { ref, computed, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { vOnClickOutside } from '@vueuse/components';
import { useToggle } from '@vueuse/core';
@@ -25,6 +25,12 @@ const { t } = useI18n();
const [showCountryDropdown, toggleCountryDropdown] = useToggle();
const searchQuery = ref('');
const clearOption = computed(() => ({
label: t('DROPDOWN_MENU.CLEAR_SELECTION'),
value: 'clear',
action: 'clear',
}));
const countryOptions = computed(() =>
countries.map(({ name, id }) => ({
label: name,
@@ -43,6 +49,14 @@ const filteredCountries = computed(() => {
);
});
const menuItems = computed(() => {
const items = [...filteredCountries.value];
if (countryCode.value) {
items.unshift(clearOption.value);
}
return items;
});
const selectedCountry = computed(() => {
return countries.find(country => country.id === countryCode.value);
});
@@ -54,7 +68,14 @@ const buttonLabel = computed(() => {
return props.placeholder;
});
const handleAction = ({ value }) => {
const handleAction = ({ value, action }) => {
if (action === 'clear') {
countryCode.value = '';
emit('change', null);
toggleCountryDropdown(false);
return;
}
if (countryCode.value === value) {
countryCode.value = '';
emit('change', null);
@@ -73,6 +94,10 @@ const handleSearch = query => {
const handleClickOutside = () => {
toggleCountryDropdown(false);
};
watch(showCountryDropdown, isOpen => {
if (isOpen) searchQuery.value = '';
});
</script>
<template>
@@ -104,7 +129,7 @@ const handleClickOutside = () => {
>
<DropdownMenu
v-if="showCountryDropdown"
:menu-items="filteredCountries"
:menu-items="menuItems"
show-search
:search-placeholder="t('DROPDOWN_MENU.SEARCH_PLACEHOLDER')"
class="max-h-60 overflow-y-auto absolute z-50 w-full mt-1 top-full min-w-40"
@@ -112,7 +137,11 @@ const handleClickOutside = () => {
@search="handleSearch"
>
<template #icon="{ item }">
<Flag :country="item.value" class="size-3" />
<Flag
v-if="item.value !== 'clear'"
:country="item.value"
class="size-3"
/>
</template>
</DropdownMenu>
</Transition>
app/javascript/dashboard/components-next/captain/PageLayout.vue
+1 -1
View File
@@ -117,7 +117,7 @@ const handleCreateAssistant = () => {
<template>
<section class="flex flex-col w-full h-full overflow-hidden bg-n-surface-1">
<header
class="sticky top-0 z-10 px-6 after:absolute after:inset-x-0 after:-bottom-4 after:bg-gradient-to-b after:from-n-surface-1 after:from-10% after:dark:from-0% after:to-transparent after:h-4 after:pointer-events-none"
class="sticky top-0 z-10 px-6 after:absolute after:inset-x-0 after:-bottom-4 after:bg-gradient-to-b after:from-n-surface-1 after:from-10% after:dark:from-0% after:to-transparent after:h-4 after:pointer-events-none after:z-10"
>
<div class="w-full max-w-[60rem] mx-auto">
<div
app/javascript/dashboard/i18n/locale/en/components.json
+2 -1
View File
@@ -13,7 +13,8 @@
"DROPDOWN_MENU": {
"SEARCH_PLACEHOLDER": "Search...",
"EMPTY_STATE": "No results found.",
"SEARCHING": "Searching..."
"SEARCHING": "Searching...",
"CLEAR_SELECTION": "Clear selection"
},
"DIALOG": {
"BUTTONS": {
app/javascript/dashboard/routes/dashboard/captain/responses/Index.vue
+2 -2
View File
@@ -280,11 +280,11 @@ onMounted(() => {
</template>
<template #body>
<LimitBanner class="mb-5" />
<LimitBanner class="mb-5 z-20 relative" />
<Banner
v-if="pendingCount > 0 && bulkSelectedIds.size === 0"
color="blue"
class="mb-4 -mt-2"
class="mb-4 -mt-2 z-20 relative"
:action-label="$t('CAPTAIN.RESPONSES.PENDING_BANNER.ACTION')"
@action="navigateToPendingFAQs"
>
app/javascript/dashboard/stores/companies.js
+3
View File
@@ -27,5 +27,8 @@ export const useCompaniesStore = createStore({
this.setUIFlag({ fetchingList: false });
}
},
clearRecords() {
this.records = [];
},
}),
});