change move and copy files dialog check mark (#8189)

frontend/src/assets/icons/check.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#999999;}
+</style>
+<title>check</title>
+<g id="check">
+	<g id="路径" transform="translate(0.020249, 4.178564)">
+		<path class="st0" d="M27.9,0.7L12,18.1L4.1,8.9C3.2,7.9,1.8,7.6,0.7,8.6c-1,0.8-0.9,2.5,0,3.6c6.5,7.3,9.8,11,9.8,11
+			c1,0.9,1.9,1,2.8,0l17.9-19c1-1,1-2.5,0.2-3.4C30.4-0.4,28.8-0.2,27.9,0.7z"/>
+	</g>
+</g>
+</svg>

frontend/src/components/file-chooser/recently-used-list-item.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import { Utils } from '../../utils/utils';
+import Icon from '../icon';
 
 const RecentlyUsedListItem = ({ item, isSelected, onItemClick }) => {
   if (!item || typeof item.path !== 'string') {
@@ -24,6 +25,11 @@ const RecentlyUsedListItem = ({ item, isSelected, onItemClick }) => {
         <div className="item-text">
           <span className="name user-select-none ellipsis" title={title}>{title}</span>
         </div>
+        {isSelected &&
+          <div className="item-right-icon">
+            <Icon symbol="check" color="currentColor"/>
+          </div>
+        }
       </div>
     </li>
   );

frontend/src/components/file-chooser/repo-list-item.js

@@ -7,6 +7,7 @@ import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
 import Dirent from '../../models/dirent';
 import toaster from '../toast';
+import Icon from '../icon';
 
 const propTypes = {
   isCurrentRepo: PropTypes.bool,
@@ -227,6 +228,7 @@ class RepoListItem extends React.Component {
   };
 
   render() {
+    const { repo } = this.props;
     let repoActive = false;
     let isCurrentRepo = this.isCurrentRepo();
     if (isCurrentRepo && this.props.selectedPath == '/') {
@@ -243,12 +245,17 @@ class RepoListItem extends React.Component {
             </i>
           </div>
           <div className="item-text">
-            <span className="name user-select-none ellipsis" title={this.props.repo.repo_name}>{this.props.repo.repo_name}</span>
+            <span className="name user-select-none ellipsis" title={repo.repo_name}>{repo.repo_name}</span>
           </div>
+          {repoActive &&
+            <div className="item-right-icon">
+              <Icon symbol="check" color="currentColor"/>
+            </div>
+          }
         </div>
         {this.state.isShowChildren && (
           <TreeListView
-            repo={this.props.repo}
+            repo={repo}
             onDirentItemClick={this.onDirentItemClick}
             selectedRepo={this.props.selectedRepo}
             selectedPath={this.props.selectedPath}

frontend/src/components/file-chooser/tree-list-item.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import Icon from '../icon';
 
 const propTypes = {
   selectedPath: PropTypes.string,
@@ -130,6 +131,11 @@ class TreeViewItem extends React.Component {
             <div className="item-text">
               <span className="name user-select-none ellipsis" title={node.object && node.object.name}>{node.object && node.object.name}</span>
             </div>
+            {isCurrentRepo && isCurrentPath &&
+              <div className="item-right-icon">
+                <Icon symbol="check" color="currentColor"/>
+              </div>
+            }
           </div>
         </div>
         {node.isExpanded && this.renderChildren()}

frontend/src/css/file-chooser.css

@@ -10,24 +10,6 @@
   width: 100%;
 }
 
-.file-chooser-item .item-active {
-  background: var(--bs-nav-active-bg);
-  border-radius: 3px;
-}
-
-.file-chooser-item .item-active::before {
-  content: '';
-  position: absolute;
-  top: 2px;
-  left: -8px;
-  width: 4px;
-  height: 24px;
-  background-color: #ff9800;
-  border-radius: 2px;
-  display: block;
-  z-index: 10;
-}
-
 .file-chooser-item .item-info {
   position: relative;
   display: flex;
@@ -43,16 +25,26 @@
   border-radius: 3px;
 }
 
-.file-chooser-item .item-info .item-left-icon {
+.file-chooser-item .item-info .item-left-icon,
+.file-chooser-item .item-info .item-right-icon {
   display: flex;
   align-items: center;
   height: 100%;
 }
 
+.file-chooser-item .item-info .item-right-icon {
+  margin-right: 8px;
+}
+
+.file-chooser-item .item-info .item-right-icon svg {
+  fill: #666;
+}
+
 .file-chooser-item .item-info .item-text {
   display: flex;
   align-items: center;
   height: 100%;
+  width: 420px;
   line-height: 1.5;
   padding-left: 0.25rem;
   overflow: hidden;