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

optimized dirent-menu (#2837)

Browse Source
This commit is contained in:
杨顺强
2019-01-16 17:44:44 +08:00
committed by Daniel Pan
parent 641c0f82e8
commit 09aee97e0c
5 changed files with 120 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
frontend/src/components/dirent-list-view/dirent-list-item.js
View File

@@ -44,8 +44,6 @@ class DirentListItem extends React.Component {
this.state = { this.state = {
isOperationShow: false, isOperationShow: false,
highlight: false, highlight: false,
isItemMenuShow: false,
menuPosition: {top: 0, left: 0 },
progress: 0, progress: 0,
isProgressDialogShow: false, isProgressDialogShow: false,
isMoveDialogShow: false, isMoveDialogShow: false,
@@ -57,14 +55,6 @@ class DirentListItem extends React.Component {
this.zipToken = null; this.zipToken = null;
} }
componentDidMount() {
document.addEventListener('click', this.onItemMenuHide);
}
componentWillUnmount() {
document.removeEventListener('click', this.onItemMenuHide);
}
//UI Interactive //UI Interactive
onMouseEnter = () => { onMouseEnter = () => {
if (!this.props.isItemFreezed) { if (!this.props.isItemFreezed) {
@@ -93,34 +83,10 @@ class DirentListItem extends React.Component {
} }
} }
onItemMenuToggle = (e) => { onUnfreezedItem = () => {
e.stopPropagation();
e.nativeEvent.stopImmediatePropagation();
if (!this.state.isItemMenuShow) {
this.onItemMenuShow(e);
} else {
this.onItemMenuHide();
}
}
onItemMenuShow = (e) => {
let left = e.clientX;
let top = e.clientY;
let position = Object.assign({},this.state.menuPosition, {left: left, top: top});
this.setState({
menuPosition: position,
isItemMenuShow: true,
});
this.props.onFreezedItem();
}
onItemMenuHide = () => {
this.setState({ this.setState({
highlight: false,
isOperationShow: false, isOperationShow: false,
highlight: '',
isItemMenuShow: false,
isRenameing: false,
}); });
this.props.onUnfreezedItem(); this.props.onUnfreezedItem();
} }
@@ -211,7 +177,6 @@ class DirentListItem extends React.Component {
this.props.onItemRenameToggle(this.props.dirent); this.props.onItemRenameToggle(this.props.dirent);
this.setState({ this.setState({
isOperationShow: false, isOperationShow: false,
isItemMenuShow: false,
isRenameing: true, isRenameing: true,
}); });
} }
@@ -239,20 +204,16 @@ class DirentListItem extends React.Component {
} }
onRenameCancel = () => { onRenameCancel = () => {
this.setState({ this.setState({isRenameing: false});
isRenameing: false,
});
this.props.onUnfreezedItem(); this.props.onUnfreezedItem();
} }
onItemMoveToggle = () => { onItemMoveToggle = () => {
this.setState({isMoveDialogShow: !this.state.isMoveDialogShow}); this.setState({isMoveDialogShow: !this.state.isMoveDialogShow});
this.onItemMenuHide();
} }
onItemCopyToggle = () => { onItemCopyToggle = () => {
this.setState({isCopyDialogShow: !this.state.isCopyDialogShow}); this.setState({isCopyDialogShow: !this.state.isCopyDialogShow});
this.onItemMenuHide();
} }
onPermissionItem = () => { onPermissionItem = () => {
@@ -261,7 +222,6 @@ class DirentListItem extends React.Component {
onDetailsItem = () => { onDetailsItem = () => {
this.props.onItemDetails(this.props.dirent); this.props.onItemDetails(this.props.dirent);
this.onItemMenuHide();
} }
onLockItem = () => { onLockItem = () => {
@@ -271,7 +231,6 @@ class DirentListItem extends React.Component {
this.props.updateDirent(this.props.dirent, 'is_locked', true); this.props.updateDirent(this.props.dirent, 'is_locked', true);
this.props.updateDirent(this.props.dirent, 'locked_by_me', true); this.props.updateDirent(this.props.dirent, 'locked_by_me', true);
}); });
this.onItemMenuHide();
} }
onUnlockItem = () => { onUnlockItem = () => {
@@ -281,7 +240,6 @@ class DirentListItem extends React.Component {
this.props.updateDirent(this.props.dirent, 'is_locked', false); this.props.updateDirent(this.props.dirent, 'is_locked', false);
this.props.updateDirent(this.props.dirent, 'locked_by_me', false); this.props.updateDirent(this.props.dirent, 'locked_by_me', false);
}); });
this.onItemMenuHide();
} }
onNewDraft = () => { onNewDraft = () => {
@@ -305,7 +263,6 @@ class DirentListItem extends React.Component {
toaster.danger(errMessage); toaster.danger(errMessage);
} }
}); });
this.onItemMenuHide();
} }
onComnentItem = () => { onComnentItem = () => {
@@ -318,7 +275,6 @@ class DirentListItem extends React.Component {
let referer = location.href; let referer = location.href;
let url = URLDecorator.getUrl({type: 'file_revisions', repoID: repoID, filePath: filePath, referer: referer}); let url = URLDecorator.getUrl({type: 'file_revisions', repoID: repoID, filePath: filePath, referer: referer});
location.href = url; location.href = url;
this.onItemMenuHide();
} }
onAccessLog = () => { onAccessLog = () => {
@@ -330,7 +286,6 @@ class DirentListItem extends React.Component {
let filePath = this.getDirentPath(this.props.dirent); let filePath = this.getDirentPath(this.props.dirent);
let url = URLDecorator.getUrl({type: 'open_via_client', repoID: repoID, filePath: filePath}); let url = URLDecorator.getUrl({type: 'open_via_client', repoID: repoID, filePath: filePath});
location.href = url; location.href = url;
this.onItemMenuHide();
} }
onItemDownload = (e) => { onItemDownload = (e) => {
@@ -373,7 +328,6 @@ class DirentListItem extends React.Component {
_this.setState({isProgressDialogShow: false}); _this.setState({isProgressDialogShow: false});
}, 500); }, 500);
} }
}); });
} }
@@ -437,7 +391,7 @@ class DirentListItem extends React.Component {
<img src={`${siteRoot}${dirent.encoded_thumbnail_src}`} className="thumbnail" alt="" /> : <img src={`${siteRoot}${dirent.encoded_thumbnail_src}`} className="thumbnail" alt="" /> :
<img src={iconUrl} width="24" alt='' /> <img src={iconUrl} width="24" alt='' />
} }
{dirent.is_locked && <img className="locked" src={siteRoot + mediaUrl + 'img/file-locked-32.png'} alt={gettext('locked')} />} {dirent.is_locked && <img className="locked" src={mediaUrl + 'img/file-locked-32.png'} alt={gettext('locked')} />}
</div> </div>
</td> </td>
<td className="name"> <td className="name">
@@ -478,19 +432,16 @@ class DirentListItem extends React.Component {
<i className="op-icon sf2-icon-delete" title={gettext('Delete')} onClick={this.onItemDelete}></i> <i className="op-icon sf2-icon-delete" title={gettext('Delete')} onClick={this.onItemDelete}></i>
</li> </li>
<li className="operation-group-item"> <li className="operation-group-item">
<i className="sf2-icon-caret-down sf-dropdown-toggle" title={gettext('More Operations')} onClick={this.onItemMenuToggle}></i> <DirentMenu
dirent={this.props.dirent}
onMenuItemClick={this.onMenuItemClick}
currentRepoInfo={this.props.currentRepoInfo}
isRepoOwner={this.props.isRepoOwner}
onFreezedItem={this.props.onFreezedItem}
onUnfreezedItem={this.onUnfreezedItem}
/>
</li> </li>
</ul> </ul>
{
this.state.isItemMenuShow &&
<DirentMenu
dirent={this.props.dirent}
menuPosition={this.state.menuPosition}
onMenuItemClick={this.onMenuItemClick}
currentRepoInfo={this.props.currentRepoInfo}
isRepoOwner={this.props.isRepoOwner}
/>
}
</div> </div>
} }
</td> </td>

