[search] fixup & improvement(display at most 20 result items in the (#6930)

* [search] fixup & improvement(display at most 20 result items in the
dialog & a possile 'More' link)

- display at most 20 search result items in the dialog
- if there are more than 20 result items, display a 'More' link in the
  bottom of the dialog. click the link, an independent search result
  page will be shown, with all the search parameters kept.

* [search] add the missing icon

frontend/src/assets/icons/more-level.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:#929292;}
+</style>
+<title>more</title>
+<desc>Created with Sketch.</desc>
+<g id="more">
+	<path id="形状结合" class="st0" d="M24.3,16c0-2,1.7-3.7,3.7-3.7s3.7,1.7,3.7,3.7S30,19.7,28,19.7S24.3,18,24.3,16z M12,16
+		c0-2,1.7-3.7,3.7-3.7s3.7,1.7,3.7,3.7s-1.7,3.7-3.7,3.7S12,18,12,16z M0,16c0-2,1.3-3.7,3.4-3.7s4,1.7,4,3.7s-1.9,3.7-4,3.7
+		S0,18,0,16z"/>
+</g>
+</svg>

frontend/src/components/search/search.js

@@ -9,6 +9,7 @@ import { Utils } from '../../utils/utils';
 import { isMac } from '../../utils/extra-attributes';
 import toaster from '../toast';
 import { SEARCH_DELAY_TIME, getValueLength } from './constant';
+import Icon from '../icon';
 
 const propTypes = {
   repoID: PropTypes.string,
@@ -17,7 +18,7 @@ const propTypes = {
   isPublic: PropTypes.bool,
 };
 
-const PER_PAGE = 10;
+const PER_PAGE = 20;
 const controlKey = isMac() ? '⌘' : 'Ctrl';
 
 class Search extends Component {
@@ -336,20 +337,6 @@ class Search extends Component {
     });
   };
 
-  onResultListScroll = (e) => {
-    // Load less than 100 results
-    if (!this.state.hasMore || this.state.isLoading || this.state.resultItems.length > 100) {
-      return;
-    }
-    const listPadding = 20;
-    if (e.target.scrollTop + e.target.clientHeight + listPadding > this.searchResultListRef.current.clientHeight - 10) {
-      this.setState({isLoading: true}, () => {
-        this.source = seafileAPI.getSource();
-        this.sendRequest(this.queryData, this.source.token, this.state.page);
-      });
-    }
-  };
-
   updateSearchPageURL(queryData) {
     let params = '';
     for (let key in queryData) {
@@ -427,7 +414,8 @@ class Search extends Component {
   }
 
   renderResults = (resultItems, isVisited) => {
-    const { highlightIndex } = this.state;
+    const { highlightIndex, hasMore, searchPageUrl } = this.state;
+
     const results = (
       <>
       {isVisited && <h4 className="visited-search-results-title">{gettext('Search results visited recently')}</h4>}
@@ -445,6 +433,12 @@ class Search extends Component {
           );
         })}
       </ul>
+      {(!this.props.isPublic && hasMore) &&
+        <div className="more-search-result mb-1 pl-2 d-flex align-items-center">
+          <Icon symbol="more-level" className="more-search-result-icon" />
+          <a href={searchPageUrl} className="more-search-result-text ml-1">{gettext('More')}</a>
+        </div>
+      }
       </>
     );
 
@@ -499,7 +493,6 @@ class Search extends Component {
               </div>
               <div
                 className="search-result-container dropdown-search-result-container"
-                onScroll={this.onResultListScroll}
                 ref={this.searchContainer}
               >
                 {this.renderSearchResult()}
@@ -532,7 +525,7 @@ class Search extends Component {
                     <button type="button" className="search-icon-right input-icon-addon fas fa-times border-0 bg-transparent" onClick={this.onCloseHandler} aria-label={gettext('Close')}></button>
                   }
                 </div>
-                <div className="search-result-container dropdown-search-result-container" onScroll={this.onResultListScroll}>
+                <div className="search-result-container dropdown-search-result-container">
                   {this.renderSearchResult()}
                 </div>
               </div>

frontend/src/css/search.css

@@ -385,3 +385,18 @@
   font-weight: normal;
   margin: 7px 0 10px;
 }
+
+.search-result-container .more-search-result {
+  margin-top: -4px;
+  height: 40px;
+}
+
+.search-result-container .more-search-result-icon {
+  width: 1rem;
+  color: #ec8000;
+  margin: 0 10px;
+}
+
+.search-result-container .more-search-result-text {
+  font-size: .875rem;
+}