haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-20 10:58:33 +00:00
Code Issues Releases Wiki Activity

[a11y] share dialog: added 'keyboard access' support for 'custom sharing perm'

Browse Source
This commit is contained in:
llj
2021-10-12 11:41:26 +08:00
parent cabfa164bf
commit 457f799c43
3 changed files with 31 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
frontend/src/components/dialog/custom-permission/custom-permission-item.js
View File

@@ -1,5 +1,7 @@
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { gettext } from '../../../utils/constants';
import OpIcon from '../../op-icon';
const propTypes = {
permission: PropTypes.object.isRequired,
@@ -19,41 +21,45 @@ class CustomPermissionItem extends React.Component {
onMouseEnter = () => {
this.setState({isShowOperations: true});
}
onMouseOver = () => {
this.setState({isShowOperations: true});
}
onMouseLeave = () => {
this.setState({isShowOperations: false});
}
onEditCustomPermission = () => {
const { permission } = this.props;
this.props.onEditCustomPermission(permission)
this.props.onEditCustomPermission(permission);
}
onDeleteCustomPermission = () => {
const { permission } = this.props;
this.props.onDeleteCustomPermission(permission)
this.props.onDeleteCustomPermission(permission);
}
render() {
const { permission } = this.props;
const { id, name, description } = permission;
return (
<tr key={id} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onMouseOver={this.onMouseOver}>
<tr key={id} onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onMouseOver={this.onMouseOver} tabIndex="0" onFocus={this.onMouseEnter}>
<td width='22%' className="text-truncate" title={name}>{name}</td>
<td width='56%' className="text-truncate">{description}</td>
<td width='22%'>
{this.state.isShowOperations && (
<Fragment>
<span className="permission-operation-btn edit" onClick={this.onEditCustomPermission}>
<i className="fa fa-pencil-alt attr-action-icon"></i>
</span>
<span className="permission-operation-btn delete" onClick={this.onDeleteCustomPermission}>
<i className="fa fa-trash attr-action-icon"></i>
</span>
<OpIcon
className="fa fa-pencil-alt attr-action-icon"
title={gettext('Edit')}
op={this.onEditCustomPermission}
/>
<OpIcon
className="fa fa-trash attr-action-icon"
title={gettext('Delete')}
op={this.onDeleteCustomPermission}
/>
</Fragment>
)}
</td>