82
frontend/src/components/dirent-list-view/dirent-menu-item.js
View File

@@ -1,82 +0,0 @@
import React, { Fragment } from 'react';
import PropTypes from 'prop-types';
import { gettext } from '../../utils/constants';
const propTypes = {
item: PropTypes.string.isRequired,
onItemClick: PropTypes.func.isRequired,
};
class DirentMenuItem extends React.Component {
onClick = (e) => {
e.nativeEvent.stopImmediatePropagation();
let operation = e.target.dataset.type;
this.props.onItemClick(operation);
}
translateOperation = (operation) => {
let translateOperation = '';
switch(operation) {
case 'Rename':
translateOperation = gettext('Rename');
break;
case 'Move':
translateOperation = gettext('Move');
break;
case 'Copy':
translateOperation = gettext('Copy');
break;
case 'Permission':
translateOperation = gettext('Permission');
break;
case 'Details':
translateOperation = gettext('Details');
break;
case 'Unlock':
translateOperation = gettext('Unlock');
break;
case 'Lock':
translateOperation = gettext('Lock');
break;
case 'New Draft':
translateOperation = gettext('New Draft');
break;
case 'Comment':
translateOperation = gettext('Comment');
break;
case 'History':
translateOperation = gettext('History');
break;
case 'Access Log':
translateOperation = gettext('Access Log');
break;
case 'Open via Client':
translateOperation = gettext('Open via Client');
break;
default:
break;
}
return translateOperation;
}
render() {
let operation = this.props.item;
let operationMessage = this.translateOperation(operation);
return (
<Fragment>
{
operation !== 'Divider' ?
<li className="dropdown-item operation-menu-item" data-type={operation} onClick={this.onClick}>
<span className="user-select-none" data-type={operation} title={operationMessage} aria-label={operationMessage}>{operationMessage}</span>
</li> :
<li className="dropdown-divider"></li>
}
</Fragment>
);
}
}
DirentMenuItem.propTypes = propTypes;
export default DirentMenuItem;

