Context menu icons

mopidy_iris/static/app.css

@@ -3425,12 +3425,11 @@ input[type="submit"] {
           background: #000000;
           color: #FFFFFF; }
       #context-menu .liner .menu-item-wrapper .icon {
-        display: none; }
-      #context-menu .liner .menu-item-wrapper .submenu-icon {
-        float: right;
-        padding-top: 4px; }
-      #context-menu .liner .menu-item-wrapper .fa {
-        font-size: 10px; }
+        font-size: 12px; }
+        #context-menu .liner .menu-item-wrapper .icon.submenu-icon {
+          display: inline-block;
+          float: right;
+          padding-top: 4px; }
       #context-menu .liner .menu-item-wrapper .submenu {
         -webkit-transition: all 0.2s ease-in-out;
         -moz-transition: all 0.2s ease-in-out;
@@ -3452,6 +3451,9 @@ input[type="submit"] {
         #context-menu .liner .menu-item-wrapper .submenu.expanded {
           width: 100%;
           left: 0; }
+        #context-menu .liner .menu-item-wrapper .submenu .label .icon {
+          margin-bottom: 0.4em;
+          padding-right: 6px; }
         #context-menu .liner .menu-item-wrapper .submenu .menu-item {
           width: 100%; }
           #context-menu .liner .menu-item-wrapper .submenu .menu-item.close-submenu {

mopidy_iris/static/index.html

@@ -77,7 +77,7 @@
 
 	// Release details
 	// These are automatically injected to built HTML
-	var build = "1526459564";
+	var build = "1526612738";
 	var version = "3.18.0";
 
 	// Construct the script tag

src/js/components/ContextMenu.js

@@ -3,7 +3,9 @@ import React, { PropTypes } from 'react'
 import { Link, hashHistory } from 'react-router'
 import { connect } from 'react-redux'
 import { bindActionCreators } from 'redux'
-import FontAwesome from 'react-fontawesome'
+
+import TrackList from './TrackList'
+import Icon from './Icon'
 
 import * as helpers from '../helpers'
 import * as coreActions from '../services/core/actions'
@@ -12,7 +14,6 @@ import * as pusherActions from '../services/pusher/actions'
 import * as mopidyActions from '../services/mopidy/actions'
 import * as lastfmActions from '../services/lastfm/actions'
 import * as spotifyActions from '../services/spotify/actions'
-import TrackList from './TrackList'
 
 class ContextMenu extends React.Component{
 
@@ -353,9 +354,7 @@ class ContextMenu extends React.Component{
 				<span className="menu-item-wrapper">
 					<a className="menu-item close-submenu" onClick={e => this.setState({submenu_expanded: false})}>
 						<span className="label">
-							<FontAwesome name='caret-left' />
-							&nbsp;&nbsp;
-							Back
+							<Icon name="arrow_back" />Back
 						</span>
 					</a>
 				</span>
@@ -491,7 +490,7 @@ class ContextMenu extends React.Component{
 			<span className="menu-item-wrapper has-submenu">
 				<a className="menu-item" onClick={e => this.setPlaylistSubmenu()}>
 					<span className="label">Add to playlist</span>
-					<FontAwesome className="submenu-icon" name='caret-right' />
+					<Icon className="submenu-icon" name="arrow_forward" />
 				</a>
 				{this.renderPlaylistSubmenu()}
 			</span>

src/js/components/Sidebar.js

@@ -91,8 +91,8 @@ class Sidebar extends React.Component{
 							<Link className={this.linkClassName('settings')} to={global.baseURL+"settings"}>
 								<Icon name="settings" type="material" />
 								Settings
-								{this.props.test_mode ? <span className="status has-tooltip right-tooltip"><FontAwesome name="info-circle" className="orange-text" /><span className="tooltip">Test mode active</span></span>: null}
-								{!this.props.mopidy_connected || !this.props.pusher_connected ? <span className="status has-tooltip right-tooltip"><FontAwesome name="exclamation-triangle" className="red-text" /><span className="tooltip">{!this.props.mopidy_connected ? <span>Mopidy not connected<br /></span> : null}{!this.props.pusher_connected ? <span>Pusher not connected<br /></span> : null}</span></span> : null}
+								{this.props.test_mode ? <span className="status has-tooltip right-tooltip"><Icon name="info" className="orange-text" /><span className="tooltip">Test mode active</span></span>: null}
+								{!this.props.mopidy_connected || !this.props.pusher_connected ? <span className="status has-tooltip right-tooltip"><Icon name="warning" className="red-text" /><span className="tooltip">{!this.props.mopidy_connected ? <span>Mopidy not connected<br /></span> : null}{!this.props.pusher_connected ? <span>Pusher not connected<br /></span> : null}</span></span> : null}
 							</Link>
 						</section>
 

src/js/views/Debug.js

@@ -50,8 +50,7 @@ class Debug extends React.Component{
 		var options = (
 			<span>
 				<button className="no-hover" onClick={e => hashHistory.push(global.baseURL+'settings')}>
-					<Icon name="keyboard_backspace" />&nbsp;
-					Back
+					<Icon name="keyboard_backspace" />Back
 				</button>
 			</span>
 		)

src/js/views/Search.js

@@ -340,11 +340,11 @@ class Search extends React.Component{
 		var options = (
 			<span>
 				<DropdownField 
-					icon="filter_list" 
+					icon="sort" 
 					name="Sort" 
 					value={this.props.sort} 
 					options={sort_options} 
-					selected_icon={this.props.sort_reverse ? 'caret-up' : 'caret-down'} 
+					selected_icon={this.props.sort_reverse ? 'keyboard_arrow_up' : 'keyboard_arrow_down'} 
 					handleChange={value => {this.setSort(value); this.props.uiActions.hideContextMenu()}}
 				/>
 				<DropdownField 

src/js/views/Settings.js

@@ -132,13 +132,10 @@ class Settings extends React.Component {
 		var options = (
 			<span>
 				<button className="no-hover" onClick={e => hashHistory.push(global.baseURL+'settings/debug')}>
-					<Icon name="code" />&nbsp;
-					Debug
-					{this.props.ui && this.props.ui.test_mode ? <span className="flag warning">Test mode</span> : null}
+					<Icon name="code" />Debug
 				</button>
 				<a className="no-hover button" href="https://github.com/jaedb/Iris/wiki" target="_blank">
-					<Icon name="help" />&nbsp;
-					Help
+					<Icon name="help" />Help
 				</a>
 			</span>
 		)

src/scss/components/_context-menu.scss

@@ -98,16 +98,13 @@
 			}
 
 			.icon {
-				display: none;
-			}
+				font-size: 12px;
 
-			.submenu-icon {
-				float: right;
-				padding-top: 4px;
-			}
-
-			.fa {
-				font-size: 10px;
+				&.submenu-icon {
+					display: inline-block;
+					float: right;
+					padding-top: 4px;
+				}
 			}
 
 			.submenu {
@@ -131,6 +128,13 @@
 					left: 0;
 				}
 
+				.label {
+					.icon {
+						margin-bottom: 0.4em;
+						padding-right: 6px;
+					}
+				}
+
 				.menu-item {
 					width: 100%;
 

src/scss/components/_icon.scss

@@ -177,7 +177,7 @@ $icon-websocket: \e920;
 @font-face {
   font-family: 'Material Icons';
   font-style: normal;
-  font-weight: 400;
+  font-weight: 400;;
   src: url(../assets/fonts/MaterialIcons-Regular.eot); /* For IE6-8 */
   src: local('Material Icons'),
     local('MaterialIcons-Regular'),