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

[a11y] shared repos: improved 'more operations' dropdown & 'star/unstar'

Browse Source
This commit is contained in:
llj
2021-09-23 15:42:45 +08:00
parent 32502fabcd
commit 6e2a296ca1
1 changed files with 25 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -85,6 +85,12 @@ class SharedRepoListItem extends React.Component {
this.toggleOperationMenu(e);
}
onDropdownToggleKeyDown = (e) => {
if (e.key == 'Enter' || e.key == 'Space') {
this.clickOperationMenuToggle(e);
}
}
toggleOperationMenu = (e) => {
let dataset = e.target ? e.target.dataset : null;
if (dataset && dataset.toggle && dataset.toggle === 'Rename') {
@@ -118,6 +124,12 @@ class SharedRepoListItem extends React.Component {
return { iconUrl, iconTitle, libPath };
}
onMenuItemKeyDown = (e) => {
if (e.key == 'Enter' || e.key == 'Space') {
this.onMenuItemClick(e);
}
}
onMenuItemClick = (e) => {
let operation = e.target.dataset.toggle;
switch(operation) {
@@ -403,16 +415,18 @@ class SharedRepoListItem extends React.Component {
{deleteOperation}
<Dropdown isOpen={this.state.isItemMenuShow} toggle={this.toggleOperationMenu}>
<DropdownToggle
tag="i"
className="sf-dropdown-toggle sf2-icon-caret-down"
className="sf-dropdown-toggle sf2-icon-caret-down border-0 p-0"
title={gettext('More Operations')}
data-toggle="dropdown"
aria-expanded={this.state.isItemMenuShow}
aria-haspopup={true}
style={{'minWidth': '0'}}
onClick={this.clickOperationMenuToggle}
onKeyDown={this.onDropdownToggleKeyDown}
/>
<DropdownMenu>
{operations.map((item, index) => {
return <DropdownItem key={index} data-toggle={item} onClick={this.onMenuItemClick}>{this.translateMenuItem(item)}</DropdownItem>;
return <DropdownItem key={index} data-toggle={item} onClick={this.onMenuItemClick} onKeyDown={this.onMenuItemKeyDown}>{this.translateMenuItem(item)}</DropdownItem>;
})}
</DropdownMenu>
</Dropdown>
@@ -440,9 +454,13 @@ class SharedRepoListItem extends React.Component {
onToggleStarRepo = (e) => {
e.preventDefault();
const { repo_name: repoName } = this.props.repo;
if (this.state.isStarred) {
seafileAPI.unstarItem(this.props.repo.repo_id, '/').then(() => {
this.setState({isStarred: !this.state.isStarred});
const msg = gettext('Successfully unstarred {library_name_placeholder}.')
.replace('{library_name_placeholder}', repoName);
toaster.success(msg);
}).catch(error => {
let errMessage = Utils.getErrorMsg(error);
toaster.danger(errMessage);
@@ -450,6 +468,9 @@ class SharedRepoListItem extends React.Component {
} else {
seafileAPI.starItem(this.props.repo.repo_id, '/').then(() => {
this.setState({isStarred: !this.state.isStarred});
const msg = gettext('Successfully starred {library_name_placeholder}.')
.replace('{library_name_placeholder}', repoName);
toaster.success(msg);
}).catch(error => {
let errMessage = Utils.getErrorMsg(error);
toaster.danger(errMessage);
@@ -471,7 +492,7 @@ class SharedRepoListItem extends React.Component {
<td><img src={iconUrl} title={iconTitle} alt={iconTitle} width="24" /></td>
<td>
{this.state.isRenaming ?
<Rename name={repo.repo_name} onRenameConfirm={this.onRenameConfirm} onRenameCancel={this.onRenameCancel}/> :
<Rename name={repo.repo_name} onRenameConfirm={this.onRenameConfirm} onRenameCancel={this.onRenameCancel}/> :
<Link to={libPath}>{repo.repo_name}</Link>
}
</td>