Sortable modal UI

src/js/components/Modal/EditRadioModal.js

@@ -168,7 +168,7 @@ export default class EditRadioModal extends React.Component{
 										{seed.unresolved ? <span className="grey-text">{seed.uri}</span> : <span>{seed.name}</span> }
 										{!seed.unresolved ? <span className="grey-text">&nbsp;({seed.type})</span> : null}
 										<button className="discrete remove-uri no-hover"  onClick={e => this.removeSeed(seed.uri)}>
-											<FontAwesome name="close" />&nbsp;Remove
+											<FontAwesome name="trash" />
 										</button>
 									</div>
 								)

src/js/components/Modal/SearchURISchemesModal.js

@@ -39,38 +39,61 @@ export default class SearchURISchemesModal extends React.Component{
 	}
 
 	render(){
+		var unselected_schemes = [];
+		for (var i = 0; i < this.props.available_uri_schemes.length; i++){
+			var scheme = this.props.available_uri_schemes[i];
+			if (!this.state.schemes.includes(scheme)){
+				unselected_schemes.push(scheme);
+			}
+		}
+
 		return (
 			<div>
 				<h1 className="no-bottom-padding">Search sources</h1>
-				<h2 className="grey-text bottom-padding">Customise the providers used when searching. Reduce the number of providers to speed up your searches. Please note that not all backends support searching by artist, album or playlist.</h2>
+				<h2 className="grey-text bottom-padding">Customise the providers used when searching. Reduce the number of providers to speed up your searches.</h2>
 
 				<form onSubmit={e => this.handleSubmit(e)}>
 					<Sortable
 						className="list"
+						options={{
+							handle: '.drag-handle'
+						}}
 						onChange={(order, sortable, e) => {
 							this.setState({schemes: order})
 						}}>
 							{
 								this.state.schemes.map(scheme => {
-									return (								
-										<div 
-											className="list-item field checkbox white"
-											key={scheme}
-											data-id={scheme}>
-												<label>
-													<input 
-														type="checkbox"
-														name={scheme}
-														checked={this.state.schemes.indexOf(scheme) > -1}
-														onChange={ e => this.handleToggle(scheme)} />
-													<span className="label">{scheme.replace(':','')} &nbsp;<FontAwesome className="grey-text" name={helpers.sourceIcon(scheme)} /></span>
-												</label>
+									return (
+										<div className="list-item draggable" key={scheme} data-id={scheme}>
+											<FontAwesome className="grey-text drag-handle" name="bars" />
+											{scheme.replace(':','')}
+											<button className="discrete remove-uri no-hover" onClick={e => this.handleToggle(scheme)}>
+												<FontAwesome name="trash" />
+											</button>
 										</div>
 									)
 								})
 							}
 					</Sortable>
 
+					<div className="available-schemes">
+						<h4>Add more schemes</h4>
+						{
+							unselected_schemes.map(scheme => {
+								return (
+									<div 
+										className="scheme flag large blue" 
+										key={scheme}
+										onClick={e => this.handleToggle(scheme)}>
+											{scheme.replace(':','')}
+											&nbsp;&nbsp;
+											<FontAwesome name="plus" />
+									</div>
+								)
+							})
+						}
+					</div>
+
 					<div className="actions centered-text">
 						<button type="submit" className="primary wide">Save</button>
 					</div>

src/scss/components/_modal.scss

@@ -104,6 +104,30 @@
 			}
 		}
 
+		.add-uri,
+		.remove-uri {
+			position: absolute;
+			top: 6px;
+			right: 6px;
+			padding: 8px;
+			margin: 0;
+			min-width: 0;
+			color: #FFFFFF;
+			background: transparent;
+
+			&:before {
+				display: none !important;
+			}
+
+			&:hover {
+				color: $turquoise;
+
+				&.remove-uri {
+					color: $red;
+				}
+			}
+		}
+
 		.list {
 			@include clearfix();
 
@@ -111,7 +135,7 @@
 				@include animate();
 				box-sizing: border-box;
 				display: block;
-				padding: 14px 12px;
+				padding: 14px 12px 12px;
 				position: relative;
 				border: 0;
 				border-radius: 3px;
@@ -127,6 +151,17 @@
 				&:hover {
 					background: rgba(255,255,255,0.1);
 				}
+
+				&.draggable {
+					padding-left: 35px;
+
+					.drag-handle {
+						position: absolute;
+						top: 0;
+						left: 0;
+						padding: 16px 12px;
+					}
+				}
 			}
 
 			&.playlists {
@@ -188,30 +223,6 @@
 				}
 			}			
 		}
-
-		.add-uri,
-		.remove-uri {
-			position: absolute;
-			top: 5px;
-			right: 0;
-			padding: 8px;
-			margin: 0;
-			min-width: 0;
-			color: #FFFFFF;
-			background: transparent;
-
-			&:before {
-				display: none !important;
-			}
-
-			&:hover {
-				color: $turquoise;
-
-				&.remove-uri {
-					color: $red;
-				}
-			}
-		}
 	}
 
 	&.kiosk_mode {
@@ -289,6 +300,23 @@
 		}
 	}
 
+	&.search_uri_schemes {
+		.available-schemes {
+			padding-top: 40px;
+
+			.scheme {
+				@include animate();
+				margin-left: 0;
+				margin-bottom: 8px;
+
+				&:hover {
+					cursor: pointer;
+					background: darken($blue, 8%);
+				}
+			}
+		}
+	}
+
 	.actions {
 		padding-top: 50px;
 		text-align: center;

src/scss/global/_core.scss

@@ -394,6 +394,11 @@ footer {
 		color: $mid_grey;
 	}
 
+	&.large {
+		padding: 8px 10px 7px;
+		font-size: 12px;
+	}
+
 	h1 &,
 	h2 & {
 		line-height: 1.4em;