Nigel
/
forgeplus-react
forked from Gitlink/forgeplus-react
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

通知中心静态页面

This commit is contained in:
谢思 2021-09-09 14:25:04 +08:00
parent 8e17efb9c6
commit e07e435557
11 changed files with 232 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -55,15 +55,15 @@ function Index(props){
<img src={getImageUrl(`/${current_user && current_user.image_url}`)} alt=""/>
<span>{current_user && current_user.username}</span>
</div>
<ul className="securityUl" style={{'border-bottom':'1px solid rgba(153, 153, 153, 0.22)','padding-bottom':'5px'}}>
<li>消息通知</li>
<li className={pathname.indexOf("/settings/notice/myNotice")>-1 ?"active":""}><Link to={`/settings/notice/myNotice`}><i className="iconfont icon-wodetongzhi"></i><span>我的通知</span></Link></li>
<li className={pathname.indexOf("/settings/notice/noticeManager")>-1 ?"active":""}><Link to={`/settings/notice/noticeManager`}><i className="iconfont icon-tongzhiguanli"></i><span>通知管理</span></Link></li>
</ul>
<ul className="securityUl">
<ul className="securityUl ul-border-buttom">
<li>个人信息</li>
<li className={pathname.indexOf("/settings/profile")>-1 ?"active":""}><Link to={`/settings/profile`}><i className="iconfont icon-gerenziliao mr5 font-14"></i>基本资料</Link></li>
</ul>
<ul className="securityUl ul-border-buttom">
<li>消息通知</li>
<li className={pathname.indexOf("/settings/notice/myNotice")>-1 || pathname.indexOf("/settings/notice/privateLetter")>-1 ?"active":""}><Link to={`/settings/notice/myNotice`}><i className="iconfont icon-wodetongzhi"></i><span>我的通知</span></Link></li>
<li className={pathname.indexOf("/settings/notice/noticeManager")>-1 ?"active":""}><Link to={`/settings/notice/noticeManager`}><i className="iconfont icon-tongzhiguanli"></i><span>通知管理</span></Link></li>
</ul>
<ul className="securityUl">
<li>安全设置</li>
<li className={pathname.indexOf("/settings/SSH")>-1 ?"active":""}><Link to={`/settings/SSH`}><i className="iconfont icon-xuanzhongssh_icon mr5 font-14"></i><span>SSH密钥</span></Link></li>

16
src/forge/SecuritySetting/Index.scss
View File

@ -36,10 +36,11 @@
color: #333;
margin-bottom: 0px;
padding-bottom: 0px;
padding-top: 5px;
li{
font-size: 14px;
margin-top: 8px;
margin-bottom: 8px;
margin-top: 10px;
margin-bottom: 10px;
height: 27px;
line-height: 27px;
position: relative;
@ -66,7 +67,7 @@
width: 3px;
border-radius: 2px;
content: "";
background-color: #2A61FF;
background-color: #466AFF;
}
i{
@ -75,6 +76,10 @@
}
}
}
.ul-border-buttom{
border-bottom: 1px solid rgba(153, 153, 153, 0.22);
padding-bottom: 5px;
}
}
.sshHead{
display: flex;
@ -86,6 +91,11 @@
&>span{
font-size: 18px;
font-weight: 600;
color: #333333;
}
& .add-ssh-but{
padding:0 12px;
margin-bottom: 5px;
}
}
.ant-list-item{

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

@ -6,42 +6,91 @@ import './Index.scss';
function NoticeManager(props){
return(
<div>
<div className="notice01">
<div className="sshHead">
<span>通知管理</span>
</div>
<div className="body">
<span className="tip" style={{fontSize:'16px',fontWeight:'400'}}>您可以通过通知管理来选择接受通知的方式</span>
<div className="cont-top">
<div>
<span className="notice-manager-tip">您可以通过通知管理来选择接受通知的方式</span>
<div className="manager-cont-top">
我创建或负责的
</div>
<div className="cont">
<div className="title">易修状态变更</div>
<div className="manager-cont">
<div className="manager-cont-title">易修状态变更</div>
<Checkbox defaultChecked='true' disabled>站内信</Checkbox>
<Checkbox >邮件</Checkbox>
</div>
<div className="cont">
<div className="title">易修截止日期到达最后一天</div>
<Checkbox>站内信</Checkbox>
<div className="manager-cont">
<div className="manager-cont-title">易修截止日期到达最后一天</div>
<Checkbox defaultChecked='true' disabled>站内信</Checkbox>
<Checkbox >邮件</Checkbox>
</div>
<div className="cont">
<div className="title">合并请求状态变更</div>
<Checkbox>站内信</Checkbox>
<div className="manager-cont">
<div className="manager-cont-title">合并请求状态变更</div>
<Checkbox defaultChecked='true' disabled>站内信</Checkbox>
<Checkbox >邮件</Checkbox>
</div>
<div className="cont-top">
我管理的仓库
</div>
<div className="cont">
<div className="title">被关注</div>
<div className="manager-cont">
<div className="manager-cont-title">易修有新的评论</div>
<Checkbox defaultChecked='true'>站内信</Checkbox>
<Checkbox >邮件</Checkbox>
</div>
<div className="cont">
<div className="title">被点赞</div>
<Checkbox>站内信</Checkbox>
<div className="manager-cont">
<div className="manager-cont-title">合并请求有新的评论</div>
<Checkbox defaultChecked='true'>站内信</Checkbox>
<Checkbox >邮件</Checkbox>
</div>
<div className="manager-cont-top">
我管理的仓库
</div>
<div className="manager-cont">
<div className="manager-cont-title">被关注</div>
<Checkbox defaultChecked='true'>站内信</Checkbox>
<Checkbox >邮件</Checkbox>
</div>
<div className="manager-cont">
<div className="manager-cont-title">被点赞</div>
<Checkbox defaultChecked='true'>站内信</Checkbox>
<Checkbox >邮件</Checkbox>
</div>
<div className="manager-cont">
<div className="manager-cont-title">被复刻</div>
<Checkbox defaultChecked='true'>站内信</Checkbox>
<Checkbox >邮件</Checkbox>
</div>
<div className="manager-cont">
<div className="manager-cont-title">有新的里程碑</div>
<Checkbox defaultChecked='true'>站内信</Checkbox>
<Checkbox >邮件</Checkbox>
</div>
<div className="manager-cont-top">
我关注的仓库
</div>
<div className="manager-cont">
<div className="manager-cont-title">被删除</div>
<Checkbox defaultChecked='true'>站内信</Checkbox>
<Checkbox >邮件</Checkbox>
</div>
<div className="manager-cont">
<div className="manager-cont-title">被转移</div>
<Checkbox defaultChecked='true'>站内信</Checkbox>
<Checkbox >邮件</Checkbox>
</div>
<div className="manager-cont">
<div className="manager-cont-title">有新的易修</div>
<Checkbox defaultChecked='true'>站内信</Checkbox>
<Checkbox >邮件</Checkbox>
</div>
<div className="manager-cont">
<div className="manager-cont-title">有新的合并请求</div>
<Checkbox defaultChecked='true'>站内信</Checkbox>
<Checkbox >邮件</Checkbox>
</div>
<div className="manager-cont">
<div className="manager-cont-title">有新的版本发布</div>
<Checkbox defaultChecked='true'>站内信</Checkbox>
<Checkbox >邮件</Checkbox>
</div>
</div>

62
src/forge/SecuritySetting/notice/manager/Index.scss
View File

@ -1,5 +1,8 @@
.cont-top{
.notice-manager-tip{
font-size:16px;
font-weight:400;
}
.manager-cont-top{
font-size: 14px;
font-weight: 600;
height: 44px;
@ -12,18 +15,63 @@
margin-top: 25px;
}
.cont{
.manager-cont{
padding: 8px 20px 6px;
display: flex;
align-items: center;
font-size: 14px;
.title{
.manager-cont-title{
width: 320px;
}
label{
margin-left: 6px;
margin-right: 34px;
}
.notice01{
.ant-checkbox-disabled.ant-checkbox-checked .ant-checkbox-inner::after {
border-color: white;
}
.ant-checkbox-disabled .ant-checkbox-inner {
background-color: #999999 !important;
border-color: #999999 !important;
}
.ant-checkbox-checked .ant-checkbox-inner {
background-color: #466AFF;
border: #466AFF;
}
.ant-checkbox-checked::after{
border: 1px solid #466AFF;
}
.ant-checkbox-wrapper:hover .ant-checkbox-inner, .ant-checkbox:hover .ant-checkbox-inner, .ant-checkbox-input:focus + .ant-checkbox-inner,.ant-radio-checked .ant-radio-inner,.ant-radio-wrapper:hover .ant-radio, .ant-radio:hover .ant-radio-inner, .ant-radio-input:focus + .ant-radio-inner {
border-color: #466AFF;
}
.ant-checkbox + span,.manager-cont-title {
color: #000000;
}
.ant-radio-inner::after{
background-color:#466AFF;
}
// .ant-radio-checked .ant-radio-inner {
// border-color: #466AFF;
// }
.but25{
background-color: #466AFF;
color: #fff;
border-color: #466AFF;
&:hover{
background-color: #4a76f8;
border-color: #4a76f8;
}
&:active{
background-color: #466AFF;
border-color: #466AFF;
}
}
}

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

@ -1,6 +1,7 @@
import React, { useState, useEffect } from 'react';
import { Badge, Button, Menu } from 'antd';
import { Badge, Button, Checkbox, Menu } from 'antd';
import './Index.scss';
import '../manager/Index.scss'
import DelModal from '../../../Wiki/components/ModalFun';
function MyNotice(props) {
@ -47,29 +48,30 @@ function MyNotice(props) {
}
return (
<div>
<div className="notice01">
<div className="sshHead">
<Menu mode="horizontal" selectedKeys={noticeType} onClick={handleClick}>
<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>
<button>所有消息一键已读</button>
<button>所有{noticeType==="0"?"系统通知":noticeType==="1"?"私信":"@我"}一键已读</button>
</div>
<div className={isBatchDelete ? "invisible " : "visible"}>
<span className="alignCenter">
<input type="checkbox"></input>&nbsp;
仅看未读{noticeType === "1" ? "私信" : "消息"}（12）
</span>
<div className="vertical-center-style">
{/* <input type="checkbox"></input>&nbsp;
仅看未读{noticeType === "1" ? "私信" : "消息"}（12） */}
<Checkbox >仅看未读{noticeType === "1" ? "私信" : "消息"}（12）</Checkbox>
</div>
{noticeType === "2" ? <button onClick={() => { setIsBatchDelete(true); }}>批量删除</button> : ""}
</div>
<div className={isBatchDelete ? 'visible' : 'invisible'}>
<span>
<div className="vertical-center-style">
<input type="checkbox" id="checkAll" onChange={onCheckAllChange} />&nbsp;
全选&nbsp;&nbsp;&nbsp;已选择&nbsp;<span id="numberSpan">{selectedNum}</span>&nbsp;项
</span>
</div>
<div>
<button onClick={() => { setIsBatchDelete(false); }}>取消</button>&nbsp;&nbsp;&nbsp;&nbsp;
<button className="deleteBut" onClick={selectedNum === 0 ? "" : deleteNotice}>删除</button>
@ -77,7 +79,7 @@ function MyNotice(props) {
</div>
{noticeType === "1" ?
<div className="mynotice-content" onClick={() => props.history.push('/settings/notice/privateLetter')}>
<div className="mynotice-content vertical-center-style" onClick={() => props.history.push('/settings/notice/privateLetter')}>
<Badge count={5}><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /></Badge>
<div className="private-letter-right">
<div>
@ -86,28 +88,28 @@ function MyNotice(props) {
<a onClick={deleteNotice}>删除</a>
</div>
<div>
<span className="highlightSpan">最好的OpenStack控制台，对标OpenStack社区Horizon项目，在易用性、页面性能等方面进行深度优化，提供简单控制台。</span>
<span className="highlightSpan letter-length-limit">最好的OpenStack控制台，对标OpenStack社区Horizon项目,最好的OpenStack控制台，对标OpenStack社区Horizon项目，在易用性、页面性能等方面进行深度优化，提供简单控制台。</span>
</div>
</div>
</div>
: <div className="mynotice-content">
<div className="cont">
: <div className="mynotice-content vertical-center-style">
<div className="mynotice-cont vertical-center-style">
<input type="checkbox" className={isBatchDelete ? 'checkbox' : 'invisible'} onChange={onChange} />
{/* 系统通知 */}
{noticeType === "0" ? <Badge color="#FA2020" /> : ""}
{noticeType === "0" ? <i className="iconfont icon-yixiuicon1"></i> : ""}
{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>
<span className={noticeType==="0"?"sysNotice-length highlightSpan":"at-length highlightSpan"}>蒋宇航在<span className="boldSpan">Gitlink/Gitlink</span>新建易修:<span className="boldSpan">【Bug】链接地址错误</span></span>
</div>
<div className="cont">
<div className="mynotice-cont vertical-center-style">
<span className="timeSpan">4分钟前</span>
<a>标记为已读</a>&nbsp;&nbsp;&nbsp;{noticeType === "0" ? "" : <a style={{ marginRight: '10px' }} onClick={deleteNotice}>删除</a>}
<a>标记为已读</a>&nbsp;&nbsp;&nbsp;{noticeType === "0" ? "" : <a className="float-left-little" onClick={deleteNotice}>删除</a>}
</div>
</div>}
{noticeType === "1" ?
<div className="mynotice-content">
<div className="mynotice-content vertical-center-style">
<Badge count={5}><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /></Badge>
<div className="private-letter-right">
<div>
@ -116,28 +118,28 @@ function MyNotice(props) {
<a onClick={deleteNotice}>删除</a>
</div>
<div>
<span className="highlightSpan">gitlink平台 react 前端代码</span>
<span className="highlightSpan letter-length-limit">gitlink平台 react 前端代码</span>
</div>
</div>
</div>
: <div className="mynotice-content">
<div className="cont">
: <div className="mynotice-content vertical-center-style">
<div className="mynotice-cont vertical-center-style">
<input type="checkbox" className={isBatchDelete ? 'checkbox' : 'invisible'} onChange={onChange} />
{/* 系统通知 */}
{noticeType === "0" ? <Badge color="#FA2020" /> : ""}
{noticeType === "0" ? <i className="iconfont icon-hebingqingqiuicon"></i> : ""}
{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>
<span className={noticeType==="0"?"sysNotice-length highlightSpan":"at-length highlightSpan"}>蒋宇航在<span className="boldSpan">蒋宇航/软件工程课程协同开发案例</span>指派给你一个合并请求：<span className="boldSpan">请进行合并请求test</span>请进行合并请求test请进行合并请求test请进行合并请求test请进行合并请求test请进行合并请求test</span>
</div>
<div className="cont">
<div className="mynotice-cont vertical-center-style">
<span className="timeSpan">10分钟前</span>
<a>标记为已读</a>&nbsp;&nbsp;&nbsp;{noticeType === "0" ? "" : <a style={{ marginRight: '10px' }} onClick={deleteNotice}>删除</a>}
<a>标记为已读</a>&nbsp;&nbsp;&nbsp;{noticeType === "0" ? "" : <a className="float-left-little" onClick={deleteNotice}>删除</a>}
</div>
</div>}
{noticeType === "1" ?
<div className="mynotice-content">
<div className="mynotice-content vertical-center-style">
<Badge count={5}><img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /></Badge>
<div className="private-letter-right">
<div>
@ -146,22 +148,22 @@ function MyNotice(props) {
<a onClick={deleteNotice}>删除</a>
</div>
<div>
<span className="highlightSpan">构建卷积神经网络，训练模型，预测模型效果。</span>
<span className="highlightSpan letter-length-limit">构建卷积神经网络，训练模型，预测模型效果。</span>
</div>
</div>
</div>
: <div className="mynotice-content">
<div className="cont">
: <div className="mynotice-content vertical-center-style">
<div className="mynotice-cont vertical-center-style">
<input type="checkbox" className={isBatchDelete ? 'checkbox' : 'invisible'} onChange={onChange} />
{/* 系统通知 */}
{noticeType === "0" ? <span>&nbsp;&nbsp;&nbsp;</span> : ""}
{noticeType === "0" ? <i className="iconfont icon-lichengbeiicon"></i> : ""}
{noticeType === "2" ? <img src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" /> : ""}
<span className="highlightSpan">你关注的仓库<span className="boldSpan">王涛/协同案例分析</span>已被删除</span>
<span className={noticeType==="0"?"sysNotice-length highlightSpan":"at-length highlightSpan"}>你关注的仓库<span className="boldSpan">王涛/协同案例分析</span>已被删除</span>
</div>
<div className="cont">
<div className="mynotice-cont vertical-center-style">
<span className="timeSpan">1小时前</span>
<a>标记为已读</a>&nbsp;&nbsp;&nbsp;{noticeType === "0" ? "" : <a style={{ marginRight: '10px' }} onClick={deleteNotice}>删除</a>}
<a>标记为已读</a>&nbsp;&nbsp;&nbsp;{noticeType === "0" ? "" : <a className="float-left-little" onClick={deleteNotice}>删除</a>}
</div>
</div>}
</div>

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

@ -49,6 +49,7 @@ button {
background: #FAFBFC;
border: 1px solid #D0D0D0;
border-radius: 4px;
height: 32px;
}
button:hover {
background: #F3F4F6;
@ -74,8 +75,6 @@ button:active {
}
.mynotice-content {
display: flex;
align-items: center;
justify-content: space-between;
padding: 15px 0 15px 10px;
border-bottom: 1px solid #EEEEEE;
@ -112,9 +111,7 @@ button:active {
// margin-right: 10px;
}
.cont{
display: flex;
align-items: center;
.mynotice-cont{
padding:0;
}
}
@ -156,16 +153,35 @@ button:active {
}
.highlightSpan{
max-width: 40rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
&:hover{
color: #466AFF;
cursor: pointer;
}
}
.letter-length-limit{
max-width: 50rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.sysNotice-length{
max-width: 52rem;
}
.at-length{
max-width: 48rem;
}
#numberSpan{
color: #466AFF;
}
.vertical-center-style{
display: flex;
align-items: center;
}
.float-left-little{
margin-right: 10px;
}

2
src/forge/SecuritySetting/sub/SSH.jsx
View File

@ -56,7 +56,7 @@ function SSH(props) {
<SSHDetail visible={visibleDesc} onCancel={()=>setVisibleDesc(false)} desc={content}/>
<div className="sshHead">
<span>SSH密钥</span>
<Button type="primary" size="large" onClick={()=>props.history.push('/settings/SSH/new')}>添加SSH密钥</Button>
<Button type="primary" size="large" onClick={()=>props.history.push('/settings/SSH/new')} className="add-ssh-but">添加SSH密钥</Button>
</div>
{
list && list.length > 0 &&

2
src/forge/users/Material/Base.jsx
View File

@ -125,7 +125,7 @@ export default Form.create()(
</Form.Item>
<AlignCenter>
<span className="ant-form-item-label"></span>
<Button type={"primary"} onClick={submit}>提交</Button>
<Button className="but25" type={"primary"} onClick={submit}>提交</Button>
{/* <Button type={"default"} onClick={()=>props.history.push(`/${current_user && current_user.login}`)} className="ml20">取消</Button> */}
</AlignCenter>
</Form>

6
src/forge/users/Material/Index.jsx
View File

@ -1,5 +1,6 @@
import React , { useEffect , useState } from 'react';
import './Index.scss';
import '../../SecuritySetting/notice/manager/Index.scss'
import { Menu } from 'antd';
import { Link } from 'react-router-dom';
import Base from './Base';
@ -25,11 +26,14 @@ function Index(props){
return(
<div>
<div className="notice01">
<div className="sshHead">
<Menu selectedKeys={[key]} mode={'horizontal'} className="infosRightMenu">
<Menu.Item key="0"><Link to={`/settings/profile`}>基本资料</Link></Menu.Item>
{/* <Menu.Item key="0"><Link to={`/settings/profile`}>基本资料</Link></Menu.Item> */}
{/* <Menu.Item key="1"><Link to={`/${username}/password`}>密码管理</Link></Menu.Item> */}
</Menu>
</div>
<div style={{padding:"20px"}}>
{
key === "0" ?

6
src/forge/users/Material/Index.scss
View File

@ -19,6 +19,12 @@
.ant-menu-item{
a{
font-size: 16px;
color: #333333;
position: relative;
bottom: -10px;
}
a:hover{
color: #333333;
}
}
}

2
src/forge/users/Material/Password.jsx
View File

@ -89,7 +89,7 @@ export default Form.create()(
</Form.Item>
<AlignCenter style={{marginTop:"20px"}}>
<span className="ant-form-item-label"></span>
<Button type={"primary"} onClick={submit}>提交</Button>
<Button className="but25" type={"primary"} onClick={submit}>提交</Button>
<Button type={"default"} onClick={()=>props.history.push(`/${username}`)} className="ml20">取消</Button>
</AlignCenter>
</Form>