Desktop snapcast mini ready

mopidy_iris/static/app.css

@@ -4599,31 +4599,31 @@ input[type="submit"] {
   .snapcast-volume-control .volumes {
     position: absolute;
     bottom: 40px;
-    right: 0px;
+    right: -150px;
-    width: 250px;
+    width: 300px;
-    border-radius: 3px;
+    background: #FFFFFF;
-    background: #454440;
+    color: #000000;
-    color: #FFFFFF;
     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;

mopidy_iris/static/index.html

@@ -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

src/js/components/Fields/SnapcastVolumeControl.js

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

src/scss/components/_snapcast-volume-control.scss

@@ -5,14 +5,14 @@
 	.volumes {
 		position: absolute;
 		bottom: 40px;
-		right: 0px;
+		right: -150px;
-		width: 250px;
+		width: 300px;
-		border-radius: 3px;
+		background: $white;
-		background: lighten($grey,5%);
+		color: $black;
-		color: $white;
 		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;
 				}
 			}
 		}