style:资料云盘样式优化

5b41df7a · wufan · 5a7187a9 · 5b41df7a · 5b41df7a · 5b41df7a
Commit 5b41df7a authored Dec 28, 2020 by wufan
20 changed files
--- a/src/bu-components/CopyFileModal.jsx
+++ b/src/bu-components/CopyFileModal.jsx
@@ -240,7 +240,7 @@ class CopyFileModal extends React.Component {
      <Modal
        visible={isOpen}
        title={title}
-        width={560}
+        width={680}
        onCancel={this.handleClose}
        maskClosable={false}
        footer={[
@@ -335,7 +335,7 @@ class CopyFileModal extends React.Component {
        {
          !(folderList.length>0) && showLottieIcon &&
          <LottieIcon
-            title={<span className="desc">此文件夹下无可用文件</span>}
+            title={<span className="desc">这个文件夹是空的</span>}
          />
        }
      </div>

--- a/src/bu-components/CopyFileModal.less
+++ b/src/bu-components/CopyFileModal.less
@@ -2,21 +2,22 @@
  margin-left: 34%;
 }
 .copy-body{
+  .bread-crumbs {
+    margin-bottom: 10px;
+  }
  .bread:hover{
-    color: #FD9A6A;
+    color: #5289FA;
  }
 }
 .folder-list{
-  margin-top: 10px;
+  height: 100%; 
-  height: 260px;
-  // overflow-y: scroll;
  border-top: 1px solid #E8E8E8;
  border-top-left-radius:4px;
  border-top-right-radius:4px;
+  border: 1px solid #E8E8E8;
+  overflow: auto;
  .enable{
    cursor: pointer;
  }
@@ -29,12 +30,14 @@
  .information{
    display: flex;
    height: 50px;
-    border: 1px solid #E8E8E8;
    border-top: none;
    padding-top: 12px;
    padding-left: 25px;
    position: relative;
+    border-bottom: 1px solid #E8E8E8;
+    &:last-child {
+      border-bottom: none;
+    }
    .folderName{
      padding-left: 15px;
    }

--- a/src/bu-components/ManagingMembersModal.jsx
+++ b/src/bu-components/ManagingMembersModal.jsx
@@ -277,6 +277,10 @@ class ManagingMembersModal extends React.Component {
    return selectColumns;
  }
+  renderTitle = () => {
+    return <div className="tip-title" style={{width:200}}>不在名单内的员工不可查看此文件/文件夹</div>
+  }
  render() {
    const { isOpen, disk } = this.props;
    const { addManagingMember, dataSource } = this.state;
@@ -291,18 +295,20 @@ class ManagingMembersModal extends React.Component {
            visible={isOpen}
            onCancel={this.handleClose}
            title={title} 
-            width={560}
+            width={680}
            maskClosable={false}
          >
            <div className='managing-header'>
              <div className='managing-left'>
                已有成员
-                <Tooltip title="不在名单内的员工不可查看此文件/文件夹" arrowPointAtCenter>                
+                <Tooltip title={this.renderTitle()} arrowPointAtCenter>                
                  <img src="https://image.xiaomaiketang.com/xm/JbGfBpiPjt.png"  className='tool-tip-left' alt=""/>
                </Tooltip>     
              </div>
              <div className='managing-right' onClick={ () => this.handleChooseModal() }>
-                <img src="https://image.xiaomaiketang.com/xm/xkZs3C6G5R.png" className='tool-tip-right' alt=""/>
+                <span className="icon iconfont tool-tip-right">
+                  &#xe61f;
+                </span>
                添加成员
              </div> 
            </div>   

--- a/src/bu-components/ManagingMembersModal.less
+++ b/src/bu-components/ManagingMembersModal.less
@@ -16,7 +16,7 @@
  .managing-right{
    float: right;
-    color: #FD9A6A;
+    color: #FFB714;
    margin-right: 10px;
    cursor: pointer;
    .tool-tip-right{
@@ -31,7 +31,7 @@
  height: 300px;
  overflow: hidden;
  border: 1px solid #E9E9E9;
-  border-radius: 10px;
+  border-radius: 4px;
  .ant-table-tbody{
    .ant-table-row{
      background-color: #fff !important;

--- a/src/bu-components/SelectPrepareFileModal.jsx
+++ b/src/bu-components/SelectPrepareFileModal.jsx
@@ -549,7 +549,7 @@ class SelectPrepareFileModal extends React.Component {
        title={title}
        footer={footer}
        maskClosable={false}
-        width={560}
+        width={680}
        onCancel={this.handleClose}
        className="select-prepare-file-modal"
      >
@@ -672,7 +672,7 @@ class SelectPrepareFileModal extends React.Component {
          </When>
          <Otherwise>
            <LottieIcon
-              title={<span className="desc">此文件夹下无可用文件</span>}
+              title={<span className="desc">这个文件夹是空的</span>}
            />
          </Otherwise>
        </Choose>

--- a/src/bu-components/SelectPrepareFileModal.less
+++ b/src/bu-components/SelectPrepareFileModal.less
@@ -38,7 +38,7 @@
    &:not(:last-child) {
      cursor: pointer;
      &:hover {
-        color: #FF8534;
+        color: #5289FA;
      }
      &::before {
        content: '/';

--- a/src/bu-components/UploadProgressModal.jsx
+++ b/src/bu-components/UploadProgressModal.jsx
@@ -296,7 +296,7 @@ class UploadProgressModal extends React.Component {
        </div>
        {
          showFileList &&
-          <div className="modal-body">
+          <div className="modal-body" style={{height:`${fileList.length * 53}px`}}>
            {
              fileList.map((file, index) => {
                let { size, type, name } = file.fileContent;

--- a/src/bu-components/UploadProgressModal.less
+++ b/src/bu-components/UploadProgressModal.less
@@ -45,7 +45,7 @@
  .modal-body {
    max-height: 290px;
-    overflow: scroll;
+    overflow: auto;
    .file-item {
      display: flex;

--- a/src/common/less/icon-font.less
+++ b/src/common/less/icon-font.less
 @font-face {
  font-family: 'iconfont';  /* project id 2223403 */
-  src: url('//at.alicdn.com/t/font_2223403_0pwkijxkqyf.eot');
+  src: url('//at.alicdn.com/t/font_2223403_5k8dbuf925c.eot');
-  src: url('//at.alicdn.com/t/font_2223403_0pwkijxkqyf.eot?#iefix') format('embedded-opentype'),
+  src: url('//at.alicdn.com/t/font_2223403_5k8dbuf925c.eot?#iefix') format('embedded-opentype'),
-  url('//at.alicdn.com/t/font_2223403_0pwkijxkqyf.woff2') format('woff2'),
+  url('//at.alicdn.com/t/font_2223403_5k8dbuf925c.woff2') format('woff2'),
-  url('//at.alicdn.com/t/font_2223403_0pwkijxkqyf.woff') format('woff'),
+  url('//at.alicdn.com/t/font_2223403_5k8dbuf925c.woff') format('woff'),
-  url('//at.alicdn.com/t/font_2223403_0pwkijxkqyf.ttf') format('truetype'),
+  url('//at.alicdn.com/t/font_2223403_5k8dbuf925c.ttf') format('truetype'),
-  url('//at.alicdn.com/t/font_2223403_0pwkijxkqyf.svg#iconfont') format('svg');
+  url('//at.alicdn.com/t/font_2223403_5k8dbuf925c.svg#iconfont') format('svg');
 }
 .iconfont{
  font-family:"iconfont" !important;

--- a/src/index.html
+++ b/src/index.html
 <!--
 * @Author: 吴文洁
 * @Date: 2020-08-24 12:20:57
+<<<<<<< Updated upstream
 * @LastEditors: zhangleyuan
 * @LastEditTime: 2020-12-24 10:34:16
+=======
+ * @LastEditors: wufan
+ * @LastEditTime: 2020-12-28 14:04:31
+>>>>>>> Stashed changes
 * @Description: 
 * @Copyright: 杭州杰竞科技有限公司 版权所有
 -->
@@ -25,7 +30,7 @@
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <link rel="stylesheet" href="//at.alicdn.com/t/font_2223403_0pwkijxkqyf.css">
+    <link rel="stylesheet" href="//at.alicdn.com/t/font_2223403_5k8dbuf925c.css">
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.

--- a/src/modules/prepare-lesson/components/FolderList.jsx
+++ b/src/modules/prepare-lesson/components/FolderList.jsx
@@ -289,7 +289,7 @@ class FolderList extends React.Component {
      Modal.confirm({
        title: '确认删除所选的文件吗？',
        content: hasRelative ? '此文件已关联了课次，删除后，学员将不能查看到此文件。' : '删除后，数据将无法恢复。',
-        icon: <span className="icon iconfont default-confirm-icon">&#xe6f4;</span>,
+        icon: <span className="icon iconfont default-confirm-icon">&#xe834;</span>,
        onOk: () => {
          const { currentFolder } = this.state;
          axios.Apollo(DEL_FOLDER_URL_MAP[disk], {

--- a/src/modules/prepare-lesson/components/OperateArea.jsx
+++ b/src/modules/prepare-lesson/components/OperateArea.jsx
@@ -212,6 +212,7 @@ class OperateArea extends React.Component {
    Modal.confirm({
      title: '确认删除所选的文件吗？',
      content: '删除后，数据将无法恢复。',
+      icon: <span className="icon iconfont default-confirm-icon">&#xe834;</span>,
      onOk: () => {
        const currentFolder  = folderPathList[folderPathList.length - 1];
        Service.Hades(DEL_FOLDER_URL_MAP[disk], {

--- a/src/modules/prepare-lesson/index.less
+++ b/src/modules/prepare-lesson/index.less
@@ -163,7 +163,7 @@
          &:not(:last-child) {
            cursor: pointer;
            &:hover {
-              color: #FF8534;
+              color: #5289FA;
            }
            &::before {
              content: '/';
@@ -200,11 +200,7 @@
      }
      .file-path {
        cursor: pointer;
-        text-decoration: underline;
+        color: #5289FA;
-        &:hover {
-          color: #FF7519;
-        }
      }
      .ant-dropdown-trigger {
        cursor: pointer;

--- a/src/modules/prepare-lesson/modal/SelectPrepareFileModal.jsx
+++ b/src/modules/prepare-lesson/modal/SelectPrepareFileModal.jsx
@@ -526,7 +526,7 @@ class SelectPrepareFileModal extends React.Component {
        visible={isOpen}
        title={title}
        footer={footer}
-        width={560}
+        width={680}
        maskClosable={false}
        onCancel={this.handleClose}
        className="select-prepare-file-modal"

--- a/src/modules/prepare-lesson/modal/SelectPrepareFileModal.less
+++ b/src/modules/prepare-lesson/modal/SelectPrepareFileModal.less
@@ -38,7 +38,7 @@
    &:not(:last-child) {
      cursor: pointer;
      &:hover {
-        color: #FF8534;
+        color: #5289FA;
      }
      &::before {
        content: '/';

--- a/src/modules/prepare-lesson/modal/UploadProgressModal.jsx
+++ b/src/modules/prepare-lesson/modal/UploadProgressModal.jsx
@@ -302,7 +302,7 @@ class UploadProgressModal extends React.Component {
        </div>
        {
          showFileList &&
-          <div className="modal-body">
+          <div className="modal-body" style={{height:`${fileList.length * 53}px`}}>
            {
              fileList.map((file, index) => {
                let { size, type, name } = file.fileContent;

--- a/src/modules/prepare-lesson/modal/UploadProgressModal.less
+++ b/src/modules/prepare-lesson/modal/UploadProgressModal.less
@@ -44,7 +44,7 @@
  .modal-body {
    max-height: 290px;
-    overflow: scroll;
+    overflow: auto;
    .file-item {
      display: flex;

--- a/src/modules/resource-disk/components/FolderList.jsx
+++ b/src/modules/resource-disk/components/FolderList.jsx
@@ -297,6 +297,7 @@ class FolderList extends React.Component {
    Modal.confirm({
      title: '确认删除所选的文件吗？',
      content: '删除后，数据将无法恢复。',
+      icon: <span className="icon iconfont default-confirm-icon">&#xe834;</span>,
      onOk: () => {
        const { currentFolder } = this.state;
        Service.Hades(DEL_FOLDER_URL_MAP[disk], {

--- a/src/modules/resource-disk/components/OperateArea.jsx
+++ b/src/modules/resource-disk/components/OperateArea.jsx
@@ -211,6 +211,7 @@ class OperateArea extends React.Component {
    Modal.confirm({
      title: '确认删除所选的文件吗？',
      content: '删除后，数据将无法恢复。',
+      icon: <span className="icon iconfont default-confirm-icon">&#xe834;</span>,
      onOk: () => {
        const  currentFolder  = folderPathList[folderPathList.length - 1];
        Service.Hades(DEL_FOLDER_URL_MAP[disk], {
@@ -330,8 +331,10 @@ class OperateArea extends React.Component {
              disabled={showResultPage}
              onClick={this.handleChooseFile}
            >
+            <div className="btn-content">
              <span className="icon iconfont">&#xe7a0;</span>
-              上传文件
+              <span className="btn-text">上传文件</span>
+            </div>
            </Button>
          </Tooltip>
@@ -339,8 +342,10 @@ class OperateArea extends React.Component {
            onClick={this.handleToggleCreateFolderModal}
            disabled={showResultPage}
          >
-            <span className="icon iconfont">&#xe7a2;</span>
+            <div className="btn-content">
-            新建文件夹
+              <span className="icon iconfont">&#xe7a2;</span>
+              <span className="btn-text">新建文件夹</span>
+            </div>
          </Button>
          { 

--- a/src/modules/resource-disk/index.less
+++ b/src/modules/resource-disk/index.less
 .prepare-lesson-page {
  .ant-upload-list  {
    display: none;
  }
@@ -80,7 +79,7 @@
      position: absolute;
      left: 33px;
      bottom: 24px;
-      color: #FF7519;
+      color: #5289FA;
    }
  }
@@ -116,6 +115,16 @@
      &__opt {
        width: fit-content;
+        .btn-content {
+          width: 100%;
+          display: flex;
+          align-items: center;
+          color:#666;
+          .btn-text {
+            width: 100%;
+            border:none!important;
+          }
+        }
        &.visible {
          display: block;
@@ -159,7 +168,7 @@
          &:not(:last-child) {
            cursor: pointer;
            &:hover {
-              color: #FF8534;
+              color: #5289FA;
            }
            &::before {
              content: '/';
@@ -191,16 +200,12 @@
        }
        &__text:hover {
-          color: #FF7519;
+          color: #5289FA;
        }
      }
      .file-path {
        cursor: pointer;
-        text-decoration: underline;
+        color: #5289FA;
-        &:hover {
-          color: #FF7519;
-        }
      }
      .ant-dropdown-trigger {
        cursor: pointer;