Andal.LND/frontend-app-discussions
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: updated post summary

Browse Source
This commit is contained in:
adeel.tajamul
2022-05-18 19:26:02 +05:00
parent fd984c6ed6
commit 97f60d94f6
12 changed files with 105 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/icons/Help.js Normal file
View File

@@ -0,0 +1,16 @@
import * as React from 'react';
import { _extends } from './common';
export default function Help(props) {
return /* #__PURE__ */React.createElement('svg', _extends({
width: 24,
height: 24,
viewBox: '0 0 24 24',
fill: 'none',
xmlns: 'http://www.w3.org/2000/svg',
}, props), /* #__PURE__ */React.createElement('path', {
d: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z',
fill: '#2D494E',
}));
}

1
src/components/icons/index.js
View File

@@ -1,3 +1,4 @@
export { default as Help } from './Help';
export { default as QuestionAnswer } from './QuestionAnswer';
export { default as QuestionAnswerOutline } from './QuestionAnswerOutline';
export { default as StarFilled } from './StarFilled';

2
src/data/constants.js
View File

@@ -74,7 +74,7 @@ export const RequestStatus = {
* @enum {string}
*/
export const AvatarBorderAndLabelColors = {
Staff: 'warning-700',
Staff: 'staff-color',
'Community TA': 'success-700',
};

4
src/discussions/common/AuthorLabel.jsx
View File

@@ -28,7 +28,7 @@ function AuthorLabel({
}
const labelContents = (
<>
<span className="mr-1">{author}</span>
<span className="mr-1 font-weight-normal font-size-14">{author}</span>
{icon && (
<Icon
style={{
@@ -39,7 +39,7 @@ function AuthorLabel({
/>
)}
{authorLabelMessage && (
<span className="mr-3 ml-1">
<span className="mr-3 ml-1 font-weight-normal font-size-14">
{authorLabelMessage}
</span>
)}

19
src/discussions/common/time-locale.js Normal file
View File

@@ -0,0 +1,19 @@
// eslint-disable-next-line no-unused-vars
export default function timeLocale(number, index, totalSec) {
return [
['just now', 'right now'],
['%ss', 'in %s seconds'],
['1m', 'in 1 minute'],
['%sm', 'in %s minutes'],
['1h', 'in 1 hour'],
['%sh', 'in %s hours'],
['1d', 'in 1 day'],
['%sd', 'in %s days'],
['1w', 'in 1 week'],
['%sw', 'in %s weeks'],
['1M', 'in 1 month'],
['%sM', 'in %s months'],
['1y', 'in 1 year'],
['%sy', 'in %s years'],
][index];
}

4
src/discussions/posts/post/LikeButton.jsx
View File

@@ -24,7 +24,7 @@ function LikeButton({
};
return (
<div className="d-flex align-items-center align-content-center mr-4.5">
<div className="d-flex align-items-center align-content-center mr-4">
<OverlayTrigger
overlay={(
<Tooltip id={`like-${count}-tooltip`}>
@@ -34,7 +34,7 @@ function LikeButton({
>
<IconButton
onClick={handleClick}
className="p-3 mr-2 mt-1"
className="p-3 mr-1.5"
alt="Like"
iconAs={Icon}
size="inline"

22
src/discussions/posts/post/PostFooter.jsx
View File

@@ -18,6 +18,7 @@ import {
StarFilled,
StarOutline,
} from '../../../components/icons';
import timeLocale from '../../common/time-locale';
import { updateExistingThread } from '../data/thunks';
import LikeButton from './LikeButton';
import messages from './messages';
@@ -29,6 +30,7 @@ function PostFooter({
preview,
}) {
const dispatch = useDispatch();
timeago.register('time-locale', timeLocale);
return (
<div className="d-flex align-items-center">
<LikeButton
@@ -51,15 +53,14 @@ function PostFooter({
alt="Follow"
iconAs={Icon}
size="inline"
className="mx-2.5 my-0 mt-1.5"
src={post.following ? StarFilled : StarOutline}
/>
</OverlayTrigger>
{preview && post.commentCount > 1
&& (
<>
<Icon src={post.unreadCommentCount ? QuestionAnswer : QuestionAnswerOutline} className="mx-2 my-0 mt-2" />
<span style={{ minWidth: '2rem' }}>
<Icon src={post.unreadCommentCount ? QuestionAnswer : QuestionAnswerOutline} className="ml-4 mr-2 my-0 mt-1.5" />
<span style={{ minWidth: '1rem' }}>
{post.commentCount}
</span>
</>
@@ -82,19 +83,28 @@ function PostFooter({
<Icon
data-testid="cohort-icon"
src={People}
className="text-gray-500"
style={{
width: '1em',
height: '1em',
color: 'black',
}}
/>
</OverlayTrigger>
<span className="text-gray-500 mx-1">·</span>
<span
className="text-light-700 mx-1.5 ml-1.5 font-weight-500"
style={{
height: '1.5rem',
width: '0.31rem',
fontSize: '16px',
}}
>
·
</span>
</>
) : null
}
<span title={post.createdAt} className="text-gray-500">
{timeago.format(post.createdAt, intl.locale)}
{timeago.format(post.createdAt, 'time-locale')}
</span>
{!preview && post.closed
&& (

8
src/discussions/posts/post/PostFooter.test.jsx
View File

@@ -62,19 +62,19 @@ describe('PostFooter', () => {
it("shows 'x new' badge for new comments", () => {
renderComponent(mockPost);
expect(screen.getByText('2 new')).toBeTruthy();
expect(screen.getByText('2 New')).toBeTruthy();
});
it("doesn't have 'new' badge when there are 0 new comments", () => {
renderComponent({ ...mockPost, unreadCommentCount: 0 });
expect(screen.queryByText('2 new')).toBeFalsy();
expect(screen.queryByText('0 new')).toBeFalsy();
expect(screen.queryByText('2 New')).toBeFalsy();
expect(screen.queryByText('0 New')).toBeFalsy();
});
it("doesn't has 'new' badge when the new-unread item is the post itself", () => {
// commentCount === 1 means it's just the post without any further comments
renderComponent({ ...mockPost, unreadCommentCount: 1, commentCount: 1 });
expect(screen.queryByText('1 new')).toBeFalsy();
expect(screen.queryByText('1 New')).toBeFalsy();
});
it('has the cohort icon only when group information is present', () => {

40
src/discussions/posts/post/PostHeader.jsx
View File

@@ -5,8 +5,8 @@ import { useSelector } from 'react-redux';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { Avatar, Badge, Icon } from '@edx/paragon';
import { Help } from '@edx/paragon/icons';
import { Help } from '../../../components/icons';
import { AvatarBorderAndLabelColors, ThreadType } from '../../../data/constants';
import { ActionsDropdown, AuthorLabel } from '../../common';
import { selectAuthorAvatars } from '../data/selectors';
@@ -17,24 +17,26 @@ export function PostAvatar({ post, authorLabel, fromPostLink }) {
const authorAvatars = useSelector(selectAuthorAvatars(post.author));
const borderColor = AvatarBorderAndLabelColors[authorLabel];
return (
<div className="mr-3">
{post.type === ThreadType.QUESTION && (
<Icon
src={Help}
className="position-absolute bg-white rounded-circle"
style={{
width: '1.75rem',
height: '1.75rem',
}}
/>
)}
<Avatar
size={fromPostLink ? 'sm' : 'md'}
className={`${borderColor && `border-${borderColor}`} ${post.type === ThreadType.QUESTION ? 'mt-2.5 ml-2.5' : ''}`}
style={{ borderWidth: '2px' }}
alt={post.author}
src={authorAvatars?.imageUrlSmall}
/>
<div style={{ width: '3.75rem' }} className="d-flex pr-2.5">
<div className="ml-auto mr-auto">
{post.type === ThreadType.QUESTION && (
<Icon
src={Help}
className="position-absolute bg-white rounded-circle"
style={{
width: '1.75rem',
height: '1.75rem',
}}
/>
)}
<Avatar
size={fromPostLink ? 'sm' : 'md'}
className={`${borderColor && `border-${borderColor}`} ${post.type === ThreadType.QUESTION ? 'mt-2.5 ml-2.5' : ''}`}
style={{ borderWidth: '2px', height: '1.5rem', width: '1.5rem' }}
alt={post.author}
src={authorAvatars?.imageUrlSmall}
/>
</div>
</div>
);
}

12
src/discussions/posts/post/PostLink.jsx
View File

@@ -40,7 +40,7 @@ function PostLink({
<Link
className="discussion-post list-group-item list-group-item-action p-0 text-decoration-none text-gray-900 mw-100"
to={linkUrl}
style={{ lineHeight: '21px' }}
style={{ lineHeight: '21px', height: '7.5rem' }}
>
{post.pinned && (
<div className="d-flex flex-fill justify-content-end mr-4 text-light-500 p-0">
@@ -48,7 +48,7 @@ function PostLink({
</div>
)}
<div
className={classNames('d-flex flex-row flex-fill mw-100 p-2.5 border-primary-500', { 'bg-light-300': post.read })}
className={classNames('d-flex flex-row flex-fill mw-100 p-2.5 pr-4 border-primary-500', { 'bg-light-300': post.read })}
style={post.id === postId ? {
borderRightWidth: '4px',
borderRightStyle: 'solid',
@@ -58,13 +58,13 @@ function PostLink({
<div className="d-flex flex-column" style={{ width: 'calc(100% - 4rem)' }}>
<div className="align-items-center d-flex flex-row flex-fill">
<div className="d-flex flex-column justify-content-start mw-100 flex-fill">
<div className="d-flex align-items-center pb-0 mb-0 flex-fill" style={{ fontWeight: 500 }}>
<div className="flex-fill text-truncate">
<div className="d-flex align-items-center pb-0 mb-0 flex-fill font-weight-500">
<div className="flex-fill text-truncate text-primary-500 font-weight-500 font-size-14">
{post.title}
</div>
{showAnsweredBadge
&& (
<div className="ml-auto mr-2">
<div className="ml-auto">
<Badge variant="success">{intl.formatMessage(messages.answered)}</Badge>
</div>
)}
@@ -82,7 +82,7 @@ function PostLink({
/>
</div>
</div>
<div className="text-truncate" style={{ 'max-height': '1.6em' }}>
<div className="text-truncate text-primary-500 font-weight-normal font-size-14" style={{ 'max-height': '1.6em' }}>
<MathJax math={post.rawBody} />
</div>
<PostFooter post={post} preview intl={intl} />

2
src/discussions/posts/post/messages.js
View File

@@ -98,7 +98,7 @@ const messages = defineMessages({
},
newLabel: {
id: 'discussions.post.label.new',
defaultMessage: '{count} new',
defaultMessage: '{count} New',
description: 'Label shown on the badge indicating new comments/posts like "3 new"',
},
editedBy: {

16
src/index.scss
View File

@@ -13,3 +13,19 @@ $fa-font-path: "~font-awesome/fonts";
max-width: 100%;
}
}
.text-staff-color {
color: #998200;
}
.border-staff-color {
border-color: #998200;
}
.font-size-14 {
font-size: 14px;
}
.font-weight-500 {
font-weight: 500;
}