haiwen/seahub
1
0
Fork 0
mirror of https://github.com/haiwen/seahub.git synced 2025-09-04 08:28:11 +00:00
Code Issues Releases Wiki Activity

[a11y] group repos, 'shared with all': enabled 'keyboard access'

Browse Source
This commit is contained in:
llj
2021-09-23 14:46:49 +08:00
parent 007ea2329c
commit 32502fabcd
2 changed files with 17 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
frontend/src/components/shared-repo-list-view/shared-repo-list-item.js
View File

@@ -186,15 +186,18 @@ class SharedRepoListItem extends React.Component {
this.props.onItemDetails(this.props.repo);
}
onItemShare = () => {
onItemShare = (e) => {
e.preventDefault();
this.setState({isShowSharedDialog: true});
}
onItemUnshare = () => {
onItemUnshare = (e) => {
e.preventDefault();
this.props.onItemUnshare(this.props.repo);
}
onItemDeleteToggle = () => {
onItemDeleteToggle = (e) => {
e.preventDefault();
this.setState({isDeleteDialogShow: !this.state.isDeleteDialogShow});
}
@@ -389,9 +392,9 @@ class SharedRepoListItem extends React.Component {
// scene two: (Share, Unshare), (Share), (Unshare)
operations = this.generatorOperations();
}
const shareOperation = <a href="#" className="op-icon sf2-icon-share" title={gettext('Share')} onClick={this.onItemShare}></a>;
const unshareOperation = <a href="#" className="op-icon sf2-icon-x3" title={gettext('Unshare')} onClick={this.onItemUnshare}></a>;
const deleteOperation = <a href="#" className="op-icon sf2-icon-delete" title={gettext('Delete')} onClick={this.onItemDeleteToggle}></a>;
const shareOperation = <a href="#" className="op-icon sf2-icon-share" title={gettext('Share')} role="button" aria-label={gettext('Share')} onClick={this.onItemShare}></a>;
const unshareOperation = <a href="#" className="op-icon sf2-icon-x3" title={gettext('Unshare')} role="button" aria-label={gettext('Unshare')} onClick={this.onItemUnshare}></a>;
const deleteOperation = <a href="#" className="op-icon sf2-icon-delete" title={gettext('Delete')} role="button" aria-label={gettext('Delete')} onClick={this.onItemDeleteToggle}></a>;
if (this.isDeparementOnwerGroupMember) {
return (
@@ -435,7 +438,8 @@ class SharedRepoListItem extends React.Component {
return null;
}
onStarRepo = () => {
onToggleStarRepo = (e) => {
e.preventDefault();
if (this.state.isStarred) {
seafileAPI.unstarItem(this.props.repo.repo_id, '/').then(() => {
this.setState({isStarred: !this.state.isStarred});
@@ -458,10 +462,11 @@ class SharedRepoListItem extends React.Component {
let { repo } = this.props;
return (
<Fragment>
<tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave}>
<tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave} onFocus={this.onMouseEnter}>
<td className="text-center">
{!this.state.isStarred && <i className="far fa-star star-empty cursor-pointer" onClick={this.onStarRepo}></i>}
{this.state.isStarred && <i className="fas fa-star cursor-pointer" onClick={this.onStarRepo}></i>}
<a href="#" role="button" aria-label={this.state.isStarred ? gettext('Unstar') : gettext('Star')} onClick={this.onToggleStarRepo}>
<i className={`fa-star ${this.state.isStarred ? 'fas' : 'far star-empty'}`}></i>
</a>
</td>
<td><img src={iconUrl} title={iconTitle} alt={iconTitle} width="24" /></td>
<td>