@ -1,7 +1,8 @@
import { detectCurrentLang , makeT , setAnonymousLocale } from 'app/client/lib/localization' ; import { detectCurrentLang , makeT , setAnonymousLocale } from 'app/client/lib/localization' ;
import { AppModel } from 'app/client/models/AppModel' ; import { AppModel } from 'app/client/models/AppModel' ;
import { hoverTooltip } from 'app/client/ui/tooltips' ; import { hoverTooltip } from 'app/client/ui/tooltips' ;
import { cssHoverCircle , cssTopBarBtn } from 'app/client/ui/TopBarCss' ; import { cssHoverCircle } from 'app/client/ui/TopBarCss' ;
import { theme } from 'app/client/ui2018/cssVars' ;
import { icon } from 'app/client/ui2018/icons' ; import { icon } from 'app/client/ui2018/icons' ;
import { menu , menuItem } from 'app/client/ui2018/menus' ; import { menu , menuItem } from 'app/client/ui2018/menus' ;
import { getCountryCode } from 'app/common/Locales' ; import { getCountryCode } from 'app/common/Locales' ;
@ -29,13 +30,10 @@ export function buildLanguageMenu(appModel: AppModel) {
setAnonymousLocale ( lng ) ;
setAnonymousLocale ( lng ) ;
window . location . reload ( ) ;
window . location . reload ( ) ;
} ;
} ;
// Try to convert locale setting to the emoji flag, fallback to plain flag icon.
const flagIcon = buildFlagIcon ( userLanguage ) ;
const emojiFlag = buildEmoji ( userLanguage ) ;
return cssFlagButton (
return cssHoverCircle (
// Margin is common for all hover buttons on TopBar.
{ style : ` margin: 5px; ` } ,
// Flag or emoji flag if we have it.
// Flag or emoji flag if we have it.
emojiFlag ? ? cssTopBarBtn ( 'Flag' ) ,
cssFlagIconWrapper ( flagIcon ) ,
// Expose for test the current language use.
// Expose for test the current language use.
testId ( ` current- ` + userLanguage ) ,
testId ( ` current- ` + userLanguage ) ,
menu (
menu (
@ -56,15 +54,16 @@ export function buildLanguageMenu(appModel: AppModel) {
) ;
) ;
} }
// Unfortunately, Windows doesn't support emoji flags, so we need to use SVG icons.
function buildFlagIcon ( locale : string ) {
function buildEmoji ( locale : string ) {
const countryCode = getCountryCode ( locale ) ;
const countryCode = getCountryCode ( locale ) ;
if ( ! countryCode ) { return null ; }
return [
return [
cssSvgIcon ( {
// Try to show an icon of the country's flag. (The icon may not exist.)
style : ` background-image: url("icons/locales/ ${ countryCode } .svg") `
! countryCode ? null : cssFlagIcon ( {
} ) ,
// Unfortunately, Windows doesn't support emoji flags, so we need to use SVG icons.
dom . cls ( cssSvgIconWrapper . className )
style : ` background-image: url("icons/locales/ ${ countryCode } .svg"); ` ,
} , testId ( 'button-icon' ) ) ,
// Display a placeholder icon behind the one above, to act as a fallback.
cssPlaceholderFlagIcon ( 'Flag' ) ,
] ;
] ;
} }
@ -84,24 +83,38 @@ const cssWrapper = styled('div', `
display : inline - block ;
display : inline - block ;
` );
` );
const cssSvgIconWrapper = styled ( 'div' , ` const cssFirstUpper = styled ( 'span' , `
display : grid ;
& : : first - letter {
place - content : center ;
text - transform : capitalize ;
}
` );
const cssFlagButton = styled ( cssHoverCircle , `
display : flex ;
align - items : center ;
justify - content : center ;
margin : 5px ;
cursor : pointer ;
cursor : pointer ;
user - select : none ;
` );
` );
const cssSvgIcon = styled ( 'div' , ` const cssFlagIconWrapper = styled ( 'div' , `
position : relative ;
width : 16px ;
height : 16px ;
` );
const cssFlagIcon = styled ( 'div' , `
position : absolute ;
width : 16px ;
width : 16px ;
height : 16px ;
height : 16px ;
background - repeat : no - repeat ;
background - repeat : no - repeat ;
background - position : center ;
background - position : center ;
background - color : transparent ;
background - color : transparent ;
background - size : contain ;
background - size : contain ;
z - index : 1 ;
` );
` );
const cssFirstUpper = styled ( 'span' , ` const cssPlaceholderFlagIcon = styled ( icon , `
& : : first - letter {
position : absolute ;
text - transform : capitalize ;
-- icon - color : $ { theme . topBarButtonPrimaryFg } ;
}
` );
` );
George Gevoian
1 year ago
