From b787a35fcfe4025f5b2fb37d8348daa116b0f47d Mon Sep 17 00:00:00 2001 From: James Barnsley Date: Tue, 24 Jan 2017 09:04:26 +1300 Subject: [PATCH] Zoomable thumbnails --- src/js/components/FullPlayer.js | 2 +- src/js/components/Modal/ImageZoomModal.js | 43 +++++++++++++++++++++++ src/js/components/Modal/Modal.js | 4 ++- src/js/components/Thumbnail.js | 40 +++++++++++++++++---- src/js/views/Album.js | 2 +- src/js/views/Artist.js | 2 +- src/js/views/Playlist.js | 2 +- src/scss/components/_images.scss | 21 +++++++++++ src/scss/components/_modal.scss | 7 ++++ 9 files changed, 112 insertions(+), 11 deletions(-) create mode 100755 src/js/components/Modal/ImageZoomModal.js diff --git a/src/js/components/FullPlayer.js b/src/js/components/FullPlayer.js index 4a2f4bac..78d700a4 100755 --- a/src/js/components/FullPlayer.js +++ b/src/js/components/FullPlayer.js @@ -66,7 +66,7 @@ class FullPlayer extends React.Component{ if( this.props.current_track.album.uri ) link = '/album/'+this.props.current_track.album.uri return ( - + ) } diff --git a/src/js/components/Modal/ImageZoomModal.js b/src/js/components/Modal/ImageZoomModal.js new file mode 100755 index 00000000..c5ce24b6 --- /dev/null +++ b/src/js/components/Modal/ImageZoomModal.js @@ -0,0 +1,43 @@ + +import React, { PropTypes } from 'react' +import { connect } from 'react-redux' +import { Link } from 'react-router' +import { createStore, bindActionCreators } from 'redux' + +import * as uiActions from '../../services/ui/actions' +import * as helpers from '../../helpers' + +import Icon from '../Icon' + +class ImageZoomModal extends React.Component{ + + constructor(props){ + super(props) + } + + handleClick(e, connectionid){ + e.preventDefault() + this.props.uiActions.closeModal() + return false; + } + + render(){ + return ( +
+ {this.props.data.url ? : null } +
+ ) + } +} + +const mapStateToProps = (state, ownProps) => { + return {} +} + +const mapDispatchToProps = (dispatch) => { + return { + uiActions: bindActionCreators(uiActions, dispatch) + } +} + +export default connect(mapStateToProps, mapDispatchToProps)(ImageZoomModal) \ No newline at end of file diff --git a/src/js/components/Modal/Modal.js b/src/js/components/Modal/Modal.js index 2a743177..026e2ef5 100755 --- a/src/js/components/Modal/Modal.js +++ b/src/js/components/Modal/Modal.js @@ -9,6 +9,7 @@ import AddToPlaylistModal from './AddToPlaylistModal' import CreatePlaylistModal from './CreatePlaylistModal' import EditPlaylistModal from './EditPlaylistModal' import SendAuthorizationModal from './SendAuthorizationModal' +import ImageZoomModal from './ImageZoomModal' import * as uiActions from '../../services/ui/actions' import * as mopidyActions from '../../services/mopidy/actions' @@ -25,7 +26,7 @@ class Modal extends React.Component{ if( !this.props.modal ) return null; return ( -
+
this.props.uiActions.closeModal() }>
@@ -35,6 +36,7 @@ class Modal extends React.Component{ { this.props.modal.name == 'create_playlist' ? : null } { this.props.modal.name == 'edit_playlist' ? : null } { this.props.modal.name == 'send_authorization' ? : null } + { this.props.modal.name == 'image_zoom' ? : null }
diff --git a/src/js/components/Thumbnail.js b/src/js/components/Thumbnail.js index 94a02486..d5ffb0a7 100755 --- a/src/js/components/Thumbnail.js +++ b/src/js/components/Thumbnail.js @@ -1,8 +1,13 @@ import React, { PropTypes } from 'react' -import * as helpers from '../helpers' +import { connect } from 'react-redux' +import { createStore, bindActionCreators } from 'redux' +import FontAwesome from 'react-fontawesome' -export default class Thumbnail extends React.Component{ +import * as helpers from '../helpers' +import * as uiActions from '../services/ui/actions' + +class Thumbnail extends React.Component{ constructor(props) { super(props); @@ -53,16 +58,39 @@ export default class Thumbnail extends React.Component{ } } + zoom(e, image){ + e.preventDefault() + this.props.uiActions.openModal('image_zoom', {url: image} ) + } + render(){ var image = this.mapImageSizes() var style = { backgroundImage: 'url("'+image+'")' } - var className = 'thumbnail '+this.props.size; - if( this.props.circle ) className += ' circle'; + var class_name = 'thumbnail '+this.props.size; + if( this.props.circle ) class_name += ' circle'; + var zoom_icon = null + if (this.props.canZoom){ + zoom_icon = this.zoom(e,image)}> + } + return ( -
+
+ {zoom_icon}
); } -} \ No newline at end of file +} + +const mapStateToProps = (state, ownProps) => { + return {} +} + +const mapDispatchToProps = (dispatch) => { + return { + uiActions: bindActionCreators(uiActions, dispatch) + } +} + +export default connect(mapStateToProps, mapDispatchToProps)(Thumbnail) \ No newline at end of file diff --git a/src/js/views/Album.js b/src/js/views/Album.js index 2adaa4f6..0b14193a 100755 --- a/src/js/views/Album.js +++ b/src/js/views/Album.js @@ -92,7 +92,7 @@ class Album extends React.Component{
- +
diff --git a/src/js/views/Artist.js b/src/js/views/Artist.js index e80d05f9..bba09849 100755 --- a/src/js/views/Artist.js +++ b/src/js/views/Artist.js @@ -184,7 +184,7 @@ class Artist extends React.Component{
- +
diff --git a/src/js/views/Playlist.js b/src/js/views/Playlist.js index b8836029..00b1ccce 100755 --- a/src/js/views/Playlist.js +++ b/src/js/views/Playlist.js @@ -126,7 +126,7 @@ class Playlist extends React.Component{
- +
diff --git a/src/scss/components/_images.scss b/src/scss/components/_images.scss index 45a2b623..0ccb4308 100755 --- a/src/scss/components/_images.scss +++ b/src/scss/components/_images.scss @@ -4,6 +4,7 @@ width: 100%; max-width: 300px; overflow: hidden; + position: relative; .image { width: 100%; @@ -15,6 +16,20 @@ background-size: cover; } + .zoom { + @include animate(); + display: none; + position: absolute; + bottom: 0; + right: 0; + z-index: 1; + padding: 10px; + background: rgba(0,0,0,0.2); + font-size: 12px; + cursor: pointer; + color: #FFFFFF; + } + &.small { max-width: 50px; } @@ -22,6 +37,12 @@ &.circle { border-radius: 50%; } + + &:hover { + .zoom { + display: block; + } + } } .parallax { diff --git a/src/scss/components/_modal.scss b/src/scss/components/_modal.scss index 1b0fdcd0..d970ff6f 100755 --- a/src/scss/components/_modal.scss +++ b/src/scss/components/_modal.scss @@ -37,6 +37,13 @@ padding-bottom: 40px; } + .image-zoom-modal { + img { + max-height: 100%; + max-width: 100%; + } + } + form { .field { padding-bottom: 20px;