@@ -171,7 +137,7 @@ class DirentDetail extends React.Component {
{this.state.direntDetail &&
@@ -192,4 +158,4 @@ class DirentDetail extends React.Component {
DirentDetail.propTypes = propTypes;
-export default DirentDetail;
+export default DirentDetail;
\ No newline at end of file
diff --git a/frontend/src/components/dirent-list-view/dirent-list-item.js b/frontend/src/components/dirent-list-view/dirent-list-item.js
index 38e01f8720..c256023c1a 100644
--- a/frontend/src/components/dirent-list-view/dirent-list-item.js
+++ b/frontend/src/components/dirent-list-view/dirent-list-item.js
@@ -41,6 +41,7 @@ const propTypes = {
isGroupOwnedRepo: PropTypes.bool.isRequired,
onItemMouseDown: PropTypes.func.isRequired,
onItemContextMenu: PropTypes.func.isRequired,
+ selectedDirentList: PropTypes.array.isRequired
};
class DirentListItem extends React.Component {
@@ -102,13 +103,6 @@ class DirentListItem extends React.Component {
}
onUnfreezedItem = () => {
- let dirent = this.props.dirent;
- // scenes 1: dirent isSelected --> this have Highest level
- // scenes 2: dirent contextmenu show
- // scenes 3: dirent operation menu show
- if (dirent.isSelected) {
- return;
- }
this.setState({
highlight: false,
isOperationShow: false,
@@ -118,7 +112,6 @@ class DirentListItem extends React.Component {
//buiness handler
onItemSelected = () => {
- this.props.onFreezedItem();
this.props.onItemSelected(this.props.dirent);
}
@@ -389,7 +382,7 @@ class DirentListItem extends React.Component {
}
render() {
- let { path, dirent } = this.props;
+ let { path, dirent, selectedDirentList } = this.props;
let direntPath = Utils.joinPath(path, dirent.name);
let dirHref = '';
if (this.props.currentRepoInfo) {
@@ -408,6 +401,7 @@ class DirentListItem extends React.Component {
let trClass = this.state.highlight ? 'tr-highlight ' : '';
trClass += this.state.isDropTipshow ? 'tr-drop-effect' : '';
+ trClass += dirent.isSelected ? 'tr-active' : '';
return (
@@ -466,33 +460,65 @@ class DirentListItem extends React.Component {
)}
- {
- this.state.isOperationShow &&
-
-
- -
-
-
- {this.props.showShareBtn &&
- -
-
-
- }
- -
-
-
- -
-
-
-
-
+
+ -
+
+
+ {this.props.showShareBtn &&
+ -
+
+
+ }
+ -
+
+
+ -
+
+
+
+
+
+ -
+
+
+ {this.props.showShareBtn &&
+ -
+
+
+ }
+ -
+
+
+ -
+
+
+
+ |
{dirent.size && dirent.size} |
diff --git a/frontend/src/components/dirent-list-view/dirent-list-view.js b/frontend/src/components/dirent-list-view/dirent-list-view.js
index 48f9377e88..23ca1c9dc3 100644
--- a/frontend/src/components/dirent-list-view/dirent-list-view.js
+++ b/frontend/src/components/dirent-list-view/dirent-list-view.js
@@ -101,10 +101,6 @@ class DirentListView extends React.Component {
this.onFreezedItem();
}
- onItemDetails = (dirent) => {
- this.props.onItemDetails(dirent);
- }
-
sortByName = (e) => {
e.preventDefault();
const sortBy = 'name';
@@ -174,9 +170,7 @@ class DirentListView extends React.Component {
}
closeImagePopup = () => {
- this.setState({
- isImagePopupOpen: false
- });
+ this.setState({isImagePopupOpen: false});
}
onCreateFileToggle = () => {
@@ -395,9 +389,7 @@ class DirentListView extends React.Component {
}
onHideMenu = (e) => {
- if (this.props.selectedDirentList.length === 0) {
- this.onUnfreezedItem();
- }
+ this.onUnfreezedItem();
}
// contextmenu utils
@@ -545,10 +537,10 @@ class DirentListView extends React.Component {
onFreezedItem={this.onFreezedItem}
onUnfreezedItem={this.onUnfreezedItem}
onDirentClick={this.props.onDirentClick}
- onItemDetails={this.onItemDetails}
showImagePopup={this.showImagePopup}
onItemMouseDown={this.onItemMouseDown}
onItemContextMenu={this.onItemContextMenu}
+ selectedDirentList={this.props.selectedDirentList}
/>
);
})}
diff --git a/frontend/src/components/dirent-list-view/dirents-menu.js b/frontend/src/components/dirent-list-view/dirents-menu.js
index 2b7bf7c519..bb1319c9fe 100644
--- a/frontend/src/components/dirent-list-view/dirents-menu.js
+++ b/frontend/src/components/dirent-list-view/dirents-menu.js
@@ -1,14 +1,15 @@
import React from 'react';
import PropTypes from 'prop-types';
+import { DropdownMenu, DropdownToggle, DropdownItem, ButtonDropdown } from 'reactstrap';
import { Utils } from '../../utils/utils';
-import { Dropdown, DropdownMenu, DropdownToggle, DropdownItem, ButtonDropdown } from 'reactstrap';
-import { gettext, isPro, enableFileComment, fileAuditEnabled, folderPermEnabled } from '../../utils/constants';
+import { gettext, isPro } from '../../utils/constants';
+import TextTranslation from '../../utils/text-translation';
+
import '../../css/dirents-menu.css';
const propTypes = {
- dirents: PropTypes.array.isRequired,
+ dirent: PropTypes.object.isRequired,
currentRepoInfo: PropTypes.object.isRequired,
- isRepoOwner: PropTypes.bool.isRequired,
onMenuItemClick: PropTypes.func.isRequired,
};
@@ -22,65 +23,43 @@ class DirentMenu extends React.Component {
};
}
- calculateMenuList(props) {
- const { currentRepoInfo, dirents, isRepoOwner } = props;
- const length = dirents.length;
- let menuList = [];
- if (length === 1) {
- const dirent = dirents[0];
- if (dirent.type === 'dir') {
- menuList = ['Share'];
- } else if (dirent.type === 'file') {
- menuList = ['Share', 'Tags', 'Related Files', 'Divider', 'History', 'Divider', 'Open via Client'];
- if (!Utils.isMarkdownFile(dirent.name)) {
- menuList.splice(2, 1);
- }
- if (isPro) {
- if (dirent.is_locked) {
- if (dirent.locked_by_me || (dirent.lock_owner === 'OnlineOffice' && currentRepoInfo.permission === 'rw')) {
- menuList.splice(1, 0, 'Unlock');
- }
- } else {
- menuList.splice(1, 0, 'Lock');
- }
- }
- }
- } else {
- menuList = [];
- }
- this.setState({
- menuList: menuList,
- });
+ componentDidMount() {
+ const { currentRepoInfo, dirent } = this.props;
+ let menuList = this.calculateMenuList(currentRepoInfo, dirent);
+ this.setState({menuList: menuList});
}
- translateMenuItem = (menuItem) => {
- let translateResult = '';
- switch (menuItem) {
- case 'Share':
- translateResult = gettext('Share');
- break;
- case 'Tags':
- translateResult = gettext('Tags');
- break;
- case 'Lock':
- translateResult = gettext('Lock');
- break;
- case 'Unlock':
- translateResult = gettext('Unlock');
- break;
- case 'Related Files':
- translateResult = gettext('Related Files');
- break;
- case 'History':
- translateResult = gettext('History');
- break;
- case 'Open via Client':
- translateResult = gettext('Open via Client');
- break;
- default:
- break;
+ componentWillReceiveProps(nextProps) {
+ const { currentRepoInfo, dirent } = nextProps;
+ let menuList = this.calculateMenuList(currentRepoInfo, dirent);
+ this.setState({menuList: menuList});
+ }
+
+ calculateMenuList(currentRepoInfo, dirent) {
+ let menuList = [];
+ const { SHARE, TAGS, RELATED_FILES, HISTORY, OPEN_VIA_CLIENT, LOCK, UNLOCK } = TextTranslation;
+
+ if (dirent.type === 'dir') {
+ menuList = [SHARE];
+ return menuList;
+ }
+
+ if (dirent.type === 'file') {
+ menuList = [SHARE, TAGS, RELATED_FILES, 'Divider', HISTORY, 'Divider', OPEN_VIA_CLIENT];
+ if (!Utils.isMarkdownFile(dirent.name)) {
+ menuList.splice(2, 1);
+ }
+ if (isPro) {
+ if (dirent.is_locked) {
+ if (dirent.locked_by_me || (dirent.lock_owner === 'OnlineOffice' && currentRepoInfo.permission === 'rw')) {
+ menuList.splice(1, 0, UNLOCK);
+ }
+ } else {
+ menuList.splice(1, 0, LOCK);
+ }
+ }
+ return menuList;
}
- return translateResult;
}
onDropdownToggleClick = (e) => {
@@ -92,23 +71,11 @@ class DirentMenu extends React.Component {
onMenuItemClick = (event) => {
let operation = event.target.dataset.toggle;
- this.props.onMenuItemClick(operation, this.props.dirents);
- }
-
- componentDidMount() {
- this.calculateMenuList(this.props);
- }
-
- componentWillReceiveProps(nextProps) {
- if (this.props.dirents.length !== nextProps.dirents.length) {
- this.calculateMenuList(nextProps);
- }
+ this.props.onMenuItemClick(operation, this.props.dirent);
}
render() {
- if (this.state.menuList.length === 0) {
- return null;
- }
+
return (
@@ -119,7 +86,7 @@ class DirentMenu extends React.Component {
return ;
} else {
return (
- {this.translateMenuItem(menuItem)}
+ {menuItem.value}
);
}
})}
diff --git a/frontend/src/components/toolbar/mutilple-dir-operation-toolbar.js b/frontend/src/components/toolbar/mutilple-dir-operation-toolbar.js
index 2be5b26689..516f90fe30 100644
--- a/frontend/src/components/toolbar/mutilple-dir-operation-toolbar.js
+++ b/frontend/src/components/toolbar/mutilple-dir-operation-toolbar.js
@@ -28,7 +28,6 @@ const propTypes = {
onFilesTagChanged: PropTypes.func.isRequired,
unSelectDirent: PropTypes.func.isRequired,
updateDirent: PropTypes.func.isRequired,
- showDirentDetail: PropTypes.func.isRequired,
};
class MutipleDirOperationToolbar extends React.Component {
@@ -96,9 +95,6 @@ class MutipleDirOperationToolbar extends React.Component {
case 'Tags':
this.listFileTags(dirent);
break;
- case 'Details':
- this.props.showDirentDetail();
- break;
case 'Lock':
this.lockFile(dirent);
break;
@@ -246,11 +242,10 @@ class MutipleDirOperationToolbar extends React.Component {
- {this.props.selectedDirentList.length > 0 &&
+ {this.props.selectedDirentList.length === 1 &&
}
diff --git a/frontend/src/pages/lib-content-view/lib-content-container.js b/frontend/src/pages/lib-content-view/lib-content-container.js
index 50e25b5756..ff2e7c706f 100644
--- a/frontend/src/pages/lib-content-view/lib-content-container.js
+++ b/frontend/src/pages/lib-content-view/lib-content-container.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
import { gettext } from '../../utils/constants';
import CurDirPath from '../../components/cur-dir-path';
import DirentDetail from '../../components/dirent-detail/dirent-details';
+import LibDetail from '../../components/dirent-detail/lib-details';
import DirListView from '../../components/dir-view-mode/dir-list-view';
import DirGridView from '../../components/dir-view-mode/dir-grid-view';
import DirColumnView from '../../components/dir-view-mode/dir-column-view';
@@ -88,12 +89,18 @@ class LibContentContainer extends React.Component {
constructor(props) {
super(props);
this.state = {
- currentDirent: {},
+ currentDirent: null,
};
this.errMessage = ({gettext('Folder does not exist.')}
);
}
+ componentWillReceiveProps(nextProps) {
+ if (nextProps.path !== this.props.path) {
+ this.setState({currentDirent: null});
+ }
+ }
+
onPathClick = (path) => {
this.props.onMainNavBarClick(path);
this.props.closeDirentDetail();
@@ -106,33 +113,12 @@ class LibContentContainer extends React.Component {
// on ''
onDirentClick = (dirent) => {
- if (this.props.isDirentDetailShow) {
- this.onItemDetails(dirent);
- }
+ this.setState({currentDirent: dirent});
+ this.props.onDirentClick(dirent);
}
- onItemDetails = (dirent) => {
- this.setState({
- currentDirent: dirent,
- });
- this.props.showDirentDetail();
- }
-
- onItemDetailsClose = () => {
- this.props.closeDirentDetail();
- }
-
- componentWillReceiveProps (nextProps) {
- if (nextProps.isDirentDetailShow) {
- this.setState({
- isDirentDetailShow: nextProps.isDirentDetailShow
- });
- }
- if (nextProps.selectedDirent && nextProps.isDirentDetailShow) {
- this.setState({
- currentDirent: nextProps.selectedDirent,
- });
- }
+ onItemSelected = (dirent) => {
+ this.setState({currentDirent: dirent});
}
render() {
@@ -193,7 +179,6 @@ class LibContentContainer extends React.Component {
onItemMove={this.props.onItemMove}
onItemCopy={this.props.onItemCopy}
onDirentClick={this.onDirentClick}
- onItemDetails={this.onItemDetails}
updateDirent={this.props.updateDirent}
isAllItemSelected={this.props.isAllDirentSelected}
onAllItemSelected={this.props.onAllDirentSelected}
@@ -257,7 +242,6 @@ class LibContentContainer extends React.Component {
onItemMove={this.props.onItemMove}
onItemCopy={this.props.onItemCopy}
onDirentClick={this.onDirentClick}
- onItemDetails={this.onItemDetails}
updateDirent={this.props.updateDirent}
isAllItemSelected={this.props.isAllDirentSelected}
onAllItemSelected={this.props.onAllDirentSelected}
@@ -271,18 +255,26 @@ class LibContentContainer extends React.Component {
)}
- {this.props.isDirentDetailShow && (
-
-
-
- )}
+ {this.props.isDirentDetailShow &&
+
+
+ {this.props.path !== '/' ?
+ :
+
+ }
+
+
+ }
);
}
diff --git a/frontend/src/pages/lib-content-view/lib-content-toolbar.js b/frontend/src/pages/lib-content-view/lib-content-toolbar.js
index 91f4d657a3..6df0e17acd 100644
--- a/frontend/src/pages/lib-content-view/lib-content-toolbar.js
+++ b/frontend/src/pages/lib-content-view/lib-content-toolbar.js
@@ -45,8 +45,6 @@ const propTypes = {
onSearchedClick: PropTypes.func.isRequired,
isRepoOwner: PropTypes.bool.isRequired,
// selected menu
- onDirentSelected: PropTypes.func.isRequired,
- showDirentDetail: PropTypes.func.isRequired,
onFilesTagChanged: PropTypes.func.isRequired, // for mutiple select toolbar
updateDirent: PropTypes.func.isRequired,
};
@@ -99,8 +97,6 @@ class LibContentToolbar extends React.Component {
currentRepoInfo={this.props.currentRepoInfo}
enableDirPrivateShare={this.props.enableDirPrivateShare}
updateDirent={this.props.updateDirent}
- onDirentSelected={this.props.onDirentSelected}
- showDirentDetail={this.props.showDirentDetail}
relatedFiles={this.props.relatedFiles}
unSelectDirent={this.props.unSelectDirent}
onFilesTagChanged={this.props.onFilesTagChanged}
diff --git a/frontend/src/pages/lib-content-view/lib-content-view.js b/frontend/src/pages/lib-content-view/lib-content-view.js
index 6e1ad28e24..0417a561f7 100644
--- a/frontend/src/pages/lib-content-view/lib-content-view.js
+++ b/frontend/src/pages/lib-content-view/lib-content-view.js
@@ -78,9 +78,7 @@ class LibContentView extends React.Component {
}
showDirentDetail = () => {
- this.setState({
- isDirentDetailShow: true,
- });
+ this.setState({isDirentDetailShow: true});
}
toggleDirentDetail = () => {
@@ -747,6 +745,19 @@ class LibContentView extends React.Component {
}
onDirentClick = (dirent) => {
+ let direntList = this.state.direntList.map(dirent => {
+ dirent.isSelected = false;
+ return dirent;
+ });
+ dirent.isSelected = true;
+ this.setState({
+ direntList: direntList,
+ isDirentSelected: true,
+ selectedDirentList: [dirent],
+ })
+ }
+
+ onItemClick = (dirent) => {
this.resetSelected();
let repoID = this.props.repoID;
let direntPath = Utils.joinPath(this.state.path, dirent.name);
@@ -1395,7 +1406,8 @@ class LibContentView extends React.Component {
sortOrder={this.state.sortOrder}
sortItems={this.sortItems}
updateDirent={this.updateDirent}
- onItemClick={this.onDirentClick}
+ onDirentClick={this.onDirentClick}
+ onItemClick={this.onItemClick}
onItemSelected={this.onDirentSelected}
onItemDelete={this.onMainPanelItemDelete}
onItemRename={this.onMainPanelItemRename}
diff --git a/frontend/src/utils/text-translation.js b/frontend/src/utils/text-translation.js
index d486b9c0a0..ae6481d880 100644
--- a/frontend/src/utils/text-translation.js
+++ b/frontend/src/utils/text-translation.js
@@ -19,6 +19,8 @@ const TextTranslation = {
'COMMENT' : {key : 'Comment', value : gettext('Comment')},
'HISTORY' : {key : 'History', value : gettext('History')},
'ACCESS_LOG' : {key : 'Access Log', value : gettext('Access Log')},
+ 'TAGS': {key: 'Tags', value: gettext('Tags')},
+ 'RELATED_FILES': {key: 'Related Files', value: gettext('Related Files')},
};
export default TextTranslation;
\ No newline at end of file
diff --git a/media/css/seahub_react.css b/media/css/seahub_react.css
index 333ee307aa..86ddcc8676 100644
--- a/media/css/seahub_react.css
+++ b/media/css/seahub_react.css
@@ -907,6 +907,10 @@ table td {
background-color: #f8f8f8;
}
+.tr-active {
+ background-color: #eee !important;
+}
+
/* table-item reanme-component */
.rename-container input {
box-sizing: content-box;