File chooser improve (#2790)

frontend/src/components/dirent-detail/dirent-details.js

@@ -101,7 +101,7 @@ class DirentDetail extends React.Component {
           <div className="detail-control sf2-icon-x1" onClick={this.props.onItemDetailsClose}></div>
           <div className="detail-title dirent-title">
             <img src={dirent.type === 'dir' ? siteRoot + 'media/img/folder-192.png' : siteRoot + 'media/img/file/192/txt.png'} alt="icon"></img>
-            <span className="name">{dirent.name}</span>
+            <span className="name ellipsis" title={dirent.name}>{dirent.name}</span>
           </div>
         </div>
         <div className="detail-body dirent-info">

frontend/src/components/dirent-detail/lib-details.js

@@ -36,7 +36,7 @@ class LibDetail extends React.Component {
           <div className="detail-control sf2-icon-x1" onClick={this.props.closeDetails}></div>
           <div className="detail-title dirent-title">
             <img src={siteRoot + 'media/img/lib/256/lib.png'} alt="icon"></img>{'  '}
-            <span className="name">{repo.repo_name}</span>
+            <span className="name ellipsis" title={repo.repo_name}>{repo.repo_name}</span>
           </div>
         </div>
         <div className="detail-body dirent-info">

frontend/src/components/file-chooser/dirent-list-item.js

@@ -29,7 +29,13 @@ class DirentListItem extends React.Component {
   }
 
   onItemClick = () => {
+    if (this.props.selectedPath !== this.state.filePath) {
       this.props.onDirentItemClick(this.state.filePath, this.props.dirent);
+    } else {
+      if (this.props.dirent.type === 'dir') {
+        this.onToggleClick();
+      }
+    }
   }
 
   onToggleClick = () => {
@@ -37,13 +43,14 @@ class DirentListItem extends React.Component {
       seafileAPI.listDir(this.props.repo.repo_id, this.state.filePath).then(res => {
         let direntList = [];
         res.data.forEach(item => {
-          if (this.props.isShowFile === true) {
+          if (this.props.isShowFile === true) { // show dir and file
+            let dirent = new Dirent(item);
+            direntList.push(dirent);
+          } else { // just show dir
+            if (item.type === 'dir') {
               let dirent = new Dirent(item);
               direntList.push(dirent);
             }
-          else if (item.type === 'dir') {
-            let dirent = new Dirent(item);
-            direntList.push(dirent);
           }
           this.setState({
             hasRequest: true,
@@ -93,7 +100,7 @@ class DirentListItem extends React.Component {
         }
         <span className={`item-info ${this.state.filePath === this.props.selectedPath ? 'item-active' : ''}`} onClick={this.onItemClick}>
           <span className={`icon far ${this.props.dirent.type === 'dir' ? 'fa-folder' : 'fa-file'}`}></span>
-          <span className="name">{this.props.dirent && this.props.dirent.name}</span>
+          <span className="name user-select-none ellipsis">{this.props.dirent && this.props.dirent.name}</span>
         </span>
         {this.state.isShowChildren && this.renderChildren()}
       </li>

frontend/src/components/file-chooser/repo-list-item.js

@@ -31,12 +31,21 @@ class RepoListItem extends React.Component {
   }
 
   onRepoItemClick = () => {
+    if (!this.isCurrentRepo()) {
       this.props.onRepoItemClick(this.props.repo);
+    } else {
+      this.onToggleClick();
+    }
+  }
+
+  isCurrentRepo = () => {
+    let { selectedRepo, repo } = this.props;
+    return selectedRepo && (repo.repo_id === selectedRepo.repo_id);
   }
 
   render() {
     let repoActive = false;
-    let isCurrentRepo = this.props.selectedRepo && (this.props.repo.repo_id === this.props.selectedRepo.repo_id);
+    let isCurrentRepo = this.isCurrentRepo();
     if (isCurrentRepo && !this.props.selectedPath) {
       repoActive = true;
     }
@@ -45,7 +54,7 @@ class RepoListItem extends React.Component {
         <span className={`item-toggle fa ${this.state.isShowChildren ? 'fa-caret-down' : 'fa-caret-right'}`} onClick={this.onToggleClick}></span>
         <span className={`item-info ${repoActive ? 'item-active' : ''}`} onClick={this.onRepoItemClick}>
           <span className="icon far fa-folder"></span>
-          <span className="name">{this.props.repo.repo_name}</span>
+          <span className="name user-select-none ellipsis">{this.props.repo.repo_name}</span>
         </span>
         {this.state.isShowChildren && (
           <DirentListView 

frontend/src/css/dirent-detail.css

@@ -16,24 +16,30 @@
 }
 
 .detail-header .detail-control {
-  position: absolute;
+  padding-left: 0.5rem;
   font-size: 16px;
   color: #b9b9b9;
-  left: 0.5rem;
 }
 
 .detail-header .detail-control:hover {
   color: #888;
 }
 
+.detail-header .detail-title {
+  margin-left: 0.25rem;
+  display: flex;
+  flex: 1;
+  justify-content: center;
+  width: 0; /* prevent strut flex layout */
+}
+
 .detail-header .detail-title img{
   width: 1.5rem;
   height: 1.5rem;
 }
 
 .detail-header .detail-title .name {
-  display: inline-block;
-  margin-left: 0.25rem;
+  margin: 0 0.5rem 0 0.25rem;
   line-height: 1.5rem;
   vertical-align: middle;
   font-size: 1rem;

frontend/src/css/file-chooser.css

@@ -43,10 +43,10 @@
 }
 
 .file-chooser-item .item-info {
-  display: inline-block;
+  display: flex;
   height: 1.5rem;
   cursor: pointer;
-  padding: 0 5px;
+  padding: 0;
 }
 
 .file-chooser-item .item-info:hover {
@@ -62,10 +62,17 @@
 }
 
 .file-chooser-item .item-info .icon {
+  display: flex;
+  justify-content: center;
+  align-items: center;
   color: #b0b0b0;
   width: 1.5rem;
   height: 1.5rem;
 }
 
+.file-chooser-item .item-info .name {
+  flex: 1;
+}
+