File view op (#4836)

* [file view] added 'Details' & 'open via client'

* [file view] adjusted places of operations

* [file view] 'open via client': use a new icon

* [file view] 'open via client': updated the icon

frontend/src/components/file-view/file-toolbar.js

@@ -1,6 +1,6 @@
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { ButtonGroup, Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
+import { ButtonGroup, ButtonDropdown, Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
 import IconButton from '../icon-button';
 import { gettext, siteRoot } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
@@ -14,11 +14,12 @@ const propTypes = {
   isSaving: PropTypes.bool,
   needSave: PropTypes.bool,
   toggleLockFile: PropTypes.func.isRequired,
-  toggleCommentPanel: PropTypes.func.isRequired
+  toggleCommentPanel: PropTypes.func.isRequired,
+  toggleDetailsPanel: PropTypes.func.isRequired
 };
 
 const {
-  canLockUnlockFile, canGenerateShareLink,
+  canLockUnlockFile,
   repoID, repoName, repoEncrypted, parentDir, filePerm, filePath,
   fileName,
   canEditFile, err,
@@ -32,7 +33,8 @@ class FileToolbar extends React.Component {
     super(props);
     this.state = {
       dropdownOpen: false,
-      isShareDialogOpen: false
+      moreDropdownOpen: false,
+      isShareDialogOpen: false,
     };
   }
 
@@ -40,14 +42,25 @@ class FileToolbar extends React.Component {
     this.setState({isShareDialogOpen: !this.state.isShareDialogOpen});
   }
 
+  toggleMoreOpMenu = () => {
+    this.setState({
+      moreDropdownOpen: !this.state.moreDropdownOpen
+    });
+  }
+
   toggle = () => {
     this.setState({
       dropdownOpen: !this.state.dropdownOpen
     });
   }
 
+  openFileViaClient = () => {
+    location.href = `seafile://openfile?repo_id=${encodeURIComponent(repoID)}&path=${encodeURIComponent(filePath)}`;
+  }
+
   render() {
     const { isLocked, lockedByMe } = this.props;
+    const { moreDropdownOpen } = this.state;
     let showLockUnlockBtn = false;
     let lockUnlockText, lockUnlockIcon;
     if (canLockUnlockFile) {
@@ -95,15 +108,7 @@ class FileToolbar extends React.Component {
               onClick={this.toggleShareDialog}
             />
           )}
-          {filePerm == 'rw' && (
-            <IconButton
-              id="history"
-              icon="fa fa-history"
-              text={gettext('History')}
-              tag="a"
-              href={`${siteRoot}repo/file_revisions/${repoID}/?p=${encodeURIComponent(filePath)}`}
-            />
-          )}
+
           {(canEditFile && !err) &&
             ( this.props.isSaving ?
               <button type={'button'} className={'btn btn-icon btn-secondary btn-active'}>
@@ -132,14 +137,40 @@ class FileToolbar extends React.Component {
               href="?dl=1"
             />
           )}
-          {enableComment && (
+          <IconButton
+            id="file-details"
+            icon='fas fa-info'
+            text={gettext('Details')}
+            onClick={this.props.toggleDetailsPanel}
+          />
+          {filePerm == 'rw' && (
             <IconButton
-              id="comment"
-              icon="fa fa-comments"
-              text={gettext('Comment')}
-              onClick={this.props.toggleCommentPanel}
+              id="open-via-client"
+              icon="sf3-font sf3-font-desktop"
+              text={gettext('Open via Client')}
+              tag="a"
+              href={`seafile://openfile?repo_id=${encodeURIComponent(repoID)}&path=${encodeURIComponent(filePath)}`}
             />
           )}
+          <ButtonDropdown isOpen={moreDropdownOpen} toggle={this.toggleMoreOpMenu}>
+            <DropdownToggle>
+              <span className="fas fa-ellipsis-v"></span>
+            </DropdownToggle>
+            <DropdownMenu right={true}>
+              {enableComment && (
+                <DropdownItem onClick={this.props.toggleCommentPanel}>
+                  {gettext('Comment')}
+                </DropdownItem>
+              )}
+              {filePerm == 'rw' && (
+                <DropdownItem>
+                  <a href={`${siteRoot}repo/file_revisions/${repoID}/?p=${encodeURIComponent(filePath)}&referer=${encodeURIComponent(location.href)}`} className="text-inherit">
+                    {gettext('History')}
+                  </a>
+                </DropdownItem>
+              )}
+            </DropdownMenu>
+          </ButtonDropdown>
         </ButtonGroup>
 
         <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle} className="d-block d-md-none">
@@ -202,6 +233,7 @@ class FileToolbar extends React.Component {
                 {gettext('Comment')}
               </DropdownItem>
             )}
+            <DropdownItem onClick={this.props.toggleDetailsPanel}>{gettext('Details')}</DropdownItem>
           </DropdownMenu>
         </Dropdown>
 

frontend/src/components/file-view/file-view.js

@@ -8,6 +8,7 @@ import toaster from '../toast';
 import FileInfo from './file-info';
 import FileToolbar from './file-toolbar';
 import CommentPanel from './comment-panel';
+import FileDetails from '../dirent-detail/file-details';
 
 import '../../css/file-view.css';
 
@@ -21,7 +22,8 @@ const propTypes = {
 };
 
 const { isStarred, isLocked, lockedByMe,
-  repoID, filePath, enableWatermark, userNickName
+  repoID, filePath, enableWatermark, userNickName,
+  repoName, parentDir, fileName
 } = window.app.pageOptions;
 
 
@@ -34,9 +36,14 @@ class FileView extends React.Component {
       isLocked: isLocked,
       lockedByMe: lockedByMe,
       isCommentPanelOpen: false,
+      isDetailsPanelOpen: false
     };
   }
 
+  toggleDetailsPanel = () => {
+    this.setState({isDetailsPanelOpen: !this.state.isDetailsPanelOpen});
+  }
+
   toggleCommentPanel = () => {
     this.setState({
       isCommentPanelOpen: !this.state.isCommentPanelOpen
@@ -90,6 +97,7 @@ class FileView extends React.Component {
   }
 
   render() {
+    const { isDetailsPanelOpen } = this.state;
     return (
       <div className="h-100 d-flex flex-column">
         <div className="file-view-header d-flex justify-content-between align-items-center">
@@ -106,6 +114,7 @@ class FileView extends React.Component {
             needSave={this.props.needSave}
             toggleLockFile={this.toggleLockFile}
             toggleCommentPanel={this.toggleCommentPanel}
+            toggleDetailsPanel={this.toggleDetailsPanel}
           />
         </div>
         <div className="file-view-body flex-auto d-flex o-hidden">
@@ -117,6 +126,15 @@ class FileView extends React.Component {
               onParticipantsChange={this.props.onParticipantsChange}
             />
           }
+          {isDetailsPanelOpen &&
+          <FileDetails
+            repoID={repoID}
+            repoName={repoName}
+            path={parentDir}
+            dirent={{'name': fileName, type: 'file'}}
+            togglePanel={this.toggleDetailsPanel}
+          />
+          }
         </div>
       </div>
     );