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>
);
}

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

@ -7,11 +7,11 @@
}
}
#context-menu {
.context-menu {
position: fixed;
z-index: 99;
& > .liner {
&__inner {
width: 190px;
box-shadow: 2px 3px 6px rgba(0,0,0,0.2);
border-radius: 3px;
@ -20,138 +20,10 @@
font-weight: 500;
font-family: "Overpass";
.title {
display: none;
padding: 10px 14px;
font-weight: bold;
box-sizing: border-box;
position: relative;
overflow: hidden;
text-decoration: none;
background: colour(darkest_grey);
.background {
@include blur(5px);
background-size: cover;
background-position: 50% 20%;
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 {
@include one_line_text();
position: relative;
z-index: 2;
color: #FFFFFF;
}
.type {
position: relative;
z-index: 2;
color: #FFFFFF;
opacity: 0.5;
font-weight: 200;
text-transform: capitalize;
}
}
.menu-item-wrapper {
display: block;
overflow-x: hidden;
.menu-item {
@include gradient_overlay(3px);
cursor: pointer;
display: block;
padding: 9px 12px 8px;
box-sizing: border-box;
position: relative;
color: colour(white);
.notouch &:hover {
&:before {
opacity: 0.15;
}
}
.notouch &:active {
background: colour(black);
color: colour(white);
}
}
.icon {
font-size: 12px;
&.submenu-icon {
display: inline-block;
float: right;
padding-top: 4px;
}
}
.submenu {
@include animate();
position: absolute;
top: 0;
right: 0;
left: 100%;
height: 100%;
min-height: 300px;
max-height: 90vh;
width: 0;
height: 100%;
overflow-y: scroll;
background: lighten(colour(grey), 10%);
z-index: 3;
border-radius: 3px;
&.expanded {
width: 100%;
left: 0;
}
.label {
.icon {
margin-bottom: 0.4em;
padding-right: 6px;
}
}
.menu-item {
width: 100%;
&.close-submenu {
color: colour(mid_grey);
}
}
}
}
.divider {
height: 1px;
padding: 0;
margin: 0;
background: lighten(colour(grey), 5%);
}
/**
* The following is for buttons automatically pulled from
* a page header, so we don't have classname control
**/
& > span {
display: block;
margin-bottom: -1px;
@ -239,10 +111,148 @@
}
}
}
}
}
}
}
&__title {
display: none;
padding: 10px 14px;
font-weight: bold;
box-sizing: border-box;
position: relative;
overflow: hidden;
text-decoration: none;
background: colour(darkest_grey);
&__background {
@include blur(5px);
background-size: cover;
background-position: 50% 20%;
opacity: 0.65;
position: absolute;
top: -10px;
left: -10px;
bottom: -10px;
right: -10px;
z-index: 1;
}
&--generic {
.context-menu__title__background {
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 {
@include one_line_text();
position: relative;
z-index: 2;
color: colour(white);
}
&__type {
position: relative;
z-index: 2;
color: colour(white);
opacity: 0.5;
font-weight: 200;
text-transform: capitalize;
}
}
&__item {
display: block;
overflow-x: hidden;
&__link {
@include gradient_overlay(3px);
cursor: pointer;
display: block;
padding: 9px 12px 8px;
box-sizing: border-box;
position: relative;
color: colour(white);
.notouch &:hover {
&:before {
opacity: 0.15;
}
}
.notouch &:active {
background: colour(black);
color: colour(white);
}
.icon {
font-size: 12px;
&.submenu-icon {
display: inline-block;
float: right;
padding-top: 4px;
}
}
}
}
&__submenu {
@include animate();
position: absolute;
top: 0;
right: 0;
left: 100%;
height: 100%;
min-height: 300px;
max-height: 90vh;
width: 0;
height: 100%;
overflow-y: scroll;
background: lighten(colour(grey), 10%);
z-index: 3;
border-radius: 3px;
&--expanded {
width: 100%;
left: 0;
}
.context-menu {
&__item {
width: 100%;
&.close-submenu {
color: colour(mid_grey);
}
&__label {
.icon {
margin-bottom: 0.4em;
padding-right: 6px;
}
}
}
}
}
&__divider {
height: 1px;
padding: 0;
margin: 0;
background: lighten(colour(grey), 5%);
}
@include responsive($bp_medium){
top: 0 !important;
right: 0 !important;
@ -251,7 +261,7 @@
margin: 0 !important;
overflow-y: scroll;
.background {
&__background {
position: fixed;
top: 0;
right: 0;
@ -261,39 +271,56 @@
z-index: 1;
}
& > .liner {
&__inner {
width: 250px;
margin: 30px auto;
max-width: 90vw;
position: relative;
z-index: 2;
border-radius: 3px;
background: none;
box-shadow: none;
.title {
display: block;
padding: 14px 18px;
box-sizing: border-box;
border-radius: 3px 3px 0 0;
}
/**
* These are the rules for automatically collated page headers
* as context menus
**/
& > span {
button,
.button {
color: colour(white);
font-weight: 800;
background: transparent;
border: 0 !important;
padding: 16px 22px;
font-size: 1.2rem;
font-weight: 800;
}
.dropdown-field {
color: colour(white);
}
}
}
.menu-item-wrapper {
.menu-item {
padding: 14px 18px;
box-sizing: border-box;
}
&__title {
display: block;
padding: 14px 18px;
box-sizing: border-box;
border-radius: 3px 3px 0 0;
}
&__divider {
display: none;
}
&__item {
font-size: 1.2rem;
font-weight: 800;
&__link {
padding: 16px 22px;
box-sizing: border-box;
}
}
}