IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'feature/files' of https://github.com/ONLYOFFICE/CommunityServer-AspNetCore into feature/files

Browse Source
This commit is contained in:
Nikita Gopienko 2020-05-29 09:31:06 +03:00
commit 1613c1a06e
4 changed files with 116 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
web/ASC.Web.Common/package.json
View File

@ -1,6 +1,6 @@
{
"name": "asc-web-common",
"version": "1.0.148",
"version": "1.0.149",
"description": "Ascensio System SIA common components and solutions library",
"license": "AGPL-3.0",
"files": [

55
web/ASC.Web.Common/src/components/MediaViewer/MediaViewer.js
View File

@ -61,7 +61,7 @@ class MediaViewer extends React.Component {
}
);
}
}else if(!isEqual(this.props.playlist, prevProps.playlist)){
} else if (!isEqual(this.props.playlist, prevProps.playlist)) {
this.setState(
{
playlist: this.props.playlist
@ -188,8 +188,14 @@ class MediaViewer extends React.Component {
<StyledMediaViewer visible={this.state.visible}>
<div className="videoViewerOverlay"></div>
<MediaScrollButton orientation="right" onClick={this.prevMedia} />
<MediaScrollButton orientation="left" onClick={this.nextMedia} />
{
!isImage &&
<>
<MediaScrollButton orientation="right" onClick={this.prevMedia} />
<MediaScrollButton orientation="left" onClick={this.nextMedia} />
</>
}
<div>
<div className="details" ref={this.detailsContainer}>
<div className="title">{fileTitle}</div>
@ -207,30 +213,37 @@ class MediaViewer extends React.Component {
images={[
{ src: url, alt: '' }
]}
onNextClick={this.nextMedia}
onPrevClick={this.prevMedia}
onDeleteClick={this.onDelete}
onDownloadClick={this.onDownload}
/>
:
<StyledVideoViewer url={url} playing={this.state.visible} isVideo={isVideo} getOffset={this.getOffset} />
)
}
<div className="mediaViewerToolbox" ref={this.viewerToolbox}>
<span>
{
this.props.canDelete(currentFileId) &&
<ControlBtn onClick={this.onDelete}>
<div className="deleteBtnContainer">
<Icons.MediaDeleteIcon size="scale" />
</div>
</ControlBtn>
}
{
this.props.canDownload(currentFileId) &&
<ControlBtn onClick={this.onDownload}>
<div className="downloadBtnContainer">
<Icons.MediaDownloadIcon size="scale" />
</div>
</ControlBtn>
}
</span>
{
!isImage &&
<span>
{
this.props.canDelete(currentFileId) &&
<ControlBtn onClick={this.onDelete}>
<div className="deleteBtnContainer">
<Icons.MediaDeleteIcon size="scale" />
</div>
</ControlBtn>
}
{
this.props.canDownload(currentFileId) &&
<ControlBtn onClick={this.onDownload}>
<div className="downloadBtnContainer">
<Icons.MediaDownloadIcon size="scale" />
</div>
</ControlBtn>
}
</span>
}
</div>
</StyledMediaViewer>

21
web/ASC.Web.Common/src/components/MediaViewer/StyledMediaViewer.js
View File

@ -33,20 +33,13 @@ const StyledMediaViewer = styled.div`
bottom: 5px;
margin-right: 10px;
z-index: 4005;
.deleteBtnContainer{
display: block;
width: 20px;
margin: 3px 10px;
line-height: 19px;
}
.downloadBtnContainer{
display: block;
width: 20px;
margin: 3px 10px;
line-height: 19px;
}
}
.deleteBtnContainer,
.downloadBtnContainer{
display: block;
width: 20px;
margin: 3px 10px;
line-height: 19px;
}
.details{
z-index: 4001;

75
web/ASC.Web.Common/src/components/MediaViewer/sub-components/image-viewer.js
View File

@ -4,15 +4,19 @@ import PropTypes from "prop-types";
import Viewer from 'react-viewer';
import { Icons } from "asc-web-components";
import styled from "styled-components";
import MediaScrollButton from "./scroll-button"
import ControlBtn from "./control-btn"
const StyledViewer = styled(Viewer)`
.react-viewer-footer{
bottom: 5px!important;
z-index: 4001!important;
overflow: visible;
}
.react-viewer-canvas{
z-index: 4000!important;
margin-top: 50px;
}
.react-viewer-navbar,
.react-viewer-mask,
@ -57,6 +61,20 @@ const StyledViewer = styled(Viewer)`
background: none;
}
}
li[data-key='delete'],
li[data-key='customDownload']{
position: fixed;
bottom: 10px;
.controlBtn{
margin: 0
}
}
li[data-key='delete']{
right: 62px;
}
li[data-key='customDownload']{
right: 12px;
}
.iconContainer{
width: 20px;
line-height: 20px;
@ -66,6 +84,13 @@ const StyledViewer = styled(Viewer)`
width: 18px;
}
}
.btnContainer{
display: block;
width: 20px;
margin: 3px 10px;
line-height: 19px;
}
`
@ -94,6 +119,32 @@ var customToolbar = [
key: 'rotateRight',
actionType: 6,
render: <div className="iconContainer"><Icons.MediaRotateRightIcon size="scale" /></div>
},
{
key: 'prev',
actionType: 3,
render: <MediaScrollButton orientation="right" />
},
{
key: 'next',
actionType: 4,
render: <MediaScrollButton orientation="left" />
},
{
key: 'delete',
render: <ControlBtn className="controlBtn">
<div className="btnContainer">
<Icons.MediaDeleteIcon size="scale" />
</div>
</ControlBtn>
},
{
key: 'customDownload',
render: <ControlBtn className="controlBtn">
<div className="btnContainer">
<Icons.MediaDownloadIcon size="scale" />
</div>
</ControlBtn>
}
];
@ -110,6 +161,24 @@ class ImageViewer extends React.Component {
const { className, visible, images } = this.props;
customToolbar.forEach((button) => {
switch (button.key) {
case "prev":
button.onClick = this.props.onPrevClick;
break;
case "next":
button.onClick = this.props.onNextClick;
break;
case "delete":
button.onClick = this.props.onDeleteClick;
break;
case "customDownload":
button.onClick = this.props.onDownloadClick;
break;
default:
break;
}
});
return (
<div className={className}>
<StyledViewer
@ -127,7 +196,11 @@ class ImageViewer extends React.Component {
ImageViewer.propTypes = {
className: PropTypes.string,
visible: PropTypes.bool,
images: PropTypes.arrayOf(PropTypes.object)
images: PropTypes.arrayOf(PropTypes.object),
onNextClick: PropTypes.func,
onPrevClick: PropTypes.func,
onDeleteClick: PropTypes.func,
onDownloadClick: PropTypes.func
}
export default ImageViewer;