forked from Gitlink/forgeplus-react
first
This commit is contained in:
parent
3bf9de2d4c
commit
81b3a58f00
File diff suppressed because it is too large
Load Diff
|
@ -187,7 +187,7 @@
|
|||
"eslintConfig": {
|
||||
"extends": "react-app"
|
||||
},
|
||||
"proxy": "http://localhost:3000",
|
||||
"proxy": "http://localhost:3001",
|
||||
"port": "3007",
|
||||
"devDependencies": {
|
||||
"@babel/runtime": "7.0.0-beta.51",
|
||||
|
|
|
@ -23,6 +23,7 @@ import Nodata from '../Nodata';
|
|||
import Invite from './sub/Invite';
|
||||
import CheckProfile from '../Component/ProfileModal/Profile';
|
||||
import RenderHtml from '../../components/render-html';
|
||||
import Badge from "./sub/Badge";
|
||||
/**
|
||||
* projectDetail.type:0是托管项目,1是镜像项目,2是同步镜像项目(为2时不支持在线创建、在线上传、在线修改、在线删除、创建合并请求等功能)
|
||||
*/
|
||||
|
@ -80,6 +81,12 @@ function CoderDepot(props){
|
|||
const distribution = details && details.type != 2 && (details.permission === "Admin" || details.permission === "Owner" || details.permission === "Manager");
|
||||
const { bannerList } = props;
|
||||
|
||||
|
||||
// test data
|
||||
const badges = {badge:[{ "login": "many_stars", "image_url": "https://www.gitlink.org.cn/system/lets/letter_avatars/2/J/236_194_58/120.png", "description": "test description1"}, {"login": "many_stars", "image_url": "https://www.gitlink.org.cn/system/lets/letter_avatars/2/X/181_166_38/120.png", "description": "test description2"}], total_count: 3}
|
||||
console.log(badges.badge)
|
||||
console.log(badges.total_count)
|
||||
|
||||
useEffect(()=>{
|
||||
if(bannerList && bannerList.length>0){
|
||||
let a = bannerList.filter(i=>i.menu_name === "pulls");
|
||||
|
@ -346,6 +353,7 @@ function CoderDepot(props){
|
|||
const fileOperate = type === "dir" && projectDetail && projectDetail.type !== 2 && ((projectDetail.permission && projectDetail.permission !=="Reporter") || (current_user && current_user.admin));
|
||||
|
||||
return(
|
||||
|
||||
<WhiteBack>
|
||||
<UpdateDescModal desc={desc} website={website} lesson_url={lesson_url} visible={openModal} onCancel={()=>setOpenModal(false)} onOk={okUpdate}/>
|
||||
<Spin spinning={isSpin}>
|
||||
|
@ -369,7 +377,8 @@ function CoderDepot(props){
|
|||
</React.Fragment>
|
||||
}
|
||||
<div style={{minHeight:"500px"}}>
|
||||
{
|
||||
{
|
||||
|
||||
projectDetail &&
|
||||
<Box className="Panels">
|
||||
<LongWidth>
|
||||
|
@ -550,6 +559,19 @@ function CoderDepot(props){
|
|||
<Invite code={inviteCode}/>
|
||||
</div>
|
||||
}
|
||||
{/*{*/}
|
||||
{/* inviteCode &&*/}
|
||||
{/* <div>*/}
|
||||
{/* <Badge code={inviteCode}/>*/}
|
||||
{/* </div>*/}
|
||||
{/*}*/}
|
||||
|
||||
{/* 徽章 */}
|
||||
{
|
||||
badges && badges.total_count >0 &&
|
||||
<Badge badges={badges} owner={owner} />
|
||||
}
|
||||
|
||||
{
|
||||
lesson_url &&
|
||||
<div>
|
||||
|
|
|
@ -200,6 +200,26 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.attrBadge{
|
||||
padding-top: 12px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-bottom: 2px;
|
||||
a{
|
||||
margin: 0px 17px 10px 0px;
|
||||
img{
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
&:nth-child(5n){
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.progress{
|
||||
display: flex;
|
||||
border-radius: 2px;
|
||||
|
|
|
@ -0,0 +1,103 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
import { AlignCenter , FlexAJ } from '/home/gitlink/forgeplus/public/react/forgeplus-react/src/forge/Component/layout';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { Popover , Spin , Button } from 'antd';
|
||||
import { getImageUrl } from 'educoder';
|
||||
import '/home/gitlink/forgeplus/public/react/forgeplus-react/src/forge/Component/Component.scss';
|
||||
|
||||
|
||||
|
||||
|
||||
// projectDetail && projectDetail.contributors && projectDetail.contributors.total_count >0 &&
|
||||
// <Badge contributors={projectDetail.contributors} owner={owner} projectsId={projectsId} />?
|
||||
|
||||
function Badge({badges,owner}){
|
||||
const [ list , setList ]= useState(undefined);
|
||||
const [ total , setTotal ]= useState(0);
|
||||
const [ menu , setMenu ] = useState("");
|
||||
const [ login , setLogin ] = useState(undefined);
|
||||
const [ badge , setBadge ] = useState(undefined);
|
||||
|
||||
useEffect(()=>{
|
||||
if(badges && badges.total_count>0){
|
||||
setTotal(badges.total_count);
|
||||
setList(badges.badge);
|
||||
}
|
||||
},[badges])
|
||||
|
||||
useEffect(()=>{
|
||||
setMenusFunc(badge);
|
||||
},[badge])
|
||||
|
||||
|
||||
function setMenusFunc(data){
|
||||
if(data){
|
||||
let ele = (
|
||||
<AlignCenter>
|
||||
<Link to={`/${data.login}`}><img src={data.image_url} alt="" className="radius" width="38px" height="38px"/></Link>
|
||||
<div className="ml10">
|
||||
<Link to={`/${data.login}`}>{data.name}</Link>
|
||||
{ data.description && <span className="leftline">{data.description}</span> }
|
||||
</div>
|
||||
</AlignCenter>
|
||||
)
|
||||
setMenu(ele);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
function setVisibleFunc(flag,l,index){
|
||||
if(l !== badge){
|
||||
setBadge(l);
|
||||
}
|
||||
var lx = list.concat();
|
||||
lx.map(i=>i.visible =false);
|
||||
if(flag){
|
||||
lx[index].visible = flag;
|
||||
}
|
||||
lx.splice();
|
||||
setList(lx);
|
||||
}
|
||||
|
||||
// {
|
||||
// "list": [
|
||||
// {
|
||||
// "login": "many_stars",
|
||||
// "image_url": "User",
|
||||
// "description": "test description"
|
||||
// },
|
||||
// {
|
||||
// "login": "many_stars",
|
||||
// "image_url": "User",
|
||||
// "description": "test description"
|
||||
// }
|
||||
// ],
|
||||
// "total_count": 2
|
||||
// }
|
||||
return(
|
||||
<div className="halfs">
|
||||
<Link to={`/${owner}/badge`} className="font-16 color-ooo hoverA">
|
||||
<span>徽章</span>
|
||||
{ badges && badges.total_count > 0 && <span className="infoCount">{badges.total_count}</span>}
|
||||
</Link>
|
||||
|
||||
<div className="attrBadge" onMouseLeave={()=>setVisibleFunc(false)}>
|
||||
{
|
||||
total > 0 ?
|
||||
list.map((item,key)=>{
|
||||
return(
|
||||
<Popover content={menu} visible={item.visible} overlayClassName="menuPanels" placement="top">
|
||||
<Link key={key} to={`/${item.login}`}>
|
||||
<img src={item.image_url} alt="" onMouseOver={()=>setVisibleFunc(true,item,key)}/>
|
||||
</Link>
|
||||
</Popover>
|
||||
)
|
||||
})
|
||||
:""
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
//{getImageUrl(`/${item.image_url}`)}
|
||||
export default Badge;
|
|
@ -239,4 +239,59 @@ ul.ant-menu.menuStyle{
|
|||
content:"";
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.attrBadge{
|
||||
padding-top: 12px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-bottom: 2px;
|
||||
a{
|
||||
margin: 0px 17px 10px 0px;
|
||||
img{
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
&:nth-child(5n){
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.attrBadge{
|
||||
padding-top: 12px;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
padding-bottom: 2px;
|
||||
a{
|
||||
margin: 0px 17px 10px 0px;
|
||||
img{
|
||||
border-radius: 50%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
&:nth-child(5n){
|
||||
margin-right: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.infoCount{
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
text-align: center;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
background-color:rgba(153, 153, 153, 0.13);;
|
||||
color:#666;
|
||||
border-radius: 12px;
|
||||
margin-left: 6px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import React, { Component } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { Button, Spin , Menu } from "antd";
|
||||
import { Button, Spin , Menu, Popover } from "antd";
|
||||
import FocusButton from "../UsersList/focus_button";
|
||||
|
||||
import axios from "axios";
|
||||
|
@ -13,6 +13,10 @@ import './Index.scss';
|
|||
|
||||
import Loadable from "react-loadable";
|
||||
import Loading from "../../Loading";
|
||||
import Badge from "../Main/sub/Badge";
|
||||
|
||||
//test data
|
||||
const badges = {badge:[{ "login": "many_stars", "image_url": "https://testforgeplus.trustie.net//system/lets/letter_avatars/2/G/178_217_57/120.png", "description": "test description1"}, {"login": "many_stars", "image_url": "https://testforgeplus.trustie.net//images/avatars/User/36480?t=1686645429", "description": "test description2"}], total_count: 3}
|
||||
|
||||
const UpdateInfo = Loadable({
|
||||
loader: () => import("./Material/Index"),
|
||||
|
@ -70,6 +74,7 @@ class Infos extends Component {
|
|||
};
|
||||
}
|
||||
|
||||
|
||||
renderPath=(pathname)=>{
|
||||
const { username } = this.props.match.params;
|
||||
if(pathname === `/${username}`){
|
||||
|
@ -130,7 +135,9 @@ class Infos extends Component {
|
|||
this.setState({
|
||||
user: result.data,
|
||||
isSpin: false,
|
||||
undo_events:e
|
||||
undo_events:e,
|
||||
//测试数据
|
||||
badges : {badge:[1, 2, 3], total_count: 3}
|
||||
});
|
||||
})
|
||||
.catch((error) => {
|
||||
|
@ -194,7 +201,7 @@ class Infos extends Component {
|
|||
render() {
|
||||
const { current_user } = this.props;
|
||||
const { username } = this.props.match.params;
|
||||
const { user, isSpin, route_type , undo_events , menuKey } = this.state;
|
||||
const { user, isSpin, route_type , undo_events , menuKey} = this.state;
|
||||
return (
|
||||
<div className="newMain clearfix">
|
||||
<Spin spinning={isSpin}>
|
||||
|
@ -275,7 +282,35 @@ class Infos extends Component {
|
|||
</div>
|
||||
:""
|
||||
}
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
{
|
||||
badges && badges.total_count >0 &&
|
||||
<Badge badges={badges} />
|
||||
}
|
||||
{/*{*/}
|
||||
{/* badges && badges.total_count >0 &&*/}
|
||||
{/* <div className="list-l-Menu text-center">*/}
|
||||
{/* {*/}
|
||||
{/* badges.total_count > 0 ? owner={owner} projectsId={projectsId} */}
|
||||
{/* badges.badge.map((item,key)=>{*/}
|
||||
{/* return(*/}
|
||||
{/* <Popover content={menu} visible={item.visible} overlayClassName="menuPanels" placement="top">*/}
|
||||
{/* <div>*/}
|
||||
{/* <span>{item}</span>*/}
|
||||
{/* <img src={getImageUrl(`/${item.image_url}`)} />*/}
|
||||
{/* </div>*/}
|
||||
{/* </Popover>*/}
|
||||
{/* )*/}
|
||||
{/* })*/}
|
||||
{/* :""*/}
|
||||
{/* }*/}
|
||||
{/* </div>*/}
|
||||
|
||||
{/*}*/}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div className="list-right">
|
||||
|
|
Loading…
Reference in New Issue