Add sharing dialog and optimize nav-link style (#2580)

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

@@ -1,8 +1,8 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { gettext, siteRoot } from '../../utils/constants';
-import { seafileAPI } from '../../utils/seafile-api';
 import { Utils } from '../../utils/utils';
+import { seafileAPI } from '../../utils/seafile-api';
 import URLDecorator from '../../utils/url-decorator';
 import Toast from '../toast';
 import DirentMenu from './dirent-menu';
@@ -11,6 +11,7 @@ import ModalPortal from '../modal-portal';
 import ZipDownloadDialog from '../dialog/zip-download-dialog';
 import MoveDirentDialog from '../dialog/move-dirent-dialog';
 import CopyDirentDialog from '../dialog/copy-dirent-dialog';
+import ShareDialog from '../dialog/share-dialog';
 
 const propTypes = {
   path: PropTypes.string.isRequired,
@@ -45,6 +46,7 @@ class DirentListItem extends React.Component {
       isProgressDialogShow: false,
       isMoveDialogShow: false,
       isCopyDialogShow: false,
+      isShareDialogShow: false,
       isMutipleOperation: false,
     };
     this.zipToken = null;
@@ -148,6 +150,11 @@ class DirentListItem extends React.Component {
     this.props.onItemDelete(this.props.dirent);
   }
 
+  onItemShare = (e) => {
+    e.nativeEvent.stopImmediatePropagation(); //for document event
+    this.setState({isShareDialogShow: !this.state.isShareDialogShow});
+  }
+
   onMenuItemClick = (operation) => {
     switch(operation) {
     case 'Rename':
@@ -467,6 +474,17 @@ class DirentListItem extends React.Component {
             />
           </ModalPortal>
         }
+        {this.state.isShareDialogShow &&
+          <ModalPortal>
+            <ShareDialog 
+              isDir={dirent.isDir()}
+              itemPath={direntPath}
+              itemName={dirent.name}
+              repoID={this.props.repoID}
+              toggleDialog={this.onItemShare}
+            />
+          </ModalPortal>
+        }
       </Fragment>
     );
   }