Merge branch 'feature/files' of https://github.com/ONLYOFFICE/CommunityServer-AspNetCore into feature/files
This commit is contained in:
commit
1613c1a06e
@ -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": [
|
||||
|
@ -188,8 +188,14 @@ class MediaViewer extends React.Component {
|
||||
<StyledMediaViewer visible={this.state.visible}>
|
||||
|
||||
<div className="videoViewerOverlay"></div>
|
||||
{
|
||||
!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,12 +213,18 @@ 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}>
|
||||
{
|
||||
!isImage &&
|
||||
<span>
|
||||
{
|
||||
this.props.canDelete(currentFileId) &&
|
||||
@ -231,6 +243,7 @@ class MediaViewer extends React.Component {
|
||||
</ControlBtn>
|
||||
}
|
||||
</span>
|
||||
}
|
||||
</div>
|
||||
|
||||
</StyledMediaViewer>
|
||||
|
@ -33,21 +33,14 @@ const StyledMediaViewer = styled.div`
|
||||
bottom: 5px;
|
||||
margin-right: 10px;
|
||||
z-index: 4005;
|
||||
|
||||
.deleteBtnContainer{
|
||||
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;
|
||||
font-size: 14px;
|
||||
|
@ -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;
|
Loading…
Reference in New Issue
Block a user