Framework for sortable sources

src/assets/icon_white.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 16 16" style="enable-background:new 0 0 16 16;" xml:space="preserve">
+<path d="M6.6,10.7l-4.4,4.3V1.1l4.4,4.3V10.7z M6.6,1.1v2.1l5,4.8l-5,4.9v2L13.8,8L6.6,1.1z" style="fill: #FFFFFF;" />
+</svg>

src/js/components/Fields/SourcesPriority.js

@@ -0,0 +1,31 @@
+
+import React, { PropTypes } from 'react'
+import Icon from '../Icon'
+import * as helpers from '../../helpers'
+
+export default class SourcesPriority extends React.Component{
+
+	constructor(props){
+		super(props)
+	}
+
+	render(){
+		var className = "sources-priority-field";
+
+		return (
+			<div className={className}>
+				{
+					this.props.uri_schemes.map(scheme => {
+						var name = helpers.titleCase(scheme.replace(':','').replace('+',' '));
+
+						return (
+							<span className="source flag grey" key={scheme}>
+								{name}
+							</span>
+						);	
+					})
+				}
+			</div>
+		);
+	}
+}

src/js/components/Modal/Modal.js

@@ -12,7 +12,6 @@ import EditPlaylistModal from './EditPlaylistModal'
 import EditRadioModal from './EditRadioModal'
 import ImageZoomModal from './ImageZoomModal'
 import KioskModeModal from './KioskModeModal'
-import SearchURISchemesModal from './SearchURISchemesModal'
 import InitialSetupModal from './InitialSetupModal'
 import AuthorizationModal_Send from './AuthorizationModal_Send'
 import AuthorizationModal_Receive from './AuthorizationModal_Receive'
@@ -123,13 +122,6 @@ class Modal extends React.Component{
 						data={this.props.modal.data} 
 						current_track={this.props.current_track} /> : null }
 
-					{ this.props.modal.name == 'search_uri_schemes' ? <SearchURISchemesModal 
-						uiActions={this.props.uiActions} 
-						coreActions={this.props.coreActions} 
-						search_uri_schemes={this.props.search_uri_schemes} 
-						available_uri_schemes={this.props.uri_schemes} 
-						data={this.props.modal.data} /> : null }
-
 					{ this.props.modal.name == 'initial_setup' ? <InitialSetupModal
 						uiActions={this.props.uiActions}
 						pusherActions={this.props.pusherActions} /> : null }
@@ -143,8 +135,6 @@ class Modal extends React.Component{
 const mapStateToProps = (state, ownProps) => {
 	return {
 		current_track: (state.core.current_track && state.core.tracks[state.core.current_track.uri] !== undefined ? state.core.tracks[state.core.current_track.uri] : null),
-		uri_schemes: (state.mopidy.uri_schemes ? state.mopidy.uri_schemes : []),
-		search_uri_schemes: (state.ui.search_uri_schemes ? state.ui.search_uri_schemes : []),
 		volume: state.mopidy.volume,
 		mute: state.mopidy.mute,
 		modal: state.ui.modal,

src/js/views/Settings.js

@@ -6,6 +6,7 @@ import { bindActionCreators } from 'redux'
 
 import ConfirmationButton from '../components/Fields/ConfirmationButton'
 import PusherConnectionList from '../components/PusherConnectionList'
+import SourcesPriority from '../components/Fields/SourcesPriority'
 import Header from '../components/Header'
 import Parallax from '../components/Parallax'
 import Icon from '../components/Icon'
@@ -257,6 +258,20 @@ class Settings extends React.Component {
 						</div>
 					</div>
 
+					<div className="field sources-priority">
+						<div className="name has-tooltip">
+							Sources priority
+							<span className="tooltip">Order of searching and search results</span>
+						</div>
+						<div className="input">
+			        		<SourcesPriority
+								uri_schemes={this.props.mopidy.uri_schemes}
+								uri_schemes_priority={this.props.ui.uri_schemes_priority}
+			        			uiActions={this.props.uiActions}
+			        		/>
+			        	</div>
+			        </div>
+
 					<div className="field pusher-connections">
 						<div className="name">Connections</div>
 						<div className="input">

src/scss/app.scss

@@ -24,6 +24,7 @@
 @import 'components/dropdown-field';
 @import 'components/autocomplete-field';
 @import 'components/filter-field';
+@import 'components/sources-priority-field';
 @import 'components/sub-views';
 @import 'components/debug';
 @import 'components/tooltip';

src/scss/components/_lists.scss

@@ -43,7 +43,7 @@
 
 		.context-menu-trigger {
 			position: absolute;
-			top: 2px;
+			top: 0;
 			right: 0;
 			font-size: 14px;
 			z-index: 2;
@@ -57,7 +57,7 @@
 			color: $mid_grey;
 			position: absolute;
 			top: 16px;
-			right: 32px;
+			right: 36px;
 		}
 
 		:root .notouch:not(.dragging) &:not(.header):not(.no-click).hover {

src/scss/components/_sources-priority-field.scss

@@ -0,0 +1,14 @@
+
+.sources-priority-field {
+	padding: 7px 0;
+
+	.source {
+		display: inline-block;
+		border-radius: 3px;
+		padding: 3px 6px;
+		margin: 0 5px 5px 0;
+		cursor: move;
+		font-size: inherit;
+		font-weight: normal;
+	}
+}