diff --git a/src/js/App.js b/src/js/App.js index 60da48d2..5c769576 100755 --- a/src/js/App.js +++ b/src/js/App.js @@ -205,11 +205,15 @@ class App extends React.Component{ return (
- - -
- {this.props.children} -
+ +
+ + +
+ {this.props.children} +
+
+ diff --git a/src/js/components/Modal/CreatePlaylistModal.js b/src/js/components/Modal/CreatePlaylistModal.js index 0d72408a..ee8d0181 100755 --- a/src/js/components/Modal/CreatePlaylistModal.js +++ b/src/js/components/Modal/CreatePlaylistModal.js @@ -9,27 +9,26 @@ export default class CreatePlaylistModal extends React.Component{ constructor(props){ super(props) this.state = { - submit_enabled: false, name: '', + description: '', scheme: 'spotify', - is_public: true + is_public: true, + is_collaborative: false } } createPlaylist(e){ - e.preventDefault(); - this.props.uiActions.createPlaylist( this.state.scheme, this.state.name, this.state.is_public ) - this.props.uiActions.closeModal() - return false; - } + e.preventDefault(); - setPlaylistName(name){ - var submit_enabled = false - if( name && name != '' ) submit_enabled = true - this.setState({ - name: name, - submit_enabled: submit_enabled - }) + if (!this.state.name || this.state.name == ''){ + this.setState({error: 'Name is required'}) + return false + } else { + this.props.uiActions.createPlaylist( this.state.scheme, this.state.name, this.state.description, this.state.is_public, this.state.is_collaborative ) + this.props.uiActions.closeModal() + } + + return false } render(){ @@ -37,14 +36,25 @@ export default class CreatePlaylistModal extends React.Component{

Create playlist

this.createPlaylist(e)}> -
+ +
+ Name this.setPlaylistName( e.target.value )} + onChange={ e => this.setState({ name: e.target.value })} value={ this.state.name } />
+ +
+ Description + this.setState({ description: e.target.value })} + + value={ this.state.description } /> +
+ Provider
+ Options +
- +
diff --git a/src/js/components/Modal/EditPlaylistModal.js b/src/js/components/Modal/EditPlaylistModal.js index 1555b01f..10c00a43 100755 --- a/src/js/components/Modal/EditPlaylistModal.js +++ b/src/js/components/Modal/EditPlaylistModal.js @@ -12,7 +12,8 @@ export default class EditPlaylistModal extends React.Component{ error: null, name: this.props.data.name, description: (this.props.data.description ? this.props.data.description : ''), - is_public: this.props.data.is_public + is_public: this.props.data.is_public, + is_collaborative: this.props.data.is_collaborative } } @@ -23,7 +24,7 @@ export default class EditPlaylistModal extends React.Component{ this.setState({error: 'Name is required'}) return false } else { - this.props.uiActions.savePlaylist(this.props.data.uri, this.state.name, this.state.is_public, this.state.description) + this.props.uiActions.savePlaylist(this.props.data.uri, this.state.name, this.state.description, this.state.is_public, this.state.is_collaborative) this.props.uiActions.closeModal() return false } @@ -35,21 +36,22 @@ export default class EditPlaylistModal extends React.Component{ case 'spotify': return (
-
+
+ Name this.setState({ name: e.target.value })} value={ this.state.name } />
-
+
+ Description this.setState({ description: e.target.value })} value={ this.state.description } />
+ Options +
) @@ -67,9 +77,9 @@ export default class EditPlaylistModal extends React.Component{ return (
+ Name this.setState({ name: e.target.value })} value={ this.state.name } />
diff --git a/src/js/services/spotify/actions.js b/src/js/services/spotify/actions.js index 50fda403..d03e1766 100755 --- a/src/js/services/spotify/actions.js +++ b/src/js/services/spotify/actions.js @@ -1072,10 +1072,17 @@ export function toggleAlbumInLibrary( uri, method ){ * ====================================================================================== **/ -export function createPlaylist( name, is_public ){ +export function createPlaylist( name, description, is_public, is_collaborative ){ return (dispatch, getState) => { - sendRequest( dispatch, getState, 'users/'+ getState().spotify.me.id +'/playlists/', 'POST', { name: name, public: is_public } ) + var data = { + name: name, + description: description, + public: is_public, + collaborative: is_collaborative + } + + sendRequest(dispatch, getState, 'users/'+ getState().spotify.me.id +'/playlists/', 'POST', data) .then( response => { dispatch({ @@ -1102,13 +1109,14 @@ export function createPlaylist( name, is_public ){ } } -export function savePlaylist(uri, name, is_public, description){ +export function savePlaylist(uri, name, description, is_public, is_collaborative){ return (dispatch, getState) => { var data = { - name: name, + name: name, + description: description, public: is_public, - description: description + collaborative: is_collaborative } sendRequest( dispatch, getState, 'users/'+ getState().spotify.me.id +'/playlists/'+ helpers.getFromUri('playlistid',uri), 'PUT', data) @@ -1119,6 +1127,7 @@ export function savePlaylist(uri, name, is_public, description){ playlist: { name: name, public: is_public, + collaborative: is_collaborative, description: description } }) diff --git a/src/js/services/spotify/middleware.js b/src/js/services/spotify/middleware.js index f4d7f82b..d3c9f9f9 100755 --- a/src/js/services/spotify/middleware.js +++ b/src/js/services/spotify/middleware.js @@ -23,7 +23,7 @@ const SpotifyMiddleware = (function(){ store.dispatch( uiActions.createNotification( "Must be logged in to Spotify to do that", 'bad' ) ) return } - store.dispatch( spotifyActions.createPlaylist( action.name, action.is_private )) + store.dispatch( spotifyActions.createPlaylist( action.name, action.description, action.is_private, action.is_collaborative )) break case 'SPOTIFY_REMOVE_PLAYLIST_TRACKS': @@ -72,7 +72,7 @@ const SpotifyMiddleware = (function(){ store.dispatch( uiActions.createNotification( "Must be logged in to Spotify to do that", 'bad' ) ) return } - store.dispatch( spotifyActions.savePlaylist( action.key, action.name, action.is_public, action.description )) + store.dispatch( spotifyActions.savePlaylist( action.key, action.name, action.description, action.is_public, action.is_collaborative )) break // when radio returns diff --git a/src/js/services/ui/actions.js b/src/js/services/ui/actions.js index 54f9af65..89df0ffe 100755 --- a/src/js/services/ui/actions.js +++ b/src/js/services/ui/actions.js @@ -130,7 +130,7 @@ export function reorderPlaylistTracks( uri, indexes, insert_before, snapshot_id } } -export function savePlaylist(uri, name, is_public = false, description = ''){ +export function savePlaylist(uri, name, description = '', is_public = false, is_collaborative = false){ switch( helpers.uriSource( uri ) ){ case 'spotify': @@ -138,8 +138,9 @@ export function savePlaylist(uri, name, is_public = false, description = ''){ type: 'SPOTIFY_SAVE_PLAYLIST', key: uri, name: name, + description: (description == '' ? null : description), is_public: is_public, - description: (description == '' ? null : description) + is_collaborative: is_collaborative } case 'm3u': @@ -152,14 +153,16 @@ export function savePlaylist(uri, name, is_public = false, description = ''){ return false } -export function createPlaylist( scheme, name, is_public = false ){ +export function createPlaylist(scheme, name, description = '', is_public = false, is_collaborative = false){ switch( scheme ){ case 'spotify': return { type: 'SPOTIFY_CREATE_PLAYLIST', name: name, - is_public: is_public + description: (description == '' ? null : description), + is_public: is_public, + is_collaborative: is_collaborative } case 'm3u': diff --git a/src/scss/components/_modal.scss b/src/scss/components/_modal.scss index e08351c3..be077d6e 100755 --- a/src/scss/components/_modal.scss +++ b/src/scss/components/_modal.scss @@ -1,4 +1,10 @@ +.modal-open { + .body { + @include blur(10px); + } +} + .modal { position: fixed; top: 0; @@ -32,31 +38,55 @@ padding: 100px 25%; margin: 0 auto; width: 50%; - color: #FFFFFF; - - h4 { - padding-bottom: 40px; - } + color: $white; form { + padding-top: 50px; + .field { - padding-bottom: 20px; - - input[type="text"]{ - background: $dark_grey; - font-size: 18px; - width: 100%; - color: $white; - - &:focus, - &:active { - border-color: $turquoise; - } - } + padding-bottom: 40px; + position: relative; .label { font-size: 16px; } + + &.text, + &.radio, + &.checkbox { + & > .label { + opacity: 0.5; + width: 100px; + position: absolute; + top: 12px; + left: 0; + pointer-events: none; + padding: 0; + } + } + + &.text { + input { + background: transparent; + font-size: 18px; + padding-left: 100px; + padding-right: 0; + width: 100%; + color: $white; + border-bottom: 2px solid $white; + + &:focus, + &:active { + border-color: $turquoise; + } + } + } + + &.radio, + &.checkbox { + padding-left: 100px; + padding-top: 8px; + } } button[type="submit"]{ @@ -66,7 +96,6 @@ .list { @include clearfix(); - padding-top: 50px; .list-item { box-sizing: border-box; diff --git a/src/scss/global/_variables.scss b/src/scss/global/_variables.scss index bfdde028..31a17a5a 100755 --- a/src/scss/global/_variables.scss +++ b/src/scss/global/_variables.scss @@ -15,7 +15,7 @@ $green: #47af2a; $blue: #32b5f2; $yellow: #FFF39C; $orange: #f16f19; -$overlay_dark: rgba(10, 10, 10, 0.95); +$overlay_dark: rgba(0, 0, 0, 0.88); $bp_wide: 1000px; $bp_medium: 800px;