Jayden/AFFiNE-Mirror
0
0
Fork 0
mirror of https://github.com/toeverything/AFFiNE.git synced 2026-08-10 05:29:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(collections): completion i18n

Browse Source
This commit is contained in:
zzj3720
2023-10-30 16:54:19 +08:00
parent 72babe9157
commit f23ec9063c
4 changed files with 95 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/frontend/component/src/components/page-list/view/create-collection.tsx
+5 -4
View File
@@ -90,19 +90,20 @@ export const CreateCollection = ({
return ( return (
<div> <div>
<div className={styles.content}> <div className={styles.content}>
<div className={styles.label}>Name</div> <div className={styles.label}>
{t['com.affine.editCollectionName.name']()}
</div>
<Input <Input
autoFocus autoFocus
value={value} value={value}
data-testid="input-collection-title" data-testid="input-collection-title"
placeholder="Collection Name" placeholder={t['com.affine.editCollectionName.name.placeholder']()}
onChange={useCallback((value: string) => onChange(value), [onChange])} onChange={useCallback((value: string) => onChange(value), [onChange])}
onEnter={save} onEnter={save}
></Input> ></Input>
{showTips ? ( {showTips ? (
<div className={styles.createTips}> <div className={styles.createTips}>
Collection is a smart folder where you can manually add pages or {t['com.affine.editCollectionName.createTips']()}
automatically add pages through rules.
</div> </div>
) : null} ) : null}
</div> </div>
packages/frontend/component/src/components/page-list/view/edit-collection.tsx
+42 -30
View File
@@ -229,6 +229,7 @@ const RulesMode = ({
); );
}, [open, updateCollection, collection]); }, [open, updateCollection, collection]);
const [expandInclude, setExpandInclude] = useState(false); const [expandInclude, setExpandInclude] = useState(false);
const count = allowListPages.length + rulesPages.length;
return ( return (
<> <>
<div className={clsx(styles.rulesTitle, styles.ellipsis)}> <div className={clsx(styles.rulesTitle, styles.ellipsis)}>
@@ -334,16 +335,20 @@ const RulesMode = ({
) : ( ) : (
<PageIcon style={{ width: 16, height: 16 }} /> <PageIcon style={{ width: 16, height: 16 }} />
)} )}
Page {t[
'com.affine.editCollection.rules.include.page'
]()}
</div>
<div className={styles.includeItemContentIs}>
{t['com.affine.editCollection.rules.include.is']()}
</div> </div>
<div className={styles.includeItemContentIs}>is</div>
<div <div
className={clsx( className={clsx(
styles.includeItemTitle, styles.includeItemTitle,
styles.ellipsis styles.ellipsis
)} )}
> >
{page?.title || 'Untitled'} {page?.title || t['Untitled']()}
</div> </div>
</div> </div>
<CloseIcon <CloseIcon
@@ -368,7 +373,7 @@ const RulesMode = ({
<div <div
style={{ color: 'var(--affine-text-secondary-color)' }} style={{ color: 'var(--affine-text-secondary-color)' }}
> >
Add include page {t['com.affine.editCollection.rules.include.add']()}
</div> </div>
</div> </div>
</div> </div>
@@ -396,7 +401,7 @@ const RulesMode = ({
justifyContent: 'space-between', justifyContent: 'space-between',
}} }}
> >
<div>HELP INFO</div> <div>{t['com.affine.collection.helpInfo']()}</div>
<CloseIcon <CloseIcon
color="var(--affine-icon-color)" color="var(--affine-icon-color)"
onClick={hideTips} onClick={hideTips}
@@ -405,14 +410,9 @@ const RulesMode = ({
/> />
</div> </div>
<div style={{ marginBottom: 10, fontWeight: 600 }}> <div style={{ marginBottom: 10, fontWeight: 600 }}>
What is &quot;Include&quot;？ {t['com.affine.editCollection.rules.include.tipsTitle']()}
</div>
<div>
&quot;Include&quot; refers to manually adding pages rather
than automatically adding them through rule matching. You can
manually add pages through the &quot;Add pages&quot; option or
by dragging and dropping (coming soon).
</div> </div>
<div>{t['com.affine.editCollection.rules.include.tips']()}</div>
</div> </div>
) : null} ) : null}
</div> </div>
@@ -463,20 +463,29 @@ const RulesMode = ({
setShowPreview(!showPreview); setShowPreview(!showPreview);
}} }}
> >
Preview {t['com.affine.editCollection.rules.preview']()}
</div> </div>
<div <div
className={clsx(styles.button, styles.bottomButton)} className={clsx(styles.button, styles.bottomButton)}
onClick={reset} onClick={reset}
> >
Reset {t['com.affine.editCollection.rules.reset']()}
</div> </div>
<div className={styles.previewCountTips}> <div className={styles.previewCountTips}>
After searching, there are currently{' '} <Trans
<span className={styles.previewCountTipsHighlight}> i18nKey={
{allowListPages.length + rulesPages.length} count === 0
</span>{' '} ? 'com.affine.editCollection.rules.countTips.zero'
pages. : count === 1
? 'com.affine.editCollection.rules.countTips.one'
: 'com.affine.editCollection.rules.countTips.more'
}
values={{ count: count }}
>
After searching, there are currently
<span className={styles.previewCountTipsHighlight}>count</span>
pages.
</Trans>
</div> </div>
</div> </div>
<div style={{ display: 'flex', alignItems: 'center' }}>{buttons}</div> <div style={{ display: 'flex', alignItems: 'center' }}>{buttons}</div>
@@ -622,7 +631,7 @@ const PagesMode = ({
<div className={styles.pagesBottom}> <div className={styles.pagesBottom}>
<div className={styles.pagesBottomLeft}> <div className={styles.pagesBottomLeft}>
<div className={styles.selectedCountTips}> <div className={styles.selectedCountTips}>
Selected {t['com.affine.selectPage.selected']()}
<span <span
style={{ marginLeft: 7 }} style={{ marginLeft: 7 }}
className={styles.previewCountTipsHighlight} className={styles.previewCountTipsHighlight}
@@ -683,7 +692,7 @@ const SelectPage = ({
<div className={styles.pagesTab}> <div className={styles.pagesTab}>
<div className={styles.pagesTabContent}> <div className={styles.pagesTabContent}>
<div style={{ fontSize: 12, lineHeight: '20px', fontWeight: 600 }}> <div style={{ fontSize: 12, lineHeight: '20px', fontWeight: 600 }}>
Add include page {t['com.affine.selectPage.title']()}
</div> </div>
{!showFilter && filters.length === 0 ? ( {!showFilter && filters.length === 0 ? (
<Menu <Menu
@@ -743,7 +752,7 @@ const SelectPage = ({
<div className={styles.pagesBottom}> <div className={styles.pagesBottom}>
<div className={styles.pagesBottomLeft}> <div className={styles.pagesBottomLeft}>
<div className={styles.selectedCountTips}> <div className={styles.selectedCountTips}>
Selected {t['com.affine.selectPage.selected']()}
<span <span
style={{ marginLeft: 7 }} style={{ marginLeft: 7 }}
className={styles.previewCountTipsHighlight} className={styles.previewCountTipsHighlight}
@@ -770,7 +779,7 @@ const SelectPage = ({
type="primary" type="primary"
onClick={confirm} onClick={confirm}
> >
Confirm {t['Confirm']()}
</Button> </Button>
</div> </div>
</div> </div>
@@ -874,6 +883,7 @@ const useSearch = (list: PageMeta[]) => {
}; };
}; };
const EmptyList = ({ search }: { search?: string }) => { const EmptyList = ({ search }: { search?: string }) => {
const t = useAFFiNEI18N();
return ( return (
<div <div
style={{ style={{
@@ -893,19 +903,21 @@ const EmptyList = ({ search }: { search?: string }) => {
fontWeight: 600, fontWeight: 600,
}} }}
> >
Empty {t['com.affine.selectPage.empty']()}
</div> </div>
{search ? ( {search ? (
<div <div
className={styles.ellipsis} className={styles.ellipsis}
style={{ maxWidth: 300, fontSize: 15, lineHeight: '24px' }} style={{ maxWidth: 300, fontSize: 15, lineHeight: '24px' }}
> >
No page titles contain{' '} <Trans i18nKey="com.affine.selectPage.empty.tips" values={{ search }}>
<span No page titles contain
style={{ fontWeight: 600, color: 'var(--affine-primary-color)' }} <span
> style={{ fontWeight: 600, color: 'var(--affine-primary-color)' }}
{search} >
</span> search
</span>
</Trans>
</div> </div>
) : null} ) : null}
</div> </div>
packages/frontend/core/src/pages/workspace/collection.tsx
+23 -13
View File
@@ -6,6 +6,8 @@ import {
useEditCollection, useEditCollection,
} from '@affine/component/page-list'; } from '@affine/component/page-list';
import type { Collection } from '@affine/env/filter'; import type { Collection } from '@affine/env/filter';
import { Trans } from '@affine/i18n';
import { useAFFiNEI18N } from '@affine/i18n/hooks';
import { import {
CloseIcon, CloseIcon,
FilterIcon, FilterIcon,
@@ -104,6 +106,7 @@ const Placeholder = ({ collection }: { collection: Collection }) => {
setShowTips(false); setShowTips(false);
localStorage.setItem('hide-empty-collection-help-info', 'true'); localStorage.setItem('hide-empty-collection-help-info', 'true');
}, []); }, []);
const t = useAFFiNEI18N();
return ( return (
<div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}> <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
<div <div
@@ -123,7 +126,7 @@ const Placeholder = ({ collection }: { collection: Collection }) => {
}} }}
> >
<ViewLayersIcon style={{ color: 'var(--affine-icon-color)' }} /> <ViewLayersIcon style={{ color: 'var(--affine-icon-color)' }} />
All Collections {t['com.affine.collection.allCollections']()}
<div>/</div> <div>/</div>
</div> </div>
<div <div
@@ -162,7 +165,7 @@ const Placeholder = ({ collection }: { collection: Collection }) => {
color: 'var(--affine-text-primary-color)', color: 'var(--affine-text-primary-color)',
}} }}
> >
Empty Collection {t['com.affine.collection.emptyCollection']()}
</div> </div>
<div <div
style={{ style={{
@@ -172,8 +175,7 @@ const Placeholder = ({ collection }: { collection: Collection }) => {
textAlign: 'center', textAlign: 'center',
}} }}
> >
Collection is a smart folder where you can manually add pages or {t['com.affine.collection.emptyCollectionDescription']()}
automatically add pages through rules.
</div> </div>
<div <div
style={{ style={{
@@ -192,7 +194,9 @@ const Placeholder = ({ collection }: { collection: Collection }) => {
color: 'var(--affine-icon-color)', color: 'var(--affine-icon-color)',
}} }}
/> />
<span style={{ padding: '0 4px' }}>Add Pages</span> <span style={{ padding: '0 4px' }}>
{t['com.affine.collection.addPages']()}
</span>
</div> </div>
<div onClick={openRuleEdit} className={styles.placeholderButton}> <div onClick={openRuleEdit} className={styles.placeholderButton}>
<FilterIcon <FilterIcon
@@ -202,7 +206,9 @@ const Placeholder = ({ collection }: { collection: Collection }) => {
color: 'var(--affine-icon-color)', color: 'var(--affine-icon-color)',
}} }}
/> />
<span style={{ padding: '0 4px' }}>Add Rules</span> <span style={{ padding: '0 4px' }}>
{t['com.affine.collection.addRules']()}
</span>
</div> </div>
</div> </div>
</div> </div>
@@ -230,7 +236,7 @@ const Placeholder = ({ collection }: { collection: Collection }) => {
justifyContent: 'space-between', justifyContent: 'space-between',
}} }}
> >
<div>HELP INFO</div> <div>{t['com.affine.collection.helpInfo']()}</div>
<CloseIcon <CloseIcon
className={styles.button} className={styles.button}
style={{ width: 16, height: 16 }} style={{ width: 16, height: 16 }}
@@ -247,14 +253,18 @@ const Placeholder = ({ collection }: { collection: Collection }) => {
}} }}
> >
<div> <div>
<span style={{ fontWeight: 600 }}>Add pages:</span> You can <Trans i18nKey="com.affine.collection.addPages.tips">
freely select pages and add them to the collection. <span style={{ fontWeight: 600 }}>Add pages:</span> You can
freely select pages and add them to the collection.
</Trans>
</div> </div>
<div> <div>
<span style={{ fontWeight: 600 }}>Add rules:</span> Rules are <Trans i18nKey="com.affine.collection.addRules.tips">
based on filtering. After adding rules, pages that meet the <span style={{ fontWeight: 600 }}>Add rules:</span> Rules are
requirements will be automatically added to the current based on filtering. After adding rules, pages that meet the
collection. requirements will be automatically added to the current
collection.
</Trans>
</div> </div>
</div> </div>
</div> </div>
packages/frontend/i18n/src/resources/en.json
+25
View File
@@ -396,6 +396,31 @@
"com.affine.page.group-header.select-all": "Select All", "com.affine.page.group-header.select-all": "Select All",
"com.affine.page.toolbar.selected_one": "<0>{{count}}</0> page selected", "com.affine.page.toolbar.selected_one": "<0>{{count}}</0> page selected",
"com.affine.page.toolbar.selected_others": "<0>{{count}}</0> page(s) selected", "com.affine.page.toolbar.selected_others": "<0>{{count}}</0> page(s) selected",
"com.affine.collection.allCollections": "All Collections",
"com.affine.collection.emptyCollection": "Empty Collection",
"com.affine.collection.emptyCollectionDescription": "Collection is a smart folder where you can manually add pages or automatically add pages through rules.",
"com.affine.collection.addPages": "Add Pages",
"com.affine.collection.addPages.tips": "<0>Add pages:</0> You can freely select pages and add them to the collection.",
"com.affine.collection.addRules": "Add Rules",
"com.affine.collection.addRules.tips": "<0>Add rules:</0> Rules are based on filtering. After adding rules, pages that meet the requirements will be automatically added to the current collection.",
"com.affine.collection.helpInfo": "HELP INFO",
"com.affine.editCollectionName.name": "Name",
"com.affine.editCollectionName.name.placeholder": "Collection Name",
"com.affine.editCollectionName.createTips": "Collection is a smart folder where you can manually add pages or automatically add pages through rules.",
"com.affine.editCollection.rules.include.page": "Page",
"com.affine.editCollection.rules.include.is": "is",
"com.affine.editCollection.rules.include.add": "Add include page",
"com.affine.editCollection.rules.include.tipsTitle": "What is \"Include\"？",
"com.affine.editCollection.rules.include.tips": "\"Include\" refers to manually adding pages rather than automatically adding them through rule matching. You can manually add pages through the \"Add pages\" option or by dragging and dropping (coming soon).",
"com.affine.editCollection.rules.preview": "Preview",
"com.affine.editCollection.rules.reset": "Reset",
"com.affine.editCollection.rules.countTips.zero": "Showing <1>{{count}}</1> pages.",
"com.affine.editCollection.rules.countTips.one": "Showing <1>{{count}}</1> page.",
"com.affine.editCollection.rules.countTips.more": "Showing <1>{{count}}</1> pages.",
"com.affine.selectPage.title": "Add include page",
"com.affine.selectPage.selected": "Selected",
"com.affine.selectPage.empty": "Empty",
"com.affine.selectPage.empty.tips": "No page titles contain <1>{{search}}</1>",
"Confirm": "Confirm", "Confirm": "Confirm",
"Connector": "Connector", "Connector": "Connector",
"Continue with Google": "Continue with Google", "Continue with Google": "Continue with Google",