[onlyoffice file view] added a custom toolbar(star/unstar, smart link… (#6880)

* [onlyoffice file view] added a custom toolbar(star/unstar, smart link, details, open parent folder, fold/unfold)

* [onlyoffice file view] added a new 'details' panel for it

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

@@ -2,12 +2,16 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import watermark from 'watermark-dom';
 import { seafileAPI } from '../../utils/seafile-api';
-import { siteName } from '../../utils/constants';
+import { gettext, siteName } from '../../utils/constants';
 import { Utils } from '../../utils/utils';
 import toaster from '../toast';
+import IconButton from '../icon-button';
 import FileInfo from './file-info';
 import FileToolbar from './file-toolbar';
+import OnlyofficeFileToolbar from './onlyoffice-file-toolbar';
 import FileDetails from '../dirent-detail/old-file-details';
+import EmbeddedFileDetails from '../dirent-detail/embedded-file-details';
+import { CollaboratorsProvider, EnableMetadataProvider } from '../../metadata';
 
 import '../../css/file-view.css';
 
@@ -16,16 +20,16 @@ const propTypes = {
   content: PropTypes.object.isRequired,
   isSaving: PropTypes.bool,
   needSave: PropTypes.bool,
+  isOnlyofficeFile: PropTypes.bool,
   participants: PropTypes.array,
   onParticipantsChange: PropTypes.func,
 };
 
 const { isStarred, isLocked, lockedByMe,
-  repoID, filePath, enableWatermark, userNickName,
+  repoID, filePath, filePerm, enableWatermark, userNickName,
   repoName, parentDir, fileName
 } = window.app.pageOptions;
 
-
 class FileView extends React.Component {
 
   constructor(props) {
@@ -34,6 +38,7 @@ class FileView extends React.Component {
       isStarred: isStarred,
       isLocked: isLocked,
       lockedByMe: lockedByMe,
+      isHeaderShown: true,
       isDetailsPanelOpen: false
     };
   }
@@ -93,38 +98,76 @@ class FileView extends React.Component {
     }
   };
 
+  toggleHeader = () => {
+    this.setState({
+      isHeaderShown: !this.state.isHeaderShown
+    });
+  };
+
   render() {
-    const { isDetailsPanelOpen } = this.state;
+    const { isOnlyofficeFile = false } = this.props;
+    const { isDetailsPanelOpen, isHeaderShown } = this.state;
     return (
       <div className="h-100 d-flex flex-column">
-        <div className="file-view-header d-flex justify-content-between align-items-center d-print-none">
+        <div className={`file-view-header d-flex justify-content-between align-items-center d-print-none ${isOnlyofficeFile ? (isHeaderShown ? 'onlyoffice-file-view-header-shown' : 'onlyoffice-file-view-header-hidden') : ''}`}>
           <FileInfo
             isStarred={this.state.isStarred}
             isLocked={this.state.isLocked}
             toggleStar={this.toggleStar}
+            isOnlyofficeFile={isOnlyofficeFile}
           />
-          <FileToolbar
-            isLocked={this.state.isLocked}
-            lockedByMe={this.state.lockedByMe}
-            onSave={this.props.onSave}
-            isSaving={this.props.isSaving}
-            needSave={this.props.needSave}
-            toggleLockFile={this.toggleLockFile}
-            toggleDetailsPanel={this.toggleDetailsPanel}
-          />
-        </div>
-        <div className="file-view-body flex-auto d-flex o-hidden">
-          {this.props.content}
-          {isDetailsPanelOpen &&
-          <FileDetails
-            repoID={repoID}
-            repoName={repoName}
-            path={parentDir}
-            dirent={{ 'name': fileName, type: 'file' }}
-            togglePanel={this.toggleDetailsPanel}
-          />
+          {isOnlyofficeFile ?
+            <OnlyofficeFileToolbar
+              toggleDetailsPanel={this.toggleDetailsPanel}
+              toggleHeader={this.toggleHeader}
+            /> :
+            <FileToolbar
+              isLocked={this.state.isLocked}
+              lockedByMe={this.state.lockedByMe}
+              onSave={this.props.onSave}
+              isSaving={this.props.isSaving}
+              needSave={this.props.needSave}
+              toggleLockFile={this.toggleLockFile}
+              toggleDetailsPanel={this.toggleDetailsPanel}
+            />
           }
         </div>
+        <div className={`file-view-body flex-auto d-flex o-hidden ${(isOnlyofficeFile && !isHeaderShown) ? 'position-relative' : ''}`}>
+          {(isOnlyofficeFile && !isHeaderShown) &&
+            <IconButton
+              id="unfold-onlyoffice-file-view-header"
+              icon='double-arrow-down'
+              text={gettext('Unfold')}
+              onClick={this.toggleHeader}
+            />
+          }
+          {this.props.content}
+          {isDetailsPanelOpen && (
+            <>
+              {isOnlyofficeFile ?
+                <EnableMetadataProvider repoID={repoID} >
+                  <CollaboratorsProvider repoID={repoID}>
+                    <EmbeddedFileDetails
+                      repoID={repoID}
+                      path={filePath}
+                      dirent={{ 'name': fileName, type: 'file' }}
+                      repoInfo={{ permission: filePerm }}
+                      onClose={this.toggleDetailsPanel}
+                    />
+                  </CollaboratorsProvider>
+                </EnableMetadataProvider>
+                :
+                <FileDetails
+                  repoID={repoID}
+                  repoName={repoName}
+                  path={parentDir}
+                  dirent={{ 'name': fileName, type: 'file' }}
+                  togglePanel={this.toggleDetailsPanel}
+                />
+              }
+            </>
+          )}
+        </div>
       </div>
     );
   }