change notification dialog style

frontend/src/components/common/notice-item.js

@@ -403,9 +403,13 @@ class NoticeItem extends React.Component {
     }
 
     return this.props.tr ? (
-      <tr className={noticeItem.seen ? 'read' : 'unread font-weight-bold'}>
+      <tr className='notification-item'>
         <td className="text-center">
+          {!noticeItem.seen && <span className="notification-point" onClick={this.onMarkNotificationRead}></span>}
+        </td>
+        <td>
           <img src={avatar_url} width="32" height="32" className="avatar" alt="" />
+          <span className="ml-2 notification-user-name">{username || gettext('System')}</span>
         </td>
         <td className="pr-1 pr-md-8">
           <p className="m-0" dangerouslySetInnerHTML={{ __html: notice }}></p>

frontend/src/components/common/notification-popover/index.css

@@ -207,3 +207,10 @@
 .notification-container .notification-body .nav .nav-item .nav-link.active {
   color: #ED7109;
 }
+
+@media (max-width: 768px) {
+  .notification-container {
+    right: -60px;
+    width: 360px;
+  }
+}

frontend/src/css/user-notifications.css

@@ -49,6 +49,32 @@
   padding: 12px 8px;
 }
 
+.notification-list-content .notification-modal-body .notice-dialog-side .nav-item {
+  position: relative;
+}
+
+.notification-list-content .notification-modal-body .notice-dialog-side .nav-item .nav-link {
+  border: none;
+}
+
+.notification-list-content .notification-modal-body .notice-dialog-side .nav-item .nav-link.active {
+  background-color: #F5F5F5;
+  color: #212529;
+}
+
+.notification-list-content .notification-modal-body .notice-dialog-side .nav-item .nav-link.active::before {
+  content: '';
+  position: absolute;
+  display: block;
+  width: 3px;
+  height: 26px;
+  left: -5px;
+  top: 2px;
+  background-color: #ff9800;
+  border-radius: 2px;
+  z-index: 2;
+}
+
 .notification-list-content .notification-modal-body .notice-dialog-main {
   display: flex;
   flex: 0 0 80%;
@@ -57,7 +83,7 @@
 
 .notification-modal-body .notification-dialog-body {
   overflow: auto;
-  padding: 2rem 1rem;
+  padding: 1rem;
   height: 100%;
 }
 
@@ -91,8 +117,64 @@
 
 .notification-dialog-body table td {
   padding: 0.5rem 0.1875rem;
-  border-bottom: 1px solid #eee;
+  border-bottom: none;
   color: #212529;
   font-size: 14px;
   word-break: break-all;
 }
+
+.notification-dialog-body table td ul {
+  list-style: none;
+}
+
+.notification-dialog-body .notification-user-name {
+  font-weight: normal;
+}
+
+.notification-dialog-body .notification-item .avatar {
+  width: 24px;
+  height: 24px;
+}
+
+.notification-dialog-body .notification-item .notification-point {
+  top: calc(50% - 4px);
+}
+
+@media (max-width: 768px) {
+
+  .notification-list-dialog {
+    width: 100%;
+    max-width: 100%;
+    height: 100%;
+    margin: 0;
+  }
+
+  .notification-list-content .notification-modal-body {
+    display: block;
+  }
+
+  .notification-list-content .notification-modal-body .notice-dialog-side {
+    display: block;
+    padding: 0;
+  }
+
+  .notification-list-content .notification-item .notification-user-name {
+    display: none;
+  }
+
+  .notification-list-content .notice-dialog-main {
+    height: 100%;
+  }
+
+  .notification-list-content .notice-dialog-side>ul {
+    flex-direction: row !important;
+  }
+
+  .notification-list-content .notice-dialog-side>ul>li {
+    width: 50% !important;
+  }
+
+  .notification-list-content .notice-dialog-side>ul>li .nav-link:before {
+    display: none;
+  }
+}

frontend/src/user-notifications.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import classname from 'classnames';
 import { Modal, ModalHeader, ModalBody, Dropdown, DropdownToggle, DropdownMenu, DropdownItem, TabPane, Nav, NavItem, NavLink, TabContent } from 'reactstrap';
 import { Utils } from './utils/utils';
 import { gettext } from './utils/constants';
@@ -214,15 +215,15 @@ class UserNotificationsDialog extends React.Component {
     return (
       <>
         <div className="notice-dialog-side">
-          <Nav pills className="flex-column">
+          <Nav pills className="flex-column w-100">
-            <NavItem role="tab" aria-selected={activeTab === 'general'} aria-controls="general-notice-panel">
+            <NavItem className="w-100" role="tab" aria-selected={activeTab === 'general'} aria-controls="general-notice-panel">
-              <NavLink className={activeTab === 'general' ? 'active' : ''} onClick={this.tabItemClick} tabIndex="0" value="general">
+              <NavLink className={classname('w-100', 'mr-0', { 'active': activeTab === 'general' })} onClick={this.tabItemClick} tabIndex="0" value="general">
                 {gettext('General')}
                 {generalNoticeListUnseen > 0 && <span>({generalNoticeListUnseen})</span>}
               </NavLink>
             </NavItem>
-            <NavItem role="tab" aria-selected={activeTab === 'discussion'} aria-controls="discussion-notice-panel">
+            <NavItem className="w-100" role="tab" aria-selected={activeTab === 'discussion'} aria-controls="discussion-notice-panel">
-              <NavLink className={activeTab === 'discussion' ? 'active' : ''} onClick={this.tabItemClick} tabIndex="1" value="discussion">
+              <NavLink className={classname('w-100', 'mr-0', { 'active': activeTab === 'discussion' })} onClick={this.tabItemClick} tabIndex="1" value="discussion">
                 {gettext('Discussion')}
                 {discussionNoticeListUnseen > 0 && <span>({discussionNoticeListUnseen})</span>}
               </NavLink>
@@ -260,13 +261,15 @@ class UserNotificationsDialog extends React.Component {
     else {
       const isDesktop = Utils.isDesktop();
       const theadData = isDesktop ? [
-        { width: '7%', text: '' },
+        { width: '2%', text: '' },
-        { width: '73%', text: gettext('Message') },
+        { width: '15%', text: gettext('User') },
-        { width: '20%', text: gettext('Time') }
+        { width: '63%', text: gettext('Message') },
+        { width: '20%', text: gettext('Update time') }
       ] : [
-        { width: '15%', text: '' },
+        { width: '2%', text: '' },
+        { width: '13%', text: gettext('User') },
         { width: '52%', text: gettext('Message') },
-        { width: '33%', text: gettext('Time') }
+        { width: '33%', text: gettext('Update time') }
       ];
       content = (
         <table className="table-hover" ref={ref => this.tableRef = ref}>