improve/add-empty-tip-when-no-file (#6760)

frontend/src/components/dialog/trash-dialog.js

@@ -11,6 +11,8 @@ import ModalPortal from '../../components/modal-portal';
 import toaster from '../../components/toast';
 import CleanTrash from '../../components/dialog/clean-trash';
 import Paginator from '../paginator';
+import Loading from '../../components/loading';
+import EmptyTip from '../../components/empty-tip';
 
 import '../../css/toolbar.css';
 import '../../css/search.css';
@@ -141,7 +143,7 @@ class TrashDialog extends React.Component {
 
   render() {
     const { showTrashDialog, toggleTrashDialog } = this.props;
-    const { isCleanTrashDialogOpen, showFolder } = this.state;
+    const { isCleanTrashDialogOpen, showFolder, isLoading, items } = this.state;
     const isRepoAdmin = this.props.currentRepoInfo.owner_email === username || this.props.currentRepoInfo.is_admin;
     const repoFolderName = this.props.currentRepoInfo.repo_name;
     const oldTrashUrl = siteRoot + 'repo/' + this.props.repoID + '/trash/';
@@ -164,6 +166,11 @@ class TrashDialog extends React.Component {
           <div dangerouslySetInnerHTML={{ __html: title }}></div>
         </ModalHeader>
         <ModalBody>
+          {isLoading && <Loading />}
+          {!isLoading && items.length === 0 &&
+            <EmptyTip text={gettext('No file')} className="m-0" />
+          }
+          {!isLoading && items.length > 0 &&
           <Content
             data={this.state}
             repoID={this.props.repoID}
@@ -175,6 +182,7 @@ class TrashDialog extends React.Component {
             getListByPage={this.getItems2}
             resetPerPage={this.resetPerPage}
           />
+          }
           {isCleanTrashDialogOpen &&
           <ModalPortal>
             <CleanTrash

frontend/src/components/dirent-grid-view/dirent-grid-view.js

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { siteRoot, username, enableSeadoc, thumbnailDefaultSize, thumbnailSizeForOriginal } from '../../utils/constants';
+import { siteRoot, username, enableSeadoc, thumbnailDefaultSize, thumbnailSizeForOriginal, gettext } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import { seafileAPI } from '../../utils/seafile-api';
 import URLDecorator from '../../utils/url-decorator';
@@ -24,6 +24,7 @@ import toaster from '../toast';
 import imageAPI from '../../utils/image-api';
 import FileAccessLog from '../dialog/file-access-log';
 import { EVENT_BUS_TYPE } from '../common/event-bus-type';
+import EmptyTip from '../empty-tip';
 
 import '../../css/grid-view.css';
 
@@ -826,16 +827,16 @@ class DirentGridView extends React.Component {
 
     return (
       <Fragment>
-        <ul
-          className="grid-view"
-          onClick={this.gridContainerClick}
-          onContextMenu={this.onGridContainerContextMenu}
-          onMouseDown={this.onGridContainerMouseDown}
-          onMouseMove={this.onSelectMouseMove}
-          ref={this.containerRef}
-        >
-          {
-            direntList.length !== 0 && direntList.map((dirent, index) => {
+        {direntList.length > 0 ?
+          <ul
+            className="grid-view"
+            onClick={this.gridContainerClick}
+            onContextMenu={this.onGridContainerContextMenu}
+            onMouseDown={this.onGridContainerMouseDown}
+            onMouseMove={this.onSelectMouseMove}
+            ref={this.containerRef}
+          >
+            {direntList.map((dirent, index) => {
               return (
                 <DirentGridItem
                   key={index}
@@ -854,10 +855,21 @@ class DirentGridView extends React.Component {
                   selectedDirentList={selectedDirentList}
                 />
               );
-            })
-          }
-          {this.renderSelectionBox()}
-        </ul>
+            })}
+            {this.renderSelectionBox()}
+          </ul>
+          :
+          <ul
+            className="grid-view"
+            onClick={this.gridContainerClick}
+            onContextMenu={this.onGridContainerContextMenu}
+            onMouseDown={this.onGridContainerMouseDown}
+            onMouseMove={this.onSelectMouseMove}
+            ref={this.containerRef}
+          >
+            <EmptyTip text={gettext('No file')} className='w-100' />
+          </ul>
+        }
         <ContextMenu
           id={GRID_ITEM_CONTEXTMENU_ID}
           onMenuItemClick={this.onMenuItemClick}

frontend/src/components/dirent-list-view/dirent-list-view.js

@@ -18,6 +18,7 @@ import ContextMenu from '../context-menu/context-menu';
 import { hideMenu, showMenu } from '../context-menu/actions';
 import DirentsDraggedPreview from '../draggable/dirents-dragged-preview';
 import { EVENT_BUS_TYPE } from '../common/event-bus-type';
+import EmptyTip from '../empty-tip';
 
 const propTypes = {
   path: PropTypes.string.isRequired,
@@ -651,6 +652,7 @@ class DirentListView extends React.Component {
         onDragLeave={this.onTableDragLeave}
         onDrop={this.tableDrop}
       >
+        {direntList.length > 0 &&
         <table className={`table-hover ${isDesktop ? '' : 'table-thead-hidden'}`}>
           {isDesktop ? (
             <thead onMouseDown={this.onThreadMouseDown} onContextMenu={this.onThreadContextMenu}>
@@ -729,6 +731,10 @@ class DirentListView extends React.Component {
             })}
           </tbody>
         </table>
+        }
+        {direntList.length === 0 &&
+          <EmptyTip text={gettext('No file')}/>
+        }
         <Fragment>
           <ContextMenu
             id={'dirent-container-menu'}

frontend/src/components/dirent-list-view/dirent-none-view.js

@@ -14,7 +14,7 @@ const propTypes = {
   onAddFile: PropTypes.func.isRequired
 };
 
-class DirentNodeView extends React.Component {
+class DirentNoneView extends React.Component {
 
   constructor(props) {
     super(props);
@@ -88,6 +88,6 @@ class DirentNodeView extends React.Component {
   }
 }
 
-DirentNodeView.propTypes = propTypes;
+DirentNoneView.propTypes = propTypes;
 
-export default DirentNodeView;
+export default DirentNoneView;

frontend/src/components/empty-tip.js

@@ -3,9 +3,9 @@ import PropTypes from 'prop-types';
 import { mediaUrl } from '../utils/constants';
 import '../css/empty-tip.css';
 
-function EmptyTip({ className, title, text, children }) {
+function EmptyTip({ className = '', title, text, children }) {
   return (
-    <div className='empty-tip'>
+    <div className={`empty-tip ${className}`}>
       <img src={`${mediaUrl}img/no-items-tip.png`} alt="" width="100" height="100" className="no-items-img-tip" />
       {title && <span className="empty-tip-title">{title}</span>}
       {text && <span className="empty-tip-text">{text}</span>}