wassname/talk
1
0
Fork 0
mirror of https://github.com/wassname/talk.git synced 2026-07-08 20:17:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

Translate, concept for translation and id strings

Browse Source
This commit is contained in:
Chi Vinh Le
2018-07-10 18:44:56 -03:00
parent 5e5b0a3888
commit 358fe97069
18 changed files with 611 additions and 411 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/core/client/framework/lib/messages.tsx
+1 -1
View File
@@ -13,7 +13,7 @@ export const VALIDATION_REQUIRED = () => (
);
export const VALIDATION_TOO_SHORT = () => (
<Localized id="framework-validation-too-short">
<Localized id="framework-validation-tooShort">
<span>This field is too short.</span>
</Localized>
);
src/core/client/stream/components/PostCommentForm.tsx
+1 -1
View File
@@ -40,7 +40,7 @@ const PostCommentForm: StatelessComponent<PostCommentFormProps> = props => (
)}
</Field>
<div className={styles.postButtonContainer}>
<Localized id="postCommentForm-submit">
<Localized id="comments-postCommentForm-post">
<Button disabled={submitting} primary>
Post
</Button>
src/core/client/stream/components/ReplyList.spec.tsx
+3 -1
View File
@@ -32,7 +32,9 @@ describe("when there is more", () => {
});
it("calls onLoadMore", () => {
wrapper.find("#talk-reply-list--show-all--comment-id").simulate("click");
wrapper
.find("#talk-comments-replyList-showAll--comment-id")
.simulate("click");
expect((props.onShowAll as SinonSpy).calledOnce).toBe(true);
});
});
src/core/client/stream/components/ReplyList.tsx
+15 -12
View File
@@ -1,3 +1,4 @@
import { Localized } from "fluent-react/compat";
import * as React from "react";
import { StatelessComponent } from "react";
@@ -17,22 +18,24 @@ export interface ReplyListProps {
const ReplyList: StatelessComponent<ReplyListProps> = props => {
return (
<Indent>
<div id={`talk-reply-list--log--${props.commentID}`} role="log">
<div id={`talk-comments-replyList-log--${props.commentID}`} role="log">
{props.comments.map(comment => (
<CommentContainer key={comment.id} data={comment} gutterBottom />
))}
{props.hasMore && (
<Button
id={`talk-reply-list--show-all--${props.commentID}`}
onClick={props.onShowAll}
disabled={props.disableShowAll}
secondary
invert
fullWidth
aria-controls={`talk-reply-list--log--${props.commentID}`}
>
Show All Replies
</Button>
<Localized id="comments-replyList-showAll">
<Button
id={`talk-comments-replyList-showAll--${props.commentID}`}
aria-controls={`talk-comments-replyList-log--${props.commentID}`}
onClick={props.onShowAll}
disabled={props.disableShowAll}
secondary
invert
fullWidth
>
Show All Replies
</Button>
</Localized>
)}
</div>
</Indent>
src/core/client/stream/components/Stream.spec.tsx
+1 -1
View File
@@ -47,7 +47,7 @@ describe("when there is more", () => {
});
it("calls onLoadMore", () => {
wrapper.find("#talk-stream--load-more").simulate("click");
wrapper.find("#talk-comments-stream-loadMore").simulate("click");
expect(props.onLoadMore.calledOnce).toBe(true);
});
src/core/client/stream/components/Stream.tsx
+15 -12
View File
@@ -1,3 +1,4 @@
import { Localized } from "fluent-react/compat";
import * as React from "react";
import { StatelessComponent } from "react";
@@ -26,7 +27,7 @@ const Stream: StatelessComponent<StreamProps> = props => {
<div>
<Logo gutterBottom />
<PostCommentFormContainer assetID={props.assetID} />
<div id="talk-stream--log" role="log" aria-live="polite">
<div id="talk-comments-stream-log" role="log" aria-live="polite">
{props.comments.map(comment => (
<div key={comment.id}>
<CommentContainer data={comment} gutterBottom />
@@ -34,17 +35,19 @@ const Stream: StatelessComponent<StreamProps> = props => {
</div>
))}
{props.hasMore && (
<Button
id={"talk-stream--load-more"}
onClick={props.onLoadMore}
secondary
invert
fullWidth
disabled={props.disableLoadMore}
aria-controls="talk-stream--log"
>
Load More
</Button>
<Localized id="comments-stream-loadMore">
<Button
id={"talk-comments-stream-loadMore"}
onClick={props.onLoadMore}
secondary
invert
fullWidth
disabled={props.disableLoadMore}
aria-controls="talk-comments-stream-log"
>
Load More
</Button>
</Localized>
)}
</div>
</div>
src/core/client/stream/components/__snapshots__/ReplyList.spec.tsx.snap
+58 -43
View File
@@ -2,56 +2,71 @@
exports[`renders correctly 1`] = `
<Indent>
<Relay(CommentContainer)
data={
Object {
"id": "comment-1",
<div
id="talk-comments-replyList-log--comment-id"
role="log"
>
<Relay(CommentContainer)
data={
Object {
"id": "comment-1",
}
}
}
gutterBottom={true}
key="comment-1"
/>
<Relay(CommentContainer)
data={
Object {
"id": "comment-2",
gutterBottom={true}
key="comment-1"
/>
<Relay(CommentContainer)
data={
Object {
"id": "comment-2",
}
}
}
gutterBottom={true}
key="comment-2"
/>
gutterBottom={true}
key="comment-2"
/>
</div>
</Indent>
`;
exports[`when there is more renders a load more button 1`] = `
<Indent>
<Relay(CommentContainer)
data={
Object {
"id": "comment-1",
}
}
gutterBottom={true}
key="comment-1"
/>
<Relay(CommentContainer)
data={
Object {
"id": "comment-2",
}
}
gutterBottom={true}
key="comment-2"
/>
<withPropsOnChange(Button)
disabled={false}
fullWidth={true}
id="talk-reply-list--show-all--comment-id"
invert={true}
onClick={[Function]}
secondary={true}
<div
id="talk-comments-replyList-log--comment-id"
role="log"
>
Show All Replies
</withPropsOnChange(Button)>
<Relay(CommentContainer)
data={
Object {
"id": "comment-1",
}
}
gutterBottom={true}
key="comment-1"
/>
<Relay(CommentContainer)
data={
Object {
"id": "comment-2",
}
}
gutterBottom={true}
key="comment-2"
/>
<Localized
id="comments-replyList-showAll"
>
<withPropsOnChange(Button)
aria-controls="talk-comments-replyList-log--comment-id"
disabled={false}
fullWidth={true}
id="talk-comments-replyList-showAll--comment-id"
invert={true}
onClick={[Function]}
secondary={true}
>
Show All Replies
</withPropsOnChange(Button)>
</Localized>
</div>
</Indent>
`;
src/core/client/stream/components/__snapshots__/Stream.spec.tsx.snap
+145 -117
View File
@@ -9,42 +9,48 @@ exports[`renders correctly 1`] = `
assetID="asset-id"
/>
<div
key="comment-1"
aria-live="polite"
id="talk-comments-stream-log"
role="log"
>
<Relay(CommentContainer)
data={
Object {
"id": "comment-1",
<div
key="comment-1"
>
<Relay(CommentContainer)
data={
Object {
"id": "comment-1",
}
}
}
gutterBottom={true}
/>
<Relay(ReplyListContainer)
comment={
Object {
"id": "comment-1",
gutterBottom={true}
/>
<Relay(ReplyListContainer)
comment={
Object {
"id": "comment-1",
}
}
}
/>
</div>
<div
key="comment-2"
>
<Relay(CommentContainer)
data={
Object {
"id": "comment-2",
/>
</div>
<div
key="comment-2"
>
<Relay(CommentContainer)
data={
Object {
"id": "comment-2",
}
}
}
gutterBottom={true}
/>
<Relay(ReplyListContainer)
comment={
Object {
"id": "comment-2",
gutterBottom={true}
/>
<Relay(ReplyListContainer)
comment={
Object {
"id": "comment-2",
}
}
}
/>
/>
</div>
</div>
</div>
`;
@@ -64,53 +70,64 @@ exports[`when there is more disables load more button 1`] = `
assetID="asset-id"
/>
<div
key="comment-1"
aria-live="polite"
id="talk-comments-stream-log"
role="log"
>
<Relay(CommentContainer)
data={
Object {
"id": "comment-1",
<div
key="comment-1"
>
<Relay(CommentContainer)
data={
Object {
"id": "comment-1",
}
}
}
gutterBottom={true}
/>
<Relay(ReplyListContainer)
comment={
Object {
"id": "comment-1",
gutterBottom={true}
/>
<Relay(ReplyListContainer)
comment={
Object {
"id": "comment-1",
}
}
}
/>
/>
</div>
<div
key="comment-2"
>
<Relay(CommentContainer)
data={
Object {
"id": "comment-2",
}
}
gutterBottom={true}
/>
<Relay(ReplyListContainer)
comment={
Object {
"id": "comment-2",
}
}
/>
</div>
<Localized
id="comments-stream-loadMore"
>
<withPropsOnChange(Button)
aria-controls="talk-comments-stream-log"
disabled={true}
fullWidth={true}
id="talk-comments-stream-loadMore"
invert={true}
onClick={[Function]}
secondary={true}
>
Load More
</withPropsOnChange(Button)>
</Localized>
</div>
<div
key="comment-2"
>
<Relay(CommentContainer)
data={
Object {
"id": "comment-2",
}
}
gutterBottom={true}
/>
<Relay(ReplyListContainer)
comment={
Object {
"id": "comment-2",
}
}
/>
</div>
<withPropsOnChange(Button)
disabled={true}
fullWidth={true}
id="talk-stream--load-more"
invert={true}
onClick={[Function]}
secondary={true}
>
Load More
</withPropsOnChange(Button)>
</div>
`;
@@ -123,52 +140,63 @@ exports[`when there is more renders a load more button 1`] = `
assetID="asset-id"
/>
<div
key="comment-1"
aria-live="polite"
id="talk-comments-stream-log"
role="log"
>
<Relay(CommentContainer)
data={
Object {
"id": "comment-1",
<div
key="comment-1"
>
<Relay(CommentContainer)
data={
Object {
"id": "comment-1",
}
}
}
gutterBottom={true}
/>
<Relay(ReplyListContainer)
comment={
Object {
"id": "comment-1",
gutterBottom={true}
/>
<Relay(ReplyListContainer)
comment={
Object {
"id": "comment-1",
}
}
}
/>
/>
</div>
<div
key="comment-2"
>
<Relay(CommentContainer)
data={
Object {
"id": "comment-2",
}
}
gutterBottom={true}
/>
<Relay(ReplyListContainer)
comment={
Object {
"id": "comment-2",
}
}
/>
</div>
<Localized
id="comments-stream-loadMore"
>
<withPropsOnChange(Button)
aria-controls="talk-comments-stream-log"
disabled={false}
fullWidth={true}
id="talk-comments-stream-loadMore"
invert={true}
onClick={[Function]}
secondary={true}
>
Load More
</withPropsOnChange(Button)>
</Localized>
</div>
<div
key="comment-2"
>
<Relay(CommentContainer)
data={
Object {
"id": "comment-2",
}
}
gutterBottom={true}
/>
<Relay(ReplyListContainer)
comment={
Object {
"id": "comment-2",
}
}
/>
</div>
<withPropsOnChange(Button)
disabled={false}
fullWidth={true}
id="talk-stream--load-more"
invert={true}
onClick={[Function]}
secondary={true}
>
Load More
</withPropsOnChange(Button)>
</div>
`;
src/core/client/stream/test/__snapshots__/loadMore.spec.tsx.snap
+121 -83
View File
@@ -36,52 +36,73 @@ exports[`loads more comments 1`] = `
</button>
</div>
</form>
<div>
<div
className="Comment-root Comment-gutterBottom"
>
<h1
className="Typography-root Typography-heading2 Typography-gutterBottom Username-root"
<div
aria-live="polite"
id="talk-comments-stream-log"
role="log"
>
<div>
<div
className="Comment-root Comment-gutterBottom"
role="article"
>
Markus
</h1>
<p
className="Typography-root Typography-body1"
>
Joining Too
</p>
<div
className="Comment-topBar"
>
<span
className="Username-root"
>
Markus
</span>
</div>
<p
className="Typography-root Typography-body1"
>
Joining Too
</p>
</div>
</div>
</div>
<div>
<div
className="Comment-root Comment-gutterBottom"
>
<h1
className="Typography-root Typography-heading2 Typography-gutterBottom Username-root"
<div>
<div
className="Comment-root Comment-gutterBottom"
role="article"
>
Lukas
</h1>
<p
className="Typography-root Typography-body1"
>
What's up?
</p>
<div
className="Comment-topBar"
>
<span
className="Username-root"
>
Lukas
</span>
</div>
<p
className="Typography-root Typography-body1"
>
What's up?
</p>
</div>
</div>
</div>
<div>
<div
className="Comment-root Comment-gutterBottom"
>
<h1
className="Typography-root Typography-heading2 Typography-gutterBottom Username-root"
<div>
<div
className="Comment-root Comment-gutterBottom"
role="article"
>
Isabelle
</h1>
<p
className="Typography-root Typography-body1"
>
Hey!
</p>
<div
className="Comment-topBar"
>
<span
className="Username-root"
>
Isabelle
</span>
</div>
<p
className="Typography-root Typography-body1"
>
Hey!
</p>
</div>
</div>
</div>
</div>
@@ -124,49 +145,66 @@ exports[`renders comment stream 1`] = `
</button>
</div>
</form>
<div>
<div
className="Comment-root Comment-gutterBottom"
>
<h1
className="Typography-root Typography-heading2 Typography-gutterBottom Username-root"
>
Markus
</h1>
<p
className="Typography-root Typography-body1"
>
Joining Too
</p>
</div>
</div>
<div>
<div
className="Comment-root Comment-gutterBottom"
>
<h1
className="Typography-root Typography-heading2 Typography-gutterBottom Username-root"
>
Lukas
</h1>
<p
className="Typography-root Typography-body1"
>
What's up?
</p>
</div>
</div>
<button
className="BaseButton-root Button-root Button-invert Button-fullWidth Button-secondary"
disabled={false}
id="talk-stream--load-more"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
<div
aria-live="polite"
id="talk-comments-stream-log"
role="log"
>
Load More
</button>
<div>
<div
className="Comment-root Comment-gutterBottom"
role="article"
>
<div
className="Comment-topBar"
>
<span
className="Username-root"
>
Markus
</span>
</div>
<p
className="Typography-root Typography-body1"
>
Joining Too
</p>
</div>
</div>
<div>
<div
className="Comment-root Comment-gutterBottom"
role="article"
>
<div
className="Comment-topBar"
>
<span
className="Username-root"
>
Lukas
</span>
</div>
<p
className="Typography-root Typography-body1"
>
What's up?
</p>
</div>
</div>
<button
aria-controls="talk-comments-stream-log"
className="BaseButton-root Button-root Button-invert Button-fullWidth Button-secondary"
disabled={false}
id="talk-comments-stream-loadMore"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
>
Load More
</button>
</div>
</div>
</div>
`;
src/core/client/stream/test/__snapshots__/renderReplies.spec.tsx.snap
+74 -43
View File
@@ -36,68 +36,99 @@ exports[`renders comment stream 1`] = `
</button>
</div>
</form>
<div>
<div
className="Comment-root Comment-gutterBottom"
>
<h1
className="Typography-root Typography-heading2 Typography-gutterBottom Username-root"
>
Markus
</h1>
<p
className="Typography-root Typography-body1"
>
Joining Too
</p>
</div>
</div>
<div>
<div
className="Comment-root Comment-gutterBottom"
>
<h1
className="Typography-root Typography-heading2 Typography-gutterBottom Username-root"
>
Markus
</h1>
<p
className="Typography-root Typography-body1"
>
I like yoghurt
</p>
</div>
<div
className="Indent-root Indent-level0"
>
<div
aria-live="polite"
id="talk-comments-stream-log"
role="log"
>
<div>
<div
className="Comment-root Comment-gutterBottom"
role="article"
>
<h1
className="Typography-root Typography-heading2 Typography-gutterBottom Username-root"
<div
className="Comment-topBar"
>
Markus
</h1>
<span
className="Username-root"
>
Markus
</span>
</div>
<p
className="Typography-root Typography-body1"
>
Joining Too
</p>
</div>
</div>
<div>
<div
className="Comment-root Comment-gutterBottom"
role="article"
>
<h1
className="Typography-root Typography-heading2 Typography-gutterBottom Username-root"
<div
className="Comment-topBar"
>
Lukas
</h1>
<span
className="Username-root"
>
Markus
</span>
</div>
<p
className="Typography-root Typography-body1"
>
What's up?
I like yoghurt
</p>
</div>
<div
className="Indent-root Indent-level0"
>
<div
id="talk-comments-replyList-log--comment-with-replies"
role="log"
>
<div
className="Comment-root Comment-gutterBottom"
role="article"
>
<div
className="Comment-topBar"
>
<span
className="Username-root"
>
Markus
</span>
</div>
<p
className="Typography-root Typography-body1"
>
Joining Too
</p>
</div>
<div
className="Comment-root Comment-gutterBottom"
role="article"
>
<div
className="Comment-topBar"
>
<span
className="Username-root"
>
Lukas
</span>
</div>
<p
className="Typography-root Typography-body1"
>
What's up?
</p>
</div>
</div>
</div>
</div>
</div>
</div>
src/core/client/stream/test/__snapshots__/renderStream.spec.tsx.snap
+43 -27
View File
@@ -36,36 +36,52 @@ exports[`renders comment stream 1`] = `
</button>
</div>
</form>
<div>
<div
className="Comment-root Comment-gutterBottom"
>
<h1
className="Typography-root Typography-heading2 Typography-gutterBottom Username-root"
<div
aria-live="polite"
id="talk-comments-stream-log"
role="log"
>
<div>
<div
className="Comment-root Comment-gutterBottom"
role="article"
>
Markus
</h1>
<p
className="Typography-root Typography-body1"
>
Joining Too
</p>
<div
className="Comment-topBar"
>
<span
className="Username-root"
>
Markus
</span>
</div>
<p
className="Typography-root Typography-body1"
>
Joining Too
</p>
</div>
</div>
</div>
<div>
<div
className="Comment-root Comment-gutterBottom"
>
<h1
className="Typography-root Typography-heading2 Typography-gutterBottom Username-root"
<div>
<div
className="Comment-root Comment-gutterBottom"
role="article"
>
Lukas
</h1>
<p
className="Typography-root Typography-body1"
>
What's up?
</p>
<div
className="Comment-topBar"
>
<span
className="Username-root"
>
Lukas
</span>
</div>
<p
className="Typography-root Typography-body1"
>
What's up?
</p>
</div>
</div>
</div>
</div>
src/core/client/stream/test/__snapshots__/showAllReplies.spec.tsx.snap
+114 -66
View File
@@ -36,49 +36,71 @@ exports[`renders comment stream 1`] = `
</button>
</div>
</form>
<div>
<div
className="Comment-root Comment-gutterBottom"
>
<h1
className="Typography-root Typography-heading2 Typography-gutterBottom Username-root"
>
Markus
</h1>
<p
className="Typography-root Typography-body1"
>
Joining Too
</p>
</div>
<div
className="Indent-root Indent-level0"
>
<div
aria-live="polite"
id="talk-comments-stream-log"
role="log"
>
<div>
<div
className="Comment-root Comment-gutterBottom"
role="article"
>
<h1
className="Typography-root Typography-heading2 Typography-gutterBottom Username-root"
<div
className="Comment-topBar"
>
Lukas
</h1>
<span
className="Username-root"
>
Markus
</span>
</div>
<p
className="Typography-root Typography-body1"
>
What's up?
Joining Too
</p>
</div>
<button
className="BaseButton-root Button-root Button-invert Button-fullWidth Button-secondary"
disabled={false}
id="talk-reply-list--show-all--comment-0"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
<div
className="Indent-root Indent-level0"
>
Show All Replies
</button>
<div
id="talk-comments-replyList-log--comment-0"
role="log"
>
<div
className="Comment-root Comment-gutterBottom"
role="article"
>
<div
className="Comment-topBar"
>
<span
className="Username-root"
>
Lukas
</span>
</div>
<p
className="Typography-root Typography-body1"
>
What's up?
</p>
</div>
<button
aria-controls="talk-comments-replyList-log--comment-0"
className="BaseButton-root Button-root Button-invert Button-fullWidth Button-secondary"
disabled={false}
id="talk-comments-replyList-showAll--comment-0"
onBlur={[Function]}
onClick={[Function]}
onFocus={[Function]}
onMouseDown={[Function]}
>
Show All Replies
</button>
</div>
</div>
</div>
</div>
</div>
@@ -121,51 +143,77 @@ exports[`show all replies 1`] = `
</button>
</div>
</form>
<div>
<div
className="Comment-root Comment-gutterBottom"
>
<h1
className="Typography-root Typography-heading2 Typography-gutterBottom Username-root"
>
Markus
</h1>
<p
className="Typography-root Typography-body1"
>
Joining Too
</p>
</div>
<div
className="Indent-root Indent-level0"
>
<div
aria-live="polite"
id="talk-comments-stream-log"
role="log"
>
<div>
<div
className="Comment-root Comment-gutterBottom"
role="article"
>
<h1
className="Typography-root Typography-heading2 Typography-gutterBottom Username-root"
<div
className="Comment-topBar"
>
Lukas
</h1>
<span
className="Username-root"
>
Markus
</span>
</div>
<p
className="Typography-root Typography-body1"
>
What's up?
Joining Too
</p>
</div>
<div
className="Comment-root Comment-gutterBottom"
className="Indent-root Indent-level0"
>
<h1
className="Typography-root Typography-heading2 Typography-gutterBottom Username-root"
<div
id="talk-comments-replyList-log--comment-0"
role="log"
>
Isabelle
</h1>
<p
className="Typography-root Typography-body1"
>
Hey!
</p>
<div
className="Comment-root Comment-gutterBottom"
role="article"
>
<div
className="Comment-topBar"
>
<span
className="Username-root"
>
Lukas
</span>
</div>
<p
className="Typography-root Typography-body1"
>
What's up?
</p>
</div>
<div
className="Comment-root Comment-gutterBottom"
role="article"
>
<div
className="Comment-topBar"
>
<span
className="Username-root"
>
Isabelle
</span>
</div>
<p
className="Typography-root Typography-body1"
>
Hey!
</p>
</div>
</div>
</div>
</div>
</div>
src/core/client/stream/test/loadMore.spec.tsx
+1 -1
View File
@@ -89,7 +89,7 @@ it("renders comment stream", async () => {
it("loads more comments", async () => {
testRenderer.root
.findByProps({ id: "talk-stream--load-more" })
.findByProps({ id: "talk-comments-stream-loadMore" })
.props.onClick();
// Wait for loading.
src/core/client/stream/test/showAllReplies.spec.tsx
+1 -1
View File
@@ -105,7 +105,7 @@ it("renders comment stream", async () => {
it("show all replies", async () => {
testRenderer.root
.findByProps({ id: `talk-reply-list--show-all--${comments[0].id}` })
.findByProps({ id: `talk-comments-replyList-showAll--${comments[0].id}` })
.props.onClick();
// Wait for loading.
src/locales/de/framework.ftl
+2
View File
@@ -2,4 +2,6 @@
### All keys must start with `framework` because this file is shared
### among different targets.
## Validation
framework-validation-required = Dies ist ein Pflichtpfeld.
src/locales/de/stream.ftl
+7 -1
View File
@@ -1 +1,7 @@
postCommentForm-submit = Posten
### Localization for Embed Stream
## Comments Tab
comments-postCommentForm-post = Posten
comments-stream-loadMore = Mehr laden
comments-replyList-showAll = Alle anzeigen
src/locales/en-US/framework.ftl
+2
View File
@@ -2,4 +2,6 @@
### All keys must start with `framework` because this file is shared
### among different targets.
## Validation
framework-validation-required = This field is required.
src/locales/en-US/stream.ftl
+7 -1
View File
@@ -1 +1,7 @@
postCommentForm-submit = Post
### Localization for Embed Stream
## Comments Tab
comments-postCommentForm-post = Post
comments-stream-loadMore = Load more
comments-replyList-showAll = Show all