Gitlink
/
forgeplus-react
32
0
Fork 29
Code Issues Pull Requests 1 Releases 1 Wiki Activity

通知中心静态页面

This commit is contained in:
谢思 2021-09-09 09:34:51 +08:00
parent e721399e17
commit 8e17efb9c6
6 changed files with 206 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/forge/Head/Header.js
View File

@ -13,6 +13,8 @@ import '../../modules/tpm/TPMIndex.css';
import CheckProfile from '../Component/ProfileModal/Profile';
import './header.scss';
import '../SecuritySetting/notice/myNotice/Index.scss'
import NoticeContent from './NoticeContent';
const $ = window.$
// TODO 这部分脚本从公共脚本中直接调用
const { Search } = Input;
@ -47,6 +49,7 @@ class NewHeader extends Component {
settings: null,
visiblemyss: false,
openSearch:false,
noticeType:"0",
}
}
componentDidMount() {
@ -256,20 +259,38 @@ class NewHeader extends Component {
)
}
click = (e) =>{
this.setState({
noticeType: e.key,
})
}
messageList=()=>{
let { noticeType } = this.state;
return(
<div className="messageHoverDiv">
<Menu mode="horizontal">
<Menu.Item key="0"><Badge count={5}>系统通知</Badge></Menu.Item>
<Menu.Item key="1"><Badge count={10}>私信</Badge></Menu.Item>
<Menu.Item key="2"><Badge count={99}>@我</Badge></Menu.Item>
</Menu>
<div className="content">
aaa
<div className="sshHead hoverNotice-head">
<Menu mode="horizontal" selectedKeys={noticeType} onClick={this.click}>
<Menu.Item key="0"><Badge count={5}>系统通知</Badge></Menu.Item>
<Menu.Item key="1" id="item"><Badge count={10}>私信</Badge></Menu.Item>
<Menu.Item key="2"><Badge count={99}>@我</Badge></Menu.Item>
</Menu>
</div>
<div className = "buttom">
<div className="hoverNotice-body">
<NoticeContent noticeType={noticeType}></NoticeContent>
<NoticeContent noticeType={noticeType}></NoticeContent>
<NoticeContent noticeType={noticeType}></NoticeContent>
<NoticeContent noticeType={noticeType}></NoticeContent>
<NoticeContent noticeType={noticeType}></NoticeContent>
<NoticeContent noticeType={noticeType}></NoticeContent>
<NoticeContent noticeType={noticeType}></NoticeContent>
<NoticeContent noticeType={noticeType}></NoticeContent>
<NoticeContent noticeType={noticeType}></NoticeContent>
<NoticeContent noticeType={noticeType}></NoticeContent>
</div>
<div className="hoverNotice-buttom">
<a>全部消息</a>
<a>标记为已读</a>
<a>所有{noticeType==="0"?"系统消息":noticeType==="1"?"私信":"@我"}一键已读</a>
</div>
</div>
)
@ -457,14 +478,14 @@ class NewHeader extends Component {
{/* {current_user && current_user.login && notice_url ? */}
{current_user && current_user.login ?
<Popover placement={`bottomRight`} content={this.messageList(settings && settings.personal)}>
<a href={`/settings/notice/myNotice`} >
<i className="iconfont icon-xiaoxilingdang color-grey-6 ml15 mr15"></i>
<span className="newslight" style={{ display: this.props.Headertop === undefined ? "none" : this.props.Headertop.new_message === true ? "block" : "none" }}>
</span>
</a>
</Popover>
:""
<Popover placement={`bottomRight`} content={this.messageList(settings && settings.personal)}>
<a href={`/settings/notice/myNotice`} >
<i className="iconfont icon-xiaoxilingdang color-grey-6 ml15 mr15"></i>
<span className="newslight" style={{ display: this.props.Headertop === undefined ? "none" : this.props.Headertop.new_message === true ? "block" : "none" }}>
</span>
</a>
</Popover>
: ""
}
</div>
{!user || (user && !user.login) ?

93
src/forge/Head/header.scss
View File

@ -27,21 +27,6 @@
margin-left: 15px;
}
.messageHoverDiv{
padding: 20px 17px 13px;
width: 386px;
min-height: 294px;
background: #FFFFFF;
box-shadow: 0px 4px 8px 2px rgba(212,212,212,0.5);
border-radius: 4px;
border: 1px solid red;
.buttom{
display: flex;
justify-content: space-between;
}
}
.currentMenu{
width: 120px;
text-align: center;
@ -142,4 +127,80 @@
width: 110px;
text-align: right;
}
}
}
//popover小尖尖
.ant-popover-arrow{
display: none;
}
//popover框
.ant-popover-inner-content {
width: 386px;
height: 446px;
box-shadow: 0px 4px 8px 2px rgba(212, 212, 212, 0.5);
border-radius: 4px;
margin-top: -10px;
}
.hoverNotice-head>.ant-menu-horizontal {
border-bottom: 1px solid #e8e8e8 !important;
}
.hoverNotice-head .ant-badge{
font-size: 14px !important;
}
.hoverNotice-body{
height: 342px;
overflow-y: scroll;
}
.hoverNotice-buttom{
display: flex;
justify-content: space-between;
margin-top: 12px;
a{
color: #466AFF;
}
}
.noticeCont{
display: flex;
padding:12px 10px 10px 0;
i{
font-size: 16px !important;
margin-right: 5px;
}
.text{
position: relative;
max-height: 48px;
color:#333333;
.boldSpan{
font-weight: 600;
}
.timeSpan{
position: absolute;
right: 0px;
font-size: 12px;
color: #666666;
}
}
}
::-webkit-scrollbar {
width: 5px; /*对垂直流动条有效*/
}
/*定义滑块颜色、内阴影及圆角*/
::-webkit-scrollbar-thumb {
border-radius: 6px;
box-shadow: inset 0 0 6px #FFF;
background-color: #D4D4D4;
}
::-webkit-scrollbar-track {
box-shadow: inset 0 0 6px #fff;
background-color: #FFF;
}

