diff --git a/src/discussions/discussions-home/DiscussionSidebar.jsx b/src/discussions/discussions-home/DiscussionSidebar.jsx index 934c269e..59332d07 100644 --- a/src/discussions/discussions-home/DiscussionSidebar.jsx +++ b/src/discussions/discussions-home/DiscussionSidebar.jsx @@ -47,7 +47,7 @@ export default function DiscussionSidebar({ displaySidebar, postActionBarRef }) ref={sidebarRef} className={classNames('flex-column position-sticky', { 'd-none': !displaySidebar, - 'd-flex overflow-auto': displaySidebar, + 'd-flex overflow-auto box-shadow-centered-1': displaySidebar, 'w-100': !isOnDesktop, 'sidebar-desktop-width': isOnDesktop && !isOnXLDesktop, 'w-25 sidebar-XL-width': isOnXLDesktop, diff --git a/src/discussions/posts/post/PostLink.jsx b/src/discussions/posts/post/PostLink.jsx index 172ef2e9..696ec2a5 100644 --- a/src/discussions/posts/post/PostLink.jsx +++ b/src/discussions/posts/post/PostLink.jsx @@ -15,8 +15,8 @@ import AuthorLabel from '../../common/AuthorLabel'; import { DiscussionContext } from '../../common/context'; import { discussionsPath, isPostPreviewAvailable } from '../../utils'; import messages from './messages'; -import PostFooter from './PostFooter'; import { PostAvatar } from './PostHeader'; +import PostSummaryFooter from './PostSummaryFooter'; import { postShape } from './proptypes'; function PostLink({ @@ -56,20 +56,17 @@ function PostLink({ } to={linkUrl} onClick={() => isSelected(post.id)} - style={{ lineHeight: '22px' }} aria-current={isSelected(post.id) ? 'page' : undefined} role="option" tabIndex={(isSelected(post.id) || idx === 0) ? 0 : -1} >
@@ -100,20 +97,20 @@ function PostLink({ )} {canSeeReportedBadge && ( - - {intl.formatMessage(messages.contentReported)} - {' '}reported - + + {intl.formatMessage(messages.contentReported)} + {' '}reported + )} {post.pinned && ( )}
@@ -123,7 +120,7 @@ function PostLink({ authorLabel={post.authorLabel} labelColor={authorLabelColor && `text-${authorLabelColor}`} /> - +
{!showDivider && post.pinned &&
} diff --git a/src/discussions/posts/post/PostSummaryFooter.jsx b/src/discussions/posts/post/PostSummaryFooter.jsx new file mode 100644 index 00000000..1e417bb2 --- /dev/null +++ b/src/discussions/posts/post/PostSummaryFooter.jsx @@ -0,0 +1,147 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import { useSelector } from 'react-redux'; +import * as timeago from 'timeago.js'; + +import { injectIntl, intlShape } from '@edx/frontend-platform/i18n'; +import { + Badge, Icon, OverlayTrigger, Tooltip, +} from '@edx/paragon'; +import { + Locked, +} from '@edx/paragon/icons'; + +import { + People, + QuestionAnswer, + QuestionAnswerOutline, + StarFilled, + StarOutline, ThumbUpFilled, ThumbUpOutline, +} from '../../../components/icons'; +import timeLocale from '../../common/time-locale'; +import { selectUserHasModerationPrivileges } from '../../data/selectors'; +import messages from './messages'; +import { postShape } from './proptypes'; + +function PostSummaryFooter({ + post, + intl, + preview, + showNewCountLabel, +}) { + const userHasModerationPrivileges = useSelector(selectUserHasModerationPrivileges); + timeago.register('time-locale', timeLocale); + + return ( +
+
+ + {intl.formatMessage(post.voted ? messages.removeLike : messages.like)} + + )} + > + + {' '}{intl.formatMessage(post.voted ? messages.removeLike : messages.like)} + + +
+ {(post.voteCount && post.voteCount > 0) ? post.voteCount : null} +
+
+ + + {intl.formatMessage(post.following ? messages.unFollow : messages.follow)} + + )} + > + + {' '}{ intl.formatMessage(post.following ? messages.srOnlyFollowDescription : messages.srOnlyUnFollowDescription)} + + + + {preview && post.commentCount > 1 && ( +
+ + {intl.formatMessage(messages.viewActivity)} + + )} + > + + {' '} {intl.formatMessage(messages.viewActivity)} + + + {post.commentCount} +
+ )} + {showNewCountLabel && preview && post?.unreadCommentCount > 0 && post.commentCount > 1 && ( + + {intl.formatMessage(messages.newLabel, { count: post.unreadCommentCount })} + + )} +
+ {post.groupId && userHasModerationPrivileges && ( + <> + {post.groupName} + )} + > + + + + + + ยท + + + )} + + {timeago.format(post.createdAt, 'time-locale')} + + {!preview && post.closed + && ( + + {intl.formatMessage(messages.postClosed)} + + )} + > + + + )} +
+
+ ); +} + +PostSummaryFooter.propTypes = { + intl: intlShape.isRequired, + post: postShape.isRequired, + preview: PropTypes.bool, + showNewCountLabel: PropTypes.bool, +}; + +PostSummaryFooter.defaultProps = { + preview: false, + showNewCountLabel: false, +}; + +export default injectIntl(PostSummaryFooter); diff --git a/src/discussions/posts/post/messages.js b/src/discussions/posts/post/messages.js index f9c76ba4..936cd09c 100644 --- a/src/discussions/posts/post/messages.js +++ b/src/discussions/posts/post/messages.js @@ -131,6 +131,16 @@ const messages = defineMessages({ defaultMessage: 'No preview available', description: 'No preview available', }, + srOnlyFollowDescription: { + id: 'discussions.post.follow.description', + defaultMessage: 'you are following this post', + description: 'tell screen readers if user is following a post', + }, + srOnlyUnFollowDescription: { + id: 'discussions.post.unfollow.description', + defaultMessage: 'you are not following this post', + description: 'tell screen readers if user is not following a post', + }, }); export default messages; diff --git a/src/index.scss b/src/index.scss index f0e090b3..164150ec 100755 --- a/src/index.scss +++ b/src/index.scss @@ -62,6 +62,21 @@ $fa-font-path: "~font-awesome/fonts"; width: 20px !important; } +.post-summary-icons-dimensions { + height: 16px !important; + width: 16px !important; +} + +.post-summary-timestamp { + font-size: 12px !important; + line-height: 20px !important; +} + +.post-summary-card-selected { + border-right-width: 4px; + border-right-style: solid; +} + .mr-0\.5 { margin-right: 2px; } @@ -133,7 +148,7 @@ header { } .sidebar-desktop-width { - min-width: 25rem; + min-width: 29rem; } .sidebar-XL-width { @@ -264,3 +279,7 @@ header { z-index: 0 !important; } +.badge { + padding: 1px 5px !important; +} +