mirror of
https://github.com/haiwen/seahub.git
synced 2025-09-13 05:39:59 +00:00
[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
This commit is contained in:
@@ -30,6 +30,7 @@ const entryFiles = {
|
|||||||
viewFileText: '/view-file-text.js',
|
viewFileText: '/view-file-text.js',
|
||||||
viewFileSdoc: '/view-file-sdoc.js',
|
viewFileSdoc: '/view-file-sdoc.js',
|
||||||
viewFileDocument: '/view-file-document.js',
|
viewFileDocument: '/view-file-document.js',
|
||||||
|
viewFileOnlyoffice: '/view-file-onlyoffice.js',
|
||||||
viewFileSpreadsheet: '/view-file-spreadsheet.js',
|
viewFileSpreadsheet: '/view-file-spreadsheet.js',
|
||||||
settings: '/settings.js',
|
settings: '/settings.js',
|
||||||
repoHistory: '/repo-history.js',
|
repoHistory: '/repo-history.js',
|
||||||
|
15
frontend/src/assets/icons/double-arrow-down.svg
Normal file
15
frontend/src/assets/icons/double-arrow-down.svg
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill:#999999;}
|
||||||
|
</style>
|
||||||
|
<title>unfold</title>
|
||||||
|
<g id="unfold">
|
||||||
|
<path id="形状结合" class="st0" d="M16,17.6c0.3,0,0.7-0.1,0.9-0.4l10.7-11c0.5-0.5,0.5-1.4,0-1.9c-0.5-0.5-1.3-0.5-1.8,0
|
||||||
|
l-9.8,10l-9.8-10c-0.5-0.5-1.3-0.5-1.8,0C4.1,4.6,4,5,4,5.3C4,5.7,4.1,6,4.4,6.3l10.7,11C15.3,17.5,15.7,17.6,16,17.6z M16,28
|
||||||
|
c0.3,0,0.7-0.1,0.9-0.4l10.7-11c0.5-0.5,0.5-1.4,0-1.9c-0.5-0.5-1.3-0.5-1.8,0l-9.8,10l-9.8-10c-0.5-0.5-1.3-0.5-1.8,0
|
||||||
|
C4.1,15,4,15.3,4,15.7s0.1,0.7,0.4,0.9l10.7,11C15.3,27.9,15.7,28,16,28z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 891 B |
15
frontend/src/assets/icons/double-arrow-up.svg
Normal file
15
frontend/src/assets/icons/double-arrow-up.svg
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||||
|
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||||
|
viewBox="0 0 32 32" style="enable-background:new 0 0 32 32;" xml:space="preserve">
|
||||||
|
<style type="text/css">
|
||||||
|
.st0{fill:#999999;}
|
||||||
|
</style>
|
||||||
|
<title>fold</title>
|
||||||
|
<g id="fold">
|
||||||
|
<path id="形状结合" class="st0" d="M16,14.4c0.3,0,0.7,0.1,0.9,0.4l10.7,11c0.5,0.5,0.5,1.4,0,1.9c-0.5,0.5-1.3,0.5-1.8,0
|
||||||
|
l-9.8-10l-9.8,10c-0.5,0.5-1.3,0.5-1.8,0C4.1,27.4,4,27,4,26.7c0-0.4,0.1-0.7,0.4-0.9l10.7-11C15.3,14.5,15.7,14.4,16,14.4z M16,4
|
||||||
|
c0.3,0,0.7,0.1,0.9,0.4l10.7,11c0.5,0.5,0.5,1.4,0,1.9c-0.5,0.5-1.3,0.5-1.8,0L16,7.3l-9.8,10c-0.5,0.5-1.3,0.5-1.8,0
|
||||||
|
C4.1,17,4,16.7,4,16.3c0-0.4,0.1-0.7,0.4-0.9l10.7-11C15.3,4.1,15.7,4,16,4z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
After Width: | Height: | Size: 893 B |
@@ -10,7 +10,7 @@ import { MetadataContext } from '../../../metadata';
|
|||||||
|
|
||||||
import './index.css';
|
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 { headerComponent } = component;
|
||||||
const [direntDetail, setDirentDetail] = useState('');
|
const [direntDetail, setDirentDetail] = useState('');
|
||||||
|
|
||||||
|
@@ -7,7 +7,8 @@ import InternalLinkOperation from '../operations/internal-link-operation';
|
|||||||
const propTypes = {
|
const propTypes = {
|
||||||
toggleStar: PropTypes.func.isRequired,
|
toggleStar: PropTypes.func.isRequired,
|
||||||
isLocked: PropTypes.bool.isRequired,
|
isLocked: PropTypes.bool.isRequired,
|
||||||
isStarred: PropTypes.bool.isRequired
|
isStarred: PropTypes.bool.isRequired,
|
||||||
|
isOnlyofficeFile: PropTypes.bool.isRequired
|
||||||
};
|
};
|
||||||
|
|
||||||
const { fileName, repoID, filePath,
|
const { fileName, repoID, filePath,
|
||||||
@@ -26,7 +27,7 @@ class FileInfo extends React.PureComponent {
|
|||||||
};
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { isStarred, isLocked } = this.props;
|
const { isStarred, isLocked, isOnlyofficeFile } = this.props;
|
||||||
const starredText = isStarred ? gettext('starred') : gettext('unstarred');
|
const starredText = isStarred ? gettext('starred') : gettext('unstarred');
|
||||||
const lockedText = gettext('locked');
|
const lockedText = gettext('locked');
|
||||||
return (
|
return (
|
||||||
@@ -41,7 +42,7 @@ class FileInfo extends React.PureComponent {
|
|||||||
onClick={this.toggleStar}>
|
onClick={this.toggleStar}>
|
||||||
</a>
|
</a>
|
||||||
<InternalLinkOperation repoID={repoID} path={filePath} />
|
<InternalLinkOperation repoID={repoID} path={filePath} />
|
||||||
{(isPro && isLocked) &&
|
{(isPro && isLocked && !isOnlyofficeFile) &&
|
||||||
<img className="file-locked-icon" width="16"
|
<img className="file-locked-icon" width="16"
|
||||||
src={`${mediaUrl}img/file-locked-32.png`}
|
src={`${mediaUrl}img/file-locked-32.png`}
|
||||||
alt={lockedText}
|
alt={lockedText}
|
||||||
@@ -50,10 +51,12 @@ class FileInfo extends React.PureComponent {
|
|||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
</h2>
|
</h2>
|
||||||
|
{!isOnlyofficeFile && (
|
||||||
<div className="meta-info">
|
<div className="meta-info">
|
||||||
<a href={`${siteRoot}profile/${encodeURIComponent(latestContributor)}/`}>{latestContributorName}</a>
|
<a href={`${siteRoot}profile/${encodeURIComponent(latestContributor)}/`}>{latestContributorName}</a>
|
||||||
<span className="ml-2">{moment(lastModificationTime * 1000).format('YYYY-MM-DD HH:mm')}</span>
|
<span className="ml-2">{moment(lastModificationTime * 1000).format('YYYY-MM-DD HH:mm')}</span>
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@@ -84,8 +84,9 @@ class FileToolbar extends React.Component {
|
|||||||
return null;
|
return null;
|
||||||
}
|
}
|
||||||
|
|
||||||
const { isLocked, lockedByMe } = this.props;
|
|
||||||
const { moreDropdownOpen } = this.state;
|
const { moreDropdownOpen } = this.state;
|
||||||
|
|
||||||
|
const { isLocked, lockedByMe } = this.props;
|
||||||
let showLockUnlockBtn = false;
|
let showLockUnlockBtn = false;
|
||||||
let lockUnlockText; let lockUnlockIcon;
|
let lockUnlockText; let lockUnlockIcon;
|
||||||
if (canLockUnlockFile) {
|
if (canLockUnlockFile) {
|
||||||
|
@@ -2,12 +2,16 @@ import React from 'react';
|
|||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import watermark from 'watermark-dom';
|
import watermark from 'watermark-dom';
|
||||||
import { seafileAPI } from '../../utils/seafile-api';
|
import { seafileAPI } from '../../utils/seafile-api';
|
||||||
import { siteName } from '../../utils/constants';
|
import { gettext, siteName } from '../../utils/constants';
|
||||||
import { Utils } from '../../utils/utils';
|
import { Utils } from '../../utils/utils';
|
||||||
import toaster from '../toast';
|
import toaster from '../toast';
|
||||||
|
import IconButton from '../icon-button';
|
||||||
import FileInfo from './file-info';
|
import FileInfo from './file-info';
|
||||||
import FileToolbar from './file-toolbar';
|
import FileToolbar from './file-toolbar';
|
||||||
|
import OnlyofficeFileToolbar from './onlyoffice-file-toolbar';
|
||||||
import FileDetails from '../dirent-detail/old-file-details';
|
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';
|
import '../../css/file-view.css';
|
||||||
|
|
||||||
@@ -16,16 +20,16 @@ const propTypes = {
|
|||||||
content: PropTypes.object.isRequired,
|
content: PropTypes.object.isRequired,
|
||||||
isSaving: PropTypes.bool,
|
isSaving: PropTypes.bool,
|
||||||
needSave: PropTypes.bool,
|
needSave: PropTypes.bool,
|
||||||
|
isOnlyofficeFile: PropTypes.bool,
|
||||||
participants: PropTypes.array,
|
participants: PropTypes.array,
|
||||||
onParticipantsChange: PropTypes.func,
|
onParticipantsChange: PropTypes.func,
|
||||||
};
|
};
|
||||||
|
|
||||||
const { isStarred, isLocked, lockedByMe,
|
const { isStarred, isLocked, lockedByMe,
|
||||||
repoID, filePath, enableWatermark, userNickName,
|
repoID, filePath, filePerm, enableWatermark, userNickName,
|
||||||
repoName, parentDir, fileName
|
repoName, parentDir, fileName
|
||||||
} = window.app.pageOptions;
|
} = window.app.pageOptions;
|
||||||
|
|
||||||
|
|
||||||
class FileView extends React.Component {
|
class FileView extends React.Component {
|
||||||
|
|
||||||
constructor(props) {
|
constructor(props) {
|
||||||
@@ -34,6 +38,7 @@ class FileView extends React.Component {
|
|||||||
isStarred: isStarred,
|
isStarred: isStarred,
|
||||||
isLocked: isLocked,
|
isLocked: isLocked,
|
||||||
lockedByMe: lockedByMe,
|
lockedByMe: lockedByMe,
|
||||||
|
isHeaderShown: true,
|
||||||
isDetailsPanelOpen: false
|
isDetailsPanelOpen: false
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
@@ -93,16 +98,29 @@ class FileView extends React.Component {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
toggleHeader = () => {
|
||||||
|
this.setState({
|
||||||
|
isHeaderShown: !this.state.isHeaderShown
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { isDetailsPanelOpen } = this.state;
|
const { isOnlyofficeFile = false } = this.props;
|
||||||
|
const { isDetailsPanelOpen, isHeaderShown } = this.state;
|
||||||
return (
|
return (
|
||||||
<div className="h-100 d-flex flex-column">
|
<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
|
<FileInfo
|
||||||
isStarred={this.state.isStarred}
|
isStarred={this.state.isStarred}
|
||||||
isLocked={this.state.isLocked}
|
isLocked={this.state.isLocked}
|
||||||
toggleStar={this.toggleStar}
|
toggleStar={this.toggleStar}
|
||||||
|
isOnlyofficeFile={isOnlyofficeFile}
|
||||||
/>
|
/>
|
||||||
|
{isOnlyofficeFile ?
|
||||||
|
<OnlyofficeFileToolbar
|
||||||
|
toggleDetailsPanel={this.toggleDetailsPanel}
|
||||||
|
toggleHeader={this.toggleHeader}
|
||||||
|
/> :
|
||||||
<FileToolbar
|
<FileToolbar
|
||||||
isLocked={this.state.isLocked}
|
isLocked={this.state.isLocked}
|
||||||
lockedByMe={this.state.lockedByMe}
|
lockedByMe={this.state.lockedByMe}
|
||||||
@@ -112,10 +130,33 @@ class FileView extends React.Component {
|
|||||||
toggleLockFile={this.toggleLockFile}
|
toggleLockFile={this.toggleLockFile}
|
||||||
toggleDetailsPanel={this.toggleDetailsPanel}
|
toggleDetailsPanel={this.toggleDetailsPanel}
|
||||||
/>
|
/>
|
||||||
|
}
|
||||||
</div>
|
</div>
|
||||||
<div className="file-view-body flex-auto d-flex o-hidden">
|
<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}
|
{this.props.content}
|
||||||
{isDetailsPanelOpen &&
|
{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
|
<FileDetails
|
||||||
repoID={repoID}
|
repoID={repoID}
|
||||||
repoName={repoName}
|
repoName={repoName}
|
||||||
@@ -124,6 +165,8 @@ class FileView extends React.Component {
|
|||||||
togglePanel={this.toggleDetailsPanel}
|
togglePanel={this.toggleDetailsPanel}
|
||||||
/>
|
/>
|
||||||
}
|
}
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
95
frontend/src/components/file-view/onlyoffice-file-toolbar.js
Normal file
95
frontend/src/components/file-view/onlyoffice-file-toolbar.js
Normal file
@@ -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;
|
@@ -13,10 +13,39 @@ body {
|
|||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.onlyoffice-file-view-header-shown {
|
||||||
|
transition: height .3s ease-in-out;
|
||||||
|
height: 56px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.onlyoffice-file-view-header-hidden {
|
||||||
|
transition: all .3s ease-in-out;
|
||||||
|
display: none!important;
|
||||||
|
}
|
||||||
|
|
||||||
|
#unfold-onlyoffice-file-view-header {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 40px;
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background: rgba(255,255,255, 0.6);
|
||||||
|
border-radius: 0 0 14px 14px;
|
||||||
|
box-shadow: 0 0 8px rgba(0,0,0, 0.4);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
#unfold-onlyoffice-file-view-header:hover {
|
||||||
|
background: rgba(255,255,255, 1);
|
||||||
|
}
|
||||||
|
|
||||||
.file-view-header .file-toolbar-btn {
|
.file-view-header .file-toolbar-btn {
|
||||||
width: 28px;
|
width: 28px;
|
||||||
height: 28px;
|
height: 28px;
|
||||||
margin-right: 10px;
|
margin-left: 10px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
@@ -399,14 +399,14 @@ export const Utils = {
|
|||||||
if (!dirent) return '';
|
if (!dirent) return '';
|
||||||
let size = Utils.isHiDPI() ? 48 : 24;
|
let size = Utils.isHiDPI() ? 48 : 24;
|
||||||
size = isBig ? 192 : size;
|
size = isBig ? 192 : size;
|
||||||
if (dirent.isDir()) {
|
if (dirent.type == 'file') {
|
||||||
|
return Utils.getFileIconUrl(dirent.name);
|
||||||
|
} else {
|
||||||
let readonly = false;
|
let readonly = false;
|
||||||
if (dirent.permission && (dirent.permission === 'r' || dirent.permission === 'preview')) {
|
if (dirent.permission && (dirent.permission === 'r' || dirent.permission === 'preview')) {
|
||||||
readonly = true;
|
readonly = true;
|
||||||
}
|
}
|
||||||
return Utils.getFolderIconUrl(readonly, size, dirent.has_been_shared_out);
|
return Utils.getFolderIconUrl(readonly, size, dirent.has_been_shared_out);
|
||||||
} else {
|
|
||||||
return Utils.getFileIconUrl(dirent.name);
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
|
33
frontend/src/view-file-onlyoffice.js
Normal file
33
frontend/src/view-file-onlyoffice.js
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import ReactDom from 'react-dom';
|
||||||
|
import FileView from './components/file-view/file-view';
|
||||||
|
import FileViewTip from './components/file-view/file-view-tip';
|
||||||
|
|
||||||
|
const {
|
||||||
|
err
|
||||||
|
} = window.app.pageOptions;
|
||||||
|
|
||||||
|
class ViewFileOnlyoffice extends React.Component {
|
||||||
|
render() {
|
||||||
|
return (
|
||||||
|
<FileView content={<FileContent />} isOnlyofficeFile={true} />
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class FileContent extends React.Component {
|
||||||
|
|
||||||
|
render() {
|
||||||
|
if (err) {
|
||||||
|
return <FileViewTip />;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="file-view-content flex-1 p-0 border-0">
|
||||||
|
<div id="placeholder"></div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ReactDom.render(<ViewFileOnlyoffice />, document.getElementById('wrapper'));
|
220
seahub/templates/onlyoffice_file_view_react.html
Normal file
220
seahub/templates/onlyoffice_file_view_react.html
Normal file
@@ -0,0 +1,220 @@
|
|||||||
|
{% extends 'file_view_react.html' %}
|
||||||
|
{% load render_bundle from webpack_loader %}
|
||||||
|
{% load seahub_tags avatar_tags i18n static %}
|
||||||
|
|
||||||
|
{% block extra_style %}
|
||||||
|
{% render_bundle 'viewFileOnlyoffice' 'css' %}
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block extra_data %}
|
||||||
|
{% endblock %}
|
||||||
|
|
||||||
|
{% block render_bundle %}
|
||||||
|
{% render_bundle 'viewFileOnlyoffice' 'js' %}
|
||||||
|
|
||||||
|
{% get_current_language as LANGUAGE_CODE %}
|
||||||
|
<script type="text/javascript" src="{% static "scripts/lib/jquery.min.js" %}"></script>
|
||||||
|
<script type="text/javascript" src="{{ MEDIA_URL }}js/base.js?t=1536127546642"></script>
|
||||||
|
<script type="text/javascript" src="{{ ONLYOFFICE_APIJS_URL }}"></script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
{% if onlyoffice_jwt_token %}
|
||||||
|
var onRequestHistory = function() {
|
||||||
|
$.ajax({
|
||||||
|
url: '{% url "api-v2.1-new-file-history-view" repo_id %}' + '?path={{path|urlencode}}',
|
||||||
|
type: 'GET',
|
||||||
|
dataType: 'json',
|
||||||
|
cache: false,
|
||||||
|
success: function(resp) {
|
||||||
|
var history = [];
|
||||||
|
resp.data.reverse().forEach (function (item) {
|
||||||
|
history.push({
|
||||||
|
"created": item.ctime,
|
||||||
|
"key": item.rev_file_id,
|
||||||
|
"user": {
|
||||||
|
"id": item.creator_email,
|
||||||
|
"name": item.creator_name
|
||||||
|
},
|
||||||
|
"version": item.rev_file_id
|
||||||
|
});
|
||||||
|
});
|
||||||
|
docEditor.refreshHistory({
|
||||||
|
"currentVersion": history.at(-1).version,
|
||||||
|
"history": history
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
var onRequestHistoryData = function(event) {
|
||||||
|
var version = event.data;
|
||||||
|
var data = {
|
||||||
|
"repo_id": "{{repo_id}}",
|
||||||
|
"file_path": "{{path}}",
|
||||||
|
"obj_id": version
|
||||||
|
};
|
||||||
|
|
||||||
|
$.ajax({
|
||||||
|
url: '{% url "onlyoffice_api_get_history_file_access_token" %}',
|
||||||
|
type: 'POST',
|
||||||
|
dataType: 'json',
|
||||||
|
cache: false,
|
||||||
|
beforeSend: prepareCSRFToken,
|
||||||
|
data: data,
|
||||||
|
success: function(resp) {
|
||||||
|
docEditor.setHistoryData(resp.data);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
var onRequestHistoryClose = function () {
|
||||||
|
document.location.reload();
|
||||||
|
};
|
||||||
|
|
||||||
|
var onRequestReferenceData = function (event) {
|
||||||
|
$.ajax({
|
||||||
|
url: '{% url "onlyoffice_api_get_reference_data" %}',
|
||||||
|
type: 'POST',
|
||||||
|
dataType: 'json',
|
||||||
|
cache: false,
|
||||||
|
data: event.data.referenceData,
|
||||||
|
beforeSend: prepareCSRFToken,
|
||||||
|
success: function(resp) {
|
||||||
|
docEditor.setReferenceData(resp.data);
|
||||||
|
},
|
||||||
|
error: function(xhr, status, error) {
|
||||||
|
if (xhr.responseText) {
|
||||||
|
errMsg = JSON.parse(xhr.responseText).error_msg;
|
||||||
|
} else {
|
||||||
|
errMsg = "{% trans "Failed. Please check the network." %}";
|
||||||
|
}
|
||||||
|
docEditor.setReferenceData({
|
||||||
|
"error": errMsg
|
||||||
|
})
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
{% endif %}
|
||||||
|
var config = {
|
||||||
|
{% if onlyoffice_jwt_token %}
|
||||||
|
"events": {
|
||||||
|
"onRequestReferenceData": onRequestReferenceData,
|
||||||
|
"onRequestHistory": onRequestHistory,
|
||||||
|
"onRequestHistoryData": onRequestHistoryData,
|
||||||
|
"onRequestHistoryClose": onRequestHistoryClose,
|
||||||
|
},
|
||||||
|
{% endif %}
|
||||||
|
"type": window.screen.width < 992 ? 'mobile' : 'desktop',
|
||||||
|
"document": {
|
||||||
|
"fileType": "{{ file_type }}",
|
||||||
|
"key": "{{ doc_key }}",
|
||||||
|
"title": "{{ doc_title|escapejs }}",
|
||||||
|
"url": "{{ doc_url }}",
|
||||||
|
"permissions": {
|
||||||
|
"download": {% if can_download %}true{% else %}false{% endif %},
|
||||||
|
"edit": {% if can_edit %}true{% else %}false{% endif %},
|
||||||
|
"copy": {% if can_copy %}true{% else %}false{% endif %},
|
||||||
|
"print": {% if can_download %}true{% else %}false{% endif %},
|
||||||
|
"review": true
|
||||||
|
},
|
||||||
|
"referenceData": {
|
||||||
|
"fileKey": '{{ file_key }}',
|
||||||
|
"instanceId": "{{ instance_id }}",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
"documentType": "{{ document_type }}", // 'text' | 'spreadsheet' | 'presentation',
|
||||||
|
{% if onlyoffice_jwt_token %}
|
||||||
|
"token": "{{ onlyoffice_jwt_token }}",
|
||||||
|
{% endif %}
|
||||||
|
"editorConfig": {
|
||||||
|
"callbackUrl": "{{ callback_url }}",
|
||||||
|
"lang": "{{ LANGUAGE_CODE }}",
|
||||||
|
"mode": {% if can_edit %}"edit"{% else %}"view"{% endif %},
|
||||||
|
"customization": {
|
||||||
|
"forcesave": {% if onlyoffice_force_save %}true{% else %}false{% endif %},
|
||||||
|
{% if not request.user.is_authenticated %}
|
||||||
|
"anonymous": {
|
||||||
|
"request": true,
|
||||||
|
"label": "Guest"
|
||||||
|
},
|
||||||
|
{% endif %}
|
||||||
|
},
|
||||||
|
{% if request.user.is_authenticated %}
|
||||||
|
"user": {
|
||||||
|
"id": "{{ username|escapejs }}",
|
||||||
|
"name": "{{ username|email2nickname|escapejs }}",
|
||||||
|
"image": "{{ avatar_url }}",
|
||||||
|
}
|
||||||
|
{% endif %}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
var docEditor = new DocsAPI.DocEditor("placeholder", config);
|
||||||
|
</script>
|
||||||
|
<script type="text/javascript">
|
||||||
|
var SEAFILE_GLOBAL = {
|
||||||
|
csrfCookieName: '{{ CSRF_COOKIE_NAME }}'
|
||||||
|
};
|
||||||
|
|
||||||
|
{% if can_edit %}
|
||||||
|
var interval;
|
||||||
|
{% if not share_link_token %}
|
||||||
|
var refreshLock = function() {
|
||||||
|
$.ajax({
|
||||||
|
url: '{% url "api-v2.1-file-view" repo_id %}' + '?p={{path|urlencode}}',
|
||||||
|
type: 'PUT',
|
||||||
|
dataType: 'json',
|
||||||
|
data: {
|
||||||
|
'operation': 'refresh-lock',
|
||||||
|
'expire': 2400
|
||||||
|
},
|
||||||
|
cache: false,
|
||||||
|
beforeSend: prepareCSRFToken,
|
||||||
|
success: function(data) {
|
||||||
|
},
|
||||||
|
error: function(xhr) {
|
||||||
|
if (xhr.responseText) {
|
||||||
|
feedback(JSON.parse(xhr.responseText).error_msg, 'error');
|
||||||
|
} else {
|
||||||
|
feedback("{% trans "Failed. Please check the network." %}", 'error');
|
||||||
|
}
|
||||||
|
clearInterval(interval);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
{% else %}
|
||||||
|
var refreshLock = function() {
|
||||||
|
$.ajax({
|
||||||
|
url: '{% url "api-v2.1-share-link-online-office-lock" share_link_token %}',
|
||||||
|
type: 'PUT',
|
||||||
|
dataType: 'json',
|
||||||
|
data: {
|
||||||
|
'expire': 2400
|
||||||
|
},
|
||||||
|
cache: false,
|
||||||
|
beforeSend: prepareCSRFToken,
|
||||||
|
success: function(data) {
|
||||||
|
},
|
||||||
|
error: function(xhr) {
|
||||||
|
if (xhr.responseText) {
|
||||||
|
feedback(JSON.parse(xhr.responseText).error_msg, 'error');
|
||||||
|
} else {
|
||||||
|
feedback("{% trans "Failed. Please check the network." %}", 'error');
|
||||||
|
}
|
||||||
|
clearInterval(interval);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
{% endif %}
|
||||||
|
interval = setInterval(refreshLock, 40 * 60 * 1000);
|
||||||
|
{% endif %}
|
||||||
|
</script>
|
||||||
|
{% if request_from_onlyoffice_desktop_editor %}
|
||||||
|
<script type="text/javascript">
|
||||||
|
var params = {
|
||||||
|
"displayName": "{{request.user.username|email2nickname|escapejs}}",
|
||||||
|
"email": "{{request.user.username|escapejs}}",
|
||||||
|
"domain": "{{service_url}}",
|
||||||
|
"provider": "seafile",
|
||||||
|
"userId": "{{request.user.username|escapejs}}",
|
||||||
|
};
|
||||||
|
window.AscDesktopEditor.execCommand('portal:login', JSON.stringify(params));
|
||||||
|
</script>
|
||||||
|
{% endif %}
|
||||||
|
{% endblock %}
|
@@ -863,7 +863,7 @@ def view_lib_file(request, repo_id, path):
|
|||||||
|
|
||||||
send_file_access_msg(request, repo, path, 'web')
|
send_file_access_msg(request, repo, path, 'web')
|
||||||
|
|
||||||
return render(request, 'view_file_onlyoffice.html', onlyoffice_dict)
|
return render(request, 'onlyoffice_file_view_react.html', {**return_dict, **onlyoffice_dict})
|
||||||
else:
|
else:
|
||||||
return_dict['err'] = _('Error when prepare OnlyOffice file preview page.')
|
return_dict['err'] = _('Error when prepare OnlyOffice file preview page.')
|
||||||
|
|
||||||
|
Reference in New Issue
Block a user