-
-
+
+
+ {!noticeItem.seen &&
+
+ }
+
+
+
+
{username || gettext('System')}
+
+
{dayjs(noticeItem.time).fromNow()}
-
{dayjs(noticeItem.time).fromNow()}
+
);
diff --git a/frontend/src/components/common/notification-popover/index.css b/frontend/src/components/common/notification-popover/index.css
index 38dd383ed7..405bc41abd 100644
--- a/frontend/src/components/common/notification-popover/index.css
+++ b/frontend/src/components/common/notification-popover/index.css
@@ -5,7 +5,7 @@
.notification-container {
position: absolute;
background: #fff;
- width: 320px;
+ width: 400px;
right: -16px;
top: -1px;
border-radius: 3px;
@@ -65,21 +65,15 @@
margin-left: 20px;
}
-.notification-container .notification-body .mark-notifications {
- color: #b4b4b4;
+.notification-container .mark-all-read {
+ color: #666;
cursor: pointer;
- border-bottom: 1px solid #ededed;
- height: 36px;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 1rem;
}
-.notification-container .notification-body .mark-notifications:hover {
- text-decoration: underline;
-}
-
.notification-body .notification-list-container {
max-height: 260px;
overflow: auto;
@@ -190,3 +184,33 @@
.notification-body .notification-footer:hover {
text-decoration: underline;
}
+
+.notification-container .notification-body .mark-notifications {
+ display: flex;
+ justify-content: space-between;
+ border-bottom: 1px solid #ededed;
+ padding-left: 15px;
+}
+
+.notification-container .notification-body .mark-notifications .mark-all-read:hover {
+ text-decoration: underline;
+}
+
+.notification-container .notification-body .nav .nav-item .nav-link {
+ height: 46px;
+ margin-right: 15px;
+ margin-left: 15px;
+ font-size: 14px;
+ color: #212529;
+}
+
+.notification-container .notification-body .nav .nav-item .nav-link.active {
+ color: #ED7109;
+}
+
+@media (max-width: 768px) {
+ .notification-container {
+ right: -60px;
+ width: 360px;
+ }
+}
diff --git a/frontend/src/components/common/notification-popover/index.js b/frontend/src/components/common/notification-popover/index.js
index 7c7ff52f5d..1c24289a2b 100644
--- a/frontend/src/components/common/notification-popover/index.js
+++ b/frontend/src/components/common/notification-popover/index.js
@@ -1,6 +1,8 @@
import React from 'react';
import PropTypes from 'prop-types';
import { Popover } from 'reactstrap';
+import { gettext } from '../../../utils/constants';
+
import './index.css';
export default class NotificationPopover extends React.Component {
@@ -13,7 +15,11 @@ export default class NotificationPopover extends React.Component {
onNotificationDialogToggle: PropTypes.func,
listNotifications: PropTypes.func,
onMarkAllNotifications: PropTypes.func,
+ tabItemClick: PropTypes.func,
children: PropTypes.any,
+ currentTab: PropTypes.string,
+ generalNoticeListUnseen: PropTypes.number,
+ discussionNoticeListUnseen: PropTypes.number,
};
static defaultProps = {
@@ -47,8 +53,12 @@ export default class NotificationPopover extends React.Component {
}
};
+ tabItemClick = (tab) => {
+ this.props.tabItemClick(tab);
+ };
+
render() {
- const { headerText, bodyText, footerText } = this.props;
+ const { headerText, bodyText, footerText, currentTab, generalNoticeListUnseen, discussionNoticeListUnseen } = this.props;
return (
-
{bodyText}
+
+
+ - this.tabItemClick('general')}>
+
+ {gettext('General')}
+ {generalNoticeListUnseen > 0 && ({generalNoticeListUnseen})}
+
+
+ - this.tabItemClick('discussion')}>
+
+ {gettext('Discussion')}
+ {discussionNoticeListUnseen > 0 && ({discussionNoticeListUnseen})}
+
+
+
+
+ {bodyText}
+
+
+ {currentTab === 'general' &&
this.notificationListRef = ref}>
this.notificationsWrapperRef = ref}>
{this.props.children}
+ }
+ {currentTab === 'discussion' &&
+
this.notificationListRef = ref}>
+
this.notificationsWrapperRef = ref}>
+ {this.props.children}
+
+
+ }
{footerText}