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

feat: Add RTL Support to Widget (#11022)

Browse Source 
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
2025-03-21 22:09:03 +05:30
committed by GitHub
parent e4ea078e52
commit 3a693947b5
76 changed files with 966 additions and 2406 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
app/javascript/widget/composables/specs/useDarkMode.spec.js
View File

@@ -14,11 +14,10 @@ describe('useDarkMode', () => {
vi.mocked(useMapGetter).mockReturnValue(mockDarkMode);
});
it('returns darkMode, prefersDarkMode, and getThemeClass', () => {
it('returns darkMode, prefersDarkMode', () => {
const result = useDarkMode();
expect(result).toHaveProperty('darkMode');
expect(result).toHaveProperty('prefersDarkMode');
expect(result).toHaveProperty('getThemeClass');
});
describe('prefersDarkMode', () => {
@@ -47,25 +46,4 @@ describe('useDarkMode', () => {
expect(prefersDarkMode.value).toBe(false);
});
});
describe('getThemeClass', () => {
it('returns light class when darkMode is light', () => {
const { getThemeClass } = useDarkMode();
expect(getThemeClass('light-class', 'dark-class')).toBe('light-class');
});
it('returns dark class when darkMode is dark', () => {
mockDarkMode.value = 'dark';
const { getThemeClass } = useDarkMode();
expect(getThemeClass('light-class', 'dark-class')).toBe('dark-class');
});
it('returns both classes when darkMode is auto', () => {
mockDarkMode.value = 'auto';
const { getThemeClass } = useDarkMode();
expect(getThemeClass('light-class', 'dark-class')).toBe(
'light-class dark-class'
);
});
});
});

9
app/javascript/widget/composables/useDarkMode.js
View File

@@ -10,11 +10,6 @@ const getSystemPreference = () =>
const calculatePrefersDarkMode = (mode, systemPreference) =>
isDarkModeAuto(mode) ? systemPreference : isDarkMode(mode);
const calculateThemeClass = (mode, light, dark) => {
if (isDarkModeAuto(mode)) return `${light} ${dark}`;
return isDarkMode(mode) ? dark : light;
};
/**
* Composable for handling dark mode.
* @returns {Object} An object containing computed properties and methods for dark mode.
@@ -28,12 +23,8 @@ export function useDarkMode() {
calculatePrefersDarkMode(darkMode.value, systemPreference.value)
);
const getThemeClass = (light, dark) =>
calculateThemeClass(darkMode.value, light, dark);
return {
darkMode,
prefersDarkMode,
getThemeClass,
};
}