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

24454
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
// These are automatically injected to built HTML
var build = "1542215791";
var build = "1542231813";
var version = "3.30.0";
// Construct the script tag

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

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

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

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