From 1f016ff0468570a186e2ed7d591b1ce3b2587555 Mon Sep 17 00:00:00 2001 From: llj Date: Thu, 17 Jan 2019 17:05:08 +0800 Subject: [PATCH] [dirent details panel] fixup & improvement (#2844) * [dirent details panel] fixup & improvement * [my libs] details: click item to show details when details panel is open --- frontend/src/components/dir-view/dir-panel.js | 8 ++++++++ .../components/dirent-detail/detail-list-view.js | 6 +++--- .../components/dirent-list-view/dirent-list-item.js | 11 ++++++++++- .../components/dirent-list-view/dirent-list-view.js | 2 ++ frontend/src/pages/my-libs/content.js | 2 ++ frontend/src/pages/my-libs/item.js | 13 +++++++++++-- frontend/src/pages/my-libs/my-libs.js | 7 +++++++ frontend/src/pages/my-libs/table-body.js | 4 +++- frontend/src/pages/repo-wiki-mode/main-panel.js | 8 ++++++++ 9 files changed, 54 insertions(+), 7 deletions(-) diff --git a/frontend/src/components/dir-view/dir-panel.js b/frontend/src/components/dir-view/dir-panel.js index 3d2c93322b..548943106b 100644 --- a/frontend/src/components/dir-view/dir-panel.js +++ b/frontend/src/components/dir-view/dir-panel.js @@ -84,6 +84,13 @@ class DirPanel extends React.Component { this.props.onItemClick(dirent); } + // on '' + onDirentClick = (dirent) => { + if (this.state.isDirentDetailShow) { + this.onItemDetails(dirent); + } + } + onItemDetails = (dirent) => { this.setState({ currentDirent: dirent, @@ -205,6 +212,7 @@ class DirPanel extends React.Component { isAllItemSelected={this.props.isAllDirentSelected} isRepoOwner={this.state.isRepoOwner} onAddFile={this.props.onAddFile} + onDirentClick={this.onDirentClick} onItemDetails={this.onItemDetails} onItemMove={this.props.onItemMove} onItemCopy={this.props.onItemCopy} diff --git a/frontend/src/components/dirent-detail/detail-list-view.js b/frontend/src/components/dirent-detail/detail-list-view.js index 3e5df92880..6b0e2efaf2 100644 --- a/frontend/src/components/dirent-detail/detail-list-view.js +++ b/frontend/src/components/dirent-detail/detail-list-view.js @@ -86,7 +86,7 @@ class DetailListView extends React.Component { {gettext('Folder')}{direntDetail.dir_count} {gettext('File')}{direntDetail.file_count} {gettext('Size')}{Utils.bytesToSize(direntDetail.size)} - {gettext('Position')}{position} + {gettext('Location')}{position} {gettext('Last Update')}{moment(direntDetail.mtime).format('YYYY-MM-DD')} @@ -99,8 +99,8 @@ class DetailListView extends React.Component { - {gettext('Size')}{direntDetail.size} - {gettext('Position')}{position} + {gettext('Size')}{Utils.bytesToSize(direntDetail.size)} + {gettext('Location')}{position} {gettext('Last Update')}{moment(direntDetail.last_modified).fromNow()} {gettext('Tags')} 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 9873246e13..ab5680b665 100644 --- a/frontend/src/components/dirent-list-view/dirent-list-item.js +++ b/frontend/src/components/dirent-list-view/dirent-list-item.js @@ -32,6 +32,7 @@ const propTypes = { onItemMove: PropTypes.func.isRequired, onItemCopy: PropTypes.func.isRequired, onItemDetails: PropTypes.func.isRequired, + onDirentClick: PropTypes.func.isRequired, updateDirent: PropTypes.func.isRequired, currentRepoInfo: PropTypes.object, isRepoOwner: PropTypes.bool, @@ -111,6 +112,14 @@ class DirentListItem extends React.Component { } } + // on '' + onDirentClick = (e) => { + // '' is clicked + if (e.target.tagName == 'TD') { + this.props.onDirentClick(this.props.dirent); + } + } + onItemClick = (e) => { e.preventDefault(); @@ -383,7 +392,7 @@ class DirentListItem extends React.Component { return ( - + 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 07376ee661..8a1c45c25b 100644 --- a/frontend/src/components/dirent-list-view/dirent-list-view.js +++ b/frontend/src/components/dirent-list-view/dirent-list-view.js @@ -32,6 +32,7 @@ const propTypes = { onItemClick: PropTypes.func.isRequired, onItemMove: PropTypes.func.isRequired, onItemCopy: PropTypes.func.isRequired, + onDirentClick: PropTypes.func.isRequired, onItemDetails: PropTypes.func.isRequired, updateDirent: PropTypes.func.isRequired, }; @@ -248,6 +249,7 @@ class DirentListView extends React.Component { isItemFreezed={this.state.isItemFreezed} onFreezedItem={this.onFreezedItem} onUnfreezedItem={this.onUnfreezedItem} + onDirentClick={this.props.onDirentClick} onItemDetails={this.onItemDetails} showImagePopup={this.showImagePopup} /> diff --git a/frontend/src/pages/my-libs/content.js b/frontend/src/pages/my-libs/content.js index 2a59a7b778..373121cc7a 100644 --- a/frontend/src/pages/my-libs/content.js +++ b/frontend/src/pages/my-libs/content.js @@ -19,6 +19,7 @@ const propTypes = { onDeleteRepo: PropTypes.func.isRequired, onTransferRepo: PropTypes.func.isRequired, onRepoDetails: PropTypes.func.isRequired, + onItemClick: PropTypes.func.isRequired }; class Content extends Component { @@ -138,6 +139,7 @@ class Content extends Component { onRenameRepo={this.props.onRenameRepo} onDeleteRepo={this.props.onDeleteRepo} onRepoDetails={this.props.onRepoDetails} + onItemClick={this.props.onItemClick} onTransfer={this.onTransfer} showDeleteItemPopup={this.showDeleteItemPopup} onHistorySetting={this.onHistorySetting} diff --git a/frontend/src/pages/my-libs/item.js b/frontend/src/pages/my-libs/item.js index 6399353b2c..abd43a8fd6 100644 --- a/frontend/src/pages/my-libs/item.js +++ b/frontend/src/pages/my-libs/item.js @@ -21,6 +21,7 @@ const propTypes = { showDeleteItemPopup: PropTypes.func.isRequired, onHistorySetting: PropTypes.func.isRequired, onRepoDetails: PropTypes.func.isRequired, + onItemClick: PropTypes.func.isRequired } class Item extends Component { @@ -149,6 +150,14 @@ class Item extends Component { folderPerm = () => { } + // on '' + onItemClick = (e) => { + // '' is clicked + if (e.target.tagName == 'TD') { + this.props.onItemClick(this.props.data); + } + } + showDetails = () => { let data = this.props.data; this.props.onRepoDetails(data); @@ -239,7 +248,7 @@ class Item extends Component { const desktopItem = ( - + {data.icon_title} {this.state.showChangeLibName && ( @@ -277,7 +286,7 @@ class Item extends Component { const mobileItem = ( - + {data.icon_title} {data.repo_name ? diff --git a/frontend/src/pages/my-libs/my-libs.js b/frontend/src/pages/my-libs/my-libs.js index 51e2b78d49..564af1003a 100644 --- a/frontend/src/pages/my-libs/my-libs.js +++ b/frontend/src/pages/my-libs/my-libs.js @@ -103,6 +103,12 @@ class MyLibraries extends Component { this.setState({items: items}); } + onItemClick = (repo) => { + if (this.state.isShowDetails) { + this.onRepoDetails(repo); + } + } + onRepoDetails = (repo) => { this.setState({ isShowDetails: true, @@ -140,6 +146,7 @@ class MyLibraries extends Component { onRenameRepo={this.onRenameRepo} onTransferRepo={this.onTransferRepo} onRepoDetails={this.onRepoDetails} + onItemClick={this.onItemClick} /> diff --git a/frontend/src/pages/my-libs/table-body.js b/frontend/src/pages/my-libs/table-body.js index 628fe969eb..82d46d95cb 100644 --- a/frontend/src/pages/my-libs/table-body.js +++ b/frontend/src/pages/my-libs/table-body.js @@ -10,6 +10,7 @@ const propTypes = { showDeleteItemPopup: PropTypes.func.isRequired, onHistorySetting: PropTypes.func.isRequired, onRepoDetails: PropTypes.func.isRequired, + onItemClick: PropTypes.func.isRequired }; class TableBody extends Component { @@ -39,6 +40,7 @@ class TableBody extends Component { showDeleteItemPopup={this.props.showDeleteItemPopup} onHistorySetting={this.props.onHistorySetting} onRepoDetails={this.props.onRepoDetails} + onItemClick={this.props.onItemClick} /> ); }); @@ -51,4 +53,4 @@ class TableBody extends Component { TableBody.propTypes = propTypes; -export default TableBody; \ No newline at end of file +export default TableBody; diff --git a/frontend/src/pages/repo-wiki-mode/main-panel.js b/frontend/src/pages/repo-wiki-mode/main-panel.js index af505ef4c3..30f4ccb4b8 100644 --- a/frontend/src/pages/repo-wiki-mode/main-panel.js +++ b/frontend/src/pages/repo-wiki-mode/main-panel.js @@ -121,6 +121,13 @@ class MainPanel extends Component { this.props.onMainNavBarClick(path); } + // on '' + onDirentClick = (dirent) => { + if (this.state.isDirentDetailShow) { + this.onItemDetails(dirent); + } + } + onItemDetails = (dirent) => { this.setState({ currentDirent: dirent, @@ -255,6 +262,7 @@ class MainPanel extends Component { onItemRename={this.props.onItemRename} onItemMove={this.props.onItemMove} onItemCopy={this.props.onItemCopy} + onDirentClick={this.onDirentClick} onItemDetails={this.onItemDetails} isDirentListLoading={this.props.isDirentListLoading} updateDirent={this.props.updateDirent}