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

Add call out placeholder for comment stream empty state (#2545)

Browse Source 
CORL-567
This commit is contained in:
Nick Funk
2019-09-10 04:18:36 -06:00
committed by Wyatt Johnson
parent 3e64aa1193
commit 8d368b03ec
3 changed files with 71 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/core/client/stream/tabs/Comments/Stream/AllCommentsTab/AllCommentsTabContainer.tsx
+33 -25
View File
@@ -18,7 +18,7 @@ import { AllCommentsTabContainer_viewer } from "coral-stream/__generated__/AllCo
import { AllCommentsTabContainerLocal } from "coral-stream/__generated__/AllCommentsTabContainerLocal.graphql";
import { AllCommentsTabContainerPaginationQueryVariables } from "coral-stream/__generated__/AllCommentsTabContainerPaginationQuery.graphql";
import CLASSES from "coral-stream/classes";
import { Box, Button, HorizontalGutter } from "coral-ui/components";
import { Box, Button, CallOut, HorizontalGutter } from "coral-ui/components";
import { CommentContainer } from "../../Comment";
import IgnoredTombstoneOrHideContainer from "../../IgnoredTombstoneOrHideContainer";
@@ -128,30 +128,38 @@ export const AllCommentsTabContainer: FunctionComponent<Props> = props => {
size="oneAndAHalf"
className={styles.stream}
>
{comments.map(comment => (
<IgnoredTombstoneOrHideContainer
key={comment.id}
viewer={props.viewer}
comment={comment}
>
<FadeInTransition active={Boolean(comment.enteredLive)}>
<HorizontalGutter>
<CommentContainer
viewer={props.viewer}
settings={props.settings}
comment={comment}
story={props.story}
/>
<ReplyListContainer
settings={props.settings}
viewer={props.viewer}
comment={comment}
story={props.story}
/>
</HorizontalGutter>
</FadeInTransition>
</IgnoredTombstoneOrHideContainer>
))}
{comments.length <= 0 ? (
<Localized id="comments-noCommentsYet">
<CallOut fullWidth>
There are no comments yet. Why don't you write one?
</CallOut>
</Localized>
) : (
comments.map(comment => (
<IgnoredTombstoneOrHideContainer
key={comment.id}
viewer={props.viewer}
comment={comment}
>
<FadeInTransition active={Boolean(comment.enteredLive)}>
<HorizontalGutter>
<CommentContainer
viewer={props.viewer}
settings={props.settings}
comment={comment}
story={props.story}
/>
<ReplyListContainer
settings={props.settings}
viewer={props.viewer}
comment={comment}
story={props.story}
/>
</HorizontalGutter>
</FadeInTransition>
</IgnoredTombstoneOrHideContainer>
))
)}
{props.relay.hasMore() && (
<Localized id="comments-loadMore">
<Button
src/core/client/stream/test/comments/stream/__snapshots__/renderMessageBox.spec.tsx.snap
+36 -4
View File
@@ -195,7 +195,15 @@ exports[`renders message box when commenting disabled 1`] = `
data-testid="comments-allComments-log"
id="comments-allComments-log"
role="log"
/>
>
<div
className="CallOut-root CallOut-colorRegular CallOut-fullWidth"
>
<div>
There are no comments yet. Why don't you write one?
</div>
</div>
</div>
</section>
</div>
</div>
@@ -506,7 +514,15 @@ exports[`renders message box when logged in 1`] = `
data-testid="comments-allComments-log"
id="comments-allComments-log"
role="log"
/>
>
<div
className="CallOut-root CallOut-colorRegular CallOut-fullWidth"
>
<div>
There are no comments yet. Why don't you write one?
</div>
</div>
</div>
</section>
</div>
</div>
@@ -791,7 +807,15 @@ exports[`renders message box when not logged in 1`] = `
data-testid="comments-allComments-log"
id="comments-allComments-log"
role="log"
/>
>
<div
className="CallOut-root CallOut-colorRegular CallOut-fullWidth"
>
<div>
There are no comments yet. Why don't you write one?
</div>
</div>
</div>
</section>
</div>
</div>
@@ -983,7 +1007,15 @@ exports[`renders message box when story isClosed 1`] = `
data-testid="comments-allComments-log"
id="comments-allComments-log"
role="log"
/>
>
<div
className="CallOut-root CallOut-colorRegular CallOut-fullWidth"
>
<div>
There are no comments yet. Why don't you write one?
</div>
</div>
</div>
</section>
</div>
</div>
src/locales/en-US/stream.ftl
+2 -1
View File
@@ -26,6 +26,7 @@ comments-featuredCommentTooltip-handSelectedComments =
comments-featuredCommentTooltip-toggleButton =
.aria-label = Toggle featured comments tooltip
comments-noCommentsYet = There are no comments yet. Why don't you write one?
comments-streamQuery-storyNotFound = Story not found
@@ -367,7 +368,7 @@ profile-changeUsername-newUsername-label = New username
profile-changeUsername-confirmNewUsername-label = Confirm new username
profile-changeUsername-cancel = Cancel
profile-changeUsername-submit = <ButtonIcon>save</ButtonIcon> <span>Save</span>
profile-changeUsername-submit-button = Save
profile-changeUsername-submit-button = Save
profile-changeUsername-recentChange = Your username has been changed in the last { framework-timeago-time }. You may change your username again on { $nextUpdate }
profile-changeUsername-close = Close