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

[a11y] dir view - file tag: improvements & added support for 'keyboard access'

Browse Source
This commit is contained in:
llj
2021-09-27 14:44:38 +08:00
parent 8fa1c01d11
commit 95a810858a
4 changed files with 20 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/components/dialog/list-tag-dialog.js
View File

@@ -54,11 +54,11 @@ class TagListItem extends React.Component {
<div className="tag-demo" style={{backgroundColor:color}} onMouseOver={this.onMouseOver} onMouseOut={this.onMouseOut}>
<span className={`${this.state.showSelectedTag ? 'show-tag-selected': ''}`} style={{backgroundColor: drakColor}}></span>
<span className="tag-name">{this.props.item.name}</span>
<span className="tag-files" onClick={this.onListTaggedFiles}>
<button className="tag-files border-0 bg-transparent" onClick={this.onListTaggedFiles}>
{fileCount}{' '}{fileTranslation}
</span>
</button>
</div>
<i className="tag-edit fa fa-pencil-alt" onClick={this.onTagUpdate}></i>
<button className="tag-edit fa fa-pencil-alt border-0" onClick={this.onTagUpdate} aria-label={gettext('Edit')} title={gettext('Edit')}></button>
</li>
);
}

13
frontend/src/components/dialog/list-taggedfiles-dialog.js
View File

@@ -135,24 +135,29 @@ class TaggedFile extends React.Component {
});
}
deleteFile = (e) => {
e.preventDefault();
this.props.onDeleteTaggedFile(this.props.taggedFile);
}
render() {
const taggedFile = this.props.taggedFile;
let className = this.state.active ? 'action-icon sf2-icon-x3' : 'action-icon vh sf2-icon-x3';
let path = taggedFile.parent_path ? Utils.joinPath(taggedFile.parent_path, taggedFile.filename) : '';
let href = siteRoot + 'lib/' + this.props.repoID + '/file' + Utils.encodePath(path);
return ( taggedFile.file_deleted ?
<tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
<tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onFocus={this.onMouseEnter}>
<td colSpan='3' className="name">{taggedFile.filename}{' '}
<span style={{color:'red'}}>{gettext('deleted')}</span>
</td>
<td><i className={className} onClick={this.props.onDeleteTaggedFile.bind(this, taggedFile)}></i></td>
<td><a href="#" role="button" aria-label={gettext('Delete')} title={gettext('Delete')} className={className} onClick={this.deleteFile}></a></td>
</tr>
:
<tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave}>
<tr onMouseEnter={this.onMouseEnter} onMouseLeave={this.onMouseLeave} onFocus={this.onMouseEnter}>
<td className="name"><a href={href} target='_blank'>{taggedFile.filename}</a></td>
<td>{Utils.bytesToSize(taggedFile.size)}</td>
<td>{moment.unix(taggedFile.mtime).fromNow()}</td>
<td><i className={className} onClick={this.props.onDeleteTaggedFile.bind(this, taggedFile)}></i></td>
<td><a href="#" role="button" aria-label={gettext('Delete')} title={gettext('Delete')} className={className} onClick={this.deleteFile}></a></td>
</tr>
);
}