Merge branch 'next' into next-ui-select

This commit is contained in:
Kiwi
2018-10-19 00:22:43 +02:00
committed by GitHub
4 changed files with 40 additions and 56 deletions
+1 -1
View File
@@ -9,7 +9,7 @@
<style>
body {
margin: 0;
padding: 0 0 50px 0;
padding: 0 20px 50px 20px;
}
</style>
</head>
@@ -22,7 +22,7 @@ interface CommentsHistoryProps {
const CommentsHistory: StatelessComponent<CommentsHistoryProps> = props => {
return (
<HorizontalGutter>
<HorizontalGutter size="double">
<Localized id="profile-historyComment-commentHistory">
<Typography variant="heading3">Comment History</Typography>
</Localized>
@@ -1,18 +1,12 @@
.icon {
color: var(--palette-text-secondary);
margin-right: calc(0.5 * var(--spacing-unit));
}
.button,
.replies,
.story {
.replies {
composes: button from "talk-ui/shared/typography.css";
}
.sideBar {
min-width: 180px;
padding-left: var(--spacing-unit);
}
.body {
word-break: break-all;
.divider {
margin: calc(var(--spacing-unit) * 2) 0 !important;
}
@@ -7,6 +7,7 @@ import {
Flex,
HorizontalGutter,
Icon,
MatchMedia,
Typography,
} from "talk-ui/components";
import HTMLContent from "../../../components/HTMLContent";
@@ -26,52 +27,41 @@ export interface HistoryCommentProps {
const HistoryComment: StatelessComponent<HistoryCommentProps> = props => {
return (
<HorizontalGutter>
<Flex direction="row" justifyContent="space-between">
<Typography variant="bodyCopy" container="div">
{props.body && (
<HTMLContent className={styles.body}>{props.body}</HTMLContent>
)}
</Typography>
<Flex className={styles.sideBar} direction="column">
<Flex direction="row" alignItems="center" itemGutter="half">
<Button
variant="underlined"
target="_parent"
href={props.conversationURL}
onClick={props.onGotoConversation}
anchor
>
<Icon>launch</Icon>
<Localized id="profile-historyComment-viewConversation">
<span>View Conversation</span>
</Localized>
</Button>
</Flex>
<Flex direction="row" alignItems="center" itemGutter="half">
<Icon className={styles.icon}>schedule</Icon>
<Timestamp>{props.createdAt}</Timestamp>
</Flex>
</Flex>
</Flex>
{!!props.replyCount && (
<Flex
direction="row"
alignItems="center"
itemGutter="half"
className={styles.replies}
>
<Icon className={styles.icon}>reply</Icon>
<Localized
id="profile-historyComment-replies"
$replyCount={props.replyCount}
>
<span>{"Replies {$replyCount}"}</span>
</Localized>
</Flex>
)}
<Localized id="profile-historyComment-story" $title={props.asset.title}>
<span className={styles.story}>{"Story: {$title}"}</span>
<Typography variant="heading4">{"Story: {$title}"}</Typography>
</Localized>
<Timestamp>{props.createdAt}</Timestamp>
<Typography variant="bodyCopy" container="div">
{props.body && <HTMLContent>{props.body}</HTMLContent>}
</Typography>
<Flex direction="row" alignItems="center" itemGutter>
{!!props.replyCount && (
<div className={styles.replies}>
<Icon className={styles.icon}>reply</Icon>
<Localized
id="profile-historyComment-replies"
$replyCount={props.replyCount}
>
<span>{"Replies {$replyCount}"}</span>
</Localized>
</div>
)}
<Button
variant="underlined"
target="_parent"
href={props.conversationURL}
onClick={props.onGotoConversation}
anchor
>
<Icon>launch</Icon>
<Localized id="profile-historyComment-viewConversation">
<span>View Conversation</span>
</Localized>
</Button>
</Flex>
<MatchMedia lteWidth="xs">
<hr className={styles.divider} />
</MatchMedia>
</HorizontalGutter>
);
};