secstate/Iris
Public Access
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Context menu context and titles; List unification

Browse Source
This commit is contained in:
James Barnsley
2017-03-13 21:19:09 +13:00
parent 72c31f045b
commit 0e72f2a52e
13 changed files with 42 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/js/components/ContextMenu.js
View File

@ -268,6 +268,7 @@ class ContextMenu extends React.Component{
if (context.name == 'custom'){
return (
<span className="title">
<div className="background generic"></div>
<div className="text">
{this.props.menu.title}
</div>
@ -311,6 +312,7 @@ class ContextMenu extends React.Component{
<div className="text">
{context.items_count} items
</div>
<div className="background generic"></div>
</span>
)
break
@ -392,7 +394,7 @@ class ContextMenu extends React.Component{
var start_radio = (
<span className="menu-item-wrapper">
<a className="menu-item" onClick={e => this.startRadio(e)}>
<span className="label">Start {this.context.nice_name} radio</span>
<span className="label">Start radio</span>
</a>
</span>
)

4
src/js/components/ArtistList.js → src/js/components/RelatedArtists.js
View File

@ -3,7 +3,7 @@ import React, { PropTypes } from 'react'
import { Link } from 'react-router'
import Thumbnail from './Thumbnail'
export default class ArtistList extends React.Component{
export default class RelatedArtists extends React.Component{
constructor(props) {
super(props)
@ -13,7 +13,7 @@ export default class ArtistList extends React.Component{
if( !this.props.artists ) return null
return (
<div className="list artist-list">
<div className="list related-artist-list">
{
this.props.artists.map( (artist, index) => {
if( artist.uri ){

2
src/js/components/TrackList.js
View File

@ -132,7 +132,7 @@ class TrackList extends React.Component{
var selected_tracks = this.selectedTracks()
var data = {
e: e,
context: (this.props.context ? this.props.context : 'track'),
context: (this.props.context ? this.props.context+'-track' : 'track'),
tracklist_uri: (this.props.uri ? this.props.uri : null),
items: selected_tracks,
uris: helpers.asURIs(selected_tracks),

4
src/js/views/Artist.js
View File

@ -10,8 +10,8 @@ import TrackList from '../components/TrackList'
import AlbumGrid from '../components/AlbumGrid'
import Thumbnail from '../components/Thumbnail'
import Parallax from '../components/Parallax'
import ArtistList from '../components/ArtistList'
import ArtistGrid from '../components/ArtistGrid'
import RelatedArtists from '../components/RelatedArtists'
import FollowButton from '../components/FollowButton'
import SidebarToggleButton from '../components/SidebarToggleButton'
import ContextMenuTrigger from '../components/ContextMenuTrigger'
@ -178,7 +178,7 @@ class Artist extends React.Component{
<div className="col w5"></div>
{related_artists.length > 0 ? <div className="col w25 related-artists"><h4>Related artists</h4><div className="list-wrapper"><ArtistList artists={related_artists.slice(0,6)} /></div></div> : null}
{related_artists.length > 0 ? <div className="col w25 related-artists"><h4>Related artists</h4><div className="list-wrapper"><RelatedArtists artists={related_artists.slice(0,6)} /></div></div> : null}
<div className="cf"></div>

4
src/js/views/Playlist.js
View File

@ -146,10 +146,10 @@ class Playlist extends React.Component{
render(){
var scheme = helpers.uriSource( this.props.params.uri )
var context = 'playlist-track'
var context = 'playlist'
if (this.props.playlist){
if (this.props.playlist.can_edit) context = 'editable-playlist-track'
if (this.props.playlist.can_edit) context = 'editable-playlist'
return (
<div className="view playlist-view">

3
src/js/views/library/LibraryAlbums.js
View File

@ -82,11 +82,12 @@ class LibraryAlbums extends React.Component{
}
]
return (
<section className="list-wrapper album-list">
<section className="list-wrapper">
<List
handleContextMenu={(e,item) => this.handleContextMenu(e,item)}
rows={albums}
columns={columns}
className="album-list"
link_prefix={global.baseURL+"album/"} />
</section>
)

3
src/js/views/library/LibraryArtists.js
View File

@ -69,11 +69,12 @@ class LibraryArtists extends React.Component{
}
]
return (
<section className="list-wrapper artist-list">
<section className="list-wrapper">
<List
handleContextMenu={(e,item) => this.handleContextMenu(e,item)}
rows={artists}
columns={columns}
className="artist-list"
link_prefix={global.baseURL+"artist/"} />
</section>
)

6
src/js/views/library/LibraryLocalAlbums.js
View File

@ -92,7 +92,11 @@ class LibraryLocalAlbums extends React.Component{
return (
<section className="list-wrapper">
<List columns={columns} rows={albums} link_prefix={global.baseURL+"album/"} />
<List
columns={columns}
rows={albums}
className="library-local-album-list"
link_prefix={global.baseURL+"album/"} />
</section>
)
}else{

1
src/js/views/library/LibraryLocalArtists.js
View File

@ -62,6 +62,7 @@ class LibraryLocalArtists extends React.Component{
columns={[{ name: 'name', width: '100'}]}
rows={artists}
link_prefix={global.baseURL+"artist/"}
className="library-local-artist-list"
handleContextMenu={(e,item) => this.handleContextMenu(e,item)}
/>
</section>

6
src/js/views/library/LibraryLocalDirectory.js
View File

@ -88,8 +88,12 @@ class LibraryLocalDirectory extends React.Component{
<List
columns={[{ name: 'name', width: '100'}]}
rows={items.folders}
className="library-local-directory-list"
link_prefix={global.baseURL+"library/local/directory/"} />
<TrackList tracks={items.tracks} noheader />
<TrackList
tracks={items.tracks}
className="library-local-track-list"
noheader />
</section>
</div>
);

3
src/js/views/library/LibraryPlaylists.js
View File

@ -81,11 +81,12 @@ class LibraryPlaylists extends React.Component{
}
]
return (
<section className="list-wrapper playlist-list">
<section className="list-wrapper">
<List
handleContextMenu={(e,item) => this.handleContextMenu(e,item)}
rows={playlists}
columns={columns}
className="playlist-list"
link_prefix={global.baseURL+"playlist/"} />
</section>
)

16
src/scss/components/_context-menu.scss
View File

@ -38,13 +38,25 @@
@include blur(5px);
background-size: cover;
background-position: 50% 20%;
opacity: 0.5;
opacity: 0.65;
position: absolute;
top: -10px;
left: -10px;
bottom: -10px;
right: -10px;
z-index: 1;
&.generic {
opacity: 0.9;
background: rgba(50,181,242,1);
background: -moz-linear-gradient(45deg, rgba(50,181,242,1) 0%, rgba(50,181,242,1) 18%, rgba(5,118,166,1) 100%);
background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(50,181,242,1)), color-stop(18%, rgba(50,181,242,1)), color-stop(100%, rgba(5,118,166,1)));
background: -webkit-linear-gradient(45deg, rgba(50,181,242,1) 0%, rgba(50,181,242,1) 18%, rgba(5,118,166,1) 100%);
background: -o-linear-gradient(45deg, rgba(50,181,242,1) 0%, rgba(50,181,242,1) 18%, rgba(5,118,166,1) 100%);
background: -ms-linear-gradient(45deg, rgba(50,181,242,1) 0%, rgba(50,181,242,1) 18%, rgba(5,118,166,1) 100%);
background: linear-gradient(45deg, rgba(50,181,242,1) 0%, rgba(50,181,242,1) 18%, rgba(5,118,166,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#32b5f2', endColorstr='#0576a6', GradientType=1 );
}
}
.text {
@ -108,7 +120,7 @@
width: 0;
min-height: 180px;
overflow-y: scroll;
background: lighten($dark_grey, 10%);
background: lighten($dark_grey, 15%);
z-index: 3;
&.expanded {

2
src/scss/components/_lists.scss
View File

@ -158,7 +158,7 @@
}
}
&.artist-list {
&.related-artist-list {
.artist {
display: block;
border: 0;