[repo trash] redesigned it for mobile (#7502)

2025-09-19 01:44:13 +00:00 · 2025-02-21 21:17:49 +08:00
parent e1eb01b439
commit f4be8814c5
8 changed files with 274 additions and 83 deletions
--- a/frontend/src/components/dialog/trash-dialog/index.css
+++ b/frontend/src/components/dialog/trash-dialog/index.css
@@ -1,18 +1,38 @@
 .trash-dialog {
-  max-width: 1100px;
-  height: calc(100% - 56px);
-  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  margin: 0;
 }

 .trash-dialog .modal-content {
  height: 100%;
  overflow: hidden;
+  border: none;
+  border-radius: 0;
+}
+
+@media (min-width: 768px) {
+  .trash-dialog {
+    max-width: 1100px;
+    height: calc(100% - 56px);
+    overflow: hidden;
+    margin: 1.75rem auto;
+  }
+
+  .trash-dialog .modal-content {
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    border-radius: 3px;
+  }
 }

 .trash-dialog .modal-header {
  align-items: center;
 }

+.trash-dialog .back-icon {
+  color: #999;
+}
+
 .trash-dialog .modal-header .button-control {
  display: flex;
  justify-content: center;
@@ -45,6 +65,19 @@
  background: #dfdfdf;
 }

+.trash-dialog .path-container {
+  border-bottom: 1px solid #eee;
+  height: 40px;
+  padding: 0 .5rem 1rem;
+}
+
+@media (min-width: 768px) {
+  .trash-dialog .path-container {
+    border-bottom: none;
+    padding: 0 0 1rem;
+  }
+}
+
@media (max-width: 768px) {
  .trash-dialog .modal-header .trash-dialog-old-page {
    font-size: 14px;
--- a/frontend/src/components/dialog/trash-dialog/index.js
+++ b/frontend/src/components/dialog/trash-dialog/index.js
@@ -188,25 +188,38 @@ class TrashDialog extends React.Component {
    let title = gettext('{placeholder} Trash');
    title = title.replace('{placeholder}', '<span class="op-target text-truncate mr-1">' + Utils.HTMLescape(repoFolderName) + '</span>');

+    const isDesktop = Utils.isDesktop();
    return (
      <>
        <Modal className="trash-dialog" isOpen={showTrashDialog} toggle={toggleTrashDialog}>
          <ModalHeader
            close={
              <div className="button-control">
-                <a className="trash-dialog-old-page" href={oldTrashUrl}>{gettext('Visit old version page')}</a>
+                {isDesktop && <a className="trash-dialog-old-page" href={oldTrashUrl}>{gettext('Visit old version page')}</a>}
                {(enableUserCleanTrash && !showFolder && isRepoAdmin) &&
                  <button className="btn btn-secondary clean flex-shrink-0 ml-4" onClick={this.cleanTrash}>{gettext('Clean')}</button>
                }
-                <button type="button" className="close seahub-modal-btn" aria-label={gettext('Close')} onClick={toggleTrashDialog}>
-                  <span className="seahub-modal-btn-inner">
-                    <i className="sf3-font sf3-font-x-01" aria-hidden="true"></i>
-                  </span>
-                </button>
+                {isDesktop && (
+                  <button type="button" className="close seahub-modal-btn" aria-label={gettext('Close')} onClick={toggleTrashDialog}>
+                    <span className="seahub-modal-btn-inner">
+                      <i className="sf3-font sf3-font-x-01" aria-hidden="true"></i>
+                    </span>
+                  </button>
+                )}
              </div>
            }
          >
-            <div dangerouslySetInnerHTML={{ __html: title }}></div>
+            {!isDesktop &&
+              <span
+                role="button"
+                className="sf3-font sf3-font-arrow rotate-180 d-inline-block back-icon mr-2"
+                title={gettext('Back')}
+                aria-label={gettext('Back')}
+                onClick={toggleTrashDialog}
+              >
+              </span>
+            }
+            <span dangerouslySetInnerHTML={{ __html: title }}></span>
          </ModalHeader>
          <ModalBody>
            {isLoading && <Loading />}
@@ -214,15 +227,15 @@ class TrashDialog extends React.Component {
              <EmptyTip text={gettext('No file')} className="m-0" />
            }
            {!isLoading && items.length > 0 &&
-              <div>
-                <div className="path-container dir-view-path mb-2">
+              <>
+                <div className="path-container dir-view-path mw-100 pb-2">
                  <span className="path-label mr-1">{gettext('Current path: ')}</span>
                  {showFolder ?
                    this.renderFolderPath() :
                    <span className="last-path-item" title={repoFolderName}>{repoFolderName}</span>
                  }
                </div>
-                <Table repoID={repoID} data={this.state} renderFolder={this.renderFolder} />
+                <Table repoID={repoID} data={this.state} renderFolder={this.renderFolder} isDesktop={isDesktop} />
                <Paginator
                  gotoPreviousPage={this.getPreviousPage}
                  gotoNextPage={this.getNextPage}
@@ -232,7 +245,7 @@ class TrashDialog extends React.Component {
                  resetPerPage={this.resetPerPage}
                  noURLUpdate={true}
                />
-              </div>
+              </>
            }
          </ModalBody>
        </Modal>
--- a/frontend/src/components/dialog/trash-dialog/table/file-records/file-record.js
+++ b/frontend/src/components/dialog/trash-dialog/table/file-records/file-record.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import dayjs from 'dayjs';
+import { Dropdown, DropdownToggle, DropdownItem } from 'reactstrap';
 import { Utils, isMobile } from '../../../../../utils/utils';
 import { gettext, siteRoot } from '../../../../../utils/constants';
 import { seafileAPI } from '../../../../../utils/seafile-api';
@@ -12,10 +13,17 @@ class FileRecord extends React.Component {
    super(props);
    this.state = {
      restored: false,
-      isIconShown: false
+      isIconShown: false,
+      isOpMenuOpen: false // for mobile
    };
  }

+  toggleOpMenu = () => {
+    this.setState({
+      isOpMenuOpen: !this.state.isOpMenuOpen
+    });
+  };
+
  handleMouseOver = () => {
    this.setState({ isIconShown: true });
  };
@@ -24,8 +32,12 @@ class FileRecord extends React.Component {
    this.setState({ isIconShown: false });
  };

-  restoreItem = (e) => {
+  onRestoreClicked = (e) => {
    e.preventDefault();
+    this.restoreItem();
+  };
+
+  restoreItem = () => {
    const { record } = this.props;
    const { commit_id, parent_dir, obj_name, is_dir } = record;
    const path = parent_dir + obj_name;
@@ -55,40 +67,118 @@ class FileRecord extends React.Component {
  };

  render() {
-    const { record } = this.props;
+    const { record, isDesktop } = this.props;
    const { restored, isIconShown } = this.state;

    if (restored) return null;

-    return record.is_dir ? (
-      <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut} onFocus={this.handleMouseOver}>
-        <td className="pl-2 pr-2"><img src={Utils.getFolderIconUrl()} alt={gettext('Folder')} width="24" /></td>
-        <td><a href="#" onClick={this.renderFolder}>{record.obj_name}</a></td>
-        <td>{record.parent_dir}</td>
-        <td title={dayjs(record.deleted_time).format('dddd, MMMM D, YYYY h:mm:ss A')}>{dayjs(record.deleted_time).format('YYYY-MM-DD')}</td>
-        <td></td>
-        <td>
-          <a href="#" className={(isIconShown || isMobile) ? '' : 'invisible'} onClick={this.restoreItem} role="button">{gettext('Restore')}</a>
-        </td>
-      </tr>
-    ) : (
-      <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut} onFocus={this.handleMouseOver}>
-        <td className="pl-2 pr-2"><img src={Utils.getFileIconUrl(record.obj_name)} alt={gettext('File')} width="24" /></td>
-        <td>
-          <a href={`${siteRoot}repo/${this.props.repoID}/trash/files/?obj_id=${record.obj_id}&commit_id=${record.commit_id}&base=${encodeURIComponent(record.parent_dir)}&p=${encodeURIComponent('/' + record.obj_name)}`} target="_blank" rel="noreferrer">
-            {record.obj_name}
-          </a>
-        </td>
-        <td>{record.parent_dir}</td>
-        <td title={dayjs(record.deleted_time).format('dddd, MMMM D, YYYY h:mm:ss A')}>
-          {dayjs(record.deleted_time).format('YYYY-MM-DD')}
-        </td>
-        <td>{Utils.bytesToSize(record.size)}</td>
-        <td>
-          <a href="#" className={(isIconShown || isMobile) ? '' : 'invisible'} onClick={this.restoreItem} role="button">{gettext('Restore')}</a>
-        </td>
-      </tr>
-    );
+    if (isDesktop) {
+      return record.is_dir ? (
+        <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut} onFocus={this.handleMouseOver}>
+          <td className="pl-2 pr-2"><img src={Utils.getFolderIconUrl()} alt={gettext('Folder')} width="24" /></td>
+          <td><a href="#" onClick={this.renderFolder}>{record.obj_name}</a></td>
+          <td>{record.parent_dir}</td>
+          <td title={dayjs(record.deleted_time).format('dddd, MMMM D, YYYY h:mm:ss A')}>{dayjs(record.deleted_time).format('YYYY-MM-DD')}</td>
+          <td></td>
+          <td>
+            <a href="#" className={(isIconShown || isMobile) ? '' : 'invisible'} onClick={this.onRestoreClicked} role="button">{gettext('Restore')}</a>
+          </td>
+        </tr>
+      ) : (
+        <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut} onFocus={this.handleMouseOver}>
+          <td className="pl-2 pr-2"><img src={Utils.getFileIconUrl(record.obj_name)} alt={gettext('File')} width="24" /></td>
+          <td>
+            <a href={`${siteRoot}repo/${this.props.repoID}/trash/files/?obj_id=${record.obj_id}&commit_id=${record.commit_id}&base=${encodeURIComponent(record.parent_dir)}&p=${encodeURIComponent('/' + record.obj_name)}`} target="_blank" rel="noreferrer">
+              {record.obj_name}
+            </a>
+          </td>
+          <td>{record.parent_dir}</td>
+          <td title={dayjs(record.deleted_time).format('dddd, MMMM D, YYYY h:mm:ss A')}>
+            {dayjs(record.deleted_time).format('YYYY-MM-DD')}
+          </td>
+          <td>{Utils.bytesToSize(record.size)}</td>
+          <td>
+            <a href="#" className={(isIconShown || isMobile) ? '' : 'invisible'} onClick={this.onRestoreClicked} role="button">{gettext('Restore')}</a>
+          </td>
+        </tr>
+      );
+    } else { // for mobile
+      return record.is_dir ? (
+        <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut} onFocus={this.handleMouseOver}>
+          <td
+            onClick={this.renderFolder}
+            className="text-center"
+          >
+            <img src={Utils.getFolderIconUrl()} alt={gettext('Folder')} width="24" />
+          </td>
+          <td
+            onClick={this.renderFolder}
+          >
+            <a href="#" onClick={this.renderFolder}>{record.obj_name}</a>
+            <br />
+            <span className="item-meta-info">{record.parent_dir}</span>
+            <br />
+            <span className="item-meta-info" title={dayjs(record.deleted_time).format('dddd, MMMM D, YYYY h:mm:ss A')}>{dayjs(record.deleted_time).format('YYYY-MM-DD')}</span>
+          </td>
+          <td>
+            <Dropdown isOpen={this.state.isOpMenuOpen} toggle={this.toggleOpMenu}>
+              <DropdownToggle
+                tag="i"
+                className="sf-dropdown-toggle sf3-font sf3-font-more-vertical ml-0"
+                title={gettext('More operations')}
+                aria-label={gettext('More operations')}
+                data-toggle="dropdown"
+                aria-expanded={this.state.isOpMenuOpen}
+              />
+              <div className={this.state.isOpMenuOpen ? '' : 'd-none'} onClick={this.toggleOpMenu}>
+                <div className="mobile-operation-menu-bg-layer"></div>
+                <div className="mobile-operation-menu">
+                  <DropdownItem className="mobile-menu-item" onClick={this.restoreItem}>
+                    {gettext('Restore')}
+                  </DropdownItem>
+                </div>
+              </div>
+            </Dropdown>
+          </td>
+        </tr>
+      ) : (
+        <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut} onFocus={this.handleMouseOver}>
+          <td className="text-center"><img src={Utils.getFileIconUrl(record.obj_name)} alt={gettext('File')} width="24" /></td>
+          <td>
+            <a href={`${siteRoot}repo/${this.props.repoID}/trash/files/?obj_id=${record.obj_id}&commit_id=${record.commit_id}&base=${encodeURIComponent(record.parent_dir)}&p=${encodeURIComponent('/' + record.obj_name)}`} target="_blank" rel="noreferrer">
+              {record.obj_name}
+            </a>
+            <br />
+            <span className="item-meta-info">{record.parent_dir}</span>
+            <br />
+            <span className="item-meta-info mr-2">{Utils.bytesToSize(record.size)}</span>
+            <span className="item-meta-info">
+              {dayjs(record.deleted_time).format('YYYY-MM-DD')}
+            </span>
+          </td>
+          <td>
+            <Dropdown isOpen={this.state.isOpMenuOpen} toggle={this.toggleOpMenu}>
+              <DropdownToggle
+                tag="i"
+                className="sf-dropdown-toggle sf3-font sf3-font-more-vertical ml-0"
+                title={gettext('More operations')}
+                aria-label={gettext('More operations')}
+                data-toggle="dropdown"
+                aria-expanded={this.state.isOpMenuOpen}
+              />
+              <div className={this.state.isOpMenuOpen ? '' : 'd-none'} onClick={this.toggleOpMenu}>
+                <div className="mobile-operation-menu-bg-layer"></div>
+                <div className="mobile-operation-menu">
+                  <DropdownItem className="mobile-menu-item" onClick={this.restoreItem}>
+                    {gettext('Restore')}
+                  </DropdownItem>
+                </div>
+              </div>
+            </Dropdown>
+          </td>
+        </tr>
+      );
+    }
  }
 }

--- a/frontend/src/components/dialog/trash-dialog/table/file-records/index.js
+++ b/frontend/src/components/dialog/trash-dialog/table/file-records/index.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import FileRecord from './file-record';

-const FileRecords = ({ records, repoID, renderFolder }) => {
+const FileRecords = ({ records, repoID, renderFolder, isDesktop }) => {
  if (!Array.isArray(records) || records.length === 0) return null;
  return records.map((record, index) => {
    return (
@@ -11,6 +11,7 @@ const FileRecords = ({ records, repoID, renderFolder }) => {
        record={record}
        repoID={repoID}
        renderFolder={renderFolder}
+        isDesktop={isDesktop}
      />
    );
  });
--- a/frontend/src/components/dialog/trash-dialog/table/folder-records/folder-record.js
+++ b/frontend/src/components/dialog/trash-dialog/table/folder-records/folder-record.js
@@ -27,33 +27,68 @@ class FolderRecord extends React.Component {
  };

  render() {
-    const { commitID, baseDir, folderPath, record } = this.props;
+    const { commitID, baseDir, folderPath, record, isDesktop } = this.props;

-    return record.type == 'dir' ? (
-      <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
-        <td className="pl-2 pr-2"><img src={Utils.getFolderIconUrl()} alt={gettext('Folder')} width="24" /></td>
-        <td><a href="#" onClick={this.renderFolder}>{record.name}</a></td>
-        <td>{record.parent_dir}</td>
-        <td></td>
-        <td></td>
-        <td></td>
-      </tr>
-    ) : (
-      <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
-        <td className="pl-2 pr-2">
-          <img src={Utils.getFileIconUrl(record.name)} alt={gettext('File')} width="24" />
-        </td>
-        <td>
-          <a href={`${siteRoot}repo/${this.props.repoID}/trash/files/?obj_id=${record.obj_id}&commit_id=${commitID}&base=${encodeURIComponent(baseDir)}&p=${encodeURIComponent(Utils.joinPath(folderPath, record.name))}`} target="_blank" rel="noreferrer">
-            {record.name}
-          </a>
-        </td>
-        <td>{record.parent_dir}</td>
-        <td></td>
-        <td>{Utils.bytesToSize(record.size)}</td>
-        <td></td>
-      </tr>
-    );
+    if (isDesktop) {
+      return record.type == 'dir' ? (
+        <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
+          <td className="pl-2 pr-2"><img src={Utils.getFolderIconUrl()} alt={gettext('Folder')} width="24" /></td>
+          <td><a href="#" onClick={this.renderFolder}>{record.name}</a></td>
+          <td>{record.parent_dir}</td>
+          <td></td>
+          <td></td>
+          <td></td>
+        </tr>
+      ) : (
+        <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
+          <td className="pl-2 pr-2">
+            <img src={Utils.getFileIconUrl(record.name)} alt={gettext('File')} width="24" />
+          </td>
+          <td>
+            <a href={`${siteRoot}repo/${this.props.repoID}/trash/files/?obj_id=${record.obj_id}&commit_id=${commitID}&base=${encodeURIComponent(baseDir)}&p=${encodeURIComponent(Utils.joinPath(folderPath, record.name))}`} target="_blank" rel="noreferrer">
+              {record.name}
+            </a>
+          </td>
+          <td>{record.parent_dir}</td>
+          <td></td>
+          <td>{Utils.bytesToSize(record.size)}</td>
+          <td></td>
+        </tr>
+      );
+    } else { // for mobile
+      return record.type == 'dir' ? (
+        <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
+          <td
+            className="text-center"
+            onClick={this.renderFolder}
+          >
+            <img src={Utils.getFolderIconUrl()} alt={gettext('Folder')} width="24" />
+          </td>
+          <td onClick={this.renderFolder}>
+            <a href="#" onClick={this.renderFolder}>{record.name}</a>
+            <br />
+            <span className="item-meta-info">{record.parent_dir}</span>
+          </td>
+          <td></td>
+        </tr>
+      ) : (
+        <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
+          <td className="text-center">
+            <img src={Utils.getFileIconUrl(record.name)} alt={gettext('File')} width="24" />
+          </td>
+          <td>
+            <a href={`${siteRoot}repo/${this.props.repoID}/trash/files/?obj_id=${record.obj_id}&commit_id=${commitID}&base=${encodeURIComponent(baseDir)}&p=${encodeURIComponent(Utils.joinPath(folderPath, record.name))}`} target="_blank" rel="noreferrer">
+              {record.name}
+            </a>
+            <br />
+            <span className="item-meta-info">{record.parent_dir}</span>
+            <br />
+            <span className="item-meta-info">{Utils.bytesToSize(record.size)}</span>
+          </td>
+          <td></td>
+        </tr>
+      );
+    }
  }
 }

--- a/frontend/src/components/dialog/trash-dialog/table/folder-records/index.js
+++ b/frontend/src/components/dialog/trash-dialog/table/folder-records/index.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import FolderRecord from './folder-record';

-const FolderRecords = ({ records, repoID, commitID, baseDir, folderPath, renderFolder }) => {
+const FolderRecords = ({ records, repoID, commitID, baseDir, folderPath, renderFolder, isDesktop }) => {
  if (!Array.isArray(records) || records.length === 0) return null;
  return records.map((record, index) => {
    return (
@@ -14,6 +14,7 @@ const FolderRecords = ({ records, repoID, commitID, baseDir, folderPath, renderF
        baseDir={baseDir}
        folderPath={folderPath}
        renderFolder={renderFolder}
+        isDesktop={isDesktop}
      />
    );
  });
--- a/frontend/src/components/dialog/trash-dialog/table/index.js
+++ b/frontend/src/components/dialog/trash-dialog/table/index.js
@@ -4,8 +4,9 @@ import { gettext } from '../../../../utils/constants';
 import FolderRecords from './folder-records';
 import FileRecords from './file-records';
 import FixedWidthTable from '../../../common/fixed-width-table';
+import LibsMobileThead from '../../../../components/libs-mobile-thead';

-const Table = ({ repoID, renderFolder, data }) => {
+const Table = ({ repoID, renderFolder, data, isDesktop }) => {
  const headers = useMemo(() => [
    { isFixed: true, width: 40, className: 'pl-2 pr-2' },
    { isFixed: false, width: 0.25, children: gettext('Name') },
@@ -17,15 +18,33 @@ const Table = ({ repoID, renderFolder, data }) => {

  const { items, showFolder, commitID, baseDir, folderPath, folderItems } = data;

+  const tbodyContent = (
+    <>
+      {showFolder ? (
+        <FolderRecords records={folderItems} repoID={repoID} commitID={commitID} baseDir={baseDir} folderPath={folderPath} renderFolder={renderFolder} isDesktop={isDesktop} />
+      ) : (
+        <FileRecords records={items} repoID={repoID} renderFolder={renderFolder} isDesktop={isDesktop} />
+      )}
+    </>
+  );
+
  return (
    <div className="table-container p-0">
-      <FixedWidthTable className="table-hover" headers={headers}>
-        {showFolder ? (
-          <FolderRecords records={folderItems} repoID={repoID} commitID={commitID} baseDir={baseDir} folderPath={folderPath} renderFolder={renderFolder} />
-        ) : (
-          <FileRecords records={items} repoID={repoID} renderFolder={renderFolder} />
-        )}
-      </FixedWidthTable>
+      {isDesktop
+        ? (
+          <FixedWidthTable className="table-hover" headers={headers}>
+            {tbodyContent}
+          </FixedWidthTable>
+        )
+        : (
+          <table className="table-thead-hidden">
+            <LibsMobileThead />
+            <tbody>
+              {tbodyContent}
+            </tbody>
+          </table>
+        )
+      }
    </div>
  );
 };
--- a/frontend/src/repo-folder-trash.js
+++ b/frontend/src/repo-folder-trash.js
@@ -444,4 +444,3 @@ FolderItem.propTypes = {

 const root = createRoot(document.getElementById('wrapper'));
 root.render(<RepoFolderTrash />);
-