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

Experimenting with context menu styles on mobile

Browse Source
This commit is contained in:
James Barnsley
2018-11-11 21:50:37 +13:00
parent ff6969617a
commit 5e37275e4f
6 changed files with 575 additions and 530 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -331,21 +331,21 @@ class ContextMenu extends React.Component{
var loader = null
if (this.props.processes.SPOTIFY_GET_LIBRARY_PLAYLISTS_PROCESSOR && this.props.processes.SPOTIFY_GET_LIBRARY_PLAYLISTS_PROCESSOR.status == 'running'){
loader = (
<div className="menu-item-wrapper">
<div className="menu-item mini-loader loading">
<div className="context-menu__item">
<div className="context-menu__item mini-loader loading">
<div className="loader"></div>
</div>
</div>
)
}
var list = <span className="menu-item-wrapper"><span className="menu-item mid_grey-text">No writable playlists</span></span>
var list = <span className="context-menu__item"><span className="context-menu__item mid_grey-text">No writable playlists</span></span>
if (playlists.length > 0){
list = playlists.map(playlist => {
return (
<span className="menu-item-wrapper" key={playlist.uri}>
<a className="menu-item" onClick={e => this.addTracksToPlaylist(e,playlist.uri) }>
<span className="label">{ playlist.name }</span>
<span className="context-menu__item" key={playlist.uri}>
<a className="context-menu__item__link" onClick={e => this.addTracksToPlaylist(e,playlist.uri) }>
<span className="context-menu__item__label">{ playlist.name }</span>
</a>
</span>
)
@ -353,10 +353,10 @@ class ContextMenu extends React.Component{
}
return (
<div className={this.state.submenu_expanded ? 'submenu expanded' : 'submenu'}>
<span className="menu-item-wrapper">
<a className="menu-item close-submenu" onClick={e => this.setState({submenu_expanded: false})}>
<span className="label">
<div className={'context-menu__submenu' + (this.state.submenu_expanded ? ' context-menu__submenu--expanded' : '')}>
<span className="context-menu__item">
<a className="context-menu__item close-submenu" onClick={e => this.setState({submenu_expanded: false})}>
<span className="context-menu__item__label">
<Icon name="arrow_back" />Back
</span>
</a>
@ -372,9 +372,9 @@ class ContextMenu extends React.Component{
if (context.name == 'custom'){
return (
<span className="title">
<div className="background generic"></div>
<div className="text">
<span className="context-menu__title">
<div className="context-menu__title__background context-menu__title__background--generic"></div>
<div className="context-menu__title__text">
{this.props.menu.title}
</div>
</span>
@ -389,30 +389,30 @@ class ContextMenu extends React.Component{
var style = null;
return (
<Link className="title" to={global.baseURL+context.type+'/'+context.item.uri}>
{style ? <div className="background" style={style}></div> : null}
<div className="type">
<Link className="context-menu__title" to={global.baseURL+context.type+'/'+context.item.uri}>
{style ? <div className="context-menu__title__background" style={style}></div> : null}
<div className="context-menu__title__type">
{context.source}
&nbsp;
{context.nice_name}
</div>
<div className="text">{context.item.name}</div>
<div className="context-menu__title__text">{context.item.name}</div>
</Link>
)
break
default:
return (
<span className="title">
<div className="type">
<span className="context-menu__title">
<div className="context-menu__title__type">
{context.source}
&nbsp;
{context.nice_name}s
</div>
<div className="text">
<div className="context-menu__title__text">
{context.items_count} items
</div>
<div className="background generic"></div>
<div className="context-menu__title__background context-menu__title__background--generic"></div>
</span>
)
break
@ -437,65 +437,65 @@ class ContextMenu extends React.Component{
var context = this.getContext()
var play_uris = (
<span className="menu-item-wrapper">
<a className="menu-item" onClick={e => this.playURIs(e)}>
<span className="label">Play</span>
<span className="context-menu__item">
<a className="context-menu__item__link" onClick={e => this.playURIs(e)}>
<span className="context-menu__item__label">Play</span>
</a>
</span>
)
var play_playlist = (
<span className="menu-item-wrapper">
<a className="menu-item" onClick={e => this.playPlaylist(e)}>
<span className="label">Play</span>
<span className="context-menu__item">
<a className="context-menu__item__link" onClick={e => this.playPlaylist(e)}>
<span className="context-menu__item__label">Play</span>
</a>
</span>
)
var shuffle_play_playlist = (
<span className="menu-item-wrapper">
<a className="menu-item" onClick={e => this.shufflePlayPlaylist(e)}>
<span className="label">Shuffle play</span>
<span className="context-menu__item">
<a className="context-menu__item__link" onClick={e => this.shufflePlayPlaylist(e)}>
<span className="context-menu__item__label">Shuffle play</span>
</a>
</span>
)
var play_queue_item = (
<span className="menu-item-wrapper">
<a className="menu-item" onClick={e => this.playQueueItem(e)}>
<span className="label">Play</span>
<span className="context-menu__item">
<a className="context-menu__item__link" onClick={e => this.playQueueItem(e)}>
<span className="context-menu__item__label">Play</span>
</a>
</span>
)
var play_uris_next = (
<span className="menu-item-wrapper">
<a className="menu-item" onClick={e => this.addToQueue(e, true)}>
<span className="label">Play next</span>
<span className="context-menu__item">
<a className="context-menu__item__link" onClick={e => this.addToQueue(e, true)}>
<span className="context-menu__item__label">Play next</span>
</a>
</span>
)
var play_artist_top_tracks = (
<span className="menu-item-wrapper">
<a className="menu-item" onClick={e => this.playArtistTopTracks(e)}>
<span className="label">Play top tracks</span>
<span className="context-menu__item">
<a className="context-menu__item__link" onClick={e => this.playArtistTopTracks(e)}>
<span className="context-menu__item__label">Play top tracks</span>
</a>
</span>
)
var add_to_queue = (
<span className="menu-item-wrapper">
<a className="menu-item" onClick={e => this.addToQueue(e)}>
<span className="label">Add to queue</span>
<span className="context-menu__item">
<a className="context-menu__item__link" onClick={e => this.addToQueue(e)}>
<span className="context-menu__item__label">Add to queue</span>
</a>
</span>
)
var add_to_playlist = (
<span className="menu-item-wrapper has-submenu">
<a className="menu-item" onClick={e => this.setPlaylistSubmenu()}>
<span className="label">Add to playlist</span>
<span className="context-menu__item context-menu__item--has-submenu">
<a className="context-menu__item__link" onClick={e => this.setPlaylistSubmenu()}>
<span className="context-menu__item__label">Add to playlist</span>
<Icon className="submenu-icon" name="arrow_forward" />
</a>
{this.renderPlaylistSubmenu()}
@ -503,9 +503,9 @@ class ContextMenu extends React.Component{
)
var toggle_in_library = (
<span className="menu-item-wrapper">
<a className="menu-item" onClick={e => this.toggleInLibrary(e, context.in_library)}>
<span className="label">
<span className="context-menu__item">
<a className="context-menu__item__link" onClick={e => this.toggleInLibrary(e, context.in_library)}>
<span className="context-menu__item__label">
{context.in_library ? 'Remove from library' : 'Add to library'}
</span>
</a>
@ -516,9 +516,9 @@ class ContextMenu extends React.Component{
var toggle_loved = null;
} else if (helpers.isLoading(this.props.load_queue,['lastfm_track.getInfo'])){
var toggle_loved = (
<span className="menu-item-wrapper">
<a className="menu-item">
<span className="label mid_grey-text">
<span className="context-menu__item">
<a className="context-menu__item__link">
<span className="context-menu__item__label mid_grey-text">
Love track
</span>
</a>
@ -526,9 +526,9 @@ class ContextMenu extends React.Component{
)
} else {
var toggle_loved = (
<span className="menu-item-wrapper">
<a className="menu-item" onClick={e => this.toggleLoved(e, context.is_loved)}>
<span className="label">
<span className="context-menu__item">
<a className="context-menu__item__link" onClick={e => this.toggleLoved(e, context.is_loved)}>
<span className="context-menu__item__label">
{context.is_loved ? 'Unlove' : 'Love'} track
</span>
</a>
@ -537,81 +537,81 @@ class ContextMenu extends React.Component{
}
var go_to_artist = (
<span className="menu-item-wrapper">
<a className="menu-item" onClick={e => this.goToArtist(e)}>
<span className="label">Go to artist</span>
<span className="context-menu__item">
<a className="context-menu__item__link" onClick={e => this.goToArtist(e)}>
<span className="context-menu__item__label">Go to artist</span>
</a>
</span>
)
var go_to_album = (
<span className="menu-item-wrapper">
<a className="menu-item" onClick={e => this.goToAlbum(e)}>
<span className="label">Go to album</span>
<span className="context-menu__item">
<a className="context-menu__item__link" onClick={e => this.goToAlbum(e)}>
<span className="context-menu__item__label">Go to album</span>
</a>
</span>
)
var go_to_user = (
<span className="menu-item-wrapper">
<a className="menu-item" onClick={e => this.goToUser(e)}>
<span className="label">Go to user</span>
<span className="context-menu__item">
<a className="context-menu__item__link" onClick={e => this.goToUser(e)}>
<span className="context-menu__item__label">Go to user</span>
</a>
</span>
)
var go_to_track = (
<span className="menu-item-wrapper">
<a className="menu-item" onClick={e => this.goToTrack(e)}>
<span className="label">Track info</span>
<span className="context-menu__item">
<a className="context-menu__item__link" onClick={e => this.goToTrack(e)}>
<span className="context-menu__item__label">Track info</span>
</a>
</span>
)
var go_to_recommendations = (
<span className="menu-item-wrapper">
<a className="menu-item" onClick={e => this.goToRecommendations(e)}>
<span className="label">Discover similar</span>
<span className="context-menu__item">
<a className="context-menu__item__link" onClick={e => this.goToRecommendations(e)}>
<span className="context-menu__item__label">Discover similar</span>
</a>
</span>
)
var start_radio = (
<span className="menu-item-wrapper">
<a className="menu-item" onClick={e => this.startRadio(e)}>
<span className="label">Start radio</span>
<span className="context-menu__item">
<a className="context-menu__item__link" onClick={e => this.startRadio(e)}>
<span className="context-menu__item__label">Start radio</span>
</a>
</span>
)
var remove_from_queue = (
<span className="menu-item-wrapper">
<a className="menu-item" onClick={e => this.removeFromQueue(e)}>
<span className="label">Remove</span>
<span className="context-menu__item">
<a className="context-menu__item__link" onClick={e => this.removeFromQueue(e)}>
<span className="context-menu__item__label">Remove</span>
</a>
</span>
)
var remove_from_playlist = (
<span className="menu-item-wrapper">
<a className="menu-item" onClick={e => this.removeFromPlaylist(e)}>
<span className="label">Remove</span>
<span className="context-menu__item">
<a className="context-menu__item__link" onClick={e => this.removeFromPlaylist(e)}>
<span className="context-menu__item__label">Remove</span>
</a>
</span>
)
var delete_playlist = (
<span className="menu-item-wrapper">
<a className="menu-item" onClick={e => this.deletePlaylist(e)}>
<span className="label">Delete</span>
<span className="context-menu__item">
<a className="context-menu__item__link" onClick={e => this.deletePlaylist(e)}>
<span className="context-menu__item__label">Delete</span>
</a>
</span>
)
var copy_uris = (
<span className="menu-item-wrapper">
<a className="menu-item" onClick={e => this.copyURIs(e)}>
<span className="label">Copy URI{context.items_count > 1 ? 's' : ''}</span>
<span className="context-menu__item">
<a className="context-menu__item__link" onClick={e => this.copyURIs(e)}>
<span className="context-menu__item__label">Copy URI{context.items_count > 1 ? 's' : ''}</span>
</a>
</span>
)
@ -624,9 +624,9 @@ class ContextMenu extends React.Component{
{play_uris}
{play_uris_next}
{add_to_queue}
{this.canBeInLibrary() ? <div className="divider" /> : null}
{this.canBeInLibrary() ? <div className="context-menu__divider" /> : null}
{this.canBeInLibrary() ? toggle_in_library : null}
<div className="divider" />
<div className="context-menu__divider" />
{go_to_artist}
{copy_uris}
</div>
@ -638,9 +638,9 @@ class ContextMenu extends React.Component{
<div>
{context.source == 'spotify' ? play_artist_top_tracks : null}
{context.source == 'spotify' ? start_radio : null}
{this.canBeInLibrary() ? <div className="divider" /> : null}
{this.canBeInLibrary() ? <div className="context-menu__divider" /> : null}
{this.canBeInLibrary() ? toggle_in_library : null}
<div className="divider" />
<div className="context-menu__divider" />
{context.source == 'spotify' ? go_to_recommendations : null}
{copy_uris}
</div>
@ -652,9 +652,9 @@ class ContextMenu extends React.Component{
<div>
{play_playlist}
{shuffle_play_playlist}
{this.canBeInLibrary() ? <div className="divider" /> : null}
{this.canBeInLibrary() ? <div className="context-menu__divider" /> : null}
{this.canBeInLibrary() ? toggle_in_library : null}
<div className="divider" />
<div className="context-menu__divider" />
{context.source == 'spotify' ? go_to_user : null}
{copy_uris}
</div>
@ -666,12 +666,12 @@ class ContextMenu extends React.Component{
<div>
{play_playlist}
{shuffle_play_playlist}
{this.canBeInLibrary() ? <div className="divider" /> : null}
{this.canBeInLibrary() ? <div className="context-menu__divider" /> : null}
{this.canBeInLibrary() ? toggle_in_library : null}
<div className="divider" />
<div className="context-menu__divider" />
{context.source == 'spotify' ? go_to_user : null}
{copy_uris}
<div className="divider" />
<div className="context-menu__divider" />
{delete_playlist}
</div>
)
@ -681,14 +681,14 @@ class ContextMenu extends React.Component{
return (
<div>
{context.items_count == 1 ? play_queue_item : null}
<div className="divider" />
<div className="context-menu__divider" />
{add_to_playlist}
{toggle_loved}
<div className="divider" />
<div className="context-menu__divider" />
{context.source == 'spotify' && context.items_count <= 5 ? go_to_recommendations : null}
{context.items_count == 1 ? go_to_track : null}
{copy_uris}
<div className="divider" />
<div className="context-menu__divider" />
{remove_from_queue}
</div>
)
@ -701,14 +701,14 @@ class ContextMenu extends React.Component{
{play_uris_next}
{add_to_queue}
{context.source == 'spotify' && context.items_count == 1 ? start_radio : null}
<div className="divider" />
<div className="context-menu__divider" />
{add_to_playlist}
{toggle_loved}
<div className="divider" />
<div className="context-menu__divider" />
{context.source == 'spotify' && context.items_count <= 5 ? go_to_recommendations : null}
{context.items_count == 1 ? go_to_track : null}
{copy_uris}
<div className="divider" />
<div className="context-menu__divider" />
{remove_from_playlist}
</div>
)
@ -721,14 +721,14 @@ class ContextMenu extends React.Component{
{play_uris_next}
{add_to_queue}
{context.source == 'spotify' && context.items_count == 1 ? start_radio : null}
<div className="divider" />
<div className="context-menu__divider" />
{add_to_playlist}
{toggle_loved}
<div className="divider" />
<div className="context-menu__divider" />
{context.source == 'spotify' && context.items_count <= 5 ? go_to_recommendations : null}
{context.items_count == 1 ? go_to_album : null}
{context.items_count == 1 ? go_to_track : null}
<div className="divider" />
<div className="context-menu__divider" />
{copy_uris}
</div>
)
@ -746,25 +746,25 @@ class ContextMenu extends React.Component{
var height = 200 // TODO: use jquery to detect height
var className = "context-menu "+this.props.menu.context
if (this.state.submenu_expanded){
className += ' submenu-expanded'
className += ' context-menu--submenu-expanded'
}
if (this.props.menu.position_x > (window.innerWidth - 174)){
style.left = 'auto'
style.right = 10
style.left = 'auto';
style.right = 10;
}
if (this.props.menu.position_y > (window.innerHeight - height)){
style.top = 'auto'
style.bottom = 10
style.top = 'auto';
style.bottom = 10;
}
return (
<div id="context-menu" className={className} style={style}>
<div className="liner">
<div className="context-menu__inner">
{this.renderTitle()}
{this.props.menu.context == 'custom' ? this.props.menu.options : this.renderItems()}
</div>
<div className="background" onClick={e => this.props.uiActions.hideContextMenu()}></div>
<div className="context-menu__background" onClick={e => this.props.uiActions.hideContextMenu()}></div>
</div>
);
}