diff --git a/src/js/components/DropdownField.js b/src/js/components/DropdownField.js index 6065d74d..91ca2bfb 100755 --- a/src/js/components/DropdownField.js +++ b/src/js/components/DropdownField.js @@ -51,6 +51,9 @@ export default class DropdownField extends React.Component{ if (this.props.no_status_icon){ className += ' no-status-icon'; } + if (this.props.button){ + className += ' buttonify'; + } var current_value = this.props.options[0].value if (this.props.value){ current_value = this.props.value; @@ -67,7 +70,7 @@ export default class DropdownField extends React.Component{ return (
-
this.handleToggle() }> +
this.handleToggle() }> {this.props.icon ?   : null} { this.props.name }
diff --git a/src/js/helpers.js b/src/js/helpers.js index c0c2df09..1b20e65a 100755 --- a/src/js/helpers.js +++ b/src/js/helpers.js @@ -802,4 +802,20 @@ export let getIndexedRecords = function(index, uris){ **/ export let titleCase = function(string){ return string.charAt(0).toUpperCase() + string.slice(1) -} \ No newline at end of file +} + + + +/** + * Hash a string + * Included from http://coursesweb.net/javascript/md5-hash-string_cs + * + * @param string + * @return string + **/ +export let hash = function md5(string){ + + return string; +} + + diff --git a/src/js/services/spotify/middleware.js b/src/js/services/spotify/middleware.js index 4c9f5ea5..32bfb4c7 100755 --- a/src/js/services/spotify/middleware.js +++ b/src/js/services/spotify/middleware.js @@ -1,10 +1,11 @@ -import ReactGA from 'react-ga' +import ReactGA from 'react-ga'; +import md5 from 'md5'; -var helpers = require('./../../helpers') -var spotifyActions = require('./actions') -var uiActions = require('../ui/actions') -var pusherActions = require('../pusher/actions') +var helpers = require('./../../helpers'); +var spotifyActions = require('./actions'); +var uiActions = require('../ui/actions'); +var pusherActions = require('../pusher/actions'); const SpotifyMiddleware = (function(){ @@ -17,15 +18,12 @@ const SpotifyMiddleware = (function(){ switch(action.type){ case 'SPOTIFY_CONNECTED': - var label = null + var hashed_username = null if (store.getState().spotify.me){ - if (store.getState().core.anonymise_analytics){ - label = "anonymised_"+store.getState().pusher.client_id; - } else { - label = store.getState().spotify.me.id; - } + hashed_username = md5(store.getState().spotify.me.id); + ReactGA.set({userId: hashed_username}); } - ReactGA.event({ category: 'Spotify', action: 'Connected', label: label }) + ReactGA.event({category: 'Spotify', action: 'Connected', label: hashed_username}) // TODO: remove this so we don't tap out our API limits before we even get started // Perhaps fire this on demand? Context menu, playlists loading or AddToPlaylistModal @@ -37,7 +35,7 @@ const SpotifyMiddleware = (function(){ break case 'SPOTIFY_AUTHORIZATION_GRANTED': - ReactGA.event({ category: 'Spotify', action: 'Authorization granted'}); + ReactGA.event({category: 'Spotify', action: 'Authorization granted'}); // Flush out the previous user's library store.dispatch(spotifyActions.flushLibrary()); @@ -46,15 +44,12 @@ const SpotifyMiddleware = (function(){ break; case 'SPOTIFY_AUTHORIZATION_REVOKED': - var label = null + var hashed_username = null if (store.getState().spotify.me){ - if (store.getState().core.anonymise_analytics){ - label = "anonymised_"+store.getState().pusher.client_id; - } else { - label = store.getState().spotify.me.id; - } + hashed_username = md5(store.getState().spotify.me); + ReactGA.set({userId: hashed_username}); } - ReactGA.event({ category: 'Spotify', action: 'Authorization revoked', label: label}) + ReactGA.event({ category: 'Spotify', action: 'Authorization revoked', label: hashed_username}) next(action) // Now dispatch a getMe to get the backend-provided user @@ -66,15 +61,12 @@ const SpotifyMiddleware = (function(){ break; case 'SPOTIFY_IMPORT_AUTHORIZATION': - var label = null; - if (action.me && action.me.id){ - if (store.getState().core.anonymise_analytics){ - label = "anonymised_"+store.getState().pusher.client_id; - } else { - label = action.me.id; - } + var hashed_username = null + if (store.getState().spotify.me){ + hashed_username = md5(store.getState().spotify.me); + ReactGA.set({userId: hashed_username}); } - ReactGA.event({ category: 'Spotify', action: 'Authorization imported', label: label }); + ReactGA.event({category: 'Spotify', action: 'Authorization imported', label: hashed_username}); // Flush out the previous user's library store.dispatch(spotifyActions.flushLibrary()); @@ -435,14 +427,9 @@ const SpotifyMiddleware = (function(){ store.dispatch(pusherActions.setUsername(name)); } - var label = null; - if (store.getState().core.anonymise_analytics){ - label = "anonymised_"+store.getState().pusher.client_id; - } else { - ReactGA.set({userId: action.data.id}); - label = action.data.id; - } - ReactGA.event({category: 'Spotify', action: 'Authorization verified', label: label}); + var hashed_username = md5(action.data.id); + ReactGA.set({userId: hashed_username}); + ReactGA.event({category: 'Spotify', action: 'Authorization verified', label: hashed_username}); store.dispatch({ type: 'USERS_LOADED', diff --git a/src/js/views/discover/DiscoverRecommendations.js b/src/js/views/discover/DiscoverRecommendations.js index c5297a69..bfca9435 100755 --- a/src/js/views/discover/DiscoverRecommendations.js +++ b/src/js/views/discover/DiscoverRecommendations.js @@ -378,11 +378,12 @@ class Discover extends React.Component{ onChange={value => this.setTunability(tunability.name, value)} />
+ this.toggleTunability(tunability.name)} />
); }) } - {this.toggleTunability(val)}} /> + {this.toggleTunability(val)}} /> ); } @@ -486,7 +487,9 @@ class Discover extends React.Component{ {this.renderSeeds()} {this.renderTunabilities()} - this.getRecommendations()}>Apply +
+ this.getRecommendations()}>Apply +
diff --git a/src/scss/components/_dropdown-field.scss b/src/scss/components/_dropdown-field.scss index e2198900..3f17d906 100755 --- a/src/scss/components/_dropdown-field.scss +++ b/src/scss/components/_dropdown-field.scss @@ -6,9 +6,9 @@ position: relative; display: inline-block; - .label { + .label:not(.button) { @include animate(); - padding: 14px 10px; + padding: 14px 10px; cursor: pointer; .notouch &:hover { @@ -17,7 +17,7 @@ } &.expanded { - .label { + .label:not(.button) { color: $blue; } .options { diff --git a/src/scss/global/_forms.scss b/src/scss/global/_forms.scss index 7e712d27..a6ca3cca 100755 --- a/src/scss/global/_forms.scss +++ b/src/scss/global/_forms.scss @@ -296,6 +296,10 @@ input[type="submit"] { &.range { position: relative; + .input-range { + height: auto; + } + .label { position: absolute; top: 10px; @@ -307,13 +311,14 @@ input[type="submit"] { .input-range__track, .input-range__slider-container { transition: none; - height: 30px; + height: 36px; border-radius: 3px; cursor: col-resize; } .input-range__track--background { - background: rgba(134, 201, 232, 0.5); + margin: 0; + background: rgba(100,100,100,0.5); } .input-range__track--active { @@ -329,7 +334,7 @@ input[type="submit"] { top: 0; height: 100%; width: 20px; - margin: -30px 0 0 0; + margin: -36px 0 0 0; border-radius: 3px; } diff --git a/src/scss/views/_discover.scss b/src/scss/views/_discover.scss index 2157898d..d4595828 100755 --- a/src/scss/views/_discover.scss +++ b/src/scss/views/_discover.scss @@ -33,7 +33,7 @@ .seeds, .tunabilities { - padding-top: 40px; + padding-top: 20px; h3 { padding-bottom: 6px; @@ -120,6 +120,10 @@ } } } + + .actions { + padding-top: 30px; + } section { .grid {