提交页面改版优化
This commit is contained in:
parent
ab351fd8f8
commit
a80a20ef6e
|
|
@ -81,7 +81,7 @@ export default ({ match , history }) => {
|
|||
}
|
||||
<i className="iconfont icon-fenzhi2 font-18"></i>{branchName}
|
||||
</div>
|
||||
<Button type="primary" onClick={()=>{history.push(`/${owner}/${projectsId}/tree/${truncateCommitId(sha)}`)}} className="btnblue" style={{height:"36px"}}>浏览代码</Button>
|
||||
<Button type="primary" onClick={()=>{history.push(`/${owner}/${projectsId}/tree/${truncateCommitId(sha)}`)}} className="btnblue" style={{height:"36px"}}>浏览文件</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="f-wrap-between" style={{ alignItems: "center" }}>
|
||||
|
|
|
|||
|
|
@ -1,14 +1,15 @@
|
|||
import React ,{useEffect,useState } from 'react';
|
||||
import { truncateCommitId } from '../common/util';
|
||||
import { AlignCenter , FlexAJ } from '../Component/layout';
|
||||
import { Button, Tooltip,Progress, Popover } from 'antd';
|
||||
import { Button, Tooltip,Progress, Popover, Anchor } from 'antd';
|
||||
import './merge.css';
|
||||
import './Index.scss';
|
||||
|
||||
const {Link} =Anchor;
|
||||
|
||||
function Files({data,history,owner,projectsId}){
|
||||
const [ files , setFiles ] = useState(data && data.files);
|
||||
const [ copyfileTipTitle, setCopyfileTipTitle] = useState("复制文件路径");
|
||||
const [ isOpen, setIsOpen] = useState(false);
|
||||
|
||||
useEffect(()=>{
|
||||
if(data){
|
||||
|
|
@ -37,39 +38,44 @@ function Files({data,history,owner,projectsId}){
|
|||
}
|
||||
|
||||
const folderOpen = (
|
||||
<Anchor showInkInFixed={false}>
|
||||
<div className="folderList">
|
||||
{files && files.length>1 && files.map((item, key) => {
|
||||
console.log(item.flag);
|
||||
return (
|
||||
<FlexAJ className="filesInfo" key={key} onClick={() => item.flag && showDown(item.flag, key, item.isBin)}>
|
||||
<AlignCenter>
|
||||
<i className="iconfont icon-wenjianicon mr4"></i>
|
||||
{/* {!item.isBin ? <i className={!item.flag ? "iconfont icon-sanjiaoxing-down color-grey-9 mt4" : "iconfont icon-triangle font-15 color-grey-9 mt4"} onClick={() => showDown(item.flag, key, item.isBin)}></i> : ""} */}
|
||||
<span className="cursor-pointer" data-clipboard-text={item.name}>{item.name}</span>
|
||||
</AlignCenter>
|
||||
<div className="see-file">
|
||||
<Tooltip placement="top" title={`${item.addition+item.deletion}处更改：${item.addition>0?item.addition+"处添加":""}${item.addition>0 && item.deletion>0 ?"和":""}${item.deletion>0?item.deletion+"处删除":""}`}>
|
||||
<Progress showInfo = {false} strokeColor = "#2DB44D" size="small" percent={item.addition/(item.addition+item.deletion)*100} />
|
||||
</Tooltip>
|
||||
{item.addition >0 && <span className="color-green ml10">+{item.addition}</span>}
|
||||
{item.deletion >0 && <span className="color-red ml10">-{item.deletion}</span>}
|
||||
</div>
|
||||
</FlexAJ>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
{files && files.length>1 && files.map((item, key) => {
|
||||
return (
|
||||
<Link href={`#value${key}`} title=
|
||||
{<FlexAJ className="filesInfo" key={key} onClick={() => {item.flag && showDown(item.flag, key, item.isBin);}}>
|
||||
<AlignCenter>
|
||||
<i className="iconfont icon-wenjianicon mr4"></i>
|
||||
{/* {!item.isBin ? <i className={!item.flag ? "iconfont icon-sanjiaoxing-down color-grey-9 mt4" : "iconfont icon-triangle font-15 color-grey-9 mt4"} onClick={() => showDown(item.flag, key, item.isBin)}></i> : ""} */}
|
||||
<span className="cursor-pointer" data-clipboard-text={item.name}>{item.name}</span>
|
||||
</AlignCenter>
|
||||
<div className="see-file">
|
||||
<Tooltip placement="top" title={`${item.addition+item.deletion}处更改：${item.addition>0?item.addition+"处添加":""}${item.addition>0 && item.deletion>0 ?"和":""}${item.deletion>0?item.deletion+"处删除":""}`}>
|
||||
<Progress showInfo = {false} strokeColor = "#2DB44D" size="small" percent={item.addition/(item.addition+item.deletion)*100} />
|
||||
{item.addition >0 && <span className="color-green ml10">+{item.addition}</span>}
|
||||
{item.deletion >0 && <span className="color-red ml10">-{item.deletion}</span>}
|
||||
</Tooltip>
|
||||
</div>
|
||||
</FlexAJ>}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</Anchor>
|
||||
)
|
||||
|
||||
return(
|
||||
<div>
|
||||
<AlignCenter className="color-grey-9 pb10">
|
||||
<i className="iconfont icon-triangle mr5 font-16"></i>
|
||||
<span className="color-grey-6">
|
||||
共有<Popover content={folderOpen} placement="bottomLeft"><span className="color-grey-3"> {data && data.files_count} 个文件 </span></Popover>被更改，包括
|
||||
<Popover content={folderOpen} placement="bottomLeft" className="popover-file">
|
||||
<span className="color-grey-6" style={{cursor:"pointer"}}>
|
||||
共有<span className="color-grey-3"> {data && data.files_count} 个文件 </span>被更改，包括
|
||||
{ data && data.total_addition ? <span className="color-green"> {data && data.total_addition} 次插入</span>:"" }
|
||||
{ data && data.total_addition && data.total_deletion ? " 和 ":""}
|
||||
{ data && data.total_deletion ? <span className="color-red"> {data && data.total_deletion} 次删除</span>:""}
|
||||
</span>
|
||||
</span>
|
||||
</Popover>
|
||||
</AlignCenter>
|
||||
{
|
||||
files && files.length>0 &&
|
||||
|
|
@ -77,7 +83,7 @@ function Files({data,history,owner,projectsId}){
|
|||
{
|
||||
files.map((item,key)=>{
|
||||
return(
|
||||
<div className="files" key={key}>
|
||||
<div className="files" key={key} id= {`value${key}`}>
|
||||
<FlexAJ className="filesInfo">
|
||||
<AlignCenter>
|
||||
{!item.isBin ? <i className={!item.flag?"iconfont icon-sanjiaoxing-down color-grey-9 mt4":"iconfont icon-triangle font-15 color-grey-9 mt4"} onClick={()=>showDown(item.flag,key,item.isBin)}></i>:""}
|
||||
|
|
@ -92,8 +98,8 @@ function Files({data,history,owner,projectsId}){
|
|||
<div className="see-file">
|
||||
<Tooltip placement="top" title={`${item.addition+item.deletion}处更改：${item.addition>0?item.addition+"处添加":""}${item.addition>0 && item.deletion>0 ?"和":""}${item.deletion>0?item.deletion+"处删除":""}`}>
|
||||
<Progress showInfo = {false} strokeColor = "#2DB44D" size="small" percent={item.addition/(item.addition+item.deletion)*100} />
|
||||
<span className="ml10">{item.addition+item.deletion}处</span>
|
||||
</Tooltip>
|
||||
<span className="ml10">{item.addition+item.deletion}处</span>
|
||||
<span className="see-file-btn" onClick={()=>{history.push(`/${owner}/${projectsId}/tree/${truncateCommitId(item.sha)}/${item.name}`)}}>查看文件</span>
|
||||
</div>
|
||||
</FlexAJ>
|
||||
|
|
|
|||
|
|
@ -19,9 +19,13 @@
|
|||
border:1px solid #FA6400;
|
||||
color: #FA6400;
|
||||
}
|
||||
|
||||
.color-grey-3{
|
||||
font-weight: bold;
|
||||
}
|
||||
.invisable{
|
||||
display: none;
|
||||
}
|
||||
.fileList{
|
||||
.sc-bxivhb{
|
||||
width: 55rem;
|
||||
|
|
@ -31,6 +35,7 @@
|
|||
.ml10{
|
||||
display: inline-block;
|
||||
width: 5rem;
|
||||
cursor: default;
|
||||
}
|
||||
span{
|
||||
width: 7%;
|
||||
|
|
@ -40,8 +45,6 @@
|
|||
.filesInfo{
|
||||
background: #FAFCFF;
|
||||
border-color:rgba(42, 97, 255, 0.23);
|
||||
|
||||
|
||||
.ant-progress-line {
|
||||
width: 5rem;
|
||||
}
|
||||
|
|
@ -49,18 +52,29 @@
|
|||
background-color: #D14A4A;
|
||||
}
|
||||
}
|
||||
.ant-popover-arrow {
|
||||
.ant-popover-arrow,.ant-anchor-ink-ball {
|
||||
display: none;
|
||||
}
|
||||
.ant-popover-inner {
|
||||
margin-left: -48px;
|
||||
margin-left: -21px;
|
||||
background: #FFF;
|
||||
}
|
||||
.ant-popover-inner-content{
|
||||
.ant-anchor-link,.ant-popover-inner-content{
|
||||
padding: 0 0;
|
||||
}
|
||||
.ant-anchor-wrapper,.ant-anchor{
|
||||
margin-left: 0;
|
||||
padding-left: 0;
|
||||
}
|
||||
.ant-anchor-link-active > .ant-anchor-link-title {
|
||||
color: #466AFF;
|
||||
}
|
||||
.ant-popover-inner-content{
|
||||
color: #333333;
|
||||
width: 75rem;
|
||||
.folderList{
|
||||
max-height: 280px;
|
||||
overflow:auto;
|
||||
.files{
|
||||
border: 0px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -325,5 +325,6 @@ button.ant-btn-primary.btnblue{
|
|||
border-color:rgba(70, 106, 255, 1);
|
||||
&:hover{
|
||||
background-color:rgba(70, 106, 255, 0.85);
|
||||
border-color:rgba(70, 106, 255, 0.85);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue