haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-24 21:07:17 +00:00
Code Issues Releases Wiki Activity

Icon bg more (#7902)

Browse Source 
* [op icon] changed the default color for all the operation icons; added background for the operation icons in 'views/people' items when hover on them

* ['system admin'] library view: added background for the items & the operation icons when hover on them

* [system admin] user/org/institution: added background for the 'edit' icons in the 'info' page when hover on them

* [system admin] user - Shared Libraries: added background for the items when hover on them

* [system admin] group - libraries: added background for the items & the operation icons when hover on them

* [system admin] group - members: added background for the operation icons when hover on them

* [system admin] org - groups: added background for the items & the operation icons when hover on them

* [system admin] org - libraries: added background for the items & the operation icons when hover on them

* [org admin] Devices - Desktop/Mobile: added background for the items & the operation icons when hover on them

* [org admin] Libraries - All/Trash: added background for the items & the operation icons when hover on them

* [org admin] Users - All/Admin: fixup for the operation icons when hover on them

* [org admin] Users - user - profile: added background for the operation icons when hover on them

* [org admin] Users - user - owned libraries: added background for the items & the operation icons when hover on them

* [org admin] Groups: fixup for the operation icons when hover on them

* [org admin] Groups - Group - Libraries: added background for the items & the operation icons when hover on them

* [org admin] Search Groups: fixup for the operation icons when hover on them

* [org admin] Departments - Department - Members: fixup for the operation icons when hover on them

* [org admin] Links - All Public Links: fixup for the operation icons when hover on them

* [org admin] Logs - File Access: added background for the operation icons when hover on them

* [org admin] Logs - Permission: added background for the operation icons when hover on them

* [org admin] Logs - File Update: added background for the operation icons when hover on them

* fixup
This commit is contained in:
llj
2025-06-09 10:11:02 +08:00
committed by GitHub
parent 9031109f23
commit f0f255a03a
23 changed files with 287 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
frontend/src/components/edit-icon.js
View File

@@ -2,20 +2,20 @@ import React from 'react';
import PropTypes from 'prop-types';
import { gettext } from '../utils/constants';
const EditIcon = (props) => {
function EditIcon({ onClick }) {
return (
<span
<i
role="button"
title={gettext('Edit')}
aria-label={gettext('Edit')}
className="sf3-font sf3-font-rename attr-action-icon"
onClick={props.onClick}>
</span>
className="sf3-font sf3-font-rename op-icon op-icon-bg-light ml-1"
onClick={onClick}>
</i>
);
};
}
EditIcon.propTypes = {
onClick: PropTypes.func.isRequired,
onClick: PropTypes.func.isRequired
};
export default EditIcon;

2
frontend/src/metadata/views/face-recognition/peoples/people/op-menu/index.js
View File

@@ -35,7 +35,7 @@ const OpMenu = ({ onRename, onFreezed, onUnFreezed }) => {
tag="i"
role="button"
tabIndex="0"
className="sf-dropdown-toggle sf3-font-more sf3-font face-recognition-more-operations-toggle"
className="sf-dropdown-toggle op-icon sf3-font-more sf3-font face-recognition-more-operations-toggle"
title={gettext('More operations')}
aria-label={gettext('More operations')}
data-toggle="dropdown"

2
frontend/src/pages/org-admin/departments/member-item.js
View File

@@ -111,7 +111,7 @@ class DepartmentsV2MembersItem extends React.Component {
direction="down"
>
<DropdownToggle
tag='a'
tag='i'
role="button"
className='op-icon sf3-font-more sf3-font'
title={gettext('More operations')}

32
frontend/src/pages/org-admin/devices/devices-by-platform.js
View File

@@ -1,6 +1,7 @@
import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import dayjs from 'dayjs';
import classnames from 'classnames';
import relativeTime from 'dayjs/plugin/relativeTime';
import { orgAdminAPI } from '../../../utils/org-admin-api';
import { orgID, gettext } from '../../../utils/constants';
@@ -88,6 +89,7 @@ class Item extends Component {
constructor(props) {
super(props);
this.state = {
isHighlighted: false,
unlinked: false,
isOpIconShown: false,
isUnlinkDeviceDialogOpen: false
@@ -95,15 +97,20 @@ class Item extends Component {
}
handleMouseOver = () => {
this.setState({ isOpIconShown: true });
this.setState({
isHighlighted: true,
isOpIconShown: true
});
};
handleMouseOut = () => {
this.setState({ isOpIconShown: false });
this.setState({
isHighlighted: false,
isOpIconShown: false
});
};
handleUnlink = (e) => {
e.preventDefault();
handleUnlink = () => {
if (this.props.item.is_desktop_client) {
this.toggleUnlinkDeviceDialog();
} else {
@@ -129,7 +136,7 @@ class Item extends Component {
render() {
const item = this.props.item;
const { unlinked, isUnlinkDeviceDialogOpen, isOpIconShown } = this.state;
const { unlinked, isUnlinkDeviceDialogOpen, isOpIconShown, isHighlighted } = this.state;
if (unlinked) {
return null;
@@ -137,7 +144,13 @@ class Item extends Component {
return (
<Fragment>
<tr onMouseEnter={this.handleMouseOver} onMouseLeave={this.handleMouseOut}>
<tr
className={classnames({
'tr-highlight': isHighlighted
})}
onMouseEnter={this.handleMouseOver}
onMouseLeave={this.handleMouseOut}
>
<td>{item.user_name}</td>
<td>{item.platform}{' / '}{item.client_version}</td>
<td>{item.device_name}</td>
@@ -146,7 +159,12 @@ class Item extends Component {
<span title={dayjs(item.last_accessed).format('dddd, MMMM D, YYYY h:mm:ss A')}>{dayjs(item.last_accessed).fromNow()}</span>
</td>
<td>
<a href="#" className={`sf3-font-delete1 sf3-font action-icon ${isOpIconShown ? '' : 'invisible'}`} title={gettext('Unlink')} onClick={this.handleUnlink}></a>
<i
className={`sf3-font-delete1 sf3-font op-icon ${isOpIconShown ? '' : 'invisible'}`}
title={gettext('Unlink')}
onClick={this.handleUnlink}
>
</i>
</td>
</tr>
{isUnlinkDeviceDialogOpen &&

4
frontend/src/pages/org-admin/libraries/org-all-repos.js
View File

@@ -173,7 +173,6 @@ class RepoItem extends React.Component {
};
onDropdownToggleClick = (e) => {
e.preventDefault();
this.toggleOperationMenu(e);
};
@@ -243,7 +242,8 @@ class RepoItem extends React.Component {
{isOperationMenuShow &&
<Dropdown isOpen={this.state.isItemMenuShow} toggle={this.toggleOperationMenu}>
<DropdownToggle
tag="a"
tag="i"
role="button"
className="op-icon sf3-font-more sf3-font"
title={gettext('More operations')}
aria-label={gettext('More operations')}

39
frontend/src/pages/org-admin/libraries/org-repo-trash.js
View File

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
import { Button } from 'reactstrap';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import classnames from 'classnames';
import { Utils } from '../../../utils/utils';
import { orgAdminAPI } from '../../../utils/org-admin-api';
import { gettext, orgID } from '../../../utils/constants';
@@ -69,15 +70,17 @@ class Content extends Component {
</thead>
<tbody>
{items.map((item, index) => {
return (<Item
key={index}
repo={item}
isItemFreezed={this.state.isItemFreezed}
onFreezedItem={this.onFreezedItem}
onUnfreezedItem={this.onUnfreezedItem}
onDeleteRepo={this.props.onDeleteRepo}
onRestoreRepo={this.props.onRestoreRepo}
/>);
return (
<Item
key={index}
repo={item}
isItemFreezed={this.state.isItemFreezed}
onFreezedItem={this.onFreezedItem}
onUnfreezedItem={this.onUnfreezedItem}
onDeleteRepo={this.props.onDeleteRepo}
onRestoreRepo={this.props.onRestoreRepo}
/>
);
})}
</tbody>
</table>
@@ -117,7 +120,7 @@ class Item extends Component {
constructor(props) {
super(props);
this.state = {
highlight: false,
isHighlighted: false,
isOpIconShown: false,
isDeleteRepoDialogOpen: false,
isRestoreRepoDialogOpen: false
@@ -128,7 +131,7 @@ class Item extends Component {
if (!this.props.isItemFreezed) {
this.setState({
isOpIconShown: true,
highlight: true
isHighlighted: true
});
}
};
@@ -137,14 +140,14 @@ class Item extends Component {
if (!this.props.isItemFreezed) {
this.setState({
isOpIconShown: false,
highlight: false
isHighlighted: false
});
}
};
onUnfreezedItem = () => {
this.setState({
highlight: false,
isHighlighted: false,
isOpIconShow: false
});
this.props.onUnfreezedItem();
@@ -219,14 +222,20 @@ class Item extends Component {
render() {
const { repo } = this.props;
const { isOpIconShown, isDeleteRepoDialogOpen, isRestoreRepoDialogOpen } = this.state;
const { isHighlighted, isOpIconShown, isDeleteRepoDialogOpen, isRestoreRepoDialogOpen } = this.state;
const iconUrl = Utils.getLibIconUrl(repo);
const iconTitle = Utils.getLibIconTitle(repo);
const repoName = '<span class="op-target">' + Utils.HTMLescape(repo.name) + '</span>';
return (
<Fragment>
<tr onMouseEnter={this.handleMouseOver} onMouseLeave={this.handleMouseOut}>
<tr
className={classnames({
'tr-highlight': isHighlighted
})}
onMouseEnter={this.handleMouseOver}
onMouseLeave={this.handleMouseOut}
>
<td><img src={iconUrl} title={iconTitle} alt={iconTitle} width="24" /></td>
<td>{repo.name}</td>
<td>

26
frontend/src/pages/org-admin/org-group-repos.js
View File

@@ -1,5 +1,6 @@
import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { Link } from '@gatsbyjs/reach-router';
import { orgAdminAPI } from '../../utils/org-admin-api';
import { gettext, siteRoot } from '../../utils/constants';
@@ -76,7 +77,7 @@ class Content extends Component {
return (
<Fragment>
<table className="table-hover">
<table>
<thead>
<tr>
<th width="4%">{/* icon*/}</th>
@@ -106,6 +107,7 @@ class Item extends Component {
constructor(props) {
super(props);
this.state = {
isHighlighted: false,
isOpIconShown: false,
deleted: false,
isDeleteRepoDialogOpen: false,
@@ -115,18 +117,19 @@ class Item extends Component {
handleMouseOver = () => {
this.setState({
isHighlighted: true,
isOpIconShown: true
});
};
handleMouseOut = () => {
this.setState({
isHighlighted: false,
isOpIconShown: false
});
};
handleDeleteIconClick = (e) => {
e.preventDefault();
handleDeleteIconClick = () => {
this.toggleDeleteRepoDialog();
};
@@ -154,7 +157,7 @@ class Item extends Component {
};
render() {
const { deleted, isOpIconShown, isDeleteRepoDialogOpen } = this.state;
const { deleted, isOpIconShown, isDeleteRepoDialogOpen, isHighlighted } = this.state;
const repo = this.props.data;
if (deleted) {
@@ -163,7 +166,13 @@ class Item extends Component {
return (
<Fragment>
<tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
<tr
className={classnames({
'tr-highlight': isHighlighted
})}
onMouseOver={this.handleMouseOver}
onMouseOut={this.handleMouseOut}
>
<td>
<img src={Utils.getLibIconUrl(repo)} alt={Utils.getLibIconTitle(repo)} title={Utils.getLibIconTitle(repo)} width="24" />
</td>
@@ -171,7 +180,12 @@ class Item extends Component {
<td>{Utils.bytesToSize(repo.size)}</td>
<td><Link to={`${siteRoot}org/useradmin/info/${encodeURIComponent(repo.shared_by)}/`}>{repo.shared_by_name}</Link></td>
<td>
<a href="#" className={`action-icon sf3-font-delete1 sf3-font${isOpIconShown ? '' : ' invisible'}`} title={gettext('Delete')} onClick={this.handleDeleteIconClick}></a>
<i
className={`op-icon sf3-font-delete1 sf3-font${isOpIconShown ? '' : ' invisible'}`}
title={gettext('Delete')}
onClick={this.handleDeleteIconClick}
>
</i>
</td>
</tr>
{isDeleteRepoDialogOpen && (

5
frontend/src/pages/org-admin/org-groups-search-groups.js
View File

@@ -37,7 +37,6 @@ class GroupItem extends React.Component {
};
onDropdownToggleClick = (e) => {
e.preventDefault();
this.toggleOperationMenu(e);
};
@@ -102,7 +101,7 @@ class GroupItem extends React.Component {
{isOperationMenuShow &&
<Dropdown isOpen={this.state.isItemMenuShow} toggle={this.toggleOperationMenu}>
<DropdownToggle
tag="a"
tag="i"
className="op-icon sf3-font-more sf3-font"
title={gettext('More operations')}
aria-label={gettext('More operations')}
@@ -156,7 +155,7 @@ class OrgGroupsSearchGroupsResult extends React.Component {
<th width="30%">{gettext('Name')}</th>
<th width="35%">{gettext('Creator')}</th>
<th width="23%">{gettext('Created At')}</th>
<th width="12%" className="text-center">{gettext('Operations')}</th>
<th width="12%"></th>
</tr>
</thead>
<tbody>

5
frontend/src/pages/org-admin/org-groups.js
View File

@@ -179,7 +179,7 @@ class OrgGroups extends Component {
<th width="30%">{gettext('Name')}</th>
<th width="35%">{gettext('Creator')}</th>
<th width="23%">{gettext('Created At')}</th>
<th width="12%" className="text-center">{gettext('Operations')}</th>
<th width="12%"></th>
</tr>
</thead>
<tbody>
@@ -251,7 +251,6 @@ class GroupItem extends React.Component {
};
onDropdownToggleClick = (e) => {
e.preventDefault();
this.toggleOperationMenu(e);
};
@@ -319,7 +318,7 @@ class GroupItem extends React.Component {
{isOperationMenuShow &&
<Dropdown isOpen={this.state.isItemMenuShow} toggle={this.toggleOperationMenu}>
<DropdownToggle
tag="a"
tag="i"
className="op-icon sf3-font-more sf3-font"
title={gettext('More operations')}
aria-label={gettext('More operations')}

3
frontend/src/pages/org-admin/org-links.js
View File

@@ -173,7 +173,6 @@ class RepoItem extends React.Component {
};
onDropdownToggleClick = (e) => {
e.preventDefault();
this.toggleOperationMenu(e);
};
@@ -207,7 +206,7 @@ class RepoItem extends React.Component {
{this.state.showMenu &&
<Dropdown isOpen={this.state.isItemMenuShow} toggle={this.toggleOperationMenu}>
<DropdownToggle
tag="a"
tag="i"
className="op-icon sf3-font-more sf3-font"
title={gettext('More operations')}
aria-label={gettext('More operations')}

4
frontend/src/pages/org-admin/org-logs-file-audit.js
View File

@@ -184,7 +184,7 @@ class FileAuditItem extends React.Component {
<a href={siteRoot + 'org/useradmin/info/' + fileEvent.user_email + '/'}>{fileEvent.user_name}</a>{' '}
<Dropdown size='sm' isOpen={this.state.userDropdownOpen} toggle={this.toggleUserDropdown}
className={this.state.highlight ? '' : 'vh'} tag="span">
<DropdownToggle tag="i" className="sf-dropdown-toggle sf3-font-more sf3-font"></DropdownToggle>
<DropdownToggle tag="i" className="op-icon sf-dropdown-toggle sf3-font-more sf3-font"></DropdownToggle>
<DropdownMenu>
<DropdownItem onClick={this.props.filterUser.bind(this, fileEvent.user_email)}>
{gettext('Only Show')}{' '}
@@ -225,7 +225,7 @@ class FileAuditItem extends React.Component {
{ fileEvent.repo_name &&
<Dropdown size='sm' isOpen={this.state.repoDropdownOpen} toggle={this.toggleRepoDropdown}
className={this.state.highlight ? '' : 'vh'} >
<DropdownToggle tag="i" className="sf-dropdown-toggle sf3-font-more sf3-font"></DropdownToggle>
<DropdownToggle tag="i" className="op-icon sf-dropdown-toggle sf3-font-more sf3-font"></DropdownToggle>
<DropdownMenu>
<DropdownItem size='sm' onClick={this.props.filterRepo.bind(this, fileEvent.repo_name)}>
{gettext('Only Show')}{' '}<span className="font-weight-bold">{fileEvent.repo_name}</span>

4
frontend/src/pages/org-admin/org-logs-file-update.js
View File

@@ -210,7 +210,7 @@ class FileUpdateItem extends React.Component {
<a href={siteRoot + 'org/useradmin/info/' + fileEvent.user_email + '/'}>{fileEvent.user_name}</a>{' '}
<Dropdown size='sm' isOpen={this.state.userDropdownOpen} toggle={this.toggleUserDropdown}
className={this.state.highlight ? '' : 'vh'} tag="span">
<DropdownToggle tag="i" className="sf-dropdown-toggle sf3-font-more sf3-font"></DropdownToggle>
<DropdownToggle tag="i" className="op-icon sf-dropdown-toggle sf3-font-more sf3-font"></DropdownToggle>
<DropdownMenu>
<DropdownItem onClick={this.props.filterUser.bind(this, fileEvent.user_email)}>
{gettext('Only Show')}{' '}<span className="font-weight-bold">{fileEvent.user_name}</span>
@@ -236,7 +236,7 @@ class FileUpdateItem extends React.Component {
{ fileEvent.repo_name &&
<Dropdown size='sm' isOpen={this.state.repoDropdownOpen} toggle={this.toggleRepoDropdown}
className={this.state.highlight ? '' : 'vh'} >
<DropdownToggle tag="i" className="sf-dropdown-toggle sf3-font-more sf3-font"></DropdownToggle>
<DropdownToggle tag="i" className="op-icon sf-dropdown-toggle sf3-font-more sf3-font"></DropdownToggle>
<DropdownMenu>
<DropdownItem size='sm' onClick={this.props.filterRepo.bind(this, fileEvent.repo_name)}>
{gettext('Only Show')}{' '}

2
frontend/src/pages/org-admin/org-logs-perm-audit.js
View File

@@ -157,7 +157,7 @@ class PermAuditItem extends React.Component {
<a href={siteRoot + 'org/useradmin/info/' + permEvent.from_user_email + '/'}>{permEvent.from_user_name}</a>{' '}
<Dropdown size='sm' isOpen={this.state.userDropdownOpen} toggle={this.toggleUserDropdown}
className={this.state.highlight ? '' : 'vh'} tag="span">
<DropdownToggle tag="i" className="sf-dropdown-toggle sf3-font-more sf3-font"></DropdownToggle>
<DropdownToggle tag="i" className="op-icon sf-dropdown-toggle sf3-font-more sf3-font"></DropdownToggle>
<DropdownMenu>
<DropdownItem onClick={this.props.filterUser.bind(this, permEvent.from_user_email)}>
{gettext('Only Show')}{' '}

3
frontend/src/pages/org-admin/org-user-item.js
View File

@@ -85,7 +85,6 @@ class UserItem extends React.Component {
};
onDropdownToggleClick = (e) => {
e.preventDefault();
this.toggleOperationMenu(e);
};
@@ -176,7 +175,7 @@ class UserItem extends React.Component {
{isOperationMenuShow && (
<Dropdown isOpen={this.state.isItemMenuShow} toggle={this.toggleOperationMenu}>
<DropdownToggle
tag="a"
tag="i"
className="op-icon sf3-font-more sf3-font"
title={gettext('More operations')}
aria-label={gettext('More operations')}

7
frontend/src/pages/org-admin/org-user-profile.js
View File

@@ -8,6 +8,7 @@ import OrgAdminUserNav from '../../components/org-admin-user-nav';
import SetOrgUserName from '../../components/dialog/set-org-user-name';
import SetOrgUserContactEmail from '../../components/dialog/set-org-user-contact-email';
import SetOrgUserQuota from '../../components/dialog/set-org-user-quota';
import EditIcon from '../../components/edit-icon';
import MainPanelTopbar from './main-panel-topbar';
import '../../css/org-admin-user.css';
@@ -136,13 +137,13 @@ class Content extends Component {
<dt>{gettext('Name')}</dt>
<dd>
{name || '--'}
<span title={gettext('Edit')} className="attr-action-icon sf3-font sf3-font-rename" onClick={this.toggleSetNameDialog}></span>
<EditIcon onClick={this.toggleSetNameDialog} />
</dd>
<dt>{gettext('Contact Email')}</dt>
<dd>
{contact_email || '--'}
<span title={gettext('Edit')} className="attr-action-icon sf3-font sf3-font-rename" onClick={this.toggleSetContactEmailDialog}></span>
<EditIcon onClick={this.toggleSetContactEmailDialog} />
</dd>
<dt>{gettext('Organization')}</dt>
@@ -151,7 +152,7 @@ class Content extends Component {
<dt>{gettext('Space Used / Quota')}</dt>
<dd>
{`${Utils.bytesToSize(quota_usage)}${quota_total > 0 ? ' / ' + Utils.bytesToSize(quota_total) : ''}`}
<span title={gettext('Edit')} className="attr-action-icon sf3-font sf3-font-rename" onClick={this.toggleSetQuotaDialog}></span>
<EditIcon onClick={this.toggleSetQuotaDialog} />
</dd>
</dl>
{isSetNameDialogOpen &&

25
frontend/src/pages/org-admin/org-user-repos.js
View File

@@ -1,6 +1,7 @@
import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import dayjs from 'dayjs';
import classnames from 'classnames';
import { orgAdminAPI } from '../../utils/org-admin-api';
import { gettext } from '../../utils/constants';
import { Utils } from '../../utils/utils';
@@ -102,6 +103,7 @@ class Item extends Component {
constructor(props) {
super(props);
this.state = {
isHighlighted: false,
isOpIconShown: false,
deleted: false,
isDeleteRepoDialogOpen: false,
@@ -111,18 +113,19 @@ class Item extends Component {
handleMouseOver = () => {
this.setState({
isHighlighted: true,
isOpIconShown: true
});
};
handleMouseOut = () => {
this.setState({
isHighlighted: false,
isOpIconShown: false
});
};
handleDeleteIconClick = (e) => {
e.preventDefault();
handleDeleteIconClick = () => {
this.toggleDeleteRepoDialog();
};
@@ -150,7 +153,7 @@ class Item extends Component {
};
render() {
const { deleted, isOpIconShown, isDeleteRepoDialogOpen } = this.state;
const { deleted, isOpIconShown, isDeleteRepoDialogOpen, isHighlighted } = this.state;
const repo = this.props.data;
if (deleted) {
@@ -159,7 +162,13 @@ class Item extends Component {
return (
<Fragment>
<tr onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
<tr
className={classnames({
'tr-highlight': isHighlighted
})}
onMouseOver={this.handleMouseOver}
onMouseOut={this.handleMouseOut}
>
<td>
<img src={Utils.getLibIconUrl(repo)} alt={Utils.getLibIconTitle(repo)} title={Utils.getLibIconTitle(repo)} width="24" />
</td>
@@ -167,7 +176,13 @@ class Item extends Component {
<td>{Utils.bytesToSize(repo.size)}</td>
<td title={dayjs(repo.last_modified).format('dddd, MMMM D, YYYY h:mm:ss A')}>{dayjs(repo.last_modified).format('YYYY-MM-DD')}</td>
<td>
<a href="#" className={`action-icon sf3-font-delete1 sf3-font${isOpIconShown ? '' : ' invisible'}`} title={gettext('Delete')} onClick={this.handleDeleteIconClick}></a>
<i
role="button"
className={`op-icon sf3-font-delete1 sf3-font${isOpIconShown ? '' : ' invisible'}`}
title={gettext('Delete')}
onClick={this.handleDeleteIconClick}
>
</i>
</td>
</tr>
{isDeleteRepoDialogOpen && (

26
frontend/src/pages/sys-admin/groups/group-members.js
View File

@@ -60,14 +60,16 @@ class Content extends Component {
</thead>
<tbody>
{items.map((item, index) => {
return (<Item
key={index}
item={item}
isItemFreezed={this.state.isItemFreezed}
toggleItemFreezed={this.toggleItemFreezed}
removeMember={this.props.removeMember}
updateMemberRole={this.props.updateMemberRole}
/>);
return (
<Item
key={index}
item={item}
isItemFreezed={this.state.isItemFreezed}
toggleItemFreezed={this.toggleItemFreezed}
removeMember={this.props.removeMember}
updateMemberRole={this.props.updateMemberRole}
/>
);
})}
</tbody>
</table>
@@ -174,7 +176,13 @@ class Item extends Component {
</td>
<td>
{item.role != 'Owner' &&
<a href="#" className={`action-icon sf2-icon-x3 ${highlighted ? '' : 'invisible'}`} title={gettext('Remove')} onClick={this.toggleDeleteDialog}></a>
<i
role="button"
className={`op-icon sf2-icon-x3 ${highlighted ? '' : 'invisible'}`}
title={gettext('Remove')}
onClick={this.toggleDeleteDialog}
>
</i>
}
</td>
</tr>

49
frontend/src/pages/sys-admin/groups/group-repos.js
View File

@@ -1,5 +1,6 @@
import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { Utils } from '../../../utils/utils';
import { systemAdminAPI } from '../../../utils/system-admin-api';
import { siteRoot, gettext, isPro } from '../../../utils/constants';
@@ -32,7 +33,7 @@ class Content extends Component {
);
const table = (
<Fragment>
<table className="table-hover">
<table>
<thead>
<tr>
<th width="5%">{/* icon */}</th>
@@ -44,11 +45,13 @@ class Content extends Component {
</thead>
<tbody>
{items.map((item, index) => {
return (<Item
key={index}
item={item}
unshareRepo={this.props.unshareRepo}
/>);
return (
<Item
key={index}
item={item}
unshareRepo={this.props.unshareRepo}
/>
);
})}
</tbody>
</table>
@@ -75,23 +78,27 @@ class Item extends Component {
constructor(props) {
super(props);
this.state = {
isHighlighted: false,
isOpIconShown: false,
isUnshareRepoDialogOpen: false
};
}
handleMouseEnter = () => {
this.setState({ isOpIconShown: true });
this.setState({
isHighlighted: true,
isOpIconShown: true
});
};
handleMouseLeave = () => {
this.setState({ isOpIconShown: false });
this.setState({
isHighlighted: false,
isOpIconShown: false
});
};
toggleUnshareRepoDialog = (e) => {
if (e) {
e.preventDefault();
}
toggleUnshareRepoDialog = () => {
this.setState({ isUnshareRepoDialogOpen: !this.state.isUnshareRepoDialogOpen });
};
@@ -117,7 +124,7 @@ class Item extends Component {
};
render() {
let { isOpIconShown, isUnshareRepoDialogOpen } = this.state;
let { isOpIconShown, isUnshareRepoDialogOpen, isHighlighted } = this.state;
let { item } = this.props;
let iconUrl = Utils.getLibIconUrl(item);
@@ -128,7 +135,13 @@ class Item extends Component {
return (
<Fragment>
<tr onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
<tr
className={classnames({
'tr-highlight': isHighlighted
})}
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
>
<td><img src={iconUrl} title={iconTitle} alt={iconTitle} width="24" /></td>
<td>{this.renderRepoName()}</td>
<td>{Utils.bytesToSize(item.size)}</td>
@@ -136,7 +149,13 @@ class Item extends Component {
<UserLink email={item.shared_by} name={item.shared_by_name} />
</td>
<td>
<a href="#" className={`action-icon sf2-icon-x3 ${isOpIconShown ? '' : 'invisible'}`} title={gettext('Unshare')} onClick={this.toggleUnshareRepoDialog}></a>
<i
role="button"
className={`op-icon sf2-icon-x3 ${isOpIconShown ? '' : 'invisible'}`}
title={gettext('Unshare')}
onClick={this.toggleUnshareRepoDialog}
>
</i>
</td>
</tr>
{isUnshareRepoDialogOpen &&

46
frontend/src/pages/sys-admin/orgs/org-groups.js
View File

@@ -1,6 +1,7 @@
import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import dayjs from 'dayjs';
import classnames from 'classnames';
import { Utils } from '../../../utils/utils';
import { systemAdminAPI } from '../../../utils/system-admin-api';
import { siteRoot, gettext } from '../../../utils/constants';
@@ -42,11 +43,13 @@ class Content extends Component {
</thead>
<tbody>
{items.map((item, index) => {
return (<Item
key={index}
item={item}
deleteGroup={this.props.deleteGroup}
/>);
return (
<Item
key={index}
item={item}
deleteGroup={this.props.deleteGroup}
/>
);
})}
</tbody>
</table>
@@ -73,23 +76,27 @@ class Item extends Component {
constructor(props) {
super(props);
this.state = {
isHighlighted: false,
isOpIconShown: false,
isDeleteDialogOpen: false
};
}
handleMouseEnter = () => {
this.setState({ isOpIconShown: true });
this.setState({
isHighlighted: true,
isOpIconShown: true
});
};
handleMouseLeave = () => {
this.setState({ isOpIconShown: false });
this.setState({
isHighlighted: false,
isOpIconShown: false
});
};
toggleDeleteDialog = (e) => {
if (e) {
e.preventDefault();
}
toggleDeleteDialog = () => {
this.setState({ isDeleteDialogOpen: !this.state.isDeleteDialogOpen });
};
@@ -100,7 +107,7 @@ class Item extends Component {
render() {
const { item } = this.props;
const { isOpIconShown, isDeleteDialogOpen } = this.state;
const { isOpIconShown, isDeleteDialogOpen, isHighlighted } = this.state;
const itemName = '<span class="op-target">' + Utils.HTMLescape(item.group_name) + '</span>';
const deleteDialogMsg = gettext('Are you sure you want to delete {placeholder} ?').replace('{placeholder}', itemName);
@@ -109,12 +116,23 @@ class Item extends Component {
return (
<Fragment>
<tr onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
<tr
className={classnames({
'tr-highlight': isHighlighted
})}
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
>
<td><a href={groupUrl}>{item.group_name}</a></td>
<td><UserLink email={item.creator_email} name={item.creator_name} /></td>
<td>{dayjs(item.created_at).format('YYYY-MM-DD HH:mm:ss')}</td>
<td>
<a href="#" className={`action-icon sf3-font-delete1 sf3-font ${isOpIconShown ? '' : 'invisible'}`} title={gettext('Delete')} onClick={this.toggleDeleteDialog}></a>
<i
className={`op-icon sf3-font-delete1 sf3-font ${isOpIconShown ? '' : 'invisible'}`}
title={gettext('Delete')}
onClick={this.toggleDeleteDialog}
>
</i>
</td>
</tr>
{isDeleteDialogOpen &&

43
frontend/src/pages/sys-admin/orgs/org-repos.js
View File

@@ -1,5 +1,6 @@
import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { Utils } from '../../../utils/utils';
import { systemAdminAPI } from '../../../utils/system-admin-api';
import { gettext } from '../../../utils/constants';
@@ -25,7 +26,7 @@ class Content extends Component {
);
const table = (
<Fragment>
<table className="table-hover">
<table>
<thead>
<tr>
<th width="5%"></th>
@@ -37,11 +38,13 @@ class Content extends Component {
</thead>
<tbody>
{items.map((item, index) => {
return (<Item
key={index}
item={item}
deleteRepo={this.props.deleteRepo}
/>);
return (
<Item
key={index}
item={item}
deleteRepo={this.props.deleteRepo}
/>
);
})}
</tbody>
</table>
@@ -64,17 +67,24 @@ class Item extends Component {
constructor(props) {
super(props);
this.state = {
isHighlighted: false,
isOpIconShown: false,
isDeleteDialogOpen: false
};
}
handleMouseEnter = () => {
this.setState({ isOpIconShown: true });
this.setState({
isHighlighted: true,
isOpIconShown: true
});
};
handleMouseLeave = () => {
this.setState({ isOpIconShown: false });
this.setState({
isHighlighted: false,
isOpIconShown: false
});
};
toggleDeleteDialog = (e) => {
@@ -90,7 +100,7 @@ class Item extends Component {
render() {
const { item } = this.props;
const { isOpIconShown, isDeleteDialogOpen } = this.state;
const { isOpIconShown, isDeleteDialogOpen, isHighlighted } = this.state;
const iconUrl = Utils.getLibIconUrl(item);
const iconTitle = Utils.getLibIconTitle(item);
@@ -100,7 +110,13 @@ class Item extends Component {
return (
<Fragment>
<tr onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}>
<tr
className={classnames({
'tr-highlight': isHighlighted
})}
onMouseEnter={this.handleMouseEnter}
onMouseLeave={this.handleMouseLeave}
>
<td><img src={iconUrl} title={iconTitle} alt={iconTitle} width="24" /></td>
<td>{item.repo_name}</td>
<td>{item.repo_id}</td>
@@ -113,7 +129,12 @@ class Item extends Component {
}
</td>
<td>
<a href="#" className={`action-icon sf3-font-delete1 sf3-font ${isOpIconShown ? '' : 'invisible'}`} title={gettext('Delete')} onClick={this.toggleDeleteDialog}></a>
<i
className={`op-icon sf3-font-delete1 sf3-font ${isOpIconShown ? '' : 'invisible'}`}
title={gettext('Delete')}
onClick={this.toggleDeleteDialog}
>
</i>
</td>
</tr>
{isDeleteDialogOpen &&

34
frontend/src/pages/sys-admin/repos/dir-content.js
View File

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
import { Link } from '@gatsbyjs/reach-router';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import classnames from 'classnames';
import { gettext } from '../../../utils/constants';
import { Utils } from '../../../utils/utils';
import Loading from '../../../components/loading';
@@ -14,18 +15,21 @@ class DirentItem extends React.Component {
constructor(props) {
super(props);
this.state = {
isHighlighted: false,
isOpIconShown: false
};
}
handleMouseOver = () => {
this.setState({
isHighlighted: true,
isOpIconShown: true
});
};
handleMouseOut = () => {
this.setState({
isHighlighted: false,
isOpIconShown: false
});
};
@@ -34,24 +38,28 @@ class DirentItem extends React.Component {
this.props.openFolder(this.props.dirent);
};
deleteDirent = (e) => {
e.preventDefault();
deleteDirent = () => {
this.props.deleteDirent(this.props.dirent);
};
downloadDirent = (e) => {
e.preventDefault();
downloadDirent = () => {
this.props.downloadDirent(this.props.dirent);
};
render() {
let { isOpIconShown } = this.state;
let { isOpIconShown, isHighlighted } = this.state;
let { dirent, fromSystemRepo } = this.props;
let iconUrl = Utils.getDirentIcon(dirent);
return (
<Fragment>
<tr onMouseEnter={this.handleMouseOver} onMouseLeave={this.handleMouseOut}>
<tr
className={classnames({
'tr-highlight': isHighlighted
})}
onMouseEnter={this.handleMouseOver}
onMouseLeave={this.handleMouseOut}
>
<td className="text-center"><img src={iconUrl} width="24" alt='' /></td>
<td>
{dirent.is_file ?
@@ -61,10 +69,20 @@ class DirentItem extends React.Component {
</td>
<td>
{isOpIconShown && fromSystemRepo &&
<a href="#" className="op-icon sf3-font-delete1 sf3-font" title={gettext('Delete')} onClick={this.deleteDirent}></a>
<i
className="op-icon sf3-font-delete1 sf3-font"
title={gettext('Delete')}
onClick={this.deleteDirent}
>
</i>
}
{isOpIconShown && dirent.is_file &&
<a href="#" className="op-icon sf3-font sf3-font-download1" title={gettext('Download')} onClick={this.downloadDirent}></a>
<i
className="op-icon sf3-font sf3-font-download1"
title={gettext('Download')}
onClick={this.downloadDirent}
>
</i>
}
</td>
<td>{dirent.size}</td>

31
frontend/src/pages/sys-admin/users/user-shared-repos.js
View File

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
import { Link } from '@gatsbyjs/reach-router';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import classnames from 'classnames';
import { Utils } from '../../../utils/utils';
import { systemAdminAPI } from '../../../utils/system-admin-api';
import { isPro, siteRoot, gettext } from '../../../utils/constants';
@@ -24,7 +25,7 @@ class Content extends Component {
return <p className="error text-center mt-4">{errorMsg}</p>;
} else {
const table = (
<table className="table-hover">
<table>
<thead>
<tr>
<th width="5%"></th>
@@ -57,6 +58,25 @@ Content.propTypes = {
class Item extends Component {
constructor(props) {
super(props);
this.state = {
isHighlighted: false
};
}
handleMouseOver = () => {
this.setState({
isHighlighted: true
});
};
handleMouseOut = () => {
this.setState({
isHighlighted: false
});
};
renderRepoName = () => {
const { item } = this.props;
const repo = item;
@@ -89,8 +109,15 @@ class Item extends Component {
const { item } = this.props;
const iconUrl = Utils.getLibIconUrl(item);
const iconTitle = Utils.getLibIconTitle(item);
const { isHighlighted } = this.state;
return (
<tr>
<tr
className={classnames({
'tr-highlight': isHighlighted
})}
onMouseOver={this.handleMouseOver}
onMouseOut={this.handleMouseOut}
>
<td><img src={iconUrl} title={iconTitle} alt={iconTitle} width="24" /></td>
<td>{this.renderRepoName()}</td>
<td>{this.getOwnerLink()}</td>

8
media/css/seahub_react.css
View File

@@ -567,7 +567,7 @@ a, a:hover {
.op-icon {
font-size: 1rem;
line-height: 1;
color: #999;
color: #666;
cursor: pointer;
display: inline-flex;
width: 24px;
@@ -580,7 +580,7 @@ a, a:hover {
.op-icon:focus,
.op-icon:hover {
color: #666;
color: #666; /* to overwrite the styles for `a:hover` */
text-decoration: none;
background: #e5e5e5;
}
@@ -590,10 +590,6 @@ a, a:hover {
background: #efefef; /* for .op-icon shown in white containers */
}
.tr-highlight .op-icon {
color: #666;
}
.action-icon,
.attr-action-icon {
margin-left: 0.5rem;