Icon bg (#7871)

* ['Files', 'my libs', 'shared with me', 'shared with all', 'group', 'department' pages] added background to the library items' operation icons when hovering on them * ['share' dialog] 'Share Link'(link list, link-authenticated-emails, link-authenticated-users): added background to the items' operation icons when hovering on them * ['share' dialog] 'Share to user': added background for the sharing items and the operation icons when hover on them * [select editor] improved it; added background to the 'edit' icon when hover on it * ['share' dialog] 'Share to group': added background for the sharing items and the operation icons when hover on them; fixed it for mobile * ['share' dialog] 'Custom sharing permissions': added background for the permission items and the operation icons when hover on them * ['share' dialog] 'Invite Guest': added background for the items and the operation icons when hover on them * ['share' dialog] 'Share to other server': added background for the items and the operation icons when hover on them * [repo 'Folder Permission' dialog] 'User Permission': added background for the items and the operation icons when hover on them * [repo 'Folder Permission' dialog] 'Group Permission': added background for the items and the operation icons when hover on them * [repo 'Share Admin' dialog] 'Share Link': added background for the sharing items and the operation icons when hover on them; improved it * [repo 'Share Admin' dialog] 'Upload Link': added background for the sharing items and the operation icons when hover on them; improved it * [repo 'Share Admin' dialog] 'User Shares': added background for the sharing items and the operation icons when hover on them; improved the permission editor * [repo 'Share Admin' dialog] 'Group Shares': added background for the sharing items and the operation icons when hover on them; improved the permission editor * [repo 'API Token' dialog] added background for the items and the operation icons when hover on them * [group/department 'Manage group members' dialog] added background for the operation icons when hover on them * ['select members from departments' dialog] added background for the operation icons when hover on them * [library list pages] removed the background when hover on the 'star/unstar' icons of the library items * ['back' icons] added background for the 'go back' icons when hover on them * ['my deleted repos' dialog] added background for the operation icons when hover on them * ['Favorites' page] added background for the items and the operation icons when hover on them * ['Wikis' page] added background for the operation icons when hover on them * ['Invite Guest' page] added background for the items and the operation icons when hover on them * ['Share Admin'] 'Libraries' page: added background for the items and the operation icons when hover on them * ['Share Admin'] 'Folders' page: added background for the items and the operation icons when hover on them * ['Share Admin'] 'Share Links' page: added background for the items and the operation icons when hover on them * ['Share Admin'] 'Upload Links' page: added background for the operation icons when hover on them * [repo 'Modification History' dialog] added background for the operation icons when hover on them * [repo 'Snapshot' page] added background for the items and the operation icons when hover on them * [folder 'share link' page] added background for the items and the operation icons when hover on them * [file 'History Versions' page] changed the 'more' icon and added background for the the operation icons when hover on them * [personal 'settings' page] 'Linked Devices': added background for the items and the operation icons when hover on them * ['library view' page] 'move/copy' dialog: added background for the 'clear search keyword' icon when hover on it * ['library view' page] added background for the operation icons when hover on them * ['system admin'] 'Devices' pages: added background for the items and the operation icons when hover on them * [system admin] repos/users/groups/inst/... pages: added background for the operation icons when hover on them * [system admin] 'Libraries - Trash' page: added background for the items and the operation icons when hover on them * [system admin] 'Users' pages: added background for the operation icons when hover on them * [system admin] 'Departments' pages: added background for the operation icons when hover on them * [system admin] 'Organizations' & 'Search Organizations' pages: added background for the operation icons when hover on them * [system admin] 'Institutions' pages: added background for items & the operation icons when hover on them * [system admin] 'terms and conditions' pages: added background for items & the operation icons when hover on them * [system admin] 'Links - Share Links' pages: added background for items & the operation icons when hover on them * [system admin] 'Links - Upload Links' pages: added background for items & the operation icons when hover on them * org page use new op-icon * use common edit icon --------- Co-authored-by: Michael An <1822852997@qq.com>
2025-09-24 04:48:03 +00:00 · 2025-05-31 12:01:08 +08:00
parent 7897420e2b
commit e9f8a52abe
69 changed files with 910 additions and 529 deletions
--- a/frontend/src/repo-snapshot.js
+++ b/frontend/src/repo-snapshot.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
 import { navigate } from '@gatsbyjs/reach-router';
 import { Utils } from './utils/utils';
 import { gettext, siteRoot, mediaUrl, logoPath, logoWidth, logoHeight, siteTitle } from './utils/constants';
@@ -249,21 +250,26 @@ class FolderItem extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
+      isHighlighted: false,
      isIconShown: false
    };
  }

  handleMouseOver = () => {
-    this.setState({ isIconShown: true });
+    this.setState({
+      isHighlighted: true,
+      isIconShown: true
+    });
  };

  handleMouseOut = () => {
-    this.setState({ isIconShown: false });
+    this.setState({
+      isHighlighted: false,
+      isIconShown: false
+    });
  };

