[search] 'turn on/off semantic search': redesigned UI/UX for this set…

…ting (added a 'setting' icon to toggle the new 'setting popover') (#5932)

frontend/src/components/search/ai-search.js

@@ -53,6 +53,7 @@ export default class AISearch extends Component {
       showRecent: true,
       isResultGetted: false,
       isCloseShow: false,
+      isSettingsShown: false,
       isSearchInputShow: false, // for mobile
       searchPageUrl: this.baseSearchPageURL,
       indexState: '',
@@ -357,6 +358,7 @@ export default class AISearch extends Component {
       value: '',
       isMaskShow: false,
       isCloseShow: false,
+      isSettingsShown: false,
       isResultGetted: false,
       resultItems: [],
       highlightIndex: 0,
@@ -547,7 +549,7 @@ export default class AISearch extends Component {
         <Switch
           checked={true}
           placeholder={gettext('Turn on semantic search for this library')}
-          className="w-100 mt-1"
+          className="position-absolute p-4 bg-white border rounded shadow-sm search-settings"
           size="small"
           textPosition='right'
           disabled
@@ -558,7 +560,7 @@ export default class AISearch extends Component {
         <Switch
           checked={true}
           placeholder={gettext('Turn off semantic search for this library')}
-          className="w-100 mt-1"
+          className="position-absolute p-4 bg-white border rounded shadow-sm search-settings"
           size="small"
           onChange={this.onDeleteIndex}
           textPosition='right'
@@ -569,7 +571,7 @@ export default class AISearch extends Component {
         <Switch
           checked={false}
           placeholder={gettext('Turn on semantic search for this library')}
-          className="w-100 mt-1"
+          className="position-absolute p-4 bg-white border rounded shadow-sm search-settings"
           size="small"
           onChange={this.onCreateIndex}
           textPosition='right'
@@ -579,6 +581,12 @@ export default class AISearch extends Component {
     return null;
   }
 
+  toggleSettingsShown = () => {
+    this.setState({
+      isSettingsShown: !this.state.isSettingsShown
+    });
+  }
+
   render() {
     let width = this.state.width !== 'default' ? this.state.width : '';
     let style = {'width': width};
@@ -604,7 +612,7 @@ 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 ${isMaskShow ? 'mb-1' : ''}`}>
+              <div className={`input-icon`}>
                 <i className="search-icon-left input-icon-addon fas fa-search"></i>
                 <input
                   type="text"
@@ -620,15 +628,20 @@ export default class AISearch extends Component {
                   onKeyDown={this.onKeydownHandler}
                 />
                 {this.state.isCloseShow &&
+                  <>
+                  {(this.isRepoOwner || this.isAdmin) &&
+                    <button type="button" className="search-icon-right input-icon-addon sf3-font-set-up sf3-font border-0 bg-transparent mr-3" onClick={this.toggleSettingsShown} aria-label={gettext('Settings')}></button>
+                  }
                   <button type="button" className="search-icon-right input-icon-addon fas fa-times border-0 bg-transparent mr-4" onClick={this.onCloseHandler} aria-label={gettext('Close')}></button>
+                  </>
                 }
               </div>
+              {this.state.isSettingsShown && this.renderSwitch()}
               <div
-                className="search-result-container dropdown-search-result-container"
+                className="search-result-container dropdown-search-result-container mt-1"
                 onScroll={this.onResultListScroll}
                 ref={this.searchContainer}
               >
-                {isCloseShow && (this.isRepoOwner || this.isAdmin) && this.renderSwitch()}
                 {this.renderSearchResult()}
               </div>
             </div>

frontend/src/css/search.css

@@ -47,6 +47,22 @@
   text-decoration: none;
 }
 
+.search-icon-right.sf3-font-set-up {
+  left: auto;
+  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;
@@ -83,10 +99,6 @@
   flex-direction: column;
 }
 
-.dropdown-search-result-container .seahub-switch .custom-switch {
-  padding-left: 0;
-}
-
 .search-result-container .search-result-none {
   text-align: center;
   line-height: 4rem;

media/css/sf_font3/iconfont.css

@@ -1,8 +1,11 @@
 @font-face {
   font-family: "sf3-font"; /* Project id 1230969 */
-  src: url('iconfont.woff2?t=1694053452699') format('woff2'),
-       url('iconfont.woff?t=1694053452699') format('woff'),
-       url('iconfont.ttf?t=1694053452699') format('truetype');
+  src: url('iconfont.eot?t=1706682203259'); /* IE9 */
+  src: url('iconfont.eot?t=1706682203259#iefix') format('embedded-opentype'), /* IE6-IE8 */
+       url('iconfont.woff2?t=1706682203259') format('woff2'),
+       url('iconfont.woff?t=1706682203259') format('woff'),
+       url('iconfont.ttf?t=1706682203259') format('truetype'),
+       url('iconfont.svg?t=1706682203259#sf3-font') format('svg');
 }
 
 .sf3-font {
@@ -13,6 +16,94 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.sf3-font-set-up:before {
+  content: "\e800";
+}
+
+.sf3-font-language:before {
+  content: "\e7ff";
+}
+
+.sf3-font-file-lock:before {
+  content: "\e7f1";
+}
+
+.sf3-font-x-011:before {
+  content: "\e7f8";
+}
+
+.sf3-font-list:before {
+  content: "\e7f9";
+}
+
+.sf3-font-new-library:before {
+  content: "\e7fa";
+}
+
+.sf3-font-download:before {
+  content: "\e7fb";
+}
+
+.sf3-font-entry:before {
+  content: "\e7fc";
+}
+
+.sf3-font-delete:before {
+  content: "\e7fd";
+}
+
+.sf3-font-files1:before {
+  content: "\e7fe";
+}
+
+.sf3-font-sort2:before {
+  content: "\e7f2";
+}
+
+.sf3-font-new-group:before {
+  content: "\e7f3";
+}
+
+.sf3-font-copy:before {
+  content: "\e7f4";
+}
+
+.sf3-font-more-level1:before {
+  content: "\e7f5";
+}
+
+.sf3-font-sort1:before {
+  content: "\e7f6";
+}
+
+.sf3-font-move:before {
+  content: "\e7f7";
+}
+
+.sf3-font-files:before {
+  content: "\e7ec";
+}
+
+.sf3-font-freeze:before {
+  content: "\e7e4";
+}
+
+.sf3-font-helpless:before {
+  content: "\e7e3";
+}
+
+.sf3-font-helpless-selected:before {
+  content: "\e7e0";
+}
+
+.sf3-font-helpful-selected:before {
+  content: "\e7e1";
+}
+
+.sf3-font-helpful:before {
+  content: "\e7e2";
+}
+
 .sf3-font-x-01:before {
   content: "\e7d8";
 }