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

Adding polish, hiding Title

Browse Source
This commit is contained in:
James Barnsley
2018-11-15 16:59:56 +13:00
parent 06970bc824
commit a1510ee08f
6 changed files with 14058 additions and 10740 deletions
Download Patch File Download Diff File Expand all files Collapse all files

142
mopidy_iris/static/app.css
View File

@ -3735,17 +3735,30 @@ input[type="submit"] {
padding-right: 2px; padding-right: 2px;
padding-bottom: 3px; padding-bottom: 3px;
font-size: 0.9em; } font-size: 0.9em; }
.context-menu__items, .context-menu__submenu { .context-menu__section {
-webkit-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;
max-width: 190px; max-width: 190px;
overflow-y: scroll; } overflow-y: scroll; }
.context-menu__items { .context-menu__section--submenu {
opacity: 1; background: #52514d;
position: relative; z-index: 3;
z-index: 2; } border-radius: 3px;
transform: translateX(100%);
opacity: 0; }
.context-menu__section--submenu .context-menu__item {
width: 100%; }
.context-menu__section--submenu .context-menu__item--close-submenu {
opacity: 0.5; }
.context-menu__section--submenu .context-menu__item__label .icon {
margin-bottom: 0.4em;
padding-right: 6px; }
.context-menu__section--items {
opacity: 1;
position: relative;
z-index: 2; }
.context-menu__item { .context-menu__item {
display: block; display: block;
overflow-x: hidden; } overflow-x: hidden; }
@ -3794,27 +3807,14 @@ input[type="submit"] {
padding: 0; padding: 0;
margin: 0; margin: 0;
background: #454440; } background: #454440; }
.context-menu__submenu { .context-menu--submenu-expanded .context-menu__section {
background: #52514d;
z-index: 3;
border-radius: 3px;
transform: translateX(100%);
opacity: 0; }
.context-menu__submenu .context-menu__item {
width: 100%; }
.context-menu__submenu .context-menu__item--close-submenu {
opacity: 0.5; }
.context-menu__submenu .context-menu__item__label .icon {
margin-bottom: 0.4em;
padding-right: 6px; }
.context-menu--submenu-expanded .context-menu__items {
transform: translateX(-100%); transform: translateX(-100%);
opacity: 0; } opacity: 0; }
.context-menu--submenu-expanded .context-menu__submenu { .context-menu--submenu-expanded .context-menu__section--submenu {
transform: translateX(0); transform: translateX(0);
opacity: 1; } opacity: 1; }
@media (min-width: 800px) { @media (min-width: 800px) {
.context-menu__items, .context-menu__submenu { .context-menu__section {
background: #383734; background: #383734;
border-radius: 3px; } border-radius: 3px; }
.context-menu__title { .context-menu__title {
@ -3844,45 +3844,71 @@ input[type="submit"] {
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
background: rgba(0, 0, 0, 0.88); background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.5) 10%, rgba(0, 0, 0, 0.88) 20%);
z-index: 1; } z-index: 1; }
.context-menu__title__text { .context-menu__title {
white-space: nowrap; padding: 16px 22px;
overflow: hidden; pointer-events: none; }
text-overflow: ellipsis; .context-menu__title::after {
position: relative; content: '';
z-index: 2; clear: both;
color: #FFFFFF; } display: block; }
.context-menu__title__type { .context-menu__title .thumbnail {
position: relative; float: left;
z-index: 2; width: 36px;
color: #FFFFFF; margin-right: 20px; }
opacity: 0.5; .context-menu__title__text {
font-weight: 200; white-space: nowrap;
text-transform: capitalize; } overflow: hidden;
.context-menu__items, .context-menu__submenu { text-overflow: ellipsis;
position: relative;
z-index: 2;
color: #FFFFFF;
font-size: 1.2rem;
font-weight: 800;
padding-top: 8px;
opacity: 0.5; }
.context-menu__title__type {
display: none;
position: relative;
z-index: 2;
color: #FFFFFF;
opacity: 0.5;
font-weight: 200;
text-transform: capitalize; }
.context-menu__section {
width: 90vw; width: 90vw;
max-width: 250px; max-width: 250px;
position: absolute; position: absolute;
top: 5vh; top: 10vh;
left: 50%; left: 50%;
margin-left: -125px; margin-left: -125px;
bottom: 0; } bottom: 0; }
.context-menu__inner { .context-menu__section--submenu {
/** background: none;
* These are the rules for automatically collated page headers border-radius: 0;
* as context menus opacity: 0; }
**/ } .context-menu__section--items {
.context-menu__inner > span button, /**
.context-menu__inner > span .button { * These are the rules for automatically collated page headers
color: #FFFFFF; * as context menus
background: transparent; **/ }
border: 0 !important; .context-menu__section--items > span button,
padding: 16px 22px; .context-menu__section--items > span .button {
font-size: 1.2rem; display: block;
font-weight: 800; } color: #FFFFFF;
.context-menu__inner > span .dropdown-field { background: transparent;
color: #FFFFFF; } border: 0 !important;
padding: 16px 22px;
font-size: 1.2rem;
font-weight: 800;
text-decoration: none !important;
text-align: left; }
.context-menu__section--items > span button > .icon,
.context-menu__section--items > span .button > .icon {
display: none; }
.context-menu__section--items > span .dropdown-field {
color: #FFFFFF; }
.context-menu__divider { .context-menu__divider {
display: none; } display: none; }
.context-menu__item { .context-menu__item {
@ -3899,11 +3925,7 @@ input[type="submit"] {
.context-menu__item__link:before { .context-menu__item__link:before {
display: none !important; } display: none !important; }
.context-menu__item__link:focus, .context-menu__item__link:active { .context-menu__item__link:focus, .context-menu__item__link:active {
background: #08d58f !important; } background: #08d58f !important; } }
.context-menu__submenu {
background: none;
border-radius: 0;
opacity: 0; } }
.context-menu-trigger { .context-menu-trigger {
display: inline-block; display: inline-block;

24438
mopidy_iris/static/app.js
View File

File diff suppressed because one or more lines are too long

2
mopidy_iris/static/app.js.map
View File

File diff suppressed because one or more lines are too long

2
mopidy_iris/static/index.html
View File

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

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

@ -322,12 +322,19 @@ class ContextMenu extends React.Component{
} }
renderTitle(){ renderTitle(){
// Do we need titles or does it just confuse things and rip off Spotify too hard?
return null;
var context = this.getContext() var context = this.getContext()
if (context.name == 'custom'){ if (context.name == 'custom'){
if (!this.props.menu.title){
return null;
}
return ( return (
<div className="context-menu__title"> <div className="context-menu__title">
<div className="context-menu__title__background context-menu__title__background--generic"></div>
<div className="context-menu__title__text"> <div className="context-menu__title__text">
{this.props.menu.title} {this.props.menu.title}
</div> </div>
@ -344,30 +351,25 @@ class ContextMenu extends React.Component{
return ( return (
<div className="context-menu__title"> <div className="context-menu__title">
<Thumbnail images={context.item ? context.item.images : null} circle={context.type = 'artist'} /> <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__text">{context.item.name}</div>
<div className="context-menu__title__type"> <div className="context-menu__title__type">
{context.source} {context.source}
</div> </div>
</div> </div>
) );
break
default: default:
return ( return (
<div className="context-menu__title"> <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"> <div className="context-menu__title__type">
{context.source} {context.source}
&nbsp;
{context.nice_name}s
</div> </div>
<div className="context-menu__title__text">
{context.items_count} items
</div>
<div className="context-menu__title__background context-menu__title__background--generic"></div>
</div> </div>
) );
break
} }
} }
@ -427,7 +429,7 @@ class ContextMenu extends React.Component{
} }
return ( return (
<div className='context-menu__submenu'> <div className='context-menu__section context-menu__section--submenu'>
<div className="context-menu__item"> <div className="context-menu__item">
<a className="context-menu__item__link context-menu__item__link--close-submenu" onClick={e => this.setState({submenu: null})}> <a className="context-menu__item__link context-menu__item__link--close-submenu" onClick={e => this.setState({submenu: null})}>
<span className="context-menu__item__label"> <span className="context-menu__item__label">
@ -627,7 +629,7 @@ class ContextMenu extends React.Component{
case 'album': case 'album':
return ( return (
<div className="context-menu__items"> <div>
{play_uris} {play_uris}
{play_uris_next} {play_uris_next}
{add_to_queue} {add_to_queue}
@ -642,7 +644,7 @@ class ContextMenu extends React.Component{
case 'artist': case 'artist':
return ( return (
<div className="context-menu__items"> <div>
{context.source == 'spotify' ? play_artist_top_tracks : null} {context.source == 'spotify' ? play_artist_top_tracks : null}
{context.source == 'spotify' ? start_radio : null} {context.source == 'spotify' ? start_radio : null}
{this.canBeInLibrary() ? <div className="context-menu__divider" /> : null} {this.canBeInLibrary() ? <div className="context-menu__divider" /> : null}
@ -656,7 +658,7 @@ class ContextMenu extends React.Component{
case 'playlist': case 'playlist':
return ( return (
<div className="context-menu__items"> <div>
{play_playlist} {play_playlist}
{shuffle_play_playlist} {shuffle_play_playlist}
{this.canBeInLibrary() ? <div className="context-menu__divider" /> : null} {this.canBeInLibrary() ? <div className="context-menu__divider" /> : null}
@ -670,7 +672,7 @@ class ContextMenu extends React.Component{
case 'editable-playlist': case 'editable-playlist':
return ( return (
<div className="context-menu__items"> <div>
{play_playlist} {play_playlist}
{shuffle_play_playlist} {shuffle_play_playlist}
{this.canBeInLibrary() ? <div className="context-menu__divider" /> : null} {this.canBeInLibrary() ? <div className="context-menu__divider" /> : null}
@ -686,7 +688,7 @@ class ContextMenu extends React.Component{
case 'queue-track': case 'queue-track':
return ( return (
<div className="context-menu__items"> <div>
{context.items_count == 1 ? play_queue_item : null} {context.items_count == 1 ? play_queue_item : null}
<div className="context-menu__divider" /> <div className="context-menu__divider" />
{add_to_playlist} {add_to_playlist}
@ -703,7 +705,7 @@ class ContextMenu extends React.Component{
case 'editable-playlist-track': case 'editable-playlist-track':
return ( return (
<div className="context-menu__items"> <div>
{play_uris} {play_uris}
{play_uris_next} {play_uris_next}
{add_to_queue} {add_to_queue}
@ -723,7 +725,7 @@ class ContextMenu extends React.Component{
default: default:
return ( return (
<div className="context-menu__items"> <div>
{play_uris} {play_uris}
{play_uris_next} {play_uris_next}
{add_to_queue} {add_to_queue}
@ -770,11 +772,11 @@ class ContextMenu extends React.Component{
return ( return (
<div id="context-menu" className={className} style={style}> <div id="context-menu" className={className} style={style}>
<div className="context-menu__inner"> <div className="context-menu__section context-menu__section--items">
{this.renderTitle()} {this.renderTitle()}
{this.props.menu.context == 'custom' ? this.props.menu.options : this.renderItems()} {this.props.menu.context == 'custom' ? this.props.menu.options : this.renderItems()}
{this.renderSubmenu()}
</div> </div>
{this.renderSubmenu()}
<div className="context-menu__background" onClick={e => this.props.uiActions.hideContextMenu()}></div> <div className="context-menu__background" onClick={e => this.props.uiActions.hideContextMenu()}></div>
</div> </div>
); );

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

@ -111,18 +111,41 @@
} }
} }
&__section {
&__items,
&__submenu {
@include animate(); @include animate();
max-width: 190px; max-width: 190px;
overflow-y: scroll; overflow-y: scroll;
}
&__items { &--submenu {
opacity: 1; background: lighten(colour(grey), 10%);
position: relative; z-index: 3;
z-index: 2; border-radius: 3px;
transform: translateX(100%);
opacity: 0;
.context-menu {
&__item {
width: 100%;
&--close-submenu {
opacity: 0.5;
}
&__label {
.icon {
margin-bottom: 0.4em;
padding-right: 6px;
}
}
}
}
}
&--items {
opacity: 1;
position: relative;
z-index: 2;
}
} }
&__item { &__item {
@ -168,49 +191,23 @@
background: lighten(colour(grey), 5%); background: lighten(colour(grey), 5%);
} }
&__submenu {
background: lighten(colour(grey), 10%);
z-index: 3;
border-radius: 3px;
transform: translateX(100%);
opacity: 0;
.context-menu {
&__item {
width: 100%;
&--close-submenu {
opacity: 0.5;
}
&__label {
.icon {
margin-bottom: 0.4em;
padding-right: 6px;
}
}
}
}
}
&--submenu-expanded { &--submenu-expanded {
.context-menu { .context-menu {
&__items { &__section {
transform: translateX(-100%); transform: translateX(-100%);
opacity: 0; opacity: 0;
}
&__submenu { &--submenu {
transform: translateX(0); transform: translateX(0);
opacity: 1; opacity: 1;
}
} }
} }
} }
@include responsive(null, $bp_medium){ @include responsive(null, $bp_medium){
&__items, &__section {
&__submenu {
background: colour(grey); background: colour(grey);
border-radius: 3px; border-radius: 3px;
} }
@ -235,19 +232,34 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
background: colour(overlay_dark); background-image: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.50) 10%, rgba(0,0,0,0.88) 20%);
z-index: 1; z-index: 1;
} }
&__title { &__title {
@include clearfix();
padding: 16px 22px;
pointer-events: none;
.thumbnail {
float: left;
width: 36px;
margin-right: 20px;
}
&__text { &__text {
@include one_line_text(); @include one_line_text();
position: relative; position: relative;
z-index: 2; z-index: 2;
color: colour(white); color: colour(white);
font-size: 1.2rem;
font-weight: 800;
padding-top: 8px;
opacity: 0.5;
} }
&__type { &__type {
display: none;
position: relative; position: relative;
z-index: 2; z-index: 2;
color: colour(white); color: colour(white);
@ -257,38 +269,48 @@
} }
} }
&__items, &__section {
&__submenu {
width: 90vw; width: 90vw;
max-width: 250px; max-width: 250px;
position: absolute; position: absolute;
top: 5vh; top: 10vh;
left: 50%; left: 50%;
margin-left: -125px; margin-left: -125px;
bottom: 0; bottom: 0;
}
&__inner { &--submenu {
background: none;
border-radius: 0;
opacity: 0;
}
&--items {
/**
* These are the rules for automatically collated page headers
* as context menus
**/
& > span {
button,
.button {
display: block;
color: colour(white);
background: transparent;
border: 0 !important;
padding: 16px 22px;
font-size: 1.2rem;
font-weight: 800;
text-decoration: none !important;
text-align: left;
/** & > .icon {
* These are the rules for automatically collated page headers display: none;
* as context menus }
**/ }
& > span {
button,
.button {
color: colour(white);
background: transparent;
border: 0 !important;
padding: 16px 22px;
font-size: 1.2rem;
font-weight: 800;
}
.dropdown-field { .dropdown-field {
color: colour(white); color: colour(white);
}
} }
} }
} }
@ -317,12 +339,6 @@
} }
} }
} }
&__submenu {
background: none;
border-radius: 0;
opacity: 0;
}
} }
} }