13
src/forge/SecuritySetting/Index.jsx
View File

@ -36,6 +36,12 @@ const SSHIndex = Loadable({
loader: () => import("./sub/SSH"),
loading: Loading,
});
const PrivateLetter = Loadable({
loader: () => import("./notice/privateLetter/Index"),
loading: Loading,
});
function Index(props){
const { current_user } = props;
const { pathname } = props.location;
@ -96,12 +102,17 @@ function Index(props){
<SSHIndex {...props} {...p}/>
)}
></Route>
<Route
path="/settings/notice/privateLetter"
render={(p)=>(
<PrivateLetter{...props} {...p}/>
)}
></Route>
</Switch>
</Gap>
</LongWidth>
</Box>
</div>
</div>
)
}

21
src/forge/SecuritySetting/notice/manager/Index.jsx
View File

@ -1,3 +1,4 @@
import { Button, Checkbox } from "antd";
import React from "react";
import './Index.scss';
@ -16,18 +17,18 @@ function NoticeManager(props){
</div>
<div className="cont">
<div className="title">易修状态变更</div>
<input type="checkbox" value="1" checked disabled></input><label>站内信</label>
<input type="checkbox" value="1"></input><label>邮件</label>
<Checkbox defaultChecked='true' disabled>站内信</Checkbox>
<Checkbox >邮件</Checkbox>
</div>
<div className="cont">
<div className="title">易修截止日期到达最后一天</div>
<input type="checkbox" value="1"></input><label>站内信</label>
<input type="checkbox" value="1"></input><label>邮件</label>
<Checkbox>站内信</Checkbox>
<Checkbox>邮件</Checkbox>
</div>
<div className="cont">
<div className="title">合并请求状态变更</div>
<input type="checkbox" value="1"></input><label>站内信</label>
<input type="checkbox" value="1"></input><label>邮件</label>
<Checkbox>站内信</Checkbox>
<Checkbox>邮件</Checkbox>
</div>
<div className="cont-top">
@ -35,13 +36,13 @@ function NoticeManager(props){
</div>
<div className="cont">
<div className="title">被关注</div>
<input type="checkbox" value="1" checked></input><label>站内信</label>
<input type="checkbox" value="1"></input><label>邮件</label>
<Checkbox defaultChecked='true'>站内信</Checkbox>
<Checkbox >邮件</Checkbox>
</div>
<div className="cont">
<div className="title">被点赞</div>
<input type="checkbox" value="1"></input><label>站内信</label>
<input type="checkbox" value="1"></input><label>邮件</label>
<Checkbox>站内信</Checkbox>
<Checkbox>邮件</Checkbox>
</div>
</div>
</div>

75
src/forge/SecuritySetting/notice/myNotice/Index.jsx
View File

@ -1,10 +1,11 @@
import React, { useState, useEffect } from 'react';
import { Badge, Button, Menu } from 'antd';
import './Index.scss';
import DelModal from '../../../Wiki/components/ModalFun';
function MyNotice(props) {
const [noticeType, setNoticeType] = useState("2");
const [noticeType, setNoticeType] = useState("1");
const [selectedNum, setSelectedNum] = React.useState(0);
const [isBatchDelete, setIsBatchDelete] = useState(false);
@ -13,17 +14,6 @@ function MyNotice(props) {
if (e.key != "2") {
setIsBatchDelete(false);
}
// if(e.key==="0"){
// const contentDiv = document.getElementsByClassName("content");
// for (var i = 0; i < contentDiv.length; i++) {
// contentDiv[i].className="content baselineDiv";
// }
// }else{
// const contentDiv = document.getElementsByClassName("content");
// for (var i = 0; i < contentDiv.length; i++) {
// contentDiv[i].className="content";
// }
// }
}
function onChange() {
@ -45,13 +35,23 @@ function MyNotice(props) {
setSelectedNum(e.target.checked ? checkbox.length : 0);
}
function deleteNotice() {
DelModal({
title: noticeType === "1" ? '删除私信' : '删除与我相关',
contentTitle: noticeType === "1" ? '您确定要删除与 xxx 的聊天吗？' : selectedNum === 0 ? '您确定要删除这条@我消息吗？' : '您确定要删除选中的' + selectedNum + '条消息吗？',
content: noticeType === "1" ? '此操作将删除与xxx的聊天框和xxx的所有聊天记录，请进行确认以防数据的丢失' : selectedNum === 0 ? '此操作将删除这条消息，请进行确认以防数据的丢失' : '此操作将删除选中的' + selectedNum + '条消息，请进行确认以防数据的丢失',
onOk: () => {
}
});
}
return (
<div>
<div className="sshHead">
<Menu mode="horizontal" selectedKeys={noticeType} onClick={handleClick}>
<Menu.Item key="0"><Badge count={5}>系统通知</Badge></Menu.Item>
<Menu.Item key="1"><Badge count={10}>私信</Badge></Menu.Item>
<Menu.Item key="1" id="item"><Badge count={10}>私信</Badge></Menu.Item>
<Menu.Item key="2"><Badge count={99}>@我</Badge></Menu.Item>
</Menu>
<button>所有消息一键已读</button>
@ -68,86 +68,89 @@ function MyNotice(props) {
<div className={isBatchDelete ? 'visible' : 'invisible'}>
<span>
<input type="checkbox" id="checkAll" onChange={onCheckAllChange} />&nbsp;
全选&nbsp;&nbsp;&nbsp;已选择<span id="numberSpan">{selectedNum}</span>项
全选&nbsp;&nbsp;&nbsp;已选择&nbsp;<span id="numberSpan">{selectedNum}</span>&nbsp;项
</span>
<div>
<button onClick={() => { setIsBatchDelete(false); }}>取消</button>&nbsp;&nbsp;&nbsp;&nbsp;
<button className="deleteBut">删除</button>
<button className="deleteBut" onClick={selectedNum === 0 ? "" : deleteNotice}>删除</button>
</div>
</div>
{noticeType === "1" ?
<div className="content">
<div className="mynotice-content" onClick={() => props.history.push('/settings/notice/privateLetter')}>
<Badge count={5}><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /></Badge>
<div className="right">
<div className="content_top">
<div className="private-letter-right">
<div>
<span>蒋宇航</span>
<span className="timeSpan">4分钟前</span>
<a>删除</a>
<a onClick={deleteNotice}>删除</a>
</div>
<div>
<span className="highlightSpan">最好的OpenStack控制台，对标OpenStack社区Horizon项目，在易用性、页面性能等方面进行深度优化，提供简单控制台。</span>
</div>
</div>
</div>
: <div className="content">
: <div className="mynotice-content">
<div className="cont">
<input type="checkbox" className={isBatchDelete ? 'checkbox' : 'invisible'} onChange={onChange} />
{/* 系统通知 */}
{noticeType === "0" ? <Badge color="#FA2020" /> : ""}
{noticeType === "0" ? <i className="iconfont icon-yixiuicon1"></i> : ""}
{noticeType === "2" ? <Badge count={5}><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /></Badge> : ""}
{noticeType === "2" ? <img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /> : ""}
{noticeType === "2" ? <Badge color="#FA2020" /> : ""}
<span className="highlightSpan">蒋宇航在<span className="boldSpan">Gitlink/Gitlink</span>新建易修:<span className="boldSpan">【Bug】链接地址错误</span></span>
</div>
<div className="cont">
<span className="timeSpan">4分钟前</span>
<a>标记为已读</a>&nbsp;&nbsp;&nbsp;{noticeType==="0"?"":<a style={{marginRight:'10px'}}>删除</a>}
<a>标记为已读</a>&nbsp;&nbsp;&nbsp;{noticeType === "0" ? "" : <a style={{ marginRight: '10px' }} onClick={deleteNotice}>删除</a>}
</div>
</div>}
{noticeType === "1" ?
<div className="content">
<div className="mynotice-content">
<Badge count={5}><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /></Badge>
<div className="right">
<div className="content_top">
<div className="private-letter-right">
<div>
<span>段甲生</span>
<span className="timeSpan">5分钟前</span>
<a>删除</a>
<a onClick={deleteNotice}>删除</a>
</div>
<div>
<span className="highlightSpan">gitlink平台 react 前端代码</span>
</div>
</div>
</div>
: <div className="content">
: <div className="mynotice-content">
<div className="cont">
<input type="checkbox" className={isBatchDelete ? 'checkbox' : 'invisible'} onChange={onChange} />
{/* 系统通知 */}
{noticeType === "0" ? <Badge color="#FA2020" /> : ""}
{noticeType === "0" ? <i className="iconfont icon-hebingqingqiuicon"></i> : ""}
{noticeType === "2" ? <Badge count={5}><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /></Badge> : ""}
<span className="highlightSpan">蒋宇航在<span className="boldSpan">蒋宇航/软件工程课程协同开发案例</span>指派给你一个合并请求：<span className="boldSpan">请进行合并请求test</span></span>
{noticeType === "2" ? <img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /> : ""}
{noticeType === "2" ? <Badge color="#FA2020" /> : ""}
<span className="highlightSpan">蒋宇航在<span className="boldSpan">蒋宇航/软件工程课程协同开发案例</span>指派给你一个合并请求：<span className="boldSpan">请进行合并请求test</span>请进行合并请求test请进行合并请求test请进行合并请求test请进行合并请求test请进行合并请求test</span>
</div>
<div className="cont">
<span className="timeSpan">10分钟前</span>
<a>标记为已读</a>&nbsp;&nbsp;&nbsp;{noticeType==="0"?"":<a style={{marginRight:'10px'}}>删除</a>}
<a>标记为已读</a>&nbsp;&nbsp;&nbsp;{noticeType === "0" ? "" : <a style={{ marginRight: '10px' }} onClick={deleteNotice}>删除</a>}
</div>
</div>}
{noticeType === "1" ?
<div className="content">
<div className="mynotice-content">
<Badge count={5}><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /></Badge>
<div className="right">
<div className="content_top">
<div className="private-letter-right">
<div>
<span>巴拉迪维</span>
<span className="timeSpan">7分钟前</span>
<a>删除</a>
<a onClick={deleteNotice}>删除</a>
</div>
<div>
<span className="highlightSpan">构建卷积神经网络，训练模型，预测模型效果。</span>
</div>
</div>
</div>
: <div className="content">
: <div className="mynotice-content">
<div className="cont">
<input type="checkbox" className={isBatchDelete ? 'checkbox' : 'invisible'} onChange={onChange} />
{/* 系统通知 */}
@ -158,7 +161,7 @@ function MyNotice(props) {
</div>
<div className="cont">
<span className="timeSpan">1小时前</span>
<a>标记为已读</a>&nbsp;&nbsp;&nbsp;{noticeType==="0"?"":<a style={{marginRight:'10px'}}>删除</a>}
<a>标记为已读</a>&nbsp;&nbsp;&nbsp;{noticeType === "0" ? "" : <a style={{ marginRight: '10px' }} onClick={deleteNotice}>删除</a>}
</div>
</div>}
</div>

47
src/forge/SecuritySetting/notice/myNotice/Index.scss
View File

@ -2,23 +2,29 @@
padding:0 10px 0px 0px !important;
.ant-badge{
font-size: 16px;
font-weight: 500;
color: #333333;
}
.ant-menu-item{
padding:0px;
margin-right:50px!important;
// margin-right:34px!important;
height: 34px;
width: 64px;
text-align: center;
line-height: 0px;
position: relative;
}
#item{
margin: 0 34px !important;
}
li.ant-menu-item, .ant-menu-horizontal > .ant-menu-item {
border-bottom: 0px;
}
.ant-menu-item-selected{
color: #333333 !important;
font-weight: 700;
font-weight: 600;
border-bottom: 2px solid #2A61FF !important;
}
@ -57,15 +63,17 @@ button:active {
.deleteBut:hover{
background: #DF0002;
border: 1px solid #DF0002;
color:#FFFFFF;
}
.deleteBut:active{
background: #CE0002;
border: 1px solid #CE0002;
color:#FFFFFF;
}
.content {
.mynotice-content {
display: flex;
align-items: center;
justify-content: space-between;
@ -107,6 +115,7 @@ button:active {
.cont{
display: flex;
align-items: center;
padding:0;
}
}
@ -137,24 +146,26 @@ button:active {
line-height: 16px;
}
.right {
.private-letter-right {
flex: auto;
margin: 0px 10px;
}
.right div {
display: flex;
justify-content: space-between;
span{
max-width: 640px;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
& div{
display: flex;
justify-content: space-between;
}
}
.highlightSpan:hover{
color: #466AFF;
.highlightSpan{
max-width: 40rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
&:hover{
color: #466AFF;
cursor: pointer;
}
}
#numberSpan{
color: #466AFF;
}