feat: Add RTL Support to Widget (#11022)
This PR adds RTL support to the web widget for improved right-to-left language compatibility, updates colors, and cleans up code. Fixes https://linear.app/chatwoot/issue/CW-4089/rtl-issues-on-widget https://github.com/chatwoot/chatwoot/issues/9791 Other PR: https://github.com/chatwoot/chatwoot/pull/11016
This commit is contained in:
Sivin Varghese
@@ -1,7 +1,6 @@
|
||||
<script setup>
|
||||
import { ref, computed, watch, useTemplateRef, nextTick, unref } from 'vue';
|
||||
import countriesList from 'shared/constants/countries.js';
|
||||
import { useDarkMode } from 'widget/composables/useDarkMode';
|
||||
import FluentIcon from 'shared/components/FluentIcon/Index.vue';
|
||||
import {
|
||||
getActiveCountryCode,
|
||||
@@ -17,8 +16,6 @@ const { context } = defineProps({
|
||||
|
||||
const localValue = ref(context.value || '');
|
||||
|
||||
const { getThemeClass: $dm } = useDarkMode();
|
||||
|
||||
const selectedIndex = ref(-1);
|
||||
const showDropdown = ref(false);
|
||||
const searchCountry = ref('');
|
||||
@@ -30,7 +27,7 @@ const dropdownRef = useTemplateRef('dropdownRef');
|
||||
const searchbarRef = useTemplateRef('searchbarRef');
|
||||
|
||||
const placeholder = computed(() => context?.attrs?.placeholder || '');
|
||||
const hasErrorInPhoneInput = computed(() => context.hasErrorInPhoneInput);
|
||||
const hasErrorInPhoneInput = computed(() => context?.state?.invalid);
|
||||
const dropdownFirstItemName = computed(() =>
|
||||
activeCountryCode.value ? 'Clear selection' : 'Select Country'
|
||||
);
|
||||
@@ -44,43 +41,6 @@ const countries = computed(() => [
|
||||
...countriesList,
|
||||
]);
|
||||
|
||||
const dropdownClass = computed(() =>
|
||||
$dm('bg-slate-100 text-slate-700', 'dark:bg-slate-700 dark:text-slate-50')
|
||||
);
|
||||
|
||||
const dropdownBackgroundClass = computed(() =>
|
||||
$dm('bg-white text-slate-700', 'dark:bg-slate-700 dark:text-slate-50')
|
||||
);
|
||||
|
||||
const dropdownItemClass = computed(() =>
|
||||
$dm(
|
||||
'text-slate-700 hover:bg-slate-50',
|
||||
'dark:text-slate-50 dark:hover:bg-slate-600'
|
||||
)
|
||||
);
|
||||
|
||||
const activeDropdownItemClass = computed(
|
||||
() => `active ${$dm('bg-slate-100', 'dark:bg-slate-800')}`
|
||||
);
|
||||
|
||||
const focusedDropdownItemClass = computed(
|
||||
() => `focus ${$dm('bg-slate-50', 'dark:bg-slate-600')}`
|
||||
);
|
||||
|
||||
const inputLightAndDarkModeColor = computed(() =>
|
||||
$dm('bg-white text-slate-700', 'dark:bg-slate-600 dark:text-slate-50')
|
||||
);
|
||||
|
||||
const inputBorderColor = computed(
|
||||
() => `${$dm('border-black-200', 'dark:border-black-500')}`
|
||||
);
|
||||
|
||||
const inputHasError = computed(() =>
|
||||
hasErrorInPhoneInput.value
|
||||
? `border-red-200 hover:border-red-300 focus:border-red-300 ${inputLightAndDarkModeColor.value}`
|
||||
: `hover:border-black-300 focus:border-black-300 ${inputLightAndDarkModeColor.value} ${inputBorderColor.value}`
|
||||
);
|
||||
|
||||
const items = computed(() => {
|
||||
return countries.value.filter(country => {
|
||||
const { name, dial_code, id } = country;
|
||||
@@ -206,12 +166,15 @@ function onSelect() {
|
||||
<template>
|
||||
<div class="relative mt-2 phone-input--wrap">
|
||||
<div
|
||||
class="flex items-center justify-start w-full border border-solid rounded outline-none phone-input"
|
||||
:class="inputHasError"
|
||||
class="flex items-center justify-start outline-none phone-input rounded-lg box-border bg-n-background dark:bg-n-alpha-2 border-none outline outline-1 outline-offset-[-1px] text-sm w-full text-n-slate-12 focus-within:outline-n-brand focus-within:ring-1 focus-within:ring-n-brand"
|
||||
:class="{
|
||||
'outline-n-ruby-8 dark:outline-n-ruby-8 hover:outline-n-ruby-9 dark:hover:outline-n-ruby-9':
|
||||
hasErrorInPhoneInput,
|
||||
'outline-n-weak': !hasErrorInPhoneInput,
|
||||
}"
|
||||
>
|
||||
<div
|
||||
class="flex items-center justify-between h-full px-2 py-2 cursor-pointer country-emoji--wrap"
|
||||
:class="dropdownClass"
|
||||
class="flex items-center justify-between h-[2.625rem] px-2 py-2 cursor-pointer bg-n-alpha-1 dark:bg-n-solid-1 ltr:rounded-bl-lg rtl:rounded-br-lg ltr:rounded-tl-lg rtl:rounded-tr-lg min-w-[3.6rem] w-[3.6rem]"
|
||||
@click="toggleCountryDropdown"
|
||||
>
|
||||
<h5 v-if="activeCountry.emoji" class="mb-0 text-xl">
|
||||
@@ -222,18 +185,16 @@ function onSelect() {
|
||||
</div>
|
||||
<span
|
||||
v-if="activeDialCode"
|
||||
class="py-2 pl-2 pr-0 text-base"
|
||||
:class="$dm('text-slate-700', 'dark:text-slate-50')"
|
||||
class="py-2 ltr:pl-2 rtl:pr-2 text-base text-n-slate-11"
|
||||
>
|
||||
{{ activeDialCode }}
|
||||
</span>
|
||||
<input
|
||||
:value="phoneNumber"
|
||||
type="phoneInput"
|
||||
class="w-full h-full py-2 pl-2 pr-3 leading-tight border-0 rounded-r outline-none"
|
||||
class="w-full h-full !py-3 pl-2 pr-3 leading-tight rounded-r !outline-none focus:!ring-0 !bg-transparent dark:!bg-transparent"
|
||||
name="phoneNumber"
|
||||
:placeholder="placeholder"
|
||||
:class="inputLightAndDarkModeColor"
|
||||
@input="onChange"
|
||||
@blur="context.blurHandler"
|
||||
/>
|
||||
@@ -242,30 +203,30 @@ function onSelect() {
|
||||
v-if="showDropdown"
|
||||
ref="dropdownRef"
|
||||
v-on-clickaway="closeDropdown"
|
||||
:class="dropdownBackgroundClass"
|
||||
class="absolute z-10 h-48 px-0 pt-0 pb-1 pl-1 pr-1 overflow-y-auto rounded shadow-lg country-dropdown top-12"
|
||||
class="country-dropdown absolute bg-n-background text-n-slate-12 dark:bg-n-solid-3 z-10 h-48 px-0 pt-0 pb-1 pl-1 pr-1 overflow-y-auto rounded-lg shadow-lg top-12 w-full min-w-24 max-w-[14.8rem]"
|
||||
@keydown.up="moveSelectionUp"
|
||||
@keydown.down="moveSelectionDown"
|
||||
@keydown.enter="onSelect"
|
||||
>
|
||||
<div class="sticky top-0" :class="dropdownBackgroundClass">
|
||||
<div
|
||||
class="sticky top-0 bg-n-background text-n-slate-12 dark:bg-n-solid-3"
|
||||
>
|
||||
<input
|
||||
ref="searchbarRef"
|
||||
v-model="searchCountry"
|
||||
type="text"
|
||||
:placeholder="$t('PRE_CHAT_FORM.FIELDS.PHONE_NUMBER.DROPDOWN_SEARCH')"
|
||||
class="w-full h-8 px-3 py-2 mt-1 mb-1 text-sm border border-solid rounded outline-none dropdown-search"
|
||||
:class="[$dm('bg-slate-50', 'dark:bg-slate-600'), inputBorderColor]"
|
||||
class="w-full h-8 !ring-0 px-3 py-2 mt-1 mb-1 text-sm rounded bg-n-alpha-black2"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
v-for="(country, index) in items"
|
||||
:key="index"
|
||||
class="flex items-center h-8 px-2 py-2 rounded cursor-pointer country-dropdown--item"
|
||||
class="flex items-center h-8 px-2 py-2 rounded cursor-pointer country-dropdown--item text-n-slate-12 dark:hover:bg-n-solid-2 hover:bg-n-alpha-2"
|
||||
:class="[
|
||||
dropdownItemClass,
|
||||
country.id === activeCountryCode ? activeDropdownItemClass : '',
|
||||
index === selectedIndex ? focusedDropdownItemClass : '',
|
||||
country.id === activeCountryCode &&
|
||||
'active bg-n-alpha-1 dark:bg-n-solid-1',
|
||||
index === selectedIndex && 'focus dark:bg-n-solid-2 bg-n-alpha-2',
|
||||
]"
|
||||
@click="onSelectCountry(country)"
|
||||
>
|
||||
@@ -279,8 +240,7 @@ function onSelect() {
|
||||
</div>
|
||||
<div v-if="items.length === 0">
|
||||
<span
|
||||
class="flex justify-center mt-4 text-sm text-center"
|
||||
:class="$dm('text-slate-700', 'dark:text-slate-50')"
|
||||
class="flex justify-center mt-4 text-sm text-center text-n-slate-11"
|
||||
>
|
||||
{{ $t('PRE_CHAT_FORM.FIELDS.PHONE_NUMBER.DROPDOWN_EMPTY') }}
|
||||
</span>
|
||||
@@ -288,30 +248,3 @@ function onSelect() {
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
@import 'widget/assets/scss/variables.scss';
|
||||
|
||||
.phone-input--wrap {
|
||||
.phone-input {
|
||||
height: 2.8rem;
|
||||
|
||||
input:placeholder-shown {
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
}
|
||||
|
||||
.country-emoji--wrap {
|
||||
border-bottom-left-radius: 0.18rem;
|
||||
border-top-left-radius: 0.18rem;
|
||||
min-width: 3.6rem;
|
||||
width: 3.6rem;
|
||||
}
|
||||
|
||||
.country-dropdown {
|
||||
min-width: 6rem;
|
||||
max-width: 14.8rem;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user