Added support for zh-CN locale.

This commit is contained in:
Mike Cao 2020-09-07 15:25:09 -07:00
parent e8538f6e23
commit 987fdfd57d
9 changed files with 168 additions and 124 deletions

View File

@ -43,13 +43,41 @@ export default function WebsiteDetails({ websiteId }) {
{ {
render: BackButton, render: BackButton,
}, },
{ label: 'Pages', value: 'url', component: PagesTable }, {
{ label: 'Referrers', value: 'referrer', component: ReferrersTable }, label: <FormattedMessage id="metrics.pages" defaultMessage="Pages" />,
{ label: 'Browsers', value: 'browser', component: BrowsersTable }, value: 'url',
{ label: 'Operating system', value: 'os', component: OSTable }, component: PagesTable,
{ label: 'Devices', value: 'device', component: DevicesTable }, },
{ label: 'Countries', value: 'country', component: CountriesTable }, {
{ label: 'Events', value: 'event', component: EventsTable }, label: <FormattedMessage id="metrics.browsers" defaultMessage="Browsers" />,
value: 'referrer',
component: ReferrersTable,
},
{
label: <FormattedMessage id="metrics.referrers" defaultMessage="Referrers" />,
value: 'browser',
component: BrowsersTable,
},
{
label: <FormattedMessage id="metrics.operating-system" defaultMessage="Operating system" />,
value: 'os',
component: OSTable,
},
{
label: <FormattedMessage id="metrics.devices" defaultMessage="Devices" />,
value: 'device',
component: DevicesTable,
},
{
label: <FormattedMessage id="metrics.countries" defaultMessage="Countries" />,
value: 'country',
component: CountriesTable,
},
{
label: <FormattedMessage id="metrics.events" defaultMessage="Events" />,
value: 'event',
component: EventsTable,
},
]; ];
const tableProps = { const tableProps = {

View File

@ -7,17 +7,21 @@ import Menu from './Menu';
import styles from './LanguageButton.module.css'; import styles from './LanguageButton.module.css';
import Button from './Button'; import Button from './Button';
const supportedLanguages = {
en: 'EN',
'zh-CN': '中文',
};
const menuOptions = [ const menuOptions = [
{ label: 'English', value: 'en' }, { label: 'English', value: 'en' },
{ label: '中文 (Chinese)', value: 'zh-CN' }, { label: '中文 (Chinese Simplified)', value: 'zh-CN' },
]; ];
export default function LanguageButton() { export default function LanguageButton({ menuPosition = 'bottom', menuAlign = 'left' }) {
const dispatch = useDispatch(); const dispatch = useDispatch();
const [showMenu, setShowMenu] = useState(false); const [showMenu, setShowMenu] = useState(false);
const locale = useSelector(state => state.app.locale); const locale = useSelector(state => state.app.locale);
const ref = useRef(); const ref = useRef();
const selectedLocale = menuOptions.find(e => e.value === locale)?.label.split(' ')[0];
function handleSelect(value) { function handleSelect(value) {
dispatch(updateApp({ locale: value })); dispatch(updateApp({ locale: value }));
@ -34,9 +38,16 @@ export default function LanguageButton() {
return ( return (
<div ref={ref} className={styles.container}> <div ref={ref} className={styles.container}>
<Button icon={<Globe />} onClick={() => setShowMenu(true)} size="small"> <Button icon={<Globe />} onClick={() => setShowMenu(true)} size="small">
<div>{selectedLocale}</div> <div>{supportedLanguages[locale]}</div>
</Button> </Button>
{showMenu && <Menu options={menuOptions} onSelect={handleSelect} float="top" />} {showMenu && (
<Menu
options={menuOptions}
onSelect={handleSelect}
float={menuPosition}
align={menuAlign}
/>
)}
</div> </div>
); );
} }

View File

@ -3,26 +3,21 @@ import { FormattedMessage } from 'react-intl';
import Link from 'next/link'; import Link from 'next/link';
import classNames from 'classnames'; import classNames from 'classnames';
import Button from 'components/common/Button'; import Button from 'components/common/Button';
import LanguageButton from 'components/common/LanguageButton';
import Logo from 'assets/logo.svg'; import Logo from 'assets/logo.svg';
import styles from './Footer.module.css'; import styles from './Footer.module.css';
export default function Footer() { export default function Footer() {
return ( return (
<footer className="container"> <footer className="container">
<div className={classNames(styles.footer, 'row')}> <div className={classNames(styles.footer, 'row justify-content-center')}>
<LanguageButton /> <FormattedMessage id="footer.powered-by" defaultMessage="powered by" />
<div className={styles.center}> <Link href="https://umami.is">
<FormattedMessage id="footer.powered-by" defaultMessage="powered by" /> <a>
<Link href="https://umami.is"> <Button className={styles.button} icon={<Logo />} size="small">
<a> <b>umami</b>
<Button icon={<Logo />} size="small"> </Button>
<b>umami</b> </a>
</Button> </Link>
</a>
</Link>
</div>
<div></div>
</div> </div>
</footer> </footer>
); );

View File

@ -6,16 +6,10 @@
min-height: 100px; min-height: 100px;
} }
.footer .center button {
margin-left: 10px;
}
.footer a { .footer a {
text-decoration: none; text-decoration: none;
} }
.center { .button {
display: flex; margin-left: 10px;
justify-content: center;
align-items: center;
} }

View File

@ -7,6 +7,7 @@ import UserButton from '../common/UserButton';
import Icon from '../common/Icon'; import Icon from '../common/Icon';
import Logo from 'assets/logo.svg'; import Logo from 'assets/logo.svg';
import styles from './Header.module.css'; import styles from './Header.module.css';
import LanguageButton from '../common/LanguageButton';
export default function Header() { export default function Header() {
const user = useSelector(state => state.user); const user = useSelector(state => state.user);
@ -20,19 +21,24 @@ export default function Header() {
<Link href={user ? '/' : 'https://umami.is'}>umami</Link> <Link href={user ? '/' : 'https://umami.is'}>umami</Link>
</div> </div>
</div> </div>
{user && ( <div className="col-12 col-md-6">
<div className="col-12 col-md-6"> <div className={styles.nav}>
<div className={styles.nav}> {user ? (
<Link href="/dashboard"> <>
<FormattedMessage id="header.nav.dashboard" defaultMessage="Dashboard" /> <Link href="/dashboard">
</Link> <FormattedMessage id="header.nav.dashboard" defaultMessage="Dashboard" />
<Link href="/settings"> </Link>
<FormattedMessage id="header.nav.settings" defaultMessage="Settings" /> <Link href="/settings">
</Link> <FormattedMessage id="header.nav.settings" defaultMessage="Settings" />
<UserButton /> </Link>
</div> <LanguageButton menuAlign="right" />
<UserButton />
</>
) : (
<LanguageButton menuAlign="right" />
)}
</div> </div>
)} </div>
</div> </div>
</header> </header>
); );

View File

@ -13,6 +13,10 @@ export default function Layout({ title, children, header = true, footer = true }
href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap" href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<link
href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap"
rel="stylesheet"
/>
</Head> </Head>
{header && <Header />} {header && <Header />}
<main className="container">{children}</main> <main className="container">{children}</main>

View File

@ -1,233 +1,233 @@
{ {
"active-users.message": { "active-users.message": {
"defaultMessage": "xx {x} current {x, plural, one {visitor} other {visitors}}" "defaultMessage": "当前在线 {x} 人"
}, },
"button.add-account": { "button.add-account": {
"defaultMessage": "xx Add account" "defaultMessage": "添加账户"
}, },
"button.add-website": { "button.add-website": {
"defaultMessage": "xx Add website" "defaultMessage": "添加网站"
}, },
"button.back": { "button.back": {
"defaultMessage": "xx Back" "defaultMessage": "返回"
}, },
"button.cancel": { "button.cancel": {
"defaultMessage": "xx Cancel" "defaultMessage": "取消"
}, },
"button.change-password": { "button.change-password": {
"defaultMessage": "xx Change password" "defaultMessage": "更新密码"
}, },
"button.copy-to-clipboard": { "button.copy-to-clipboard": {
"defaultMessage": "xx Copy to clipboard" "defaultMessage": "复制"
}, },
"button.delete": { "button.delete": {
"defaultMessage": "xx Delete" "defaultMessage": "删除"
}, },
"button.edit": { "button.edit": {
"defaultMessage": "xx Edit" "defaultMessage": "编辑"
}, },
"button.login": { "button.login": {
"defaultMessage": "xx Login" "defaultMessage": "登录"
}, },
"button.more": { "button.more": {
"defaultMessage": "xx More" "defaultMessage": "更多"
}, },
"button.save": { "button.save": {
"defaultMessage": "xx Save" "defaultMessage": "保存"
}, },
"button.view-details": { "button.view-details": {
"defaultMessage": "xx View details" "defaultMessage": "查看更多"
}, },
"footer.powered-by": { "footer.powered-by": {
"defaultMessage": "xx powered by" "defaultMessage": "运行"
}, },
"header.nav.dashboard": { "header.nav.dashboard": {
"defaultMessage": "xx Dashboard" "defaultMessage": "仪表板"
}, },
"header.nav.settings": { "header.nav.settings": {
"defaultMessage": "xx Settings" "defaultMessage": "设置"
}, },
"label.adminsitrator": { "label.adminsitrator": {
"defaultMessage": "xx Administrator" "defaultMessage": "管理员"
}, },
"label.confirm-password": { "label.confirm-password": {
"defaultMessage": "xx Confirm password" "defaultMessage": "确认密码"
}, },
"label.current-password": { "label.current-password": {
"defaultMessage": "xx Current password" "defaultMessage": "目前密码"
}, },
"label.domain": { "label.domain": {
"defaultMessage": "xx Domain" "defaultMessage": "域名"
}, },
"label.enable-share-url": { "label.enable-share-url": {
"defaultMessage": "xx Enable share URL" "defaultMessage": "激活共享链接"
}, },
"label.invalid": { "label.invalid": {
"defaultMessage": "xx Invalid" "defaultMessage": "输入无效"
}, },
"label.invalid-domain": { "label.invalid-domain": {
"defaultMessage": "xx Invalid domain" "defaultMessage": "无效域名"
}, },
"label.last-days": { "label.last-days": {
"defaultMessage": "xx Last {x} days" "defaultMessage": "最近 {x} 天"
}, },
"label.last-hours": { "label.last-hours": {
"defaultMessage": "xx Last {x} hours" "defaultMessage": "最近 {x} 小时"
}, },
"label.logged-in-as": { "label.logged-in-as": {
"defaultMessage": "xx Logged in as {username}" "defaultMessage": "登录名: {username}"
}, },
"label.logout": { "label.logout": {
"defaultMessage": "xx Logout" "defaultMessage": "退出"
}, },
"label.name": { "label.name": {
"defaultMessage": "xx Name" "defaultMessage": "名字"
}, },
"label.new-password": { "label.new-password": {
"defaultMessage": "xx New password" "defaultMessage": "新密码"
}, },
"label.password": { "label.password": {
"defaultMessage": "xx Password" "defaultMessage": "密码"
}, },
"label.passwords-dont-match": { "label.passwords-dont-match": {
"defaultMessage": "xx Passwords don't match" "defaultMessage": "密码不一致"
}, },
"label.required": { "label.required": {
"defaultMessage": "xx Required" "defaultMessage": "必填"
}, },
"label.this-month": { "label.this-month": {
"defaultMessage": "xx This month" "defaultMessage": "本月"
}, },
"label.this-week": { "label.this-week": {
"defaultMessage": "xx This week" "defaultMessage": "本周"
}, },
"label.this-year": { "label.this-year": {
"defaultMessage": "xx This year" "defaultMessage": "今年"
}, },
"label.today": { "label.today": {
"defaultMessage": "xx Today" "defaultMessage": "今天"
}, },
"label.username": { "label.username": {
"defaultMessage": "xx Username" "defaultMessage": "用户名"
}, },
"message.confirm-delete": { "message.confirm-delete": {
"defaultMessage": "xx Are your sure you want to delete {target}?" "defaultMessage": "你确定要删除{target}吗?"
}, },
"message.copied": { "message.copied": {
"defaultMessage": "xx Copied!" "defaultMessage": "复制成功!"
}, },
"message.delete-warning": { "message.delete-warning": {
"defaultMessage": "xx All associated data will be deleted as well." "defaultMessage": "所有相关数据将会被删除."
}, },
"message.failure": { "message.failure": {
"defaultMessage": "xx Something went wrong." "defaultMessage": "出现错误."
}, },
"message.save-success": { "message.save-success": {
"defaultMessage": "xx Saved successfully." "defaultMessage": "成功保存."
}, },
"message.share-url": { "message.share-url": {
"defaultMessage": "xx This is the publicly shared URL for {target}." "defaultMessage": "这是 {target} 的共享链接."
}, },
"message.track-stats": { "message.track-stats": {
"defaultMessage": "xx To track stats for {target}, place the following code in the {head} section of your website." "defaultMessage": "把以下代码放到你的网站的{head}部分来收集{target}的数据."
}, },
"message.type-delete": { "message.type-delete": {
"defaultMessage": "xx Type {delete} in the box below to confirm." "defaultMessage": "在下面空格输入{delete}确认"
}, },
"metrics.actions": { "metrics.actions": {
"defaultMessage": "xx Actions" "defaultMessage": "用户行为"
}, },
"metrics.average-visit-time": { "metrics.average-visit-time": {
"defaultMessage": "xx Average visit time" "defaultMessage": "停留时间"
}, },
"metrics.bounce-rate": { "metrics.bounce-rate": {
"defaultMessage": "xx Bounce rate" "defaultMessage": "跳出率"
}, },
"metrics.browsers": { "metrics.browsers": {
"defaultMessage": "xx Browsers" "defaultMessage": "浏览器"
}, },
"metrics.countries": { "metrics.countries": {
"defaultMessage": "xx Countries" "defaultMessage": "国家"
}, },
"metrics.devices": { "metrics.devices": {
"defaultMessage": "xx Devices" "defaultMessage": "设备"
}, },
"metrics.events": { "metrics.events": {
"defaultMessage": "xx Events" "defaultMessage": "行为类别"
}, },
"metrics.filter.combined": { "metrics.filter.combined": {
"defaultMessage": "xx Combined" "defaultMessage": "总和"
}, },
"metrics.filter.domain-only": { "metrics.filter.domain-only": {
"defaultMessage": "xx Domain only" "defaultMessage": "只看域名"
}, },
"metrics.filter.raw": { "metrics.filter.raw": {
"defaultMessage": "xx Raw" "defaultMessage": "原始"
}, },
"metrics.operating-system": { "metrics.operating-system": {
"defaultMessage": "xx Operating System" "defaultMessage": "操作系统"
}, },
"metrics.page-views": { "metrics.page-views": {
"defaultMessage": "xx Page views" "defaultMessage": "访问量"
}, },
"metrics.pages": { "metrics.pages": {
"defaultMessage": "xx Pages" "defaultMessage": "网页"
}, },
"metrics.referrers": { "metrics.referrers": {
"defaultMessage": "xx Referrers" "defaultMessage": "来源"
}, },
"metrics.unique-visitors": { "metrics.unique-visitors": {
"defaultMessage": "xx Unique visitors" "defaultMessage": "访问者"
}, },
"metrics.views": { "metrics.views": {
"defaultMessage": "xx Views" "defaultMessage": "访问量"
}, },
"metrics.visitors": { "metrics.visitors": {
"defaultMessage": "xx Visitors" "defaultMessage": "访问者"
}, },
"placeholder.message.go-to-settings": { "placeholder.message.go-to-settings": {
"defaultMessage": "xx Go to settings" "defaultMessage": "去设置"
}, },
"placeholder.message.no-websites-configured": { "placeholder.message.no-websites-configured": {
"defaultMessage": "xx You don't have any websites configured." "defaultMessage": "你还没有设置任何网站."
}, },
"settings.accounts": { "settings.accounts": {
"defaultMessage": "xx Accounts" "defaultMessage": "账户"
}, },
"settings.profile": { "settings.profile": {
"defaultMessage": "xx Profile" "defaultMessage": "个人资料"
}, },
"settings.websites": { "settings.websites": {
"defaultMessage": "xx Websites" "defaultMessage": "网站"
}, },
"title.add-account": { "title.add-account": {
"defaultMessage": "xx Add account" "defaultMessage": "添加账户"
}, },
"title.add-website": { "title.add-website": {
"defaultMessage": "xx Add website" "defaultMessage": "A添加网站"
}, },
"title.delete-account": { "title.delete-account": {
"defaultMessage": "xx Delete account" "defaultMessage": "删除账户"
}, },
"title.delete-website": { "title.delete-website": {
"defaultMessage": "xx Delete website" "defaultMessage": "删除网站"
}, },
"title.edit-account": { "title.edit-account": {
"defaultMessage": "xx Edit account" "defaultMessage": "编辑账户"
}, },
"title.edit-website": { "title.edit-website": {
"defaultMessage": "xx Edit website" "defaultMessage": "编辑网站"
}, },
"title.share-url": { "title.share-url": {
"defaultMessage": "xx Share URL" "defaultMessage": "共享链接"
}, },
"title.tracking-code": { "title.tracking-code": {
"defaultMessage": "xx Tracking code" "defaultMessage": "跟踪代码"
}, },
"tooltip.get-share-url": { "tooltip.get-share-url": {
"defaultMessage": "xx Get share URL" "defaultMessage": "获得共享链接"
}, },
"tooltip.get-tracking-code": { "tooltip.get-tracking-code": {
"defaultMessage": "xx Get tracking code" "defaultMessage": "获得跟踪代码"
} }
} }

View File

@ -18,6 +18,8 @@ const Intl = ({ children }) => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const locale = useSelector(state => state.app.locale); const locale = useSelector(state => state.app.locale);
const Wrapper = ({ children }) => <span className={locale}>{children}</span>;
useEffect(() => { useEffect(() => {
const saved = localStorage.getItem('locale'); const saved = localStorage.getItem('locale');
if (saved) { if (saved) {
@ -26,7 +28,7 @@ const Intl = ({ children }) => {
}); });
return ( return (
<IntlProvider locale={locale} messages={messages[locale]}> <IntlProvider locale={locale} messages={messages[locale]} textComponent={Wrapper}>
{children} {children}
</IntlProvider> </IntlProvider>
); );

View File

@ -13,6 +13,10 @@ body {
background: var(--gray75); background: var(--gray75);
} }
.zh-CN {
font-family: 'Noto Sans SC', sans-serif !important;
}
*, *,
*:before, *:before,
*:after { *:after {