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

[dirent details panel] fixup & improvement (#2844)

Browse Source 
* [dirent details panel] fixup & improvement

* [my libs] details: click item to show details when details panel is open
This commit is contained in:
llj
2019-01-17 17:05:08 +08:00
committed by Daniel Pan
parent 4444a4120a
commit 1f016ff046
9 changed files with 54 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/src/components/dir-view/dir-panel.js
View File

@@ -84,6 +84,13 @@ class DirPanel extends React.Component {
this.props.onItemClick(dirent);
}
// on '<tr>'
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}

6
frontend/src/components/dirent-detail/detail-list-view.js
View File

@@ -86,7 +86,7 @@ class DetailListView extends React.Component {
<tr><th>{gettext('Folder')}</th><td>{direntDetail.dir_count}</td></tr>
<tr><th>{gettext('File')}</th><td>{direntDetail.file_count}</td></tr>
<tr><th>{gettext('Size')}</th><td>{Utils.bytesToSize(direntDetail.size)}</td></tr>
<tr><th>{gettext('Position')}</th><td>{position}</td></tr>
<tr><th>{gettext('Location')}</th><td>{position}</td></tr>
<tr><th>{gettext('Last Update')}</th><td>{moment(direntDetail.mtime).format('YYYY-MM-DD')}</td></tr>
</tbody>
</table>
@@ -99,8 +99,8 @@ class DetailListView extends React.Component {
<tr><th width="35%"></th><th width="65%"></th></tr>
</thead>
<tbody>
<tr><th>{gettext('Size')}</th><td>{direntDetail.size}</td></tr>
<tr><th>{gettext('Position')}</th><td>{position}</td></tr>
<tr><th>{gettext('Size')}</th><td>{Utils.bytesToSize(direntDetail.size)}</td></tr>
<tr><th>{gettext('Location')}</th><td>{position}</td></tr>
<tr><th>{gettext('Last Update')}</th><td>{moment(direntDetail.last_modified).fromNow()}</td></tr>
<tr className="file-tag-container">
<th>{gettext('Tags')}</th>

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

@@ -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 '<tr>'
onDirentClick = (e) => {
// '<td>' 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 (
<Fragment>
<tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave}>
<tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseEnter={this.onMouseEnter} onMouseOver={this.onMouseOver} onMouseLeave={this.onMouseLeave} onClick={this.onDirentClick}>
<td className="text-center">
<input type="checkbox" className="vam" onChange={this.onItemSelected} checked={dirent.isSelected}/>
</td>

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

@@ -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}
/>

2
frontend/src/pages/my-libs/content.js
View File

@@ -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}

13
frontend/src/pages/my-libs/item.js
View File

@@ -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 '<tr>'
onItemClick = (e) => {
// '<td>' 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 = (
<Fragment>
<tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
<tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut} onClick={this.onItemClick}>
<td><img src={data.icon_url} title={data.icon_title} alt={data.icon_title} width="24" /></td>
<td>
{this.state.showChangeLibName && (
@@ -277,7 +286,7 @@ class Item extends Component {
const mobileItem = (
<Fragment>
<tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut}>
<tr className={this.state.highlight ? 'tr-highlight' : ''} onMouseOver={this.handleMouseOver} onMouseOut={this.handleMouseOut} onClick={this.onItemClick}>
<td><img src={data.icon_url} title={data.icon_title} alt={data.icon_title} width="24" /></td>
<td>
{data.repo_name ?

7
frontend/src/pages/my-libs/my-libs.js
View File

@@ -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}
/>
</div>
</div>

4
frontend/src/pages/my-libs/table-body.js
View File

@@ -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;
export default TableBody;

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

@@ -121,6 +121,13 @@ class MainPanel extends Component {
this.props.onMainNavBarClick(path);
}
// on '<tr>'
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}