From ef60661f50b53ac696076ef2f235255ed5fb9d56 Mon Sep 17 00:00:00 2001
From: Michael An <2331806369@qq.com>
Date: Mon, 19 Feb 2024 16:12:09 +0800
Subject: [PATCH] Change AI search icon (#5956)

* fix code warnings

* change AI search icon
---
 frontend/src/assets/icons/AI-search.svg       | 20 ++++++++
 frontend/src/assets/icons/search.svg          | 15 ++++++
 .../popover/edit-filetag-popover.js           |  3 +-
 frontend/src/components/search/ai-search.js   | 22 ++++++---
 frontend/src/css/search.css                   | 20 ++++++++
 .../lib-content-view/lib-content-view.js      | 48 ++++++++-----------
 6 files changed, 93 insertions(+), 35 deletions(-)
 create mode 100644 frontend/src/assets/icons/AI-search.svg
 create mode 100644 frontend/src/assets/icons/search.svg

diff --git a/frontend/src/assets/icons/AI-search.svg b/frontend/src/assets/icons/AI-search.svg
new file mode 100644
index 0000000000..8fbbcc517f
--- /dev/null
+++ b/frontend/src/assets/icons/AI-search.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<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>AI-search</title>
+<g id="AI-search">
+	<g id="search" transform="translate(-0.000000, 0.000000)">
+		<path id="形状结合" class="st0" d="M14,0c7.7,0,14,6.3,14,14c0,3-0.9,5.7-2.5,8l5.7,5.7c1,1,1,2.6,0,3.6c-1,1-2.6,1-3.6,0
+			L22,25.6c-2.3,1.6-5,2.5-8,2.5c-7.7,0-14-6.3-14-14C0,6.3,6.3,0,14,0z M14,4C8.5,4,4,8.5,4,14s4.5,10,10,10s10-4.5,10-10
+			S19.5,4,14,4z"/>
+		<path id="形状结合_1_" class="st0" d="M12.4,8c0.5,0,0.9,0.3,1.1,0.8l3.1,9.7c0.2,0.7-0.3,1.5-1.1,1.5h-0.1
+			c-0.5,0-1-0.3-1.1-0.8l-0.6-2.2H9.9l-0.6,2.2C9.1,19.7,8.7,20,8.1,20c-0.8,0-1.3-0.8-1.1-1.5l3.1-9.7C10.3,8.3,10.8,8,11.3,8H12.4
+			z M11.8,9.8L11.8,9.8c-0.4,1.3-0.7,2.7-1.1,3.9l-0.4,1.3h2.9l-0.4-1.3C12.5,12.5,12.2,11.1,11.8,9.8z M19.9,8
+			C20.5,8,21,8.5,21,9.1v9.7c0,0.6-0.5,1.1-1.1,1.1h-0.1c-0.6,0-1.1-0.5-1.1-1.1V9.1c0-0.6,0.5-1.1,1.1-1.1H19.9z"/>
+	</g>
+</g>
+</svg>
diff --git a/frontend/src/assets/icons/search.svg b/frontend/src/assets/icons/search.svg
new file mode 100644
index 0000000000..f6824d0577
--- /dev/null
+++ b/frontend/src/assets/icons/search.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<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>search</title>
+<g id="search">
+	<g id="形状结合">
+		<path class="st0" d="M14,0c7.7,0,14,6.3,14,14c0,3-0.9,5.7-2.5,8l5.7,5.7c1,1,1,2.6,0,3.6c-1,1-2.6,1-3.6,0L22,25.6
+			c-2.3,1.6-5,2.5-8,2.5c-7.7,0-14-6.3-14-14C0,6.3,6.3,0,14,0z M14,4C8.5,4,4,8.5,4,14s4.5,10,10,10s10-4.5,10-10S19.5,4,14,4z"/>
+	</g>
+</g>
+</svg>
diff --git a/frontend/src/components/popover/edit-filetag-popover.js b/frontend/src/components/popover/edit-filetag-popover.js
index 696f11c3c1..537cccb9ed 100644
--- a/frontend/src/components/popover/edit-filetag-popover.js
+++ b/frontend/src/components/popover/edit-filetag-popover.js
@@ -157,7 +157,8 @@ class EditFileTagPopover extends React.Component {
           onChange={this.onChangeSearch}
           autoFocus={true}
         />
-        {noTagsTip ? <div className='tag-not-found my-4 mx-1'>{noTagsTip}</div> :
+        {noTagsTip ?
+          <div className='tag-not-found my-4 mx-1'>{noTagsTip}</div> :
           <ul className="tag-list-container">
             {filteredRepoTagList.map((repoTag, index) => {
               return (
diff --git a/frontend/src/components/search/ai-search.js b/frontend/src/components/search/ai-search.js
index ae1faa83b6..a79e90cbf7 100644
--- a/frontend/src/components/search/ai-search.js
+++ b/frontend/src/components/search/ai-search.js
@@ -4,6 +4,7 @@ import isHotkey from 'is-hotkey';
 import classnames from 'classnames';
 import MediaQuery from 'react-responsive';
 import { seafileAPI } from '../../utils/seafile-api';
+import Icon from '../icon';
 import { gettext, siteRoot, username } from '../../utils/constants';
 import SearchResultItem from './search-result-item';
 import { Utils } from '../../utils/utils';
@@ -590,6 +591,15 @@ export default class AISearch extends Component {
     return null;
   }
 
+  renderSearchIcon = () => {
+    const { indexState } = this.state;
+    if (indexState === INDEX_STATE.RUNNING || indexState === INDEX_STATE.FINISHED) {
+      return <Icon symbol='AI-search' className='input-icon-addon' />;
+    } else {
+      return <Icon symbol='search' className='input-icon-addon' />;
+    }
+  }
+
   toggleSettingsShown = () => {
     this.setState({
       isSettingsShown: !this.state.isSettingsShown
@@ -608,7 +618,7 @@ export default class AISearch extends Component {
   render() {
     let width = this.state.width !== 'default' ? this.state.width : '';
     let style = {'width': width};
-    const { isMaskShow, isCloseShow, searchMode } = this.state;
+    const { isMaskShow, searchMode } = this.state;
     const placeholder = `${this.props.placeholder}${isMaskShow ? '' : ` (${controlKey} + f )`}`;
 
     if (searchMode === SEARCH_MODE.QA) {
@@ -630,8 +640,8 @@ export default class AISearch extends Component {
           <div className="search">
             <div className={`search-mask ${isMaskShow ? 'show' : 'hide'}`} onClick={this.onCloseHandler}></div>
             <div className={`search-container ${isMaskShow ? 'show' : ''}`}>
-              <div className={`input-icon`}>
-                <i className="search-icon-left input-icon-addon fas fa-search"></i>
+              <div className="input-icon">
+                {this.renderSearchIcon()}
                 <input
                   type="text"
                   className="form-control search-input"
@@ -666,15 +676,15 @@ export default class AISearch extends Component {
           </div>
         </MediaQuery>
         <MediaQuery query="(max-width: 767.8px)">
-          <div className="search-icon-container">
-            <i className="search-icon fas fa-search" onClick={this.onSearchToggle}></i>
+          <div className="search-icon-container" onClick={this.onSearchToggle}>
+            {this.renderSearchIcon()}
           </div>
           {this.state.isSearchInputShow &&
             <div className="search">
               <div className={`search-mask ${isMaskShow ? '' : 'hide'}`} onClick={this.onCloseHandler}></div>
               <div className="search-container">
                 <div className="input-icon">
-                  <i className="search-icon-left input-icon-addon fas fa-search"></i>
+                  {this.renderSearchIcon()}
                   <input
                     type="text"
                     className="form-control search-input"
diff --git a/frontend/src/css/search.css b/frontend/src/css/search.css
index 335be2e913..6c45eac2d7 100644
--- a/frontend/src/css/search.css
+++ b/frontend/src/css/search.css
@@ -29,6 +29,15 @@
   padding: 1rem 0rem 0rem 1rem;
 }
 
+.search-container .input-icon svg.input-icon-addon {
+  height: 100%;
+  padding: 7px;
+}
+
+.search-container.show .input-icon svg.input-icon-addon {
+  padding: 12px;
+}
+
 .search-icon-left {
   display: flex;
 }
@@ -268,6 +277,17 @@
     width: 2rem;
     align-items: center;
     justify-content: center;
+    height: 100%;
+    position: relative;
+  }
+
+  .search-icon-container .input-icon-addon {
+    height: 100%;
+    padding: 7px;
+  }
+
+  .search-container .input-icon svg.input-icon-addon {
+    padding: 12px;
   }
 
   .search-icon {
diff --git a/frontend/src/pages/lib-content-view/lib-content-view.js b/frontend/src/pages/lib-content-view/lib-content-view.js
index 5208ee335f..b06f68eb27 100644
--- a/frontend/src/pages/lib-content-view/lib-content-view.js
+++ b/frontend/src/pages/lib-content-view/lib-content-view.js
@@ -1179,7 +1179,7 @@ class LibContentView extends React.Component {
           asyncOperationProgress: 0,
           asyncOperationType: 'move',
           isCopyMoveProgressDialogShow: true,
-	}, () => {
+        }, () => {
           this.currentMoveItemName = dirName;
           this.currentMoveItemPath = direntPath;
           this.getAsyncCopyMoveProgress(dirName, direntPath);
@@ -1880,36 +1880,28 @@ class LibContentView extends React.Component {
 
   onLibDecryptWhenCopyMove = () => {
     if (this.state.libNeedDecryptWhenCopy) {
-        if (this.state.copyMoveSingleItem) {
-          this.onCopyItem(this.state.destRepoWhenCopyMove,
-                          this.state.srcDirentWhenCopyMove,
-                          this.state.destDirentPathWhenCopyMove,
-                          this.state.srcNodeParentPathWhenCopyMove)
-	} else {
-          this.onCopyItems(this.state.destRepoWhenCopyMove,
-                           this.state.destDirentPathWhenCopyMove)
-	}
-        this.setState({
-          libNeedDecryptWhenCopy: false,
-          copyMoveSingleItem: false,
-        });
+      if (this.state.copyMoveSingleItem) {
+        this.onCopyItem(this.state.destRepoWhenCopyMove, this.state.srcDirentWhenCopyMove, this.state.destDirentPathWhenCopyMove,this.state.srcNodeParentPathWhenCopyMove);
+      } else {
+        this.onCopyItems(this.state.destRepoWhenCopyMove, this.state.destDirentPathWhenCopyMove);
+      }
+      this.setState({
+        libNeedDecryptWhenCopy: false,
+        copyMoveSingleItem: false,
+      });
     }
     if (this.state.libNeedDecryptWhenMove) {
-        if (this.state.copyMoveSingleItem) {
-          this.onMoveItem(this.state.destRepoWhenCopyMove,
-                          this.state.srcDirentWhenCopyMove,
-                          this.state.destDirentPathWhenCopyMove,
-                          this.state.srcNodeParentPathWhenCopyMove)
-	} else {
-          this.onMoveItems(this.state.destRepoWhenCopyMove,
-                           this.state.destDirentPathWhenCopyMove)
-	}
-        this.setState({
-          libNeedDecryptWhenMove: false,
-          copyMoveSingleItem: false,
-        });
+      if (this.state.copyMoveSingleItem) {
+        this.onMoveItem(this.state.destRepoWhenCopyMove, this.state.srcDirentWhenCopyMove, this.state.destDirentPathWhenCopyMove, this.state.srcNodeParentPathWhenCopyMove);
+      } else {
+        this.onMoveItems(this.state.destRepoWhenCopyMove, this.state.destDirentPathWhenCopyMove);
+      }
+      this.setState({
+        libNeedDecryptWhenMove: false,
+        copyMoveSingleItem: false,
+      });
     }
-  }
+  };
 
   goDraftPage = () => {
     window.open(siteRoot + 'drafts/' + this.state.draftID + '/');