From e01ea7eee1bcfb84c66d96dbd483ec16607d2b08 Mon Sep 17 00:00:00 2001
From: Michael An <2331806369@qq.com>
Date: Mon, 23 Sep 2024 14:36:15 +0800
Subject: [PATCH] change search mask z-index and tags (#6821)

---
 .../src/components/file-chooser/searcher/index.js  |  3 ++-
 frontend/src/components/search/search.js           |  9 +++++----
 frontend/src/components/search/wiki-search.js      |  9 +++++----
 frontend/src/constants/zIndexes.js                 |  6 ++++++
 frontend/src/css/search.css                        | 14 --------------
 5 files changed, 18 insertions(+), 23 deletions(-)

diff --git a/frontend/src/components/file-chooser/searcher/index.js b/frontend/src/components/file-chooser/searcher/index.js
index 2e872f50e5..2c116b2bf8 100644
--- a/frontend/src/components/file-chooser/searcher/index.js
+++ b/frontend/src/components/file-chooser/searcher/index.js
@@ -8,6 +8,7 @@ import SearchedListView from '../searched-list-view';
 import { gettext } from '../../../utils/constants';
 import { seafileAPI } from '../../../utils/seafile-api';
 import { Utils } from '../../../utils/utils';
+import { SEARCH_CONTAINER } from '../../../constants/zIndexes';
 
 import './index.css';
 
@@ -157,7 +158,7 @@ const Searcher = ({ searchStatus, onUpdateSearchStatus, onDirentItemClick, selec
   };
 
   return (
-    <div className='search-container file-chooser-searcher'>
+    <div className='search-container file-chooser-searcher' style={{ zIndex: SEARCH_CONTAINER }}>
       <div className='search-input-container'>
         <i className="search-icon-left input-icon-addon sf3-font sf3-font-search"></i>
         <Input
diff --git a/frontend/src/components/search/search.js b/frontend/src/components/search/search.js
index f3683f290a..d1b5ec246f 100644
--- a/frontend/src/components/search/search.js
+++ b/frontend/src/components/search/search.js
@@ -11,6 +11,7 @@ import SearchResultLibrary from './search-result-library';
 import { Utils } from '../../utils/utils';
 import toaster from '../toast';
 import Loading from '../loading';
+import { SEARCH_MASK, SEARCH_CONTAINER } from '../../constants/zIndexes';
 
 const propTypes = {
   repoID: PropTypes.string,
@@ -722,8 +723,8 @@ class Search extends Component {
       <Fragment>
         <MediaQuery query="(min-width: 768px)">
           <div className="search">
-            <div className={`search-mask ${isMaskShow ? 'show' : 'hide'}`} onClick={this.onCloseHandler}></div>
-            <div className={`search-container ${isMaskShow ? 'show' : ''}`}>
+            <div className={`search-mask ${isMaskShow ? 'show' : 'hide'}`} onClick={this.onCloseHandler} style={{ zIndex: SEARCH_MASK }}></div>
+            <div className={`search-container ${isMaskShow ? 'show' : ''}`} style={{ zIndex: SEARCH_CONTAINER }}>
               <div className={`input-icon ${isMaskShow ? 'mb-1' : ''}`}>
                 <i className="search-icon-left input-icon-addon sf3-font sf3-font-search"></i>
                 <input
@@ -758,8 +759,8 @@ class Search extends Component {
           </div>
           {this.state.isSearchInputShow &&
             <div className="search">
-              <div className={`search-mask ${isMaskShow ? '' : 'hide'}`} onClick={this.onCloseHandler}></div>
-              <div className="search-container">
+              <div className={`search-mask ${isMaskShow ? '' : 'hide'}`} onClick={this.onCloseHandler} style={{ zIndex: SEARCH_MASK }}></div>
+              <div className="search-container" style={{ zIndex: SEARCH_CONTAINER }}>
                 <div className="input-icon">
                   <i className="search-icon-left input-icon-addon sf3-font sf3-font-search"></i>
                   <input
diff --git a/frontend/src/components/search/wiki-search.js b/frontend/src/components/search/wiki-search.js
index 03273570f6..fbda011ccb 100644
--- a/frontend/src/components/search/wiki-search.js
+++ b/frontend/src/components/search/wiki-search.js
@@ -8,6 +8,7 @@ import More from '../more';
 import { Utils } from '../../utils/utils';
 import toaster from '../toast';
 import { getValueLength } from './constant';
+import { SEARCH_MASK, SEARCH_CONTAINER } from '../../constants/zIndexes';
 
 const propTypes = {
   repoID: PropTypes.string,
@@ -225,8 +226,8 @@ class Search extends Component {
       <Fragment>
         <MediaQuery query="(min-width: 768px)">
           <div className="search">
-            <div className={`search-mask ${this.state.isMaskShow ? '' : 'hide'}`} onClick={this.onCloseHandler}></div>
-            <div className="search-container">
+            <div className={`search-mask ${this.state.isMaskShow ? '' : 'hide'}`} onClick={this.onCloseHandler} style={{ zIndex: SEARCH_MASK }}></div>
+            <div className="search-container" style={{ zIndex: SEARCH_CONTAINER }}>
               <div className="input-icon">
                 <i className="search-icon-left input-icon-addon sf3-font sf3-font-search"></i>
                 <input
@@ -254,8 +255,8 @@ class Search extends Component {
           </div>
           {this.state.isSearchInputShow &&
             <div className="search">
-              <div className={`search-mask ${this.state.isMaskShow ? '' : 'hide'}`} onClick={this.onCloseHandler}></div>
-              <div className="search-container">
+              <div className={`search-mask ${this.state.isMaskShow ? '' : 'hide'}`} onClick={this.onCloseHandler} style={{ zIndex: SEARCH_MASK }}></div>
+              <div className="search-container" style={{ zIndex: SEARCH_CONTAINER }}>
                 <div className="input-icon">
                   <i className="search-icon-left input-icon-addon sf3-font sf3-font-search"></i>
                   <input
diff --git a/frontend/src/constants/zIndexes.js b/frontend/src/constants/zIndexes.js
index f696b6b885..478a9c24c6 100644
--- a/frontend/src/constants/zIndexes.js
+++ b/frontend/src/constants/zIndexes.js
@@ -5,3 +5,9 @@ export const FOLDED_SIDE_NAV_FILES = 2;
 export const FOLDED_SIDE_NAV = 3;
 
 export const EXTRA_ATTRIBUTES_DIALOG_MODAL = 1048;
+
+export const SEARCH_MASK = 1050;
+
+export const SEARCH_CONTAINER = 1051;
+
+export const SEARCH_CONTAINER_SETTINGS = 1052;
diff --git a/frontend/src/css/search.css b/frontend/src/css/search.css
index cae95e5e41..b79cd62c01 100644
--- a/frontend/src/css/search.css
+++ b/frontend/src/css/search.css
@@ -5,12 +5,10 @@
   width: 100%;
   height: 100%;
   background-color: rgba(0, 0, 0, 0.2);
-  z-index: 4;
 }
 
 .search-container {
   position: relative;
-  z-index: 5;
 }
 
 .search-container.show {
@@ -61,17 +59,6 @@
   right: 25px;
 }
 
-.search-container .search-settings {
-  left: 1rem;
-  right: 14px;
-  top: 54px;
-  z-index: 100;
-}
-
-.search-container .search-settings .custom-switch {
-  padding-left: 0;
-}
-
 .search-icon-arrow {
   right: 40px;
   left: auto;
@@ -298,7 +285,6 @@
 
   .search-container {
     position: fixed;
-    z-index: 5;
     top: 5rem;
     left: 0;
     right: 0;