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

Adding subject to menu

Browse Source
This commit is contained in:
James Barnsley
2018-11-15 06:46:59 +13:00
parent 6b75a01127
commit 06970bc824
6 changed files with 10414 additions and 13777 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
mopidy_iris/static/app.css
View File

@ -3658,15 +3658,11 @@ input[type="submit"] {
.context-menu { .context-menu {
position: fixed; position: fixed;
z-index: 99; } z-index: 99;
font-size: 14px;
font-weight: 500;
font-family: "Overpass"; }
.context-menu__inner { .context-menu__inner {
width: 190px;
box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.2);
border-radius: 3px;
background: #383734;
font-size: 14px;
font-weight: 500;
font-family: "Overpass";
/** /**
* The following is for buttons automatically pulled from * The following is for buttons automatically pulled from
* a page header, so we don't have classname control * a page header, so we don't have classname control
@ -3739,56 +3735,14 @@ 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__title { .context-menu__items, .context-menu__submenu {
display: none;
padding: 10px 14px;
font-weight: bold;
box-sizing: border-box;
position: relative;
overflow: hidden;
text-decoration: none;
background: #121212; }
.context-menu__title__background {
-webkit-filter: blur(5px);
filter: 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; }
.context-menu__title--generic .context-menu__title__background {
opacity: 0.9;
background: #32b5f2;
background: -moz-linear-gradient(45deg, #32b5f2 0%, #32b5f2 18%, #0576a6 100%);
background: -webkit-gradient(left bottom, right top, color-stop(0%, #32b5f2), color-stop(18%, #32b5f2), color-stop(100%, #0576a6));
background: -webkit-linear-gradient(45deg, #32b5f2 0%, #32b5f2 18%, #0576a6 100%);
background: -o-linear-gradient(45deg, #32b5f2 0%, #32b5f2 18%, #0576a6 100%);
background: -ms-linear-gradient(45deg, #32b5f2 0%, #32b5f2 18%, #0576a6 100%);
background: linear-gradient(45deg, #32b5f2 0%, #32b5f2 18%, #0576a6 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#32b5f2', endColorstr='#0576a6', GradientType=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 {
-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;
overflow-y: scroll; }
.context-menu__items {
opacity: 1; opacity: 1;
position: relative; position: relative;
z-index: 2; } z-index: 2; }
@ -3841,18 +3795,6 @@ input[type="submit"] {
margin: 0; margin: 0;
background: #454440; } background: #454440; }
.context-menu__submenu { .context-menu__submenu {
-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;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
min-height: 300px;
max-height: 90vh;
overflow-y: scroll;
background: #52514d; background: #52514d;
z-index: 3; z-index: 3;
border-radius: 3px; border-radius: 3px;
@ -3871,6 +3813,12 @@ input[type="submit"] {
.context-menu--submenu-expanded .context-menu__submenu { .context-menu--submenu-expanded .context-menu__submenu {
transform: translateX(0); transform: translateX(0);
opacity: 1; } opacity: 1; }
@media (min-width: 800px) {
.context-menu__items, .context-menu__submenu {
background: #383734;
border-radius: 3px; }
.context-menu__title {
display: none; } }
@media (max-width: 800px) { @media (max-width: 800px) {
.context-menu { .context-menu {
top: 0 !important; top: 0 !important;
@ -3898,19 +3846,29 @@ input[type="submit"] {
left: 0; left: 0;
background: rgba(0, 0, 0, 0.88); background: rgba(0, 0, 0, 0.88);
z-index: 1; } z-index: 1; }
.context-menu__inner { .context-menu__title__text {
-webkit-transition: all 0.2s ease-in-out; white-space: nowrap;
-moz-transition: all 0.2s ease-in-out; overflow: hidden;
-o-transition: all 0.2s ease-in-out; text-overflow: ellipsis;
transition: all 0.2s ease-in-out;
width: 250px;
margin: 30px auto;
max-width: 90vw;
position: relative; position: relative;
z-index: 2; z-index: 2;
border-radius: 3px; color: #FFFFFF; }
background: none; .context-menu__title__type {
box-shadow: none; position: relative;
z-index: 2;
color: #FFFFFF;
opacity: 0.5;
font-weight: 200;
text-transform: capitalize; }
.context-menu__items, .context-menu__submenu {
width: 90vw;
max-width: 250px;
position: absolute;
top: 5vh;
left: 50%;
margin-left: -125px;
bottom: 0; }
.context-menu__inner {
/** /**
* These are the rules for automatically collated page headers * These are the rules for automatically collated page headers
* as context menus * as context menus
@ -3925,11 +3883,6 @@ input[type="submit"] {
font-weight: 800; } font-weight: 800; }
.context-menu__inner > span .dropdown-field { .context-menu__inner > span .dropdown-field {
color: #FFFFFF; } color: #FFFFFF; }
.context-menu__title {
display: none;
padding: 14px 18px;
box-sizing: border-box;
border-radius: 3px 3px 0 0; }
.context-menu__divider { .context-menu__divider {
display: none; } display: none; }
.context-menu__item { .context-menu__item {
@ -3948,9 +3901,6 @@ input[type="submit"] {
.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 { .context-menu__submenu {
width: 250px;
margin: 30px auto;
max-width: 90vw;
background: none; background: none;
border-radius: 0; border-radius: 0;
opacity: 0; } } opacity: 0; } }

23923
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 = "1542050679"; var build = "1542215791";
var version = "3.30.0"; var version = "3.30.0";
// Construct the script tag // Construct the script tag

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

@ -7,6 +7,7 @@ import { bindActionCreators } from 'redux'
import TrackList from './TrackList' import TrackList from './TrackList'
import Icon from './Icon' import Icon from './Icon'
import Thumbnail from './Thumbnail'
import * as helpers from '../helpers' import * as helpers from '../helpers'
import * as coreActions from '../services/core/actions' import * as coreActions from '../services/core/actions'
@ -343,13 +344,11 @@ class ContextMenu extends React.Component{
return ( return (
<div className="context-menu__title"> <div className="context-menu__title">
{style ? <div className="context-menu__title__background" style={style}></div> : null} <Thumbnail 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"> <div className="context-menu__title__type">
{context.source} {context.source}
&nbsp;
{context.nice_name}
</div> </div>
<div className="context-menu__title__text">{context.item.name}</div>
</div> </div>
) )
break break

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

@ -10,15 +10,11 @@
.context-menu { .context-menu {
position: fixed; position: fixed;
z-index: 99; z-index: 99;
font-size: 14px;
font-weight: 500;
font-family: "Overpass";
&__inner { &__inner {
width: 190px;
box-shadow: 2px 3px 6px rgba(0,0,0,0.2);
border-radius: 3px;
background: colour(grey);
font-size: 14px;
font-weight: 500;
font-family: "Overpass";
/** /**
* The following is for buttons automatically pulled from * The following is for buttons automatically pulled from
@ -115,62 +111,15 @@
} }
} }
&__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 { &__items,
@include blur(5px); &__submenu {
background-size: cover; @include animate();
background-position: 50% 20%; max-width: 190px;
opacity: 0.65; overflow-y: scroll;
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;
}
} }
&__items { &__items {
@include animate();
opacity: 1; opacity: 1;
position: relative; position: relative;
z-index: 2; z-index: 2;
@ -219,16 +168,7 @@
background: lighten(colour(grey), 5%); background: lighten(colour(grey), 5%);
} }
&__submenu { &__submenu {
@include animate();
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
min-height: 300px;
max-height: 90vh;
overflow-y: scroll;
background: lighten(colour(grey), 10%); background: lighten(colour(grey), 10%);
z-index: 3; z-index: 3;
border-radius: 3px; border-radius: 3px;
@ -268,6 +208,17 @@
} }
} }
@include responsive(null, $bp_medium){
&__items,
&__submenu {
background: colour(grey);
border-radius: 3px;
}
&__title {
display: none;
}
}
@include responsive($bp_medium){ @include responsive($bp_medium){
top: 0 !important; top: 0 !important;
@ -288,16 +239,36 @@
z-index: 1; z-index: 1;
} }
&__title {
&__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;
}
}
&__items,
&__submenu {
width: 90vw;
max-width: 250px;
position: absolute;
top: 5vh;
left: 50%;
margin-left: -125px;
bottom: 0;
}
&__inner { &__inner {
@include animate();
width: 250px;
margin: 30px auto;
max-width: 90vw;
position: relative;
z-index: 2;
border-radius: 3px;
background: none;
box-shadow: none;
@ -322,13 +293,6 @@
} }
} }
&__title {
display: none;
padding: 14px 18px;
box-sizing: border-box;
border-radius: 3px 3px 0 0;
}
&__divider { &__divider {
display: none; display: none;
} }
@ -355,9 +319,6 @@
} }
&__submenu { &__submenu {
width: 250px;
margin: 30px auto;
max-width: 90vw;
background: none; background: none;
border-radius: 0; border-radius: 0;
opacity: 0; opacity: 0;