146
frontend/src/components/dirent-list-view/dirent-menu.js
View File

@@ -1,15 +1,15 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { isPro, enableFileComment, fileAuditEnabled, folderPermEnabled} from '../../utils/constants'; import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem } from 'reactstrap';
import DirentMenuItem from './dirent-menu-item'; import { gettext, isPro, enableFileComment, fileAuditEnabled, folderPermEnabled } from '../../utils/constants';
import { Utils } from '../../utils/utils'; import { Utils } from '../../utils/utils';
const propTypes = { const propTypes = {
dirent: PropTypes.object.isRequired,
menuPosition: PropTypes.object.isRequired,
onMenuItemClick: PropTypes.func.isRequired,
currentRepoInfo: PropTypes.object.isRequired, currentRepoInfo: PropTypes.object.isRequired,
isRepoOwner: PropTypes.bool.isRequired, isRepoOwner: PropTypes.bool.isRequired,
onMenuItemClick: PropTypes.func.isRequired,
onFreezedItem: PropTypes.func.isRequired,
onUnfreezedItem: PropTypes.func.isRequired,
}; };
class DirentMenu extends React.Component { class DirentMenu extends React.Component {
@@ -17,26 +17,21 @@ class DirentMenu extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
menuList: [], isItemMenuShow: false
}; };
this.menuList = [];
} }
componentDidMount() { componentDidMount() {
let repoInfo = this.props.currentRepoInfo; this.menuList = this.calculateMenuList();
let menuList = this.calculateMenuList(repoInfo);
this.setState({
menuList: menuList,
menuHeight: menuList.length * 30,
});
} }
calculateMenuList(repoInfo) { calculateMenuList() {
let dirent = this.props.dirent; let { currentRepoInfo, dirent, isRepoOwner } = this.props;
let isRepoOwner = this.props.isRepoOwner;
let type = dirent.type; let type = dirent.type;
let permission = dirent.permission; let permission = dirent.permission;
let can_set_folder_perm = folderPermEnabled && ((isRepoOwner && repoInfo.has_been_shared_out) || repoInfo.is_admin); let can_set_folder_perm = folderPermEnabled && ((isRepoOwner && currentRepoInfo.has_been_shared_out) || currentRepoInfo.is_admin);
if (type === 'dir' && permission === 'rw') { if (type === 'dir' && permission === 'rw') {
let menuList = []; let menuList = [];
if (can_set_folder_perm) { if (can_set_folder_perm) {
@@ -48,7 +43,7 @@ class DirentMenu extends React.Component {
} }
if (type === 'dir' && permission === 'r') { if (type === 'dir' && permission === 'r') {
let menuList = repoInfo.encrypted ? ['Copy', 'Details'] : ['Details']; let menuList = currentRepoInfo.encrypted ? ['Copy', 'Details'] : ['Details'];
return menuList; return menuList;
} }
@@ -85,7 +80,7 @@ class DirentMenu extends React.Component {
if (type === 'file' && permission === 'r') { if (type === 'file' && permission === 'r') {
let menuList = []; let menuList = [];
if (!repoInfo.encrypted) { if (!currentRepoInfo.encrypted) {
menuList.push('Copy'); menuList.push('Copy');
} }
if (enableFileComment) { if (enableFileComment) {
@@ -97,32 +92,101 @@ class DirentMenu extends React.Component {
} }
} }
onMenuItemClick = (operation) => { translateMenuItem = (menuItem) => {
let translateResult = '';
switch(menuItem) {
case 'Rename':
translateResult = gettext('Rename');
break;
case 'Move':
translateResult = gettext('Move');
break;
case 'Copy':
translateResult = gettext('Copy');
break;
case 'Permission':
translateResult = gettext('Permission');
break;
case 'Details':
translateResult = gettext('Details');
break;
case 'Unlock':
translateResult = gettext('Unlock');
break;
case 'Lock':
translateResult = gettext('Lock');
break;
case 'New Draft':
translateResult = gettext('New Draft');
break;
case 'Comment':
translateResult = gettext('Comment');
break;
case 'History':
translateResult = gettext('History');
break;
case 'Access Log':
translateResult = gettext('Access Log');
break;
case 'Open via Client':
translateResult = gettext('Open via Client');
break;
default:
break;
}
return translateResult;
}
onDropdownToggleClick = (e) => {
e.preventDefault();
this.toggleOperationMenu();
}
toggleOperationMenu = () => {
this.setState(
{isItemMenuShow: !this.state.isItemMenuShow},
() => {
if (this.state.isItemMenuShow) {
this.props.onFreezedItem();
} else {
this.props.onUnfreezedItem();
}
}
);
}
onMenuItemClick = (event) => {
let operation = event.target.dataset.toggle;
this.props.onMenuItemClick(operation); this.props.onMenuItemClick(operation);
} }
render() { render() {
if (this.state.menuList.length) { if (!this.menuList.length) {
let position = this.props.menuPosition; return '';
let left = position.left - (8 * 16); // 8rem width;
let top = position.top + (1 * 16);
let style = {position: 'fixed', left: left, top: top, display: 'block'};
let screenH = window.innerHeight;
if (screenH - position.top < this.state.menuHeight) {
top = position.top - this.state.menuHeight;
style = {position: 'fixed', left: left, top: top, display: 'block'};
}
return (
<ul className="dropdown-menu operation-menu" style={style}>
{this.state.menuList.map((item, index) => {
return (
<DirentMenuItem key={index} item={item} onItemClick={this.onMenuItemClick}/>
);
})}
</ul>
);
} }
return ''; return (
<Dropdown isOpen={this.state.isItemMenuShow} toggle={this.toggleOperationMenu}>
<DropdownToggle
tag="i"
className="sf-dropdown-toggle sf2-icon-caret-down"
title={gettext('More Operations')}
data-toggle="dropdown"
aria-expanded={this.state.isItemMenuShow}
onClick={this.onDropdownToggleClick}
/>
<DropdownMenu>
{this.menuList.map((menuItem, index) => {
if (menuItem === 'Divider') {
return <DropdownItem key={index} divider/>;
} else {
return (
<DropdownItem key={index} data-toggle={menuItem} onClick={this.onMenuItemClick}>{this.translateMenuItem(menuItem)}</DropdownItem>
);
}
})}
</DropdownMenu>
</Dropdown>
);
} }
} }

1
frontend/src/css/wiki.css
View File

@@ -63,7 +63,6 @@ img[src=""] {
.cur-view-content { .cur-view-content {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden;
} }
.cur-view-content .wiki-page-container{ .cur-view-content .wiki-page-container{

5
frontend/src/pages/repo-wiki-mode/main-panel.js
View File

@@ -150,6 +150,7 @@ class MainPanel extends Component {
} }
render() { render() {
const ErrMessage = (<div className="message empty-tip err-message"><h2>{gettext('Folder does not exist.')}</h2></div>); const ErrMessage = (<div className="message empty-tip err-message"><h2>{gettext('Folder does not exist.')}</h2></div>);
return ( return (
@@ -199,11 +200,11 @@ class MainPanel extends Component {
/> />
)} )}
</div> </div>
<div className="cur-view-content" onScroll={this.handlePageScroll} ref="curViewContent"> <div className="cur-view-content">
{!this.props.pathExist ? {!this.props.pathExist ?
ErrMessage : ErrMessage :
<Fragment> <Fragment>
{ this.props.isViewFile ? {this.props.isViewFile ?
<WikiMarkdownViewer <WikiMarkdownViewer
isFileLoading={this.props.isFileLoading} isFileLoading={this.props.isFileLoading}
markdownContent={this.props.content} markdownContent={this.props.content}