Sidebar tweaking; Header buttons unified height; List glitch on Chrome

src/js/components/ContextMenu.js

@@ -215,9 +215,9 @@ class ContextMenu extends React.Component{
 
 		var className = 'context-menu'
 		var trigger = 'click'
-		if (this.props.trigger_override) {
-			className += ' '+this.props.trigger_override
-			trigger = this.props.trigger_override
+		if (this.props.emulate_touch) {
+			className += ' touch'
+			trigger = 'touch'
 		} else {
 			className += ' '+this.props.context_menu.trigger
 		}
@@ -232,7 +232,7 @@ class ContextMenu extends React.Component{
 
 const mapStateToProps = (state, ownProps) => {
 	return {
-		trigger_override: state.ui.trigger_override,
+		emulate_touch: state.ui.emulate_touch,
 		context_menu: state.ui.context_menu,
 		current_track: state.ui.current_track,
 		current_tracklist: state.ui.current_tracklist,

src/js/components/List.js

@@ -40,7 +40,9 @@ export default class List extends React.Component{
 		var value = row
 
 		for (var i = 0; i < key.length; i++) {
-			if (typeof(value[key[i]]) === 'undefined' || value[key[i]].trim() == '') {
+			if (typeof(value[key[i]]) === 'undefined') {
+				return <span>-</span>
+			} else if ( typeof(value[key[i]]) === 'string' && value[key[i]].replace(' ','') == '') {
 				return <span>-</span>
 			} else {
 				value = value[key[i]]

src/js/views/Debug.js

@@ -67,35 +67,16 @@ class Debug extends React.Component{
 
 					<h4 className="underline">User interface</h4>
 					<form>
-						<div className="field radio">
-							<div className="name">Touch/click behavior</div>
+						<div className="field checkbox">
+							<div className="name">Emulation</div>
 							<div className="input">
 								<label>
 									<input 
-										type="radio"
-										name="touch_mode"
-										value="default"
-										checked={ !this.props.trigger_override }
-										onChange={ e => this.props.uiActions.set({ trigger_override: null })} />
-									<span className="label">Default</span>
-								</label>
-								<label>
-									<input 
-										type="radio"
-										name="touch_mode"
-										value="click"
-										checked={ this.props.trigger_override == 'click' }
-										onChange={ e => this.props.uiActions.set({ trigger_override: e.target.value })} />
-									<span className="label">Click</span>
-								</label>
-								<label>
-									<input 
-										type="radio"
-										name="touch_mode"
-										value="touch"
-										checked={ this.props.trigger_override == 'touch' }
-										onChange={ e => this.props.uiActions.set({ trigger_override: e.target.value })} />
-									<span className="label">Touch</span>
+										type="checkbox"
+										name="emulate_touch"
+										checked={ this.props.emulate_touch }
+										onChange={ e => this.props.uiActions.set({ emulate_touch: !this.props.emulate_touch })} />
+									<span className="label">Mouse events as touch</span>
 								</label>
 							</div>
 						</div>
@@ -188,7 +169,7 @@ class Debug extends React.Component{
 const mapStateToProps = (state, ownProps) => {
 	return {
 		connectionid: state.pusher.connectionid,
-		trigger_override: state.ui.trigger_override,
+		emulate_touch: state.ui.emulate_touch,
 		debug_response: state.ui.debug_response
 	}
 }

src/js/views/Settings.js

@@ -153,8 +153,13 @@ class Settings extends React.Component{
 									onChange={ e => this.setState({ mopidy_port: e.target.value })} 
 									value={ this.state.mopidy_port } />
 							</div>
+						</div>					
+						<div className="field">
+							<div className="name"></div>
+							<div className="input">
+								<button type="submit" className="secondary">Apply</button>
+							</div>
 						</div>
-						<button type="submit" className="secondary">Apply</button>
 					</form>
 
 					<h4 className="underline">Pusher</h4>