From e3a5316baca2e1ac765a312c048d2ad627ec105e Mon Sep 17 00:00:00 2001 From: James Barnsley Date: Wed, 26 Jul 2017 15:24:18 +1200 Subject: [PATCH] Refining icons; Queue parallax; Forms --- src/assets/icons/back.svg | 6 ++-- src/assets/icons/pause.svg | 7 ++-- src/assets/icons/play.svg | 10 ++---- src/assets/icons/skip.svg | 7 ++-- src/assets/icons/stop.svg | 8 +++-- src/js/components/PlaybackControls.js | 6 ++-- src/js/components/TrackList.js | 10 +++--- src/js/views/Queue.js | 29 +++++++++-------- src/scss/components/_context-menu.scss | 12 +++---- src/scss/components/_lists.scss | 2 +- src/scss/components/_loader.scss | 2 +- src/scss/components/_modal.scss | 6 ++++ src/scss/components/_playback-controls.scss | 7 ++-- src/scss/components/_sidebar.scss | 3 +- src/scss/components/_slider.scss | 4 +-- src/scss/global/_core.scss | 7 ++-- src/scss/global/_forms.scss | 36 +++++++++++++-------- src/scss/global/_variables.scss | 8 ++--- src/scss/views/_queue.scss | 9 ++++-- 19 files changed, 102 insertions(+), 77 deletions(-) diff --git a/src/assets/icons/back.svg b/src/assets/icons/back.svg index 34b202b7..0c6ad0f9 100755 --- a/src/assets/icons/back.svg +++ b/src/assets/icons/back.svg @@ -1,11 +1,11 @@ - + - + - + diff --git a/src/assets/icons/pause.svg b/src/assets/icons/pause.svg index 9bbd906f..0d1e068f 100755 --- a/src/assets/icons/pause.svg +++ b/src/assets/icons/pause.svg @@ -1,11 +1,12 @@ - + - + - + diff --git a/src/assets/icons/play.svg b/src/assets/icons/play.svg index 5188c1c7..5c5e4f13 100755 --- a/src/assets/icons/play.svg +++ b/src/assets/icons/play.svg @@ -1,14 +1,8 @@ - + - - - - - - - + diff --git a/src/assets/icons/skip.svg b/src/assets/icons/skip.svg index e21ea848..a56ff49d 100755 --- a/src/assets/icons/skip.svg +++ b/src/assets/icons/skip.svg @@ -1,12 +1,11 @@ - + - + - + diff --git a/src/assets/icons/stop.svg b/src/assets/icons/stop.svg index 1fb882ac..55a80267 100755 --- a/src/assets/icons/stop.svg +++ b/src/assets/icons/stop.svg @@ -1,8 +1,12 @@ - + + - + diff --git a/src/js/components/PlaybackControls.js b/src/js/components/PlaybackControls.js index f262340d..d6885ec6 100755 --- a/src/js/components/PlaybackControls.js +++ b/src/js/components/PlaybackControls.js @@ -71,7 +71,7 @@ class PlaybackControls extends React.Component{ return (
- +
this.handleThumbnailClick(e)}>
@@ -79,9 +79,9 @@ class PlaybackControls extends React.Component{ { this.props.current_track ? this.props.current_track.name : - }
- { this.props.current_track ? : } + { this.props.current_track ? : }
- +
this.props.mopidyActions.previous()}> diff --git a/src/js/components/TrackList.js b/src/js/components/TrackList.js index 735795a9..46a9646b 100755 --- a/src/js/components/TrackList.js +++ b/src/js/components/TrackList.js @@ -155,11 +155,11 @@ class TrackList extends React.Component{ this.playTracks() } - handleContextMenu(e,track_key){ + handleContextMenu(e,track_key = null){ let selected_tracks = this.props.selected_tracks // Not already selected, so select it prior to triggering menu - if (!selected_tracks.includes(track_key)){ + if (track_key && !selected_tracks.includes(track_key)){ selected_tracks = [track_key] this.props.uiActions.setSelectedTracks(selected_tracks) } @@ -204,14 +204,14 @@ class TrackList extends React.Component{ // We've selected a track further down the list, // so proceed normally if (last_selected_track_index < newly_selected_track_index){ - var start = last_selected_track_index + var start = last_selected_track_index+1 var end = newly_selected_track_index // Selected a track up the list, so // our last selected is the END of our range } else { var start = newly_selected_track_index - var end = last_selected_track_index + var end = last_selected_track_index-1 } if (start !== false && start >= 0 && end !== false && end >= 0){ @@ -403,7 +403,7 @@ class TrackList extends React.Component{ } ) } - {this.digestTracksKeys() ? this.handleContextMenu(e, false)} /> : null} + {this.props.selected_tracks.length > 0 ? this.handleContextMenu(e, false)} /> : null} ); } diff --git a/src/js/views/Queue.js b/src/js/views/Queue.js index be5e1afd..826f138d 100755 --- a/src/js/views/Queue.js +++ b/src/js/views/Queue.js @@ -5,6 +5,7 @@ import { hashHistory, Link } from 'react-router' import { bindActionCreators } from 'redux' import FontAwesome from 'react-fontawesome' +import Parallax from '../components/Parallax' import TrackList from '../components/TrackList' import Track from '../components/Track' import Dater from '../components/Dater' @@ -14,6 +15,7 @@ import ArtistSentence from '../components/ArtistSentence' import Thumbnail from '../components/Thumbnail' import Header from '../components/Header' +import * as helpers from '../helpers' import * as uiActions from '../services/ui/actions' import * as pusherActions from '../services/pusher/actions' import * as spotifyActions from '../services/spotify/actions' @@ -57,11 +59,8 @@ class Queue extends React.Component{ ) } - renderArtwork(){ - if( - !this.props.current_track || - !this.props.current_track.album || - !this.props.current_track.album.images ){ + renderArtwork(image){ + if (!image){ return ( {this.props.radio_enabled ? : null} @@ -70,22 +69,22 @@ class Queue extends React.Component{ ) } - var images = [] - if (this.props.current_track && this.props.current_track.album && this.props.current_track.album.images){ - images = this.props.current_track.album.images - } - var link = null if( this.props.current_track.album.uri ) link = '/album/'+this.props.current_track.album.uri return ( this.handleContextMenu(e,this.props.current_track.album)}> {this.props.radio_enabled ? : null} - + ) } render(){ + var image = null + if (this.props.current_track && this.props.current_track.album !== undefined && this.props.current_track.album.images){ + image = helpers.sizedImages(this.props.current_track.album.images).huge + } + var options = (