web: common: MediaViewer. Fixed a scroll buttons style
This commit is contained in:
parent
346be5b443
commit
d8e804df2e
@ -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}
|
||||
|
@ -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,
|
||||
|
@ -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{
|
||||
|
Loading…
Reference in New Issue
Block a user