mirror of
https://github.com/wassname/talk.git
synced 2026-07-02 05:34:11 +08:00
Merge branch 'next' into next-ui-select
This commit is contained in:
@@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user