[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

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

frontend/src/components/dirent-detail/detail-list-view.js

@@ -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('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.last_modified).fromNow()}</td></tr>
               <tr className="file-tag-container">
                 <th>{gettext('Tags')}</th>

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 '<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>

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

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}

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 '<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 ?

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

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

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

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