mirror of
https://github.com/haiwen/seahub.git
synced 2025-08-16 22:17:59 +00:00
change notification dialog style
This commit is contained in:
parent
3f17045e47
commit
b5a52668e9
@ -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>
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
@ -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}>
|
||||
|
Loading…
Reference in New Issue
Block a user