[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/dirent-detail/embedded-file-details/index.js

@@ -10,7 +10,7 @@ import { MetadataContext } from '../../../metadata';
 
 import './index.css';
 
-const EmbeddedFileDetails = ({ repoID, repoInfo, dirent, path, onClose, width = 300, className, component }) => {
+const EmbeddedFileDetails = ({ repoID, repoInfo, dirent, path, onClose, width = 300, className, component = {} }) => {
   const { headerComponent } = component;
   const [direntDetail, setDirentDetail] = useState('');
 

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

@@ -7,7 +7,8 @@ import InternalLinkOperation from '../operations/internal-link-operation';
 const propTypes = {
   toggleStar: PropTypes.func.isRequired,
   isLocked: PropTypes.bool.isRequired,
-  isStarred: PropTypes.bool.isRequired
+  isStarred: PropTypes.bool.isRequired,
+  isOnlyofficeFile: PropTypes.bool.isRequired
 };
 
 const { fileName, repoID, filePath,
@@ -26,7 +27,7 @@ class FileInfo extends React.PureComponent {
   };
 
   render() {
-    const { isStarred, isLocked } = this.props;
+    const { isStarred, isLocked, isOnlyofficeFile } = this.props;
     const starredText = isStarred ? gettext('starred') : gettext('unstarred');
     const lockedText = gettext('locked');
     return (
@@ -41,7 +42,7 @@ class FileInfo extends React.PureComponent {
             onClick={this.toggleStar}>
           </a>
           <InternalLinkOperation repoID={repoID} path={filePath} />
-          {(isPro && isLocked) &&
+          {(isPro && isLocked && !isOnlyofficeFile) &&
             <img className="file-locked-icon" width="16"
               src={`${mediaUrl}img/file-locked-32.png`}
               alt={lockedText}
@@ -50,10 +51,12 @@ class FileInfo extends React.PureComponent {
             />
           }
         </h2>
-        <div className="meta-info">
-          <a href={`${siteRoot}profile/${encodeURIComponent(latestContributor)}/`}>{latestContributorName}</a>
-          <span className="ml-2">{moment(lastModificationTime * 1000).format('YYYY-MM-DD HH:mm')}</span>
-        </div>
+        {!isOnlyofficeFile && (
+          <div className="meta-info">
+            <a href={`${siteRoot}profile/${encodeURIComponent(latestContributor)}/`}>{latestContributorName}</a>
+            <span className="ml-2">{moment(lastModificationTime * 1000).format('YYYY-MM-DD HH:mm')}</span>
+          </div>
+        )}
       </div>
     );
   }

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

@@ -84,8 +84,9 @@ class FileToolbar extends React.Component {
       return null;
     }
 
-    const { isLocked, lockedByMe } = this.props;
     const { moreDropdownOpen } = this.state;
+
+    const { isLocked, lockedByMe } = this.props;
     let showLockUnlockBtn = false;
     let lockUnlockText; let lockUnlockIcon;
     if (canLockUnlockFile) {

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>
     );
   }

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

@@ -0,0 +1,95 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import { Dropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
+import { gettext, siteRoot } from '../../utils/constants';
+import { Utils } from '../../utils/utils';
+import Icon from '../../components/icon';
+import IconButton from '../icon-button';
+
+const propTypes = {
+  toggleDetailsPanel: PropTypes.func.isRequired,
+  toggleHeader: PropTypes.func.isRequired
+};
+
+const {
+  repoID, repoName, parentDir
+} = window.app.pageOptions;
+
+class OnlyofficeFileToolbar extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      dropdownOpen: false,
+      moreDropdownOpen: false
+    };
+  }
+
+  toggleMoreOpMenu = () => {
+    this.setState({
+      moreDropdownOpen: !this.state.moreDropdownOpen
+    });
+  };
+
+  toggle = () => {
+    this.setState({
+      dropdownOpen: !this.state.dropdownOpen
+    });
+  };
+
+  render() {
+    const { moreDropdownOpen } = this.state;
+    return (
+      <Fragment>
+        <div className="d-none d-md-flex justify-content-between align-items-center flex-shrink-0 ml-4">
+          <IconButton
+            id="file-details"
+            icon='info'
+            text={gettext('Details')}
+            onClick={this.props.toggleDetailsPanel}
+          />
+          <Dropdown isOpen={moreDropdownOpen} toggle={this.toggleMoreOpMenu}>
+            <DropdownToggle
+              className="file-toolbar-btn"
+              aria-label={gettext('More operations')}
+              title={gettext('More operations')}
+              tag="div"
+            >
+              <Icon symbol="more-vertical" />
+            </DropdownToggle>
+            <DropdownMenu right={true}>
+              <a href={`${siteRoot}library/${repoID}/${Utils.encodePath(repoName + parentDir)}`} className="dropdown-item">
+                {gettext('Open parent folder')}
+              </a>
+            </DropdownMenu>
+          </Dropdown>
+          <IconButton
+            id="fold-header"
+            icon='double-arrow-up'
+            text={gettext('Fold')}
+            onClick={this.props.toggleHeader}
+          />
+        </div>
+
+        <Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle} className="d-block d-md-none flex-shrink-0 ml-4">
+          <DropdownToggle className="mx-1" aria-label={gettext('More operations')}>
+            <Icon symbol="more-vertical" />
+          </DropdownToggle>
+          <DropdownMenu right={true}>
+            <DropdownItem onClick={this.props.toggleHeader}>{gettext('Fold')}</DropdownItem>
+            <DropdownItem onClick={this.props.toggleDetailsPanel}>{gettext('Details')}</DropdownItem>
+            <DropdownItem>
+              <a href={`${siteRoot}library/${repoID}/${Utils.encodePath(repoName + parentDir)}`} className="text-inherit">
+                {gettext('Open parent folder')}
+              </a>
+            </DropdownItem>
+          </DropdownMenu>
+        </Dropdown>
+      </Fragment>
+    );
+  }
+}
+
+OnlyofficeFileToolbar.propTypes = propTypes;
+
+export default OnlyofficeFileToolbar;