Skip to content

I
interface
Commit 95d91c85 authored by Justin Domingue's avatar Justin Domingue Committed by GitHub
Browse files
Options

fix: add language selector in top-level menu (#2057) 

* initial language selector

* set > icon opacity for consistency

* always reset menu to main on close

* always reset menu on menu open
parent 03902fe5
Hide whitespace changes
Inline Side-by-side
Showing with 102 additions and 47 deletions
src/components/Menu/index.tsx
View file @ 95d91c85
import React, { useRef } from 'react' import React, { useEffect, useRef, useState } from 'react'
import { BookOpen, Code, Info, MessageCircle, PieChart, Moon, Sun } from 'react-feather' import {
BookOpen,
Code,
Info,
MessageCircle,
PieChart,
Moon,
Sun,
ChevronRight,
ChevronLeft,
Check,
} from 'react-feather'
import { Link } from 'react-router-dom' import { Link } from 'react-router-dom'
import styled, { css } from 'styled-components/macro' import styled, { css } from 'styled-components/macro'
import { ReactComponent as MenuIcon } from '../../assets/images/menu.svg' import { ReactComponent as MenuIcon } from '../../assets/images/menu.svg'
...@@ -10,9 +21,10 @@ import { useModalOpen, useToggleModal } from '../../state/application/hooks' ...@@ -10,9 +21,10 @@ import { useModalOpen, useToggleModal } from '../../state/application/hooks'
import { Trans } from '@lingui/macro' import { Trans } from '@lingui/macro'
import { ExternalLink } from '../../theme' import { ExternalLink } from '../../theme'
import { ButtonPrimary } from '../Button' import { ButtonPrimary } from '../Button'
import { useDarkModeManager } from 'state/user/hooks' import { useDarkModeManager, useUserLocaleManager } from 'state/user/hooks'
import { L2_CHAIN_IDS, CHAIN_INFO, SupportedChainId } from 'constants/chains' import { L2_CHAIN_IDS, CHAIN_INFO, SupportedChainId } from 'constants/chains'
import { LOCALE_LABEL, SUPPORTED_LOCALES } from 'constants/locales'
export enum FlyoutAlignment { export enum FlyoutAlignment {
LEFT = 'LEFT', LEFT = 'LEFT',
...@@ -69,6 +81,8 @@ const StyledMenu = styled.div` ...@@ -69,6 +81,8 @@ const StyledMenu = styled.div`
const MenuFlyout = styled.span<{ flyoutAlignment?: FlyoutAlignment }>` const MenuFlyout = styled.span<{ flyoutAlignment?: FlyoutAlignment }>`
min-width: 196px; min-width: 196px;
max-height: 350px;
overflow: auto;
background-color: ${({ theme }) => theme.bg1}; background-color: ${({ theme }) => theme.bg1};
box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04), box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.01), 0px 4px 8px rgba(0, 0, 0, 0.04), 0px 16px 24px rgba(0, 0, 0, 0.04),
0px 24px 32px rgba(0, 0, 0, 0.01); 0px 24px 32px rgba(0, 0, 0, 0.01);
...@@ -161,6 +175,13 @@ export default function Menu() { ...@@ -161,6 +175,13 @@ export default function Menu() {
const { infoLink } = CHAIN_INFO[chainId ? chainId : SupportedChainId.MAINNET] const { infoLink } = CHAIN_INFO[chainId ? chainId : SupportedChainId.MAINNET]
const [darkMode, toggleDarkMode] = useDarkModeManager() const [darkMode, toggleDarkMode] = useDarkModeManager()
const [currentLocale, setLocale] = useUserLocaleManager()
const [menu, setMenu] = useState<'main' | 'lang'>('main')
useEffect(() => {
setMenu('main')
}, [open])
return ( return (
// https://github.com/DefinitelyTyped/DefinitelyTyped/issues/30451 // https://github.com/DefinitelyTyped/DefinitelyTyped/issues/30451
...@@ -169,49 +190,82 @@ export default function Menu() { ...@@ -169,49 +190,82 @@ export default function Menu() {
<StyledMenuIcon /> <StyledMenuIcon />
</StyledMenuButton> </StyledMenuButton>
{open && ( {open &&
<MenuFlyout> (() => {
<MenuItem href="https://uniswap.org/"> switch (menu) {
<div> case 'lang':
<Trans>About</Trans> return (
</div> <MenuFlyout>
<Info opacity={0.6} size={16} /> <ToggleMenuItem onClick={() => setMenu('main')}>
</MenuItem> <ChevronLeft size={16} />
<MenuItem href="https://docs.uniswap.org/"> </ToggleMenuItem>
<div> {SUPPORTED_LOCALES.map((locale) => (
<Trans>Docs</Trans> <ToggleMenuItem onClick={() => setLocale(locale)} key={locale}>
</div> <div>{LOCALE_LABEL[locale]}</div>
<BookOpen opacity={0.6} size={16} /> {currentLocale === locale && <Check opacity={0.6} size={16} />}
</MenuItem> </ToggleMenuItem>
<MenuItem href={CODE_LINK}> ))}
<div> </MenuFlyout>
<Trans>Code</Trans> )
</div> case 'main':
<Code opacity={0.6} size={16} /> default:
</MenuItem> return (
<MenuItem href="https://discord.gg/FCfyBSbCU5"> <MenuFlyout>
<div> <MenuItem href="https://uniswap.org/">
<Trans>Discord</Trans> <div>
</div> <Trans>About</Trans>
<MessageCircle opacity={0.6} size={16} /> </div>
</MenuItem> <Info opacity={0.6} size={16} />
<MenuItem href={infoLink}> </MenuItem>
<div> <MenuItem href="https://docs.uniswap.org/">
<Trans>Analytics</Trans> <div>
</div> <Trans>Docs</Trans>
<PieChart opacity={0.6} size={16} /> </div>
</MenuItem> <BookOpen opacity={0.6} size={16} />
<ToggleMenuItem onClick={() => toggleDarkMode()}> </MenuItem>
<div>{darkMode ? <Trans>Light Theme</Trans> : <Trans>Dark Theme</Trans>}</div> <MenuItem href={CODE_LINK}>
{darkMode ? <Moon opacity={0.6} size={16} /> : <Sun opacity={0.6} size={16} />} <div>
</ToggleMenuItem> <Trans>Code</Trans>
{showUNIClaimOption && ( </div>
<UNIbutton onClick={openClaimModal} padding="8px 16px" width="100%" $borderRadius="12px" mt="0.5rem"> <Code opacity={0.6} size={16} />
<Trans>Claim UNI</Trans> </MenuItem>
</UNIbutton> <MenuItem href="https://discord.gg/FCfyBSbCU5">
)} <div>
</MenuFlyout> <Trans>Discord</Trans>
)} </div>
<MessageCircle opacity={0.6} size={16} />
</MenuItem>
<MenuItem href={infoLink}>
<div>
<Trans>Analytics</Trans>
</div>
<PieChart opacity={0.6} size={16} />
</MenuItem>
<ToggleMenuItem onClick={() => setMenu('lang')}>
<div>
<Trans>Language</Trans>
</div>
<ChevronRight size={16} opacity={0.6} />
</ToggleMenuItem>
<ToggleMenuItem onClick={() => toggleDarkMode()}>
<div>{darkMode ? <Trans>Light Theme</Trans> : <Trans>Dark Theme</Trans>}</div>
{darkMode ? <Moon opacity={0.6} size={16} /> : <Sun opacity={0.6} size={16} />}
</ToggleMenuItem>
{showUNIClaimOption && (
<UNIbutton
onClick={openClaimModal}
padding="8px 16px"
width="100%"
$borderRadius="12px"
mt="0.5rem"
>
<Trans>Claim UNI</Trans>
</UNIbutton>
)}
</MenuFlyout>
)
}
})()}
</StyledMenu> </StyledMenu>
) )
} }
......
src/constants/locales.ts
View file @ 95d91c85
export const SUPPORTED_LOCALES = [ export const SUPPORTED_LOCALES = [
// order as they appear in the language dropdown
'en-US',
'af-ZA', 'af-ZA',
'ar-SA', 'ar-SA',
'ca-ES', 'ca-ES',
...@@ -6,7 +8,6 @@ export const SUPPORTED_LOCALES = [ ...@@ -6,7 +8,6 @@ export const SUPPORTED_LOCALES = [
'da-DK', 'da-DK',
'de-DE', 'de-DE',
'el-GR', 'el-GR',
'en-US',
'es-ES', 'es-ES',
'fi-FI', 'fi-FI',
'fr-FR', 'fr-FR',
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment