Add the ability to create files and selected states

frontend/src/components/dir-view-mode/dir-grid-view.js

@@ -28,6 +28,8 @@ const propTypes = {
   updateDirent: PropTypes.func.isRequired,
   showShareBtn: PropTypes.bool.isRequired,
   showDirentDetail: PropTypes.func.isRequired,
+  onAddFolder: PropTypes.func.isRequired,
+  onDirentClick: PropTypes.func.isRequired,
 };
 
 class DirGridView extends React.Component {
@@ -74,6 +76,8 @@ class DirGridView extends React.Component {
           onGridItemClick={this.props.onGridItemClick}
           isDirentDetailShow={this.props.isDirentDetailShow}
           onItemRename={this.props.onItemRename}
+          onAddFolder={this.props.onAddFolder}
+          onDirentClick={this.props.onDirentClick}
         />
       </Fragment>
     );

frontend/src/components/dirent-grid-view/dirent-grid-item.js

@@ -9,14 +9,49 @@ const propTypes = {
   dirent: PropTypes.object.isRequired,
   onItemClick: PropTypes.func.isRequired,
   showImagePopup: PropTypes.func.isRequired,
-  handleContextClick: PropTypes.func.isRequired,
+  onGridItemContextmenu: PropTypes.func.isRequired,
+  onDirentClick: PropTypes.func.isRequired,
+  activeDirent: PropTypes.object,
+  onGridItemMouseDown: PropTypes.func,
 };
 
 class DirentGridItem extends React.Component {
 
+  constructor(props) {
+    super(props);
+    this.state = {
+      isGridSelect: false,
+    }
+  }
+
+  componentWillReceiveProps(nextProps) {
+    this.setState({isGridSelect: false}, () => {
+      if (nextProps.activeDirent && nextProps.activeDirent.name === nextProps.dirent.name) {
+        this.setState({isGridSelect: true});
+      }
+    })
+  }
+
   onItemClick = (e) => {
     e.preventDefault();
+    e.stopPropagation();
     
+    const dirent = this.props.dirent;
+    if (this.props.dirent === this.props.activeDirent) {
+      this.setState({isGridSelect:false})
+      if (Utils.imageCheck(dirent.name)) {
+        this.props.showImagePopup(dirent);
+      } else {
+        this.props.onItemClick(dirent);
+      }
+    } else {
+      this.setState({isGridSelect: true})
+      this.props.onDirentClick(this.props.dirent)
+    }
+  }
+
+  onItemLinkClick = (e) => {
+    e.preventDefault();
     const dirent = this.props.dirent;
     if (Utils.imageCheck(dirent.name)) {
       this.props.showImagePopup(dirent);
@@ -25,6 +60,10 @@ class DirentGridItem extends React.Component {
     }
   }
 
+  onGridItemMouseDown = (event) =>{
+    this.props.onGridItemMouseDown(event);
+  }
+
   getFileUrl = (url) => {
     let fileUrlArr = url.split('/');
     if (fileUrlArr.indexOf('48') !== -1) {
@@ -34,12 +73,9 @@ class DirentGridItem extends React.Component {
     return fileUrl;
   }
 
-  onItemContextMenu = (event) => {
-    this.handleContextClick(event);
-  }
-
-  handleContextClick = (event) => {
-    this.props.handleContextClick(event, this.props.dirent);
+  onGridItemContextmenu = (event) => {
+    let dirent = this.props.dirent;
+    this.props.onGridItemContextmenu(event, dirent);
   }
    
   render() {
@@ -57,9 +93,9 @@ class DirentGridItem extends React.Component {
 
     return(
       <Fragment>
-        <li className="grid-item" onContextMenu={this.onItemContextMenu}>
+        <li className="grid-item" onContextMenu={this.onGridItemContextmenu} onMouseDown={this.onGridItemMouseDown}>
           <div 
-            className="grid-file-img-link cursor-pointer"
+            className={`grid-file-img-link cursor-pointer ${this.state.isGridSelect ? "grid-selected-active" : ""}`}
             onClick={this.onItemClick}
           >
             {dirent.encoded_thumbnail_src ?
@@ -68,8 +104,8 @@ class DirentGridItem extends React.Component {
             }
             {dirent.is_locked && <img className="grid-file-locked-icon" src={mediaUrl + 'img/file-locked-32.png'} alt={gettext('locked')} title={dirent.lock_owner_name}/>}
           </div>
-          <div className="grid-file-name">
-            <a className="grid-file-name-link" href={dirent.type === 'dir' ? dirHref : fileHref} onClick={this.onItemClick}>{dirent.name}</a>
+          <div className={`grid-file-name ${this.state.isGridSelect ? "grid-link-selected-active" : ""}`}>
+            <a className="grid-file-name-link" href={dirent.type === 'dir' ? dirHref : fileHref} onClick={this.onItemLinkClick}>{dirent.name}</a>
           </div>
         </li>
       </Fragment>

frontend/src/components/dirent-grid-view/dirent-grid-view.js

@@ -16,6 +16,8 @@ import CopyDirentDialog from '../dialog/copy-dirent-dialog';
 import ShareDialog from '../dialog/share-dialog';
 import ZipDownloadDialog from '../dialog/zip-download-dialog';
 import Rename from '../../components/dialog/rename-grid-item-dialog';
+import CreateFile from '../dialog/create-file-dialog';
+import CreateFolder from '../dialog/create-folder-dialog';
 
 import '../../css/grid-view.css';
 
@@ -37,6 +39,8 @@ const propTypes = {
   updateDirent: PropTypes.func.isRequired,
   isDirentDetailShow: PropTypes.bool.isRequired,
   onGridItemClick: PropTypes.func,
+  onAddFolder: PropTypes.func.isRequired,
+  onDirentClick: PropTypes.func.isRequired,
 };
 
 class DirentGridView extends React.Component{
@@ -46,20 +50,36 @@ class DirentGridView extends React.Component{
       isImagePopupOpen: false,
       imageItems: [],
       imageIndex: 0,
-      isCreateFileDialogShow: false,
       // onmenuClick 
       isShareDialogShow: false,
       isMoveDialogShow: false,
       isCopyDialogShow: false,
       isZipDialogOpen: false,
       isRenameDialogShow: false,
+      isCreateFolderDialogShow: false,
+      isCreateFileDialogShow: false,
 
       isMutipleOperation: false,
       dirent: '',
+      isGridItemFreezed: false,
+      activeDirent: null,
+
     }
     this.isRepoOwner = props.currentRepoInfo.owner_email === username;
   }
 
+  onCreateFileToggle = () => {
+    this.setState({
+      isCreateFileDialogShow: !this.state.isCreateFileDialogShow,
+    });
+  }
+
+  onDirentClick = (dirent) => {
+    this.setState({activeDirent: dirent});
+    this.props.onDirentClick(dirent);
+    this.props.onGridItemClick(dirent)
+  }
+ 
   onMoveToggle = () => {
     this.setState({isMoveDialogShow: !this.state.isMoveDialogShow});
   }
@@ -73,6 +93,11 @@ class DirentGridView extends React.Component{
     this.props.onAddFile(filePath, isDraft);
   }
 
+  onAddFolder = (dirPath) => {
+    this.setState({isCreateFolderDialogShow: false});
+    this.props.onAddFolder(dirPath);
+  }
+
   onItemShare = (e) => {
     e.nativeEvent.stopImmediatePropagation(); //for document event
     this.setState({isShareDialogShow: !this.state.isShareDialogShow});
@@ -126,6 +151,12 @@ class DirentGridView extends React.Component{
       case 'Details':
         this.onDetails(currentObject);
         break;
+      case 'New Folder':
+        this.onCreateFolderToggle(currentObject);
+        break;
+      case 'New File':
+        this.onCreateFileToggle(currentObject);
+        break;
       case 'Access Log':
         this.onAccessLog();
         break;
@@ -168,6 +199,12 @@ class DirentGridView extends React.Component{
     }
   }
 
+  onCreateFolderToggle = () => {
+    this.setState({
+      isCreateFolderDialogShow: !this.state.isCreateFolderDialogShow,
+    });
+  }
+
   onItemRenameToggle = () => {
     this.setState({
       isRenameDialogShow: !this.state.isRenameDialogShow,
@@ -299,13 +336,42 @@ class DirentGridView extends React.Component{
     return isDuplicated;
   }
 
+  // common contextmenu handle
+  onMouseDown = (event) => {
+    event.stopPropagation();
+    if (event.button === 2) {
+      return;
+    }
+  }
+
+  onGridContainerMouseDown = (event) => {
+    this.onMouseDown(event)
+  }
+
+  onGridItemMouseDown = (event) => {
+    this.onMouseDown(event);
+  }
+
   gridContainerClick = () => {
     if (!this.props.isDirentDetailShow) {
       this.props.onGridItemClick(null);
     }
+    this.onDirentClick(null);
   }
 
-  handleContextClick = (event, currentObject) => {
+  onGridContainContextMenu = (event) => {
+      let id = "dirent-grid-container-menu"
+      let menuList = [TextTranslation.NEW_FOLDER, TextTranslation.NEW_FILE];
+      this.handleContextClick(event, id, menuList);
+  }
+
+  onGridItemContextmenu = (event, dirent) => {
+    let id = 'grid-item-contextmenu';
+    let menuList = this.getDirentItemMenuList(dirent, true);
+    this.handleContextClick(event, id, menuList, dirent);
+  }
+
+  handleContextClick = (event, id, menuList, currentObject = null) => {
     event.preventDefault();
     event.stopPropagation();
 
@@ -321,12 +387,10 @@ class DirentGridView extends React.Component{
 
     hideMenu();
     
-    let menuList = this.getDirentItemMenuList(currentObject, true);
-
     this.setState({dirent: currentObject});
 
     let showMenuConfig = {
-      id: 'grid-item-contextmenu',
+      id: id,
       position: { x, y },
       target: event.target,
       currentObject: currentObject,
@@ -415,7 +479,7 @@ class DirentGridView extends React.Component{
 
   render() {
     let {direntList, path} = this.props;
-    let dirent = this.state.dirent;
+    let dirent = this.state.dirent ? this.state.dirent : '';
     let direntPath = Utils.joinPath(path, dirent.name);
 
     if (this.props.isDirentListLoading) {
@@ -424,7 +488,7 @@ class DirentGridView extends React.Component{
   
     return (
       <Fragment>
-        <ul className="grid-view" onClick={this.gridContainerClick}>
+        <ul className="grid-view" onClick={this.gridContainerClick} onContextMenu={this.onGridContainContextMenu} onMouseDown={this.onGridContainerMouseDown}>
           {
             direntList.length !== 0 && direntList.map((dirent, index) => {
               return (
@@ -436,8 +500,11 @@ class DirentGridView extends React.Component{
                   onItemClick={this.props.onItemClick}
                   currentRepoInfo={this.props.currentRepoInfo}
                   showImagePopup={this.showImagePopup}
-                  handleContextClick={this.handleContextClick}
+                  onGridItemContextmenu={this.onGridItemContextmenu}
                   onItemMove={this.props.onItemMove}
+                  onGridItemMouseDown={this.onGridItemMouseDown}
+                  onDirentClick={this.onDirentClick}
+                  activeDirent={this.state.activeDirent}
                 />
               )
             })
@@ -447,6 +514,30 @@ class DirentGridView extends React.Component{
           id={'grid-item-contextmenu'}
           onMenuItemClick={this.onMenuItemClick}
         />
+        <ContextMenu 
+          id={'dirent-grid-container-menu'}
+          onMenuItemClick={this.onMenuItemClick}
+        />
+        {this.state.isCreateFolderDialogShow && (
+          <ModalPortal>
+            <CreateFolder
+              parentPath={this.props.path}
+              onAddFolder={this.onAddFolder}
+              checkDuplicatedName={this.checkDuplicatedName}
+              addFolderCancel={this.onCreateFolderToggle}
+            />
+          </ModalPortal>
+        )} 
+        {this.state.isCreateFileDialogShow && (
+          <ModalPortal>
+            <CreateFile
+              parentPath={this.props.path}
+              onAddFile={this.onAddFile}
+              checkDuplicatedName={this.checkDuplicatedName}
+              addFileCancel={this.onCreateFileToggle}
+            />
+          </ModalPortal>
+        )}
         {this.state.isMoveDialogShow && 
           <MoveDirentDialog 
             path={this.props.path}

frontend/src/css/grid-view.css

@@ -72,3 +72,11 @@
   right: 10px;
   width: 16px;
 }
+
+.grid-selected-active {
+  background-color: #f8f8f8;
+}
+
+.grid-selected-link-active a{
+  color: #eb8205;
+}

frontend/src/pages/lib-content-view/lib-content-container.js

@@ -233,6 +233,7 @@ class LibContentContainer extends React.Component {
                     onGridItemClick={this.onGridItemClick}
                     isDirentDetailShow={this.props.isDirentDetailShow}
                     onItemRename={this.props.onItemRename}
+                    onDirentClick={this.onDirentClick}
                   />
                 )}
                 {this.props.currentMode === 'column' && (