提交页面改版优化

2021-09-24 14:29:57 +08:00 · 2021-09-24 14:29:57 +08:00 · a80a20ef6e
parent ab351fd8f8
commit a80a20ef6e
4 changed files with 54 additions and 33 deletions
--- a/src/forge/Main/Diff.jsx
+++ b/src/forge/Main/Diff.jsx
@ -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" }}>
--- a/src/forge/Merge/Files.jsx
+++ b/src/forge/Merge/Files.jsx
@ -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>
--- a/src/forge/Merge/Index.scss
+++ b/src/forge/Merge/Index.scss
@ -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;
    }
--- a/src/forge/css/index.scss
+++ b/src/forge/css/index.scss
@ -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);
  }
 }