haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-08-23 09:11:15 +00:00
Code Issues Releases Wiki Activity

change notification dialog style

Browse Source
This commit is contained in:
Michael An 2024-12-02 13:35:49 +08:00 committed by 孙永强
parent 3f17045e47
commit b5a52668e9
4 changed files with 109 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/common/notice-item.js
View File

@ -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>

7
frontend/src/components/common/notification-popover/index.css
View File

@ -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;
}
}

86
frontend/src/css/user-notifications.css
View File

@ -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;
}
}

23
frontend/src/user-notifications.js
View File

@ -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">
<NavItem role="tab" aria-selected={activeTab === 'general'} aria-controls="general-notice-panel">
<NavLink className={activeTab === 'general' ? 'active' : ''} onClick={this.tabItemClick} tabIndex="0" value="general">
<Nav pills className="flex-column w-100">
<NavItem className="w-100" role="tab" aria-selected={activeTab === 'general'} aria-controls="general-notice-panel">
<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">
<NavLink className={activeTab === 'discussion' ? 'active' : ''} onClick={this.tabItemClick} tabIndex="1" value="discussion">
<NavItem className="w-100" role="tab" aria-selected={activeTab === 'discussion'} aria-controls="discussion-notice-panel">
<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: '73%', text: gettext('Message') },
{ width: '20%', text: gettext('Time') }
{ width: '2%', text: '' },
{ width: '15%', text: gettext('User') },
{ 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}>