Pagename i18 support (#907)

* add i18 support for page

* add more cn translations
This commit is contained in:
Rozstone 2022-08-16 05:52:33 +08:00 committed by GitHub
parent 97b0b52a6e
commit 56747e67a5
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 5 deletions

View file

@ -22,6 +22,8 @@ const currentPageIdSelector = (s: TDSnapshot) => s.document.pages[s.appState.cur
export function PageMenu() { export function PageMenu() {
const app = useTldrawApp() const app = useTldrawApp()
const intl = useIntl()
const rIsOpen = React.useRef(false) const rIsOpen = React.useRef(false)
const [isOpen, setIsOpen] = React.useState(false) const [isOpen, setIsOpen] = React.useState(false)
@ -49,7 +51,7 @@ export function PageMenu() {
return ( return (
<DropdownMenu.Root dir="ltr" open={isOpen} onOpenChange={handleOpenChange}> <DropdownMenu.Root dir="ltr" open={isOpen} onOpenChange={handleOpenChange}>
<DropdownMenu.Trigger dir="ltr" asChild id="TD-Page"> <DropdownMenu.Trigger dir="ltr" asChild id="TD-Page">
<ToolButton variant="text">{currentPageName || 'Page'}</ToolButton> <ToolButton variant="text">{currentPageName || intl.formatMessage({ id: 'page' })}</ToolButton>
</DropdownMenu.Trigger> </DropdownMenu.Trigger>
<DMContent variant="menu" align="start" sideOffset={4}> <DMContent variant="menu" align="start" sideOffset={4}>
{isOpen && <PageMenuContent onClose={handleClose} />} {isOpen && <PageMenuContent onClose={handleClose} />}
@ -66,9 +68,11 @@ function PageMenuContent({ onClose }: { onClose: () => void }) {
const currentPageId = app.useStore(currentPageIdSelector) const currentPageId = app.useStore(currentPageIdSelector)
const defaultPageName = intl.formatMessage({ id: 'page' })
const handleCreatePage = React.useCallback(() => { const handleCreatePage = React.useCallback(() => {
const pageName = const pageName =
intl.formatMessage({ id: 'page' }) + ' ' + (Object.keys(app.document.pages).length + 1) defaultPageName + ' ' + (Object.keys(app.document.pages).length + 1)
app.createPage(undefined, pageName) app.createPage(undefined, pageName)
}, [app]) }, [app])
@ -125,7 +129,7 @@ function PageMenuContent({ onClose }: { onClose: () => void }) {
isDropBelow={dropIndex !== null && i === dropIndex - 1} isDropBelow={dropIndex !== null && i === dropIndex - 1}
> >
<DropdownMenu.RadioItem <DropdownMenu.RadioItem
title={page.name || 'Page'} title={page.name || defaultPageName}
value={page.id} value={page.id}
key={page.id} key={page.id}
id={page.id} id={page.id}
@ -137,7 +141,7 @@ function PageMenuContent({ onClose }: { onClose: () => void }) {
draggable={true} draggable={true}
> >
<PageButton> <PageButton>
<span id={page.id}>{page.name || 'Page'}</span> <span id={page.id}>{page.name || defaultPageName}</span>
<DropdownMenu.ItemIndicator> <DropdownMenu.ItemIndicator>
<SmallIcon> <SmallIcon>
<CheckIcon /> <CheckIcon />

View file

@ -10,16 +10,20 @@
"zoom.in": "放大", "zoom.in": "放大",
"zoom.out": "缩小", "zoom.out": "缩小",
"to": "缩放至", "to": "缩放至",
"menu.tools": "工具",
"menu.transform": "转换",
"menu.file": "文件", "menu.file": "文件",
"menu.edit": "编辑", "menu.edit": "编辑",
"menu.view": "视图", "menu.view": "视图",
"menu.preferences": "偏好", "menu.preferences": "偏好",
"menu.sign.in": "登录", "menu.sign.in": "登录",
"menu.sign.out": "登出", "menu.sign.out": "登出",
"search": "搜索",
"become.a.sponsor": "成为赞助者", "become.a.sponsor": "成为赞助者",
"zoom.to.selection": "缩放选中", "zoom.to.selection": "缩放选中",
"zoom.to.fit": "自适应缩放", "zoom.to.fit": "自适应缩放",
"zoom.to": "缩放至", "zoom.to": "缩放至",
"zoom.to.content": "缩放至内容",
"preferences.dark.mode": "暗黑模式", "preferences.dark.mode": "暗黑模式",
"preferences.focus.mode": "专注模式", "preferences.focus.mode": "专注模式",
"preferences.debug.mode": "调试模式", "preferences.debug.mode": "调试模式",
@ -97,5 +101,7 @@
"auto": "自动", "auto": "自动",
"light": "明亮", "light": "明亮",
"dark": "暗黑", "dark": "暗黑",
"copy.readonly.link": "复制只读链接" "copy.readonly.link": "复制只读链接",
"image": "图片",
"align.distribute": "对齐 / 分散"
} }