mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-11-24 02:58:09 +01:00
d589d2dec0
* Create RTL stylesheets using `gulp-rtl` * Handle RTL stylesheet special cases Certain blocks of Sass were set to bypass "rtlcss" using ignore comments. Certain icons had to be flipped 180 degrees. * Switch stylesheets when locale changes A second stylesheet has been added to each HTML page for use with right-to-left locales. It is disabled by default. It is enabled on startup if a RTL locale is set, and when switching to a RTL locale. Similarly the LTR stylesheet is disabled when a RTL locale is used. Unfortunately there is an unpleasant flash of unstyled content when switching between a LTR and a RTL locale. There is also a slightly longer page load time when using a RTL locale (<1s difference). We couldn't think of an easy way to avoid these problems. * Set `dir="auto"` as default on `TextFields`
31 lines
901 B
JavaScript
31 lines
901 B
JavaScript
/**
|
|
* Switch the CSS stylesheet used between 'rtl' and 'ltr'
|
|
* @param {('ltr' | 'rtl')} direction Text direction, either left-to-right (ltr) or right-to-left (rtl)
|
|
*/
|
|
const switchDirection = async (direction) => {
|
|
if (direction === 'auto') {
|
|
direction = 'ltr'
|
|
}
|
|
let updatedLink
|
|
Array.from(document.getElementsByTagName('link'))
|
|
.filter(link => link.rel === 'stylesheet')
|
|
.forEach(link => {
|
|
if (link.title === direction && link.disabled) {
|
|
link.disabled = false
|
|
updatedLink = link
|
|
} else if (link.title !== direction && !link.disabled) {
|
|
link.disabled = true
|
|
}
|
|
})
|
|
if (updatedLink) {
|
|
return new Promise((resolve, reject) => {
|
|
updatedLink.onload = () => {
|
|
resolve()
|
|
}
|
|
updatedLink.onerror = () => reject(new Error(`Failed to load '${direction}' stylesheet`))
|
|
})
|
|
}
|
|
}
|
|
|
|
export default switchDirection
|