Buttons on white; Added by in mobile context, fixes #342

mopidy_iris/static/app.css

@@ -3326,10 +3326,10 @@ select {
   text-align: center; }
   .button .icon {
     padding-right: 8px; }
-  .button:not(.no-hover) {
+  .button:not(.button--no-hover) {
     position: relative;
     border-radius: 3px; }
-    .button:not(.no-hover):before {
+    .button:not(.button--no-hover):before {
       -webkit-transition: all 0.2s ease-in-out;
       -moz-transition: all 0.2s ease-in-out;
       -o-transition: all 0.2s ease-in-out;
@@ -3349,9 +3349,9 @@ select {
       background: -moz-linear-gradient(to bottom right, rgba(255, 255, 255, 0.75), black);
       background: -o-linear-gradient(to bottom right, rgba(255, 255, 255, 0.75), black);
       background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.75), black); }
-  .notouch .button:not(.no-hover):hover {
+  .notouch .button:not(.button--no-hover):hover {
     box-shadow: 1px 2px 6px rgba(0, 0, 0, 0.2); }
-    .notouch .button:not(.no-hover):hover:before {
+    .notouch .button:not(.button--no-hover):hover:before {
       opacity: 0.2; }
   .button:active {
     -webkit-transition: none !important;
@@ -3361,10 +3361,10 @@ select {
     background: #f2f2f2;
     transform: translate(1px, 1px);
     opacity: 0.8; }
-  .light-theme .button {
+  .light-theme .button--default {
     background: #181818;
     color: #FFFFFF; }
-    .light-theme .button:active {
+    .light-theme .button--default:active {
       background: #000000; }
   .button--small {
     padding: 6px 18px 4px; }
@@ -3376,6 +3376,9 @@ select {
   .button--primary {
     background: #08d58f;
     color: #FFFFFF; }
+  .button--secondary {
+    background: #32b5f2;
+    color: #FFFFFF; }
   .button--white {
     color: #000000;
     background: #FFFFFF; }
@@ -3388,9 +3391,6 @@ select {
   .button--confirming, .button--destructive {
     background: #cf2d2d;
     color: #FFFFFF; }
-  .button--alternative {
-    background: #32b5f2;
-    color: #FFFFFF; }
   .button--timing-out {
     position: relative; }
     .button--timing-out:before {
@@ -3733,6 +3733,8 @@ select {
           text-transform: capitalize; }
         .context-menu__title__deselect {
           font-size: 0.86em; }
+        .context-menu__title a {
+          color: inherit; }
       .context-menu__section {
         position: absolute;
         top: 20%;
@@ -4853,12 +4855,12 @@ aside {
       position: relative;
       border-radius: 3px;
       font-family: "Overpass";
-      font-weight: 500;
+      font-weight: 600;
       font-size: 15px;
       color: #FFFFFF;
       text-decoration: none;
       display: block;
-      padding: 12px 10px 10px;
+      padding: 13px 10px 10px;
       margin: 0 18px;
       border-radius: 3px; }
       aside nav a:before {
@@ -4882,7 +4884,7 @@ aside {
         background: -o-linear-gradient(to bottom right, rgba(255, 255, 255, 0.75), black);
         background: linear-gradient(to bottom right, rgba(255, 255, 255, 0.75), black); }
       .light-theme aside nav a {
-        color: #181818;
+        color: #121212;
         font-weight: 600; }
       aside nav a .icon {
         padding-right: 8px;
@@ -6751,7 +6753,8 @@ main .track-view {
   z-index: 1; }
   .discover-view .intro h1 {
     font-size: 3rem;
-    line-height: 3rem; }
+    line-height: 3rem;
+    padding-bottom: 10px; }
   .discover-view .intro__liner {
     z-index: 2;
     position: relative;
@@ -6760,29 +6763,27 @@ main .track-view {
       padding-bottom: 8px; }
     .light-theme .discover-view .intro__liner {
       color: #121212; }
-
+  .discover-view .intro__parameters {
-.discover-view__parameters {
     padding-top: 50px; }
-  .discover-view__parameters::after {
+    .discover-view .intro__parameters::after {
       content: '';
       clear: both;
       display: block; }
-  .discover-view__parameters .seeds,
+    .discover-view .intro__parameters .seeds,
-  .discover-view__parameters .tunabilities {
+    .discover-view .intro__parameters .tunabilities {
       float: left; }
-
+  .discover-view .intro__actions {
-.discover-view__actions {
     padding-top: 40px; }
-  .discover-view__actions .autocomplete-field {
+    .discover-view .intro__actions .autocomplete-field {
       width: 250px;
       display: inline-block;
       vertical-align: bottom;
       padding: 0;
       margin-right: 1px; }
-    .discover-view__actions .autocomplete-field .input {
+      .discover-view .intro__actions .autocomplete-field .input {
         float: none;
         margin: 0 10px 10px 0; }
-      .discover-view__actions .autocomplete-field .input input {
+        .discover-view .intro__actions .autocomplete-field .input input {
           background: rgba(100, 100, 100, 0.5);
           color: #FFFFFF;
           padding: 15px 13px 10px;
@@ -6790,22 +6791,22 @@ main .track-view {
           border: 1px solid transparent;
           border-top-right-radius: 0;
           border-bottom-right-radius: 0; }
-        .discover-view__actions .autocomplete-field .input input:focus, .discover-view__actions .autocomplete-field .input input:active {
+          .discover-view .intro__actions .autocomplete-field .input input:focus, .discover-view .intro__actions .autocomplete-field .input input:active {
             border-color: #32b5f2; }
-        .discover-view__actions .autocomplete-field .input input:not(*:root) {
+          .discover-view .intro__actions .autocomplete-field .input input:not(*:root) {
             padding-top: 16px;
             padding-bottom: 11px; }
-      .discover-view__actions .autocomplete-field .input:after {
+        .discover-view .intro__actions .autocomplete-field .input:after {
           background: #32b5f2; }
-    .discover-view__actions .autocomplete-field .results {
+      .discover-view .intro__actions .autocomplete-field .results {
         top: 49px; }
-  .discover-view__actions .dropdown-field .button {
+    .discover-view .intro__actions .dropdown-field .button {
       background: rgba(100, 100, 100, 0.5);
       color: #FFFFFF;
       padding: 16px 20px 14px 20px;
       border-top-left-radius: 0;
       border-bottom-left-radius: 0; }
-  .discover-view__actions .dropdown-field .options {
+    .discover-view .intro__actions .dropdown-field .options {
       top: 50px;
       right: 20px; }
 
@@ -6881,6 +6882,8 @@ main .track-view {
 @media (max-width: 800px) {
   .discover-view .intro {
     padding: 40px 20px; }
+    .discover-view .intro__parameters {
+      padding-top: 20px; }
       .discover-view .intro__parameters .seeds {
         padding-top: 20px;
         float: none; }
@@ -6893,6 +6896,8 @@ main .track-view {
           float: none; }
       .discover-view .intro__parameters .add .add-properties {
         margin-right: 0; }
+    .discover-view .intro__actions {
+      padding-top: 10px; }
       .discover-view .intro__actions .add-seed-field {
         width: 69%; }
       .discover-view .intro__actions .add-properties {

mopidy_iris/static/index.html

@@ -98,7 +98,7 @@
 
 	// Release details
 	// These are automatically injected to built HTML
-	var build = "1543999056";
+	var build = "1544123755";
 	var version = "3.31.2";
 
 	// Construct the script tag

src/js/components/ContextMenu.js

@@ -1,21 +1,22 @@
 
-import React, { PropTypes } from 'react'
+import React, { PropTypes } from 'react';
-import { hashHistory } from 'react-router'
+import { hashHistory } from 'react-router';
-import Link from './Link'
+import Link from './Link';
-import { connect } from 'react-redux'
+import { connect } from 'react-redux';
-import { bindActionCreators } from 'redux'
+import { bindActionCreators } from 'redux';
 
-import TrackList from './TrackList'
+import TrackList from './TrackList';
-import Icon from './Icon'
+import Icon from './Icon';
-import Thumbnail from './Thumbnail'
+import Thumbnail from './Thumbnail';
+import URILink from './URILink';
 
-import * as helpers from '../helpers'
+import * as helpers from '../helpers';
-import * as coreActions from '../services/core/actions'
+import * as coreActions from '../services/core/actions';
-import * as uiActions from '../services/ui/actions'
+import * as uiActions from '../services/ui/actions';
-import * as pusherActions from '../services/pusher/actions'
+import * as pusherActions from '../services/pusher/actions';
-import * as mopidyActions from '../services/mopidy/actions'
+import * as mopidyActions from '../services/mopidy/actions';
-import * as lastfmActions from '../services/lastfm/actions'
+import * as lastfmActions from '../services/lastfm/actions';
-import * as spotifyActions from '../services/spotify/actions'
+import * as spotifyActions from '../services/spotify/actions';
 
 class ContextMenu extends React.Component{
 
@@ -315,13 +316,7 @@ class ContextMenu extends React.Component{
 		this.props.uiActions.hideContextMenu()
 	}
 
-	closeAndDeselectTracks(e){
-		this.props.uiActions.hideContextMenu();
-		// TODO
-	}
-
 	renderTitle(){
-
 		var context = this.getContext()
 
 		if (context.items_count > 1){
@@ -334,6 +329,41 @@ class ContextMenu extends React.Component{
 			)
 		}
 
+		if (context.items_count == 1 && context.item !== undefined){
+			if (this.props.queue_metadata["tlid_"+context.item.tlid] !== undefined){
+				var metadata = this.props.queue_metadata["tlid_"+context.item.tlid];
+
+				if (metadata.added_from && metadata.added_by){
+					var type = (metadata.added_from ? helpers.uriType(metadata.added_from) : null);
+
+					switch (type){
+						case "discover":
+							var link = <URILink type="recommendations" uri={helpers.getFromUri('seeds',metadata.added_from)}>discover</URILink>
+							break;
+
+						case "browse":
+							var link = <URILink type="browse" uri={metadata.added_from.replace("iris:browse:","")}>browse</URILink>
+							break;
+
+						case "search":
+							var link = <URILink type="search" uri={metadata.added_from.replace("iris:","")}>search</URILink>
+							break;
+
+						default:
+							var link = <URILink type={type} uri={metadata.added_from}>{type}</URILink>;
+					}
+
+					return (
+						<div className="context-menu__title">
+							<div className="context-menu__title__text">							
+								{metadata.added_by} added from {link}
+							</div>
+						</div>
+					)
+				}
+			}
+		}
+
 		if (context.name == 'custom'){
 			if (!this.props.menu.title){
 				return null;
@@ -347,40 +377,6 @@ class ContextMenu extends React.Component{
 				</div>
 			)
 		}
-		
-		// Do we need titles or does it just confuse things and rip off Spotify too hard?
-		return null;
-/*
-		switch (context.type){
-
-			case 'artist':
-			case 'album':
-			case 'playlist':
-				var style = null;
-
-				return (
-					<div className="context-menu__title">
-						<Thumbnail size="small" images={context.item ? context.item.images : null} circle={context.type == 'artist'} />
-						<div className="context-menu__title__text">{context.item.name}</div>
-						<div className="context-menu__title__type">
-							{context.source}
-						</div>
-					</div>
-				);
-
-			default:
-				return (
-					<div className="context-menu__title">
-						<div className="context-menu__title__text">							
-							{context.items_count} {context.nice_name}{context.items_count > 1 ? 's' : null}
-						</div>
-						<div className="context-menu__title__type">
-							{context.source}
-						</div>
-					</div>
-				);
-
-		}*/
 	}
 
 	setSubmenu(name){
@@ -821,6 +817,7 @@ const mapStateToProps = (state, ownProps) => {
 		processes: state.ui.processes,
 		current_track: state.core.current_track,
 		current_tracklist: state.core.current_tracklist,
+		queue_metadata: state.core.queue_metadata,
 		spotify_library_playlists: state.spotify.library_playlists,
 		spotify_library_playlists_loaded_all: state.spotify.library_playlists_loaded_all,
 		mopidy_library_playlists: state.mopidy.library_playlists,

src/js/views/Playlist.js

@@ -137,7 +137,7 @@ class Playlist extends React.Component{
 				return (
 					<div className="actions">
 						<button className="button button--primary" onClick={ e => this.play() }>Play</button>
-						<Link className="button button--secondary" to={global.baseURL+'playlist/'+encodeURIComponent(this.props.params.uri)+'/edit'}>Edit</Link>
+						<Link className="button" to={global.baseURL+'playlist/'+encodeURIComponent(this.props.params.uri)+'/edit'}>Edit</Link>
 						<ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />
 					</div>
 				)
@@ -147,7 +147,7 @@ class Playlist extends React.Component{
 					return (
 						<div className="actions">
 							<button className="button button--primary" onClick={ e => this.play() }>Play</button>
-							<Link className="button button--secondary" to={global.baseURL+'playlist/'+encodeURIComponent(this.props.params.uri)+'/edit'}>Edit</Link>
+							<Link className="button" to={global.baseURL+'playlist/'+encodeURIComponent(this.props.params.uri)+'/edit'}>Edit</Link>
 							<ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />
 						</div>
 					)
@@ -155,7 +155,7 @@ class Playlist extends React.Component{
 				return (
 					<div className="actions">
 						<button className="button button--primary" onClick={ e => this.play() }>Play</button>
-						<FollowButton className="button--secondary" uri={this.props.params.uri} addText="Add to library" removeText="Remove from library" is_following={this.inLibrary()} />
+						<FollowButton uri={this.props.params.uri} addText="Add to library" removeText="Remove from library" is_following={this.inLibrary()} />
 						<ContextMenuTrigger onTrigger={e => this.handleContextMenu(e)} />
 					</div>
 				)

src/js/views/Settings.js

@@ -421,7 +421,7 @@ class Settings extends React.Component {
 			        </div>
 					
 					<div className="field">
-						{this.props.pusher.version.upgrade_available ? <button className="button button--alternative" onClick={e => this.props.pusherActions.upgrade()}>Upgrade to { this.props.pusher.version.latest }</button> : null }
+						{this.props.pusher.version.upgrade_available ? <button className="button button--secondary" onClick={e => this.props.pusherActions.upgrade()}>Upgrade to { this.props.pusher.version.latest }</button> : null }
 				        <button className={"button button--destructive"+(this.props.mopidy.restarting ? ' button--working' : '')} onClick={e => this.props.pusherActions.restart()}>Restart server</button>
 				        <ConfirmationButton className="button--destructive" content="Reset all settings" confirmingContent="Are you sure?" onConfirm={() => this.resetAllSettings()} />
 			        </div>

src/js/views/discover/DiscoverRecommendations.js

@@ -105,7 +105,7 @@ class Discover extends React.Component{
 					}
 				},
 				popularity: {
-					enabled: true,
+					enabled: false,
 					min: 0,
 					max: 100,
 					value: {
@@ -479,7 +479,7 @@ class Discover extends React.Component{
 					<br />
 					<section>
 						<h4>Albums</h4>
-						<AlbumGrid className="mini" albums={albums} />
+						<AlbumGrid className="grid--mini" albums={albums} />
 					</section>
 				</div>
 

src/js/views/library/LibraryBrowse.js

@@ -174,10 +174,10 @@ class LibraryBrowse extends React.Component{
 					options={view_options}
 					handleChange={value => {this.props.uiActions.set({ library_directory_view: value }); this.props.uiActions.hideContextMenu()}}
 				/>
-				{tracks ? <a className="button no-hover" onClick={e => {this.props.uiActions.hideContextMenu(); this.playAll(e, tracks)}}>
+				{tracks ? <a className="button button--no-hover" onClick={e => {this.props.uiActions.hideContextMenu(); this.playAll(e, tracks)}}>
 					<Icon name="play_circle_filled" />Play all
 				</a> : null }
-				<a className="button no-hover" onClick={e => {this.props.uiActions.hideContextMenu(); this.goBack(e)}}>
+				<a className="button button--no-hover" onClick={e => {this.props.uiActions.hideContextMenu(); this.goBack(e)}}>
 					<Icon name="keyboard_backspace" />Back
 				</a>
 			</span>

src/js/views/library/LibraryPlaylists.js

@@ -242,7 +242,7 @@ class LibraryPlaylists extends React.Component{
 					options={source_options}
 					handleChange={value => {this.props.uiActions.set({ library_playlists_source: value}); this.props.uiActions.hideContextMenu() }}
 				/>
-				<Link className="button no-hover" to={global.baseURL+'playlist/create'}>
+				<Link className="button button--no-hover" to={global.baseURL+'playlist/create'}>
 					<Icon name="add_box" />New
 				</Link>
 			</span>

src/scss/components/_context-menu.scss

@@ -191,6 +191,10 @@
 			&__deselect {
 				font-size: 0.86em;
 			}
+
+			a {
+				color: inherit;
+			}
 		}
 
 		&__section {

src/scss/components/_sidebar.scss

@@ -52,17 +52,17 @@ aside{
 		a {
 			@include gradient_overlay(3px);
 			font-family: "Overpass";
-			font-weight: 500;
+			font-weight: 600;
 			font-size: 15px;
 			color: colour(white);
 			text-decoration: none;
 			display: block;
-			padding: 12px 10px 10px;
+			padding: 13px 10px 10px;
 			margin: 0 18px;
 			border-radius: 3px;
 	
 			.light-theme & {
-				color: colour(dark_grey);
+				color: colour(darkest_grey);
 				font-weight: 600;
 			}
 

src/scss/global/_forms.scss

@@ -211,11 +211,11 @@ select {
 		padding-right: 8px;
 	}
 
-	&:not(.no-hover){
+	&:not(.button--no-hover){
 		@include gradient_overlay(3px, 0.05);
 	}
 
-	.notouch &:not(.no-hover):hover {
+	.notouch &:not(.button--no-hover):hover {
 		box-shadow: 1px 2px 6px rgba(0,0,0,0.2);
 
 		&:before {
@@ -230,7 +230,7 @@ select {
 		opacity: 0.8;
 	}
 
-	.light-theme & {
+	.light-theme &--default {
 		background: colour(dark_grey);
 		color: colour(white);
 
@@ -257,6 +257,11 @@ select {
 		color: colour(white);
 	}
 
+	&--secondary {
+		background: colour(blue);
+		color: colour(white);
+	}
+
 	&--white {
 		color: colour(black);
 		background: colour(white);
@@ -278,11 +283,6 @@ select {
 		color: colour(white);
 	}
 
-	&--alternative {
-		background: colour(blue);
-		color: colour(white);
-	}
-
 	&--timing-out {
 		position: relative;
 

src/scss/views/_discover.scss

@@ -9,6 +9,7 @@
 		h1 {
 			font-size: 3rem;
 			line-height: 3rem;
+			padding-bottom: 10px;
 		}
 
 		&__liner {
@@ -24,7 +25,6 @@
 				color: colour(darkest_grey);
 			}
 		}
-	}
 
 		&__parameters {
 			@include clearfix();
@@ -95,6 +95,7 @@
 				}
 			}
 		}
+	}
 
 	.seeds {
 		.seed {
@@ -202,6 +203,7 @@
 			padding: 40px 20px;
 
 			&__parameters {
+				padding-top: 20px;
 
 				.seeds {
 					padding-top: 20px;
@@ -229,6 +231,8 @@
 			}
 
 			&__actions {
+				padding-top: 10px;
+
 				.add-seed-field {
 					width: 69%;
 				}