-  restoreItem = (e) => {
-    e.preventDefault();
-
+  restoreItem = () => {
    const item = this.props.item;
    const path = Utils.joinPath(this.props.folderPath, item.name);
    const request = item.type == 'dir' ?
@@ -287,26 +293,56 @@ class FolderItem extends React.Component {

  render() {
    const item = this.props.item;
-    const { isIconShown } = this.state;
+    const { isIconShown, isHighlighted } = this.state;
    const { folderPath } = this.props;

    return item.type == 'dir' ? (
-      <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut} onFocus={this.handleMouseOver}>
+      <tr
+        className={classnames({
+          'tr-highlight': isHighlighted
+        })}
+        onMouseOver={this.handleMouseOver}
+        onMouseOut={this.handleMouseOut}
+        onFocus={this.handleMouseOver}
+      >
        <td className="text-center"><img src={Utils.getFolderIconUrl()} alt={gettext('Folder')} width="24" /></td>
        <td><a href="#" onClick={this.renderFolder}>{item.name}</a></td>
        <td></td>
        <td>
-          <a href="#" className={`action-icon sf2-icon-reply ${isIconShown ? '' : 'invisible'}`} onClick={this.restoreItem} title={gettext('Restore')} aria-label={gettext('Restore')} role="button"></a>
+          <i
+            role="button"
+            className={`op-icon sf2-icon-reply ${isIconShown ? '' : 'invisible'}`}
+            onClick={this.restoreItem}
+            title={gettext('Restore')}
+            aria-label={gettext('Restore')}
+          >
+          </i>
        </td>
      </tr>
    ) : (
-      <tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut} onFocus={this.handleMouseOver}>
+      <tr
+        className={classnames({
+          'tr-highlight': isHighlighted
+        })}
+        onMouseOver={this.handleMouseOver}
+        onMouseOut={this.handleMouseOut}
+        onFocus={this.handleMouseOver}
+      >
        <td className="text-center"><img src={Utils.getFileIconUrl(item.name)} alt={gettext('File')} width="24" /></td>
        <td><a href={`${siteRoot}repo/${repoID}/snapshot/files/?obj_id=${item.obj_id}&commit_id=${commitID}&p=${encodeURIComponent(Utils.joinPath(folderPath, item.name))}`} target="_blank" rel="noreferrer">{item.name}</a></td>
        <td>{Utils.bytesToSize(item.size)}</td>
        <td>
-          <a href="#" className={`action-icon sf2-icon-reply ${isIconShown ? '' : 'invisible'}`} onClick={this.restoreItem} title={gettext('Restore')} aria-label={gettext('Restore')} role="button"></a>
-          <a href={`${siteRoot}repo/${repoID}/${item.obj_id}/download/?file_name=${encodeURIComponent(item.name)}&p=${encodeURIComponent(Utils.joinPath(folderPath, item.name))}`} className={`action-icon sf2-icon-download ${isIconShown ? '' : 'invisible'}`} title={gettext('Download')}></a>
+          <div className="d-flex align-items-center">
+            <i
+              className={`op-icon sf2-icon-reply ${isIconShown ? '' : 'invisible'}`}
+              onClick={this.restoreItem}
+              title={gettext('Restore')}
+              aria-label={gettext('Restore')}
+              role="button"
+            >
+            </i>
+            <a href={`${siteRoot}repo/${repoID}/${item.obj_id}/download/?file_name=${encodeURIComponent(item.name)}&p=${encodeURIComponent(Utils.joinPath(folderPath, item.name))}`} className={`op-icon sf3-font sf3-font-download1 ${isIconShown ? '' : 'invisible'}`} title={gettext('Download')}></a>
+          </div>
        </td>
      </tr>
    );