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

[a11y] dir view: added 'keyboard access' support for 'new'(new file/folder ...)

Browse Source
This commit is contained in:
llj
2021-09-28 12:05:49 +08:00
parent 613a8399ca
commit f16c21d195
1 changed files with 31 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
frontend/src/components/toolbar/dir-operation-toolbar.js
View File

@@ -74,7 +74,7 @@ class DirOperationToolbar extends React.Component {
onUploadClick = (e) => { onUploadClick = (e) => {
this.toggleOperationMenu(e); this.toggleOperationMenu(e);
this.setState({ this.setState({
isUploadMenuShow: true, isUploadMenuShow: !this.state.isUploadMenuShow,
isCreateMenuShow: false, isCreateMenuShow: false,
}); });
} }
@@ -92,7 +92,7 @@ class DirOperationToolbar extends React.Component {
onCreateClick = (e) => { onCreateClick = (e) => {
this.toggleOperationMenu(e); this.toggleOperationMenu(e);
this.setState({ this.setState({
isCreateMenuShow: true, isCreateMenuShow: !this.state.isCreateMenuShow,
isUploadMenuShow: false, isUploadMenuShow: false,
}); });
} }
@@ -184,7 +184,7 @@ class DirOperationToolbar extends React.Component {
<Fragment> <Fragment>
{Utils.isSupportUploadFolder() ? {Utils.isSupportUploadFolder() ?
<Fragment> <Fragment>
<button className="btn btn-secondary operation-item" title={gettext('Upload')} onClick={this.onUploadClick} aria-haspopup="true" aria-expanded={this.state.isUploadMenuShow} aria-controls="upload-menu">{gettext('Upload')}</button> <button className="btn btn-secondary operation-item" onClick={this.onUploadClick} aria-haspopup="true" aria-expanded={this.state.isUploadMenuShow} aria-controls="upload-menu">{gettext('Upload')}</button>
{this.state.isUploadMenuShow && ( {this.state.isUploadMenuShow && (
<div className="menu dropdown-menu" style={this.state.operationMenuStyle} role="menu" id="upload-menu"> <div className="menu dropdown-menu" style={this.state.operationMenuStyle} role="menu" id="upload-menu">
<button type="button" className="dropdown-item" onClick={this.onUploadFile} role="menuitem">{gettext('Upload Files')}</button> <button type="button" className="dropdown-item" onClick={this.onUploadFile} role="menuitem">{gettext('Upload Files')}</button>
@@ -196,7 +196,22 @@ class DirOperationToolbar extends React.Component {
<button className="btn btn-secondary operation-item" title={gettext('Upload')} onClick={this.onUploadFile}>{gettext('Upload')}</button>} <button className="btn btn-secondary operation-item" title={gettext('Upload')} onClick={this.onUploadFile}>{gettext('Upload')}</button>}
</Fragment> </Fragment>
)} )}
{canModify && <button className="btn btn-secondary operation-item" title={gettext('New')} onClick={this.onCreateClick}>{gettext('New')}</button>} {canModify &&
<Fragment>
<button className="btn btn-secondary operation-item" onClick={this.onCreateClick} aria-haspopup="true" aria-expanded={this.state.isUploadMenuShow} aria-controls="new-menu">{gettext('New')}</button>
{this.state.isCreateMenuShow && (
<div className="menu dropdown-menu" style={this.state.operationMenuStyle} role="menu" id="new-menu">
<button className="dropdown-item" onClick={this.onCreateFolderToggle} role="menuitem">{gettext('New Folder')}</button>
<button className="dropdown-item" onClick={this.onCreateFileToggle}>{gettext('New File')}</button>
<div className="dropdown-divider"></div>
<button className="dropdown-item" onClick={this.onCreateMarkdownToggle} role="menuitem">{gettext('New Markdown File')}</button>
<button className="dropdown-item" onClick={this.onCreateExcelToggle} role="menuitem">{gettext('New Excel File')}</button>
<button className="dropdown-item" onClick={this.onCreatePPTToggle} role="menuitem">{gettext('New PowerPoint File')}</button>
<button className="dropdown-item" onClick={this.onCreateWordToggle} role="menuitem">{gettext('New Word File')}</button>
</div>
)}
</Fragment>
}
{showShareBtn && <button className="btn btn-secondary operation-item" title={gettext('Share')} onClick={this.onShareClick}>{gettext('Share')}</button>} {showShareBtn && <button className="btn btn-secondary operation-item" title={gettext('Share')} onClick={this.onShareClick}>{gettext('Share')}</button>}
</Fragment> </Fragment>
); );
@@ -223,21 +238,8 @@ class DirOperationToolbar extends React.Component {
<Fragment> <Fragment>
{(userPerm === 'rw' || userPerm === 'admin' || isCustomPermission) && ( {(userPerm === 'rw' || userPerm === 'admin' || isCustomPermission) && (
<div className="dir-operation"> <div className="dir-operation">
<div className="operation">
{content} {content}
</div> </div>
{this.state.isCreateMenuShow && (
<ul className="menu dropdown-menu" style={this.state.operationMenuStyle}>
<li className="dropdown-item" onClick={this.onCreateFolderToggle}>{gettext('New Folder')}</li>
<li className="dropdown-item" onClick={this.onCreateFileToggle}>{gettext('New File')}</li>
<li className="dropdown-divider"></li>
<li className="dropdown-item" onClick={this.onCreateMarkdownToggle}>{gettext('New Markdown File')}</li>
<li className="dropdown-item" onClick={this.onCreateExcelToggle}>{gettext('New Excel File')}</li>
<li className="dropdown-item" onClick={this.onCreatePPTToggle}>{gettext('New PowerPoint File')}</li>
<li className="dropdown-item" onClick={this.onCreateWordToggle}>{gettext('New Word File')}</li>
</ul>
)}
</div>
)} )}
{Utils.isDesktop() && <ViewModeToolbar currentMode={this.props.currentMode} switchViewMode={this.props.switchViewMode} isCustomPermission={isCustomPermission} />} {Utils.isDesktop() && <ViewModeToolbar currentMode={this.props.currentMode} switchViewMode={this.props.switchViewMode} isCustomPermission={isCustomPermission} />}
{this.state.isCreateFileDialogShow && ( {this.state.isCreateFileDialogShow && (