Tweaking tunability fields

mopidy_iris/static/app.css

@@ -3185,7 +3185,7 @@ input[type="submit"] {
     display: inline-block;
     float: none;
     width: auto;
-    padding: 5px 30px 5px 30px;
+    padding: 5px 5px 5px 26px;
     position: relative;
     cursor: pointer; }
   .field.radio input + .label:before {
@@ -3226,6 +3226,8 @@ input[type="submit"] {
   .field.range .input-range__slider {
     background: #32b5f2;
     border-color: #32b5f2; }
+  .field.sub-field {
+    padding: 0; }
   .field .description {
     display: inline-block;
     padding: 10px 14px;
@@ -5330,6 +5332,8 @@ main header {
   .has-tooltip:hover .tooltip {
     opacity: 1;
     bottom: 35px; }
+  .has-tooltip.info .fa {
+    opacity: 0.3; }
   .has-tooltip.large-tooltip .tooltip {
     padding: 8px 12px;
     font-size: 12px;

mopidy_iris/static/app.js

@@ -69957,9 +69957,7 @@ var Discover = function (_React$Component) {
 					var tunability = Object.assign({}, this.state.tunabilities[key], {
 						name: key
 					});
-					if (tunability.enabled) {
-						tunabilities.push(tunability);
-					}
+					tunabilities.push(tunability);
 				}
 			}
 
@@ -69969,34 +69967,54 @@ var Discover = function (_React$Component) {
 				tunabilities.map(function (tunability) {
 					return _react2.default.createElement(
 						'div',
-						{ className: 'field tunability range', key: tunability.name },
+						{ className: 'field tunability', key: tunability.name },
 						_react2.default.createElement(
-							'label',
-							null,
+							'div',
+							{ className: 'field sub-field checkbox' },
 							_react2.default.createElement(
-								'span',
-								{ className: 'has-tooltip sentence' },
-								tunability.name,
+								'label',
+								null,
+								_react2.default.createElement('input', {
+									type: 'checkbox',
+									name: "tunability_" + tunability.name,
+									checked: tunability.enabled,
+									onChange: function onChange(e) {
+										return _this3.toggleTunability(tunability.name);
+									} }),
+								_react2.default.createElement(
+									'div',
+									{ className: 'label' },
+									tunability.name
+								),
 								_react2.default.createElement(
 									'span',
-									{ className: 'tooltip' },
-									tunability.description
+									{ className: 'has-tooltip info' },
+									_react2.default.createElement(_reactFontawesome2.default, { name: 'info-circle' }),
+									_react2.default.createElement(
+										'span',
+										{ className: 'tooltip' },
+										tunability.description
+									)
 								)
 							)
 						),
-						_react2.default.createElement(
+						tunability.enabled ? _react2.default.createElement(
 							'div',
 							{ className: 'input' },
-							_react2.default.createElement(_reactInputRange2.default, {
-								disabled: !tunability.enabled,
-								minValue: tunability.min,
-								maxValue: tunability.max,
-								value: tunability.value,
-								onChange: function onChange(value) {
-									return _this3.setTunability(tunability.name, value);
-								}
-							})
-						)
+							_react2.default.createElement(
+								'div',
+								{ className: 'field sub-field range' },
+								_react2.default.createElement(_reactInputRange2.default, {
+									disabled: !tunability.enabled,
+									minValue: tunability.min,
+									maxValue: tunability.max,
+									value: tunability.value,
+									onChange: function onChange(value) {
+										return _this3.setTunability(tunability.name, value);
+									}
+								})
+							)
+						) : null
 					);
 				})
 			);

src/js/components/AddTunabilityField.js

@@ -0,0 +1,153 @@
+
+import React, { PropTypes } from 'react'
+import { connect } from 'react-redux'
+import { bindActionCreators } from 'redux'
+import { Link, hashHistory } from 'react-router'
+
+import ArtistSentence from './ArtistSentence'
+import * as helpers from '../helpers'
+import * as coreActions from '../services/core/actions'
+import * as uiActions from '../services/ui/actions'
+import * as spotifyActions from '../services/spotify/actions'
+
+class AddSeedField extends React.Component{
+
+	constructor(props){
+		super(props)
+
+		this.state = {
+			value: ''
+		}
+		this.id = helpers.generateGuid()
+		this.timer = null
+		this.handleClick = this.handleClick.bind(this)
+	}
+
+	componentDidMount(){
+		window.addEventListener("click", this.handleClick, false)
+
+		if (!this.props.genres){
+			this.props.spotifyActions.getGenres()
+		}
+	}
+
+	componentWillUnmount(){		
+		window.removeEventListener("click", this.handleClick, false)
+	}
+
+	handleClick(e){
+		if ($(e.target).closest('.add-seed-field').length <= 0){
+			this.props.spotifyActions.clearAutocompleteResults(this.id)
+		}
+	}
+
+	handleChange(e,value){
+		var self = this
+
+		// update our local state
+		this.setState({value: value})
+		
+		// start a timer to perform the actual search
+		// this provides a wee delay between key presses to avoid request spamming
+		clearTimeout(this.timer)
+        this.timer = setTimeout(
+            function(){
+            	self.setState({searching: true})
+                self.props.spotifyActions.getAutocompleteResults(self.id,value,['artist','track','genre'])
+            },
+            500
+        )
+	}
+
+	handleSelect(e,item){
+		this.setState({value: ''})
+		this.props.onSelect(e,item.uri)
+		this.props.spotifyActions.clearAutocompleteResults(this.id)
+
+		// Add our selected item to our global index
+		switch (helpers.uriType(item.uri)){
+
+			case 'artist':
+				this.props.coreActions.artistsLoaded(item);
+				break;
+
+			case 'track':
+				this.props.coreActions.tracksLoaded(item);
+				break;
+		}
+	}
+
+	results(){
+		if (typeof(this.props.results) === 'undefined'){
+			return null
+		} else if (typeof(this.props.results[this.id]) === 'undefined'){
+			return null
+		} else {
+			return this.props.results[this.id]
+		}
+	}
+
+	renderResults(type){
+		var results = this.results()
+		if (!results || typeof(results[type]) === 'undefined' || results[type].length <= 0) return null
+		
+		// only show the first 3
+		var items = results[type].slice(0,3)
+
+		return (
+			<div className="type">
+				<h4 className="grey-text">{type}</h4>
+				{
+					items.map(item => {
+						return (
+							<div className="result" key={item.uri} onClick={e => this.handleSelect(e,item)}>
+								{item.name}
+								{type == 'tracks' ? <span className="grey-text"> <ArtistSentence artists={item.artists} nolinks /></span> : null}
+							</div>
+						)
+					})
+				}
+			</div>
+		)
+	}
+
+	render(){
+		var className = "field autocomplete-field add-seed-field"
+		if (this.results() && this.results().loading){
+			className += " loading"
+		}
+		return (
+			<div className={className}>
+				<div className="input">
+					<input 
+						type="text" 
+						value={this.state.value}
+						onChange={e => this.handleChange(e,e.target.value)} 
+						placeholder={this.props.placeholder ? this.props.placeholder : "Start typing..."} />
+				</div>
+				<div className="results">
+					{this.renderResults('artists')}
+					{this.renderResults('tracks')}
+					{this.renderResults('genres')}
+				</div>
+			</div>
+		);
+	}
+}
+
+const mapStateToProps = (state, ownProps) => {
+	return {
+		genres: (state.ui.genres ? state.ui.genres : null),
+		results: (state.spotify.autocomplete_results ? state.spotify.autocomplete_results : {})
+	}
+}
+
+const mapDispatchToProps = (dispatch) => {
+	return {
+		coreActions: bindActionCreators(coreActions, dispatch),
+		uiActions: bindActionCreators(uiActions, dispatch),
+		spotifyActions: bindActionCreators(spotifyActions, dispatch)
+	}
+}
+
+export default connect(mapStateToProps, mapDispatchToProps)(AddSeedField)

src/js/views/discover/DiscoverRecommendations.js

@@ -340,9 +340,7 @@ class Discover extends React.Component{
 						name: key
 					}
 				);
-				if (tunability.enabled){
-					tunabilities.push(tunability);
-				}
+				tunabilities.push(tunability);
 			}
 		}
 
@@ -351,22 +349,34 @@ class Discover extends React.Component{
 				{
 					tunabilities.map(tunability => {
 						return (
-							<div className="field tunability range" key={tunability.name}>
-								<label>
-									<span className="has-tooltip sentence">
-										{tunability.name}
-										<span className="tooltip">{tunability.description}</span>
-									</span>
-								</label>
-								<div className="input">
-									<InputRange
-										disabled={!tunability.enabled}
-										minValue={tunability.min}
-										maxValue={tunability.max}
-										value={tunability.value}
-										onChange={value => this.setTunability(tunability.name, value)}
-									/>
+							<div className="field tunability" key={tunability.name}>
+								<div className="field sub-field checkbox">
+									<label>
+										<input 
+											type="checkbox"
+											name={"tunability_"+tunability.name}
+											checked={tunability.enabled}
+											onChange={e => this.toggleTunability(tunability.name)} />
+										<div className="label">
+											{tunability.name}
+										</div>
+										<span className="has-tooltip info">
+											<FontAwesome name="info-circle" />
+											<span className="tooltip">{tunability.description}</span>
+										</span>
+									</label>
 								</div>
+								{tunability.enabled ? <div className="input">
+									<div className="field sub-field range">
+										<InputRange
+											disabled={!tunability.enabled}
+											minValue={tunability.min}
+											maxValue={tunability.max}
+											value={tunability.value}
+											onChange={value => this.setTunability(tunability.name, value)}
+										/>
+									</div>
+								</div> : null}
 							</div>
 						);
 					})

src/scss/components/_tooltip.scss

@@ -46,6 +46,12 @@
 		}
 	}
 
+	&.info {
+		.fa {
+			opacity: 0.3;
+		}
+	}
+
 	&.large-tooltip {
 		.tooltip {
 			padding: 8px 12px;
@@ -54,4 +60,4 @@
 			bottom: 50px;
 		}
 	}
-}
+}

src/scss/global/_forms.scss

@@ -247,7 +247,7 @@ input[type="submit"] {
 			display: inline-block;
 			float: none;
 			width: auto;
-			padding: 5px 30px 5px 30px;
+			padding: 5px 5px 5px 26px;
 			position: relative;
 			cursor: pointer;
 		}
@@ -313,6 +313,10 @@ input[type="submit"] {
 		}
 	}
 
+	&.sub-field {
+		padding: 0;
+	}
+
 	.description {
 		display: inline-block;
 		padding: 10px 14px;