feat(collections): completion i18n

This commit is contained in:
zzj3720 2023-10-30 16:54:19 +08:00
parent 72babe9157
commit f23ec9063c
No known key found for this signature in database
4 changed files with 95 additions and 47 deletions

View File

@ -90,19 +90,20 @@ export const CreateCollection = ({
return (
<div>
<div className={styles.content}>
<div className={styles.label}>Name</div>
<div className={styles.label}>
{t['com.affine.editCollectionName.name']()}
</div>
<Input
autoFocus
value={value}
data-testid="input-collection-title"
placeholder="Collection Name"
placeholder={t['com.affine.editCollectionName.name.placeholder']()}
onChange={useCallback((value: string) => onChange(value), [onChange])}
onEnter={save}
></Input>
{showTips ? (
<div className={styles.createTips}>
Collection is a smart folder where you can manually add pages or
automatically add pages through rules.
{t['com.affine.editCollectionName.createTips']()}
</div>
) : null}
</div>

View File

@ -229,6 +229,7 @@ const RulesMode = ({
);
}, [open, updateCollection, collection]);
const [expandInclude, setExpandInclude] = useState(false);
const count = allowListPages.length + rulesPages.length;
return (
<>
<div className={clsx(styles.rulesTitle, styles.ellipsis)}>
@ -334,16 +335,20 @@ const RulesMode = ({
) : (
<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 className={styles.includeItemContentIs}>is</div>
<div
className={clsx(
styles.includeItemTitle,
styles.ellipsis
)}
>
{page?.title || 'Untitled'}
{page?.title || t['Untitled']()}
</div>
</div>
<CloseIcon
@ -368,7 +373,7 @@ const RulesMode = ({
<div
style={{ color: 'var(--affine-text-secondary-color)' }}
>
Add include page
{t['com.affine.editCollection.rules.include.add']()}
</div>
</div>
</div>
@ -396,7 +401,7 @@ const RulesMode = ({
justifyContent: 'space-between',
}}
>
<div>HELP INFO</div>
<div>{t['com.affine.collection.helpInfo']()}</div>
<CloseIcon
color="var(--affine-icon-color)"
onClick={hideTips}
@ -405,14 +410,9 @@ const RulesMode = ({
/>
</div>
<div style={{ marginBottom: 10, fontWeight: 600 }}>
What is &quot;Include&quot;
</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).
{t['com.affine.editCollection.rules.include.tipsTitle']()}
</div>
<div>{t['com.affine.editCollection.rules.include.tips']()}</div>
</div>
) : null}
</div>
@ -463,20 +463,29 @@ const RulesMode = ({
setShowPreview(!showPreview);
}}
>
Preview
{t['com.affine.editCollection.rules.preview']()}
</div>
<div
className={clsx(styles.button, styles.bottomButton)}
onClick={reset}
>
Reset
{t['com.affine.editCollection.rules.reset']()}
</div>
<div className={styles.previewCountTips}>
After searching, there are currently{' '}
<span className={styles.previewCountTipsHighlight}>
{allowListPages.length + rulesPages.length}
</span>{' '}
pages.
<Trans
i18nKey={
count === 0
? 'com.affine.editCollection.rules.countTips.zero'
: 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 style={{ display: 'flex', alignItems: 'center' }}>{buttons}</div>
@ -622,7 +631,7 @@ const PagesMode = ({
<div className={styles.pagesBottom}>
<div className={styles.pagesBottomLeft}>
<div className={styles.selectedCountTips}>
Selected
{t['com.affine.selectPage.selected']()}
<span
style={{ marginLeft: 7 }}
className={styles.previewCountTipsHighlight}
@ -683,7 +692,7 @@ const SelectPage = ({
<div className={styles.pagesTab}>
<div className={styles.pagesTabContent}>
<div style={{ fontSize: 12, lineHeight: '20px', fontWeight: 600 }}>
Add include page
{t['com.affine.selectPage.title']()}
</div>
{!showFilter && filters.length === 0 ? (
<Menu
@ -743,7 +752,7 @@ const SelectPage = ({
<div className={styles.pagesBottom}>
<div className={styles.pagesBottomLeft}>
<div className={styles.selectedCountTips}>
Selected
{t['com.affine.selectPage.selected']()}
<span
style={{ marginLeft: 7 }}
className={styles.previewCountTipsHighlight}
@ -770,7 +779,7 @@ const SelectPage = ({
type="primary"
onClick={confirm}
>
Confirm
{t['Confirm']()}
</Button>
</div>
</div>
@ -874,6 +883,7 @@ const useSearch = (list: PageMeta[]) => {
};
};
const EmptyList = ({ search }: { search?: string }) => {
const t = useAFFiNEI18N();
return (
<div
style={{
@ -893,19 +903,21 @@ const EmptyList = ({ search }: { search?: string }) => {
fontWeight: 600,
}}
>
Empty
{t['com.affine.selectPage.empty']()}
</div>
{search ? (
<div
className={styles.ellipsis}
style={{ maxWidth: 300, fontSize: 15, lineHeight: '24px' }}
>
No page titles contain{' '}
<span
style={{ fontWeight: 600, color: 'var(--affine-primary-color)' }}
>
{search}
</span>
<Trans i18nKey="com.affine.selectPage.empty.tips" values={{ search }}>
No page titles contain
<span
style={{ fontWeight: 600, color: 'var(--affine-primary-color)' }}
>
search
</span>
</Trans>
</div>
) : null}
</div>

View File

@ -6,6 +6,8 @@ import {
useEditCollection,
} from '@affine/component/page-list';
import type { Collection } from '@affine/env/filter';
import { Trans } from '@affine/i18n';
import { useAFFiNEI18N } from '@affine/i18n/hooks';
import {
CloseIcon,
FilterIcon,
@ -104,6 +106,7 @@ const Placeholder = ({ collection }: { collection: Collection }) => {
setShowTips(false);
localStorage.setItem('hide-empty-collection-help-info', 'true');
}, []);
const t = useAFFiNEI18N();
return (
<div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
<div
@ -123,7 +126,7 @@ const Placeholder = ({ collection }: { collection: Collection }) => {
}}
>
<ViewLayersIcon style={{ color: 'var(--affine-icon-color)' }} />
All Collections
{t['com.affine.collection.allCollections']()}
<div>/</div>
</div>
<div
@ -162,7 +165,7 @@ const Placeholder = ({ collection }: { collection: Collection }) => {
color: 'var(--affine-text-primary-color)',
}}
>
Empty Collection
{t['com.affine.collection.emptyCollection']()}
</div>
<div
style={{
@ -172,8 +175,7 @@ const Placeholder = ({ collection }: { collection: Collection }) => {
textAlign: 'center',
}}
>
Collection is a smart folder where you can manually add pages or
automatically add pages through rules.
{t['com.affine.collection.emptyCollectionDescription']()}
</div>
<div
style={{
@ -192,7 +194,9 @@ const Placeholder = ({ collection }: { collection: Collection }) => {
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 onClick={openRuleEdit} className={styles.placeholderButton}>
<FilterIcon
@ -202,7 +206,9 @@ const Placeholder = ({ collection }: { collection: Collection }) => {
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>
@ -230,7 +236,7 @@ const Placeholder = ({ collection }: { collection: Collection }) => {
justifyContent: 'space-between',
}}
>
<div>HELP INFO</div>
<div>{t['com.affine.collection.helpInfo']()}</div>
<CloseIcon
className={styles.button}
style={{ width: 16, height: 16 }}
@ -247,14 +253,18 @@ const Placeholder = ({ collection }: { collection: Collection }) => {
}}
>
<div>
<span style={{ fontWeight: 600 }}>Add pages:</span> You can
freely select pages and add them to the collection.
<Trans i18nKey="com.affine.collection.addPages.tips">
<span style={{ fontWeight: 600 }}>Add pages:</span> You can
freely select pages and add them to the collection.
</Trans>
</div>
<div>
<span style={{ fontWeight: 600 }}>Add rules:</span> Rules are
based on filtering. After adding rules, pages that meet the
requirements will be automatically added to the current
collection.
<Trans i18nKey="com.affine.collection.addRules.tips">
<span style={{ fontWeight: 600 }}>Add rules:</span> Rules are
based on filtering. After adding rules, pages that meet the
requirements will be automatically added to the current
collection.
</Trans>
</div>
</div>
</div>

View File

@ -396,6 +396,31 @@
"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_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",
"Connector": "Connector",
"Continue with Google": "Continue with Google",