change search mask z-index and tags (#6821)

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

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-mask ${isMaskShow ? 'show' : 'hide'}`} onClick={this.onCloseHandler} style={{ zIndex: SEARCH_MASK }}></div>
-            <div className={`search-container ${isMaskShow ? 'show' : ''}`}>
+            <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-mask ${isMaskShow ? '' : 'hide'}`} onClick={this.onCloseHandler} style={{ zIndex: SEARCH_MASK }}></div>
-              <div className="search-container">
+              <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

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-mask ${this.state.isMaskShow ? '' : 'hide'}`} onClick={this.onCloseHandler} style={{ zIndex: SEARCH_MASK }}></div>
-            <div className="search-container">
+            <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-mask ${this.state.isMaskShow ? '' : 'hide'}`} onClick={this.onCloseHandler} style={{ zIndex: SEARCH_MASK }}></div>
-              <div className="search-container">
+              <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

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;

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;