change search UI (#5676)

* change search UI

* change className

frontend/src/components/search/search.js

@@ -6,6 +6,7 @@ import { seafileAPI } from '../../utils/seafile-api';
 import { gettext, siteRoot, username } from '../../utils/constants';
 import SearchResultItem from './search-result-item';
 import { Utils } from '../../utils/utils';
+import { isMac } from '../../utils/extra-attributes';
 import toaster from '../toast';
 
 const propTypes = {
@@ -16,6 +17,7 @@ const propTypes = {
 };
 
 const PER_PAGE = 10;
+const controlKey = isMac() ? '⌘' : 'Ctrl';
 
 class Search extends Component {
 
@@ -294,20 +296,21 @@ class Search extends Component {
   render() {
     let width = this.state.width !== 'default' ? this.state.width : '';
     let style = {'width': width};
-    const { searchPageUrl } = this.state;
+    const { searchPageUrl, isMaskShow } = this.state;
+    const placeholder = `${this.props.placeholder}${isMaskShow ? '' : ` (${controlKey} + f )`}`;
     return (
       <Fragment>
         <MediaQuery query="(min-width: 768px)">
           <div className="search">
-            <div className={`search-mask ${this.state.isMaskShow ? 'show' : 'hide'}`} onClick={this.onCloseHandler}></div>
+            <div className={`search-mask ${isMaskShow ? 'show' : 'hide'}`} onClick={this.onCloseHandler}></div>
-            <div className={`search-container ${this.state.isMaskShow ? 'show' : ''}`}>
+            <div className={`search-container ${isMaskShow ? 'show' : ''}`}>
-              <div className="input-icon">
+              <div className={`input-icon ${isMaskShow ? 'mb-1' : ''}`}>
                 <i className="search-icon-left input-icon-addon fas fa-search"></i>
                 <input
                   type="text"
                   className="form-control search-input"
                   name="query"
-                  placeholder={this.props.placeholder}
+                  placeholder={placeholder}
                   style={style}
                   value={this.state.value}
                   onFocus={this.onFocusHandler}
@@ -334,7 +337,7 @@ 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 ${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>
@@ -342,7 +345,7 @@ class Search extends Component {
                     type="text"
                     className="form-control search-input"
                     name="query"
-                    placeholder={this.props.placeholder}
+                    placeholder={placeholder}
                     style={style}
                     value={this.state.value}
                     onFocus={this.onFocusHandler}

frontend/src/components/toolbar/common-toolbar.js

@@ -18,20 +18,20 @@ const propTypes = {
 class CommonToolbar extends React.Component {
 
   render() {
-    let searchPlaceholder = this.props.searchPlaceholder || gettext('Search Files');
+    const { repoID, repoName } = this.props;
     return (
       <div className="common-toolbar">
         {isPro && (
           <Search
-            repoID={this.props.repoID}
+            repoID={repoID}
-            placeholder={searchPlaceholder}
+            placeholder={this.props.searchPlaceholder || gettext('Search files')}
             onSearchedClick={this.props.onSearchedClick}
           />
         )}
         {this.props.isLibView && !isPro &&
           <SearchByName
-            repoID={this.props.repoID}
+            repoID={repoID}
-            repoName={this.props.repoName}
+            repoName={repoName}
           />
         }
         <Notification />

frontend/src/css/search.css

@@ -87,7 +87,7 @@
 }
 
 .search-result-container .search-result-list {
-  margin: 10px 0;
+  margin: 4px 0;
   padding: 0;
   list-style: none;
 }
@@ -98,7 +98,7 @@
 
 .search-result-container .search-result-item {
   display: flex;
-  padding: 0.25rem 0;
+  padding: 10px 0 10px 8px;
   font-size: 0.8125rem;
   cursor: pointer;
   margin-right: 1rem;
@@ -106,7 +106,7 @@
 
 .search-result-container .search-result-item:hover {
   background-color: #f0f0f0;
-  border-radius: 5px;
+  border-radius: 4px;
 }
 
 .search-result-item .item-img {

frontend/src/pages/lib-content-view/lib-content-toolbar.js

@@ -80,7 +80,13 @@ class LibContentToolbar extends React.Component {
             />
             <ViewModeToolbar currentMode={this.props.currentMode} switchViewMode={this.props.switchViewMode} isCustomPermission={isCustomPermission} />
           </div>
-          <CommonToolbar isLibView={true} repoID={this.props.repoID} repoName={this.props.repoName} onSearchedClick={this.props.onSearchedClick} searchPlaceholder={gettext('Search files in this library')}/>
+          <CommonToolbar
+            isLibView={true}
+            repoID={this.props.repoID}
+            repoName={this.props.repoName}
+            onSearchedClick={this.props.onSearchedClick}
+            searchPlaceholder={gettext('Search files')}
+          />
         </Fragment>
       );
     }
@@ -132,7 +138,13 @@ class LibContentToolbar extends React.Component {
             />
           }
         </div>
-        <CommonToolbar isLibView={true} repoID={this.props.repoID} repoName={this.props.repoName} onSearchedClick={this.props.onSearchedClick} searchPlaceholder={gettext('Search files in this library')}/>
+        <CommonToolbar
+          isLibView={true}
+          repoID={this.props.repoID}
+          repoName={this.props.repoName}
+          onSearchedClick={this.props.onSearchedClick}
+          searchPlaceholder={gettext('Search files')}
+        />
       </Fragment>
     );
   }

frontend/src/pages/search/main-panel.js

@@ -300,7 +300,7 @@ class SearchViewPanel extends React.Component {
               name="query"
               autoComplete="off"
               value={this.state.q}
-              placeholder={gettext('Search Files')}
+              placeholder={gettext('Search files')}
               onChange={this.handleSearchInput}
               onKeyDown={this.handleKeyDown}
             />

frontend/src/pages/wiki/main-panel.js

@@ -78,9 +78,7 @@ class MainPanel extends Component {
 
   render() {
     let { onSearchedClick } = this.props;
-    let searchPlaceholder = gettext('Search files in this library');
     const errMessage = (<div className="message err-tip">{gettext('Folder does not exist.')}</div>);
-
     const isViewingFile = this.props.pathExist && !this.props.isDataLoading && this.props.isViewFile;
     return (
       <div className="main-panel wiki-main-panel">
@@ -93,7 +91,7 @@ class MainPanel extends Component {
               </div>
               <div className="common-toolbar">
                 {isPro && (
-                  <Search isPublic={true} repoID={repoID} onSearchedClick={onSearchedClick} placeholder={searchPlaceholder}/>
+                  <Search isPublic={true} repoID={repoID} onSearchedClick={onSearchedClick} placeholder={gettext('Search files')}/>
                 )}
               </div>
             </Fragment>
@@ -110,7 +108,7 @@ class MainPanel extends Component {
               </div>
               <div className="common-toolbar">
                 {isPro && (
-                  <Search isPublic={true} repoID={repoID} onSearchedClick={onSearchedClick} placeholder={searchPlaceholder}/>
+                  <Search isPublic={true} repoID={repoID} onSearchedClick={onSearchedClick} placeholder={gettext('Search files')}/>
                 )}
                 <Notification />
                 <Account />