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

web: common: MediaViewer. Fixed a scroll buttons style

Browse Source
This commit is contained in:
NikolayRechkin 2020-06-01 12:17:00 +03:00
parent 346be5b443
commit d8e804df2e
3 changed files with 18 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -191,8 +191,8 @@ class MediaViewer extends React.Component {
{
!isImage &&
<>
<MediaScrollButton orientation="right" onClick={this.prevMedia} />
<MediaScrollButton orientation="left" onClick={this.nextMedia} />
<MediaScrollButton orientation="right" onClick={this.prevMedia} inactive={this.state.playlist.length <= 1}/>
<MediaScrollButton orientation="left" onClick={this.nextMedia} inactive={this.state.playlist.length <= 1}/>
</>
}
@ -213,6 +213,7 @@ class MediaViewer extends React.Component {
images={[
{ src: url, alt: '' }
]}
inactive={this.state.playlist.length <= 1}
onNextClick={this.nextMedia}
onPrevClick={this.prevMedia}
onDeleteClick={this.onDelete}

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

@ -91,6 +91,13 @@ const StyledViewer = styled(Viewer)`
margin: 3px 10px;
line-height: 19px;
}
.scrollBtn{
cursor: ${props => props.inactive ? 'default' : 'pointer'};
opacity: ${props => props.inactive ? '0.2' : '1'};
&:hover{
background-color: ${props => !props.inactive ? 'rgba(200, 200, 200, 0.2)' : 'rgba(11,11,11,0.7)'};
}
}
`
@ -123,12 +130,12 @@ var customToolbar = [
{
key: 'prev',
actionType: 3,
render: <MediaScrollButton orientation="right" />
render: <MediaScrollButton orientation="right" className="scrollBtn"/>
},
{
key: 'next',
actionType: 4,
render: <MediaScrollButton orientation="left" />
render: <MediaScrollButton orientation="left" className="scrollBtn"/>
},
{
key: 'delete',
@ -159,7 +166,7 @@ class ImageViewer extends React.Component {
render() {
const { className, visible, images } = this.props;
const { className, visible, images, inactive } = this.props;
customToolbar.forEach((button) => {
switch (button.key) {
@ -182,6 +189,7 @@ class ImageViewer extends React.Component {
return (
<div className={className}>
<StyledViewer
inactive={inactive}
visible={visible}
customToolbar={(toolbars) => {
return customToolbar;
@ -196,6 +204,7 @@ class ImageViewer extends React.Component {
ImageViewer.propTypes = {
className: PropTypes.string,
visible: PropTypes.bool,
inactive: PropTypes.bool,
images: PropTypes.arrayOf(PropTypes.object),
onNextClick: PropTypes.func,
onPrevClick: PropTypes.func,

8
web/ASC.Web.Common/src/components/MediaViewer/sub-components/scroll-button.js
View File

@ -3,16 +3,14 @@ import styled from "styled-components";
const ScrollButton = styled.div`
cursor: pointer;
cursor: ${props => props.inactive ? 'default' : 'pointer'};
opacity: ${props => props.inactive ? '0.2' : '1'};
z-index: 4005;
position: fixed;
top: calc(50% - 20px);
background: none;
&:hover{
background: none;
}
${props => props.orientation != "left" ? 'left: 20px;' : 'right: 20px;'}
width: 40px;
@ -21,7 +19,7 @@ const ScrollButton = styled.div`
border-radius: 50%;
&:hover{
background-color: rgba(200, 200, 200, 0.2);
background-color: ${props => !props.inactive && 'rgba(200, 200, 200, 0.2)'};
}
&:before{