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

Desktop snapcast mini ready

Browse Source
This commit is contained in:
James Barnsley
2018-05-31 21:34:50 +12:00
parent 7e9fb9fa2a
commit c240c71a59
6 changed files with 622 additions and 606 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
mopidy_iris/static/app.css
View File

@ -4599,31 +4599,31 @@ input[type="submit"] {
.snapcast-volume-control .volumes {
position: absolute;
bottom: 40px;
right: 0px;
width: 250px;
border-radius: 3px;
background: #454440;
color: #FFFFFF;
right: -150px;
width: 300px;
background: #FFFFFF;
color: #000000;
font-size: 14px;
font-weight: 500;
font-weight: 600;
text-align: left;
border-radius: 3px;
box-shadow: 2px 3px 6px rgba(0, 0, 0, 0.2); }
.snapcast-volume-control .volumes:after {
content: '';
display: block;
width: 6px;
height: 6px;
background: #454440;
background: #FFFFFF;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
bottom: -3px;
right: 9px; }
right: 159px; }
.snapcast-volume-control .volumes .client {
padding: 10px 12px 6px; }
padding: 16px 20px 12px; }
.snapcast-volume-control .volumes .client:not(:first-child) {
border-top: 1px solid rgba(255, 255, 255, 0.1); }
border-top: 1px solid rgba(0, 0, 0, 0.05); }
.snapcast-volume-control .volumes .client .name {
display: block;
padding-bottom: 5px; }
@ -4635,7 +4635,8 @@ input[type="submit"] {
position: absolute;
top: -2px;
left: -2px;
padding: 2px; }
padding: 2px;
color: #000000; }
aside {
position: fixed;

1158
mopidy_iris/static/app.js
View File

File diff suppressed because it is too large Load Diff

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

@ -77,7 +77,7 @@
// Release details
// These are automatically injected to built HTML
var build = "1527670659";
var build = "1527756889";
var version = "3.19.0";
// Construct the script tag

22
src/js/components/Fields/SnapcastVolumeControl.js
View File

@ -17,6 +17,8 @@ class SnapcastVolumeControl extends React.Component{
this.state = {
expanded: false
}
this.handleClick = this.handleClick.bind(this);
}
componentDidMount(){
@ -25,6 +27,22 @@ class SnapcastVolumeControl extends React.Component{
}
}
handleClick(e){
if ($(e.target).closest('.snapcast-volume-control').length <= 0){
this.setExpanded(false);
}
}
setExpanded(expanded = !this.state.expanded){
if (expanded){
this.setState({expanded: expanded});
window.addEventListener("click", this.handleClick, false);
} else {
this.setState({expanded: expanded});
window.removeEventListener("click", this.handleClick, false);
}
}
renderVolumes(){
var clients = [];
@ -67,14 +85,14 @@ class SnapcastVolumeControl extends React.Component{
if (this.state.expanded){
return (
<span className="snapcast-volume-control">
<a className="control speakers active" onClick={e => this.setState({expanded: !this.state.expanded})}><Icon name="speaker" /></a>
<a className="control speakers active" onClick={e => this.setExpanded()}><Icon name="speaker" /></a>
{this.renderVolumes()}
</span>
);
} else {
return (
<span className="snapcast-volume-control">
<a className="control speakers" onClick={e => this.setState({expanded: !this.state.expanded})}><Icon name="speaker" /></a>
<a className="control speakers" onClick={e => this.setExpanded()}><Icon name="speaker" /></a>
</span>
);
}

21
src/scss/components/_snapcast-volume-control.scss
View File

@ -5,14 +5,14 @@
.volumes {
position: absolute;
bottom: 40px;
right: 0px;
width: 250px;
border-radius: 3px;
background: lighten($grey,5%);
color: $white;
right: -150px;
width: 300px;
background: $white;
color: $black;
font-size: 14px;
font-weight: 500;
font-weight: 600;
text-align: left;
border-radius: 3px;
box-shadow: 2px 3px 6px rgba(0,0,0,0.2);
&:after {
@ -20,20 +20,20 @@
display: block;
width: 6px;
height: 6px;
background: lighten($grey,5%);
background: $white;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
bottom: -3px;
right: 9px;
right: 159px;
}
.client {
padding: 10px 12px 6px;
padding: 16px 20px 12px;
&:not(:first-child) {
border-top: 1px solid rgba(255,255,255,0.1);
border-top: 1px solid rgba(0,0,0,0.05);
}
.name {
@ -51,6 +51,7 @@
top: -2px;
left: -2px;
padding: 2px;
color: $black;
}
}
}