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

提交页面改版优化

This commit is contained in:
谢思 2021-09-24 14:29:57 +08:00
parent ab351fd8f8
commit a80a20ef6e
4 changed files with 54 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/forge/Main/Diff.jsx
View File

@ -81,7 +81,7 @@ export default ({ match , history }) => {
} }
<i className="iconfont icon-fenzhi2 font-18"></i>{branchName} <i className="iconfont icon-fenzhi2 font-18"></i>{branchName}
</div> </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> </div>
<div className="f-wrap-between" style={{ alignItems: "center" }}> <div className="f-wrap-between" style={{ alignItems: "center" }}>

60
src/forge/Merge/Files.jsx
View File

@ -1,14 +1,15 @@
import React ,{useEffect,useState } from 'react'; import React ,{useEffect,useState } from 'react';
import { truncateCommitId } from '../common/util'; import { truncateCommitId } from '../common/util';
import { AlignCenter , FlexAJ } from '../Component/layout'; 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 './merge.css';
import './Index.scss'; import './Index.scss';
const {Link} =Anchor;
function Files({data,history,owner,projectsId}){ function Files({data,history,owner,projectsId}){
const [ files , setFiles ] = useState(data && data.files); const [ files , setFiles ] = useState(data && data.files);
const [ copyfileTipTitle, setCopyfileTipTitle] = useState("复制文件路径"); const [ copyfileTipTitle, setCopyfileTipTitle] = useState("复制文件路径");
const [ isOpen, setIsOpen] = useState(false);
useEffect(()=>{ useEffect(()=>{
if(data){ if(data){
@ -37,39 +38,44 @@ function Files({data,history,owner,projectsId}){
} }
const folderOpen = ( const folderOpen = (
<Anchor showInkInFixed={false}>
<div className="folderList"> <div className="folderList">
{files && files.length>1 && files.map((item, key) => { {files && files.length>1 && files.map((item, key) => {
console.log(item.flag); return (
return ( <Link href={`#value${key}`} title=
<FlexAJ className="filesInfo" key={key} onClick={() => item.flag && showDown(item.flag, key, item.isBin)}> {<FlexAJ className="filesInfo" key={key} onClick={() => {item.flag && showDown(item.flag, key, item.isBin);}}>
<AlignCenter> <AlignCenter>
<i className="iconfont icon-wenjianicon mr4"></i> <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> : ""} */} {/* {!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> <span className="cursor-pointer" data-clipboard-text={item.name}>{item.name}</span>
</AlignCenter> </AlignCenter>
<div className="see-file"> <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+"处删除":""}`}> <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} /> <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.addition >0 && <span className="color-green ml10">+{item.addition}</span>} {item.deletion >0 && <span className="color-red ml10">-{item.deletion}</span>}
{item.deletion >0 && <span className="color-red ml10">-{item.deletion}</span>} </Tooltip>
</div> </div>
</FlexAJ> </FlexAJ>}
) />
})} )
</div> })}
</div>
</Anchor>
) )
return( return(
<div> <div>
<AlignCenter className="color-grey-9 pb10"> <AlignCenter className="color-grey-9 pb10">
<i className="iconfont icon-triangle mr5 font-16"></i> <i className="iconfont icon-triangle mr5 font-16"></i>
<span className="color-grey-6"> <Popover content={folderOpen} placement="bottomLeft" className="popover-file">
共有<Popover content={folderOpen} placement="bottomLeft"><span className="color-grey-3"> {data && data.files_count} 个文件 </span></Popover>被更改，包括 <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 ? <span className="color-green"> {data && data.total_addition} 次插入</span>:"" }
{ data && data.total_addition && data.total_deletion ? " 和 ":""} { data && data.total_addition && data.total_deletion ? " 和 ":""}
{ data && data.total_deletion ? <span className="color-red"> {data && data.total_deletion} 次删除</span>:""} { data && data.total_deletion ? <span className="color-red"> {data && data.total_deletion} 次删除</span>:""}
</span> </span>
</Popover>
</AlignCenter> </AlignCenter>
{ {
files && files.length>0 && files && files.length>0 &&
@ -77,7 +83,7 @@ function Files({data,history,owner,projectsId}){
{ {
files.map((item,key)=>{ files.map((item,key)=>{
return( return(
<div className="files" key={key}> <div className="files" key={key} id= {`value${key}`}>
<FlexAJ className="filesInfo"> <FlexAJ className="filesInfo">
<AlignCenter> <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>:""} {!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"> <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+"处删除":""}`}> <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} /> <Progress showInfo = {false} strokeColor = "#2DB44D" size="small" percent={item.addition/(item.addition+item.deletion)*100} />
<span className="ml10">{item.addition+item.deletion}处</span>
</Tooltip> </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> <span className="see-file-btn" onClick={()=>{history.push(`/${owner}/${projectsId}/tree/${truncateCommitId(item.sha)}/${item.name}`)}}>查看文件</span>
</div> </div>
</FlexAJ> </FlexAJ>

24
src/forge/Merge/Index.scss
View File

@ -19,9 +19,13 @@
border:1px solid #FA6400; border:1px solid #FA6400;
color: #FA6400; color: #FA6400;
} }
.color-grey-3{ .color-grey-3{
font-weight: bold; font-weight: bold;
} }
.invisable{
display: none;
}
.fileList{ .fileList{
.sc-bxivhb{ .sc-bxivhb{
width: 55rem; width: 55rem;
@ -31,6 +35,7 @@
.ml10{ .ml10{
display: inline-block; display: inline-block;
width: 5rem; width: 5rem;
cursor: default;
} }
span{ span{
width: 7%; width: 7%;
@ -40,8 +45,6 @@
.filesInfo{ .filesInfo{
background: #FAFCFF; background: #FAFCFF;
border-color:rgba(42, 97, 255, 0.23); border-color:rgba(42, 97, 255, 0.23);
.ant-progress-line { .ant-progress-line {
width: 5rem; width: 5rem;
} }
@ -49,18 +52,29 @@
background-color: #D14A4A; background-color: #D14A4A;
} }
} }
.ant-popover-arrow { .ant-popover-arrow,.ant-anchor-ink-ball {
display: none; display: none;
} }
.ant-popover-inner { .ant-popover-inner {
margin-left: -48px; margin-left: -21px;
background: #FFF; background: #FFF;
} }
.ant-popover-inner-content{ .ant-anchor-link,.ant-popover-inner-content{
padding: 0 0; 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; color: #333333;
width: 75rem; width: 75rem;
.folderList{ .folderList{
max-height: 280px;
overflow:auto;
.files{ .files{
border: 0px; border: 0px;
} }

1
src/forge/css/index.scss
View File

@ -325,5 +325,6 @@ button.ant-btn-primary.btnblue{
border-color:rgba(70, 106, 255, 1); border-color:rgba(70, 106, 255, 1);
&:hover{ &:hover{
background-color:rgba(70, 106, 255, 0.85); background-color:rgba(70, 106, 255, 0.85);
border-color:rgba(70, 106, 255, 0.85);
} }
} }