Resolving group change UI, client list

mopidy_iris/static/app.css

@@ -4293,10 +4293,9 @@ input[type="submit"] {
 
 .snapcast .group {
   padding-top: 10px;
-  border-top: 1px solid #383734;
+  border-top: 1px solid #383734; }
-  margin-top: 20px; }
+  .snapcast .group:not(:last-child) {
-  .snapcast .group:nth-child(0n + 1) {
+    padding-bottom: 20px; }
-    margin-top: 0; }
   .snapcast .group .clients {
     padding: 0 10px; }
     .snapcast .group .clients .client {
@@ -4319,7 +4318,7 @@ input[type="submit"] {
         .snapcast .group .clients .client > .name input {
           width: 100%;
           padding-right: 30px; }
-        .snapcast .group .clients .client > .name .group {
+        .snapcast .group .clients .client > .name .group-dropdown-field {
           float: right;
           margin-bottom: -4rem; }
       .snapcast .group .clients .client > .volume {
@@ -4373,18 +4372,17 @@ input[type="submit"] {
           padding-left: 0 !important;
           padding-right: 0 !important; }
           .snapcast .group .clients .client .col {
+            clear: both;
+            display: block !important;
             float: none !important;
             width: auto !important;
-            padding-left: 0;
+            padding: 0; }
-            padding-right: 0; }
             .snapcast .group .clients .client .col::after {
               content: '';
               clear: both;
               display: block; }
-            .snapcast .group .clients .client .col:not(.header) {
+            .snapcast .group .clients .client .col.volume, .snapcast .group .clients .client .col.latency {
-              line-height: 45px; }
+              padding-top: 5px; } }
-            .snapcast .group .clients .client .col.volume {
-              padding-bottom: 20px !important; } }
 
 aside {
   position: fixed;

mopidy_iris/static/index.html

@@ -76,7 +76,7 @@
 
 	// Release details
 	// These are automatically injected to built HTML
-	var build = "1525061125";
+	var build = "1525077243";
 	var version = "3.17.4";
 
 	// Construct the script tag

src/js/components/Snapcast.js

@@ -68,17 +68,10 @@ class Snapcast extends React.Component{
 
 		// Construct a simple array of our groups index
 		var groups = [];
-		var groups_dropdown = [];
 		for (var group_id in this.props.snapcast_groups){
 			if (this.props.snapcast_groups.hasOwnProperty(group_id)){
 				var group = this.props.snapcast_groups[group_id];
 
-				// Append to our groups dropdown source array
-				groups_dropdown.push({
-					label: (group.name ? group.name : group.stream_id),
-					value: group.id
-				});
-
 				// Merge the group's clients into this group (also as a simple array)
 				var clients = [];
 				for (var i = 0; i < group.clients_ids.length; i++){
@@ -161,10 +154,38 @@ class Snapcast extends React.Component{
 											{
 												group.clients.map(client => {
 													var name = client.config.name ? client.config.name : client.host.name;
+													var groups_dropdown = [];
+													for (var i = 0; i < groups.length; i++){
+
+														// Don't add our existing group
+														if (groups[i].id !== group.id){
+															groups_dropdown.push({
+																label: (groups[i].name ? groups[i].name : groups[i].stream_id),
+																value: groups[i].id
+															});
+														}
+													}
+
+													// And append with 'New group' (which is actually
+													// the existing group and middleware handles the behavior shift)
+													groups_dropdown.push({
+														label: 'New group',
+														value: group.id
+													});
+
 													return (
 														<div className="list-item client" key={client.id}>
 															<div className="col name">
-																<DropdownField className="group" icon="cog" name="Group" no_label value={group.id} options={groups_dropdown} handleChange={value => {this.props.pusherActions.setSnapcastClientGroup(client.id, value); this.props.uiActions.hideContextMenu()}} />
+																<DropdownField 
+																	className="group-dropdown-field" 
+																	icon="cog" 
+																	name="Group" 
+																	no_label
+																	no_status_icon
+																	value={group.id} 
+																	options={groups_dropdown} 
+																	handleChange={value => {this.props.pusherActions.setSnapcastClientGroup(client.id, value); this.props.uiActions.hideContextMenu()}} 
+																/>
 																<TextField
 																	onChange={value => this.props.pusherActions.setSnapcastClientName(client.id, value)}
 																	value={name}

src/scss/components/_snapcast.scss

@@ -4,10 +4,9 @@
 	.group {
 		padding-top: 10px;
 		border-top: 1px solid $grey;
-		margin-top: 20px;
 
-		&:nth-child(0n + 1){
+		&:not(:last-child){
-			margin-top: 0;
+			padding-bottom: 20px;
 		}
 
 		.clients {
@@ -36,7 +35,7 @@
 						padding-right: 30px;
 					}
 
-					.group {
+					.group-dropdown-field {
 						float: right;
 						margin-bottom: -4rem;
 					}
@@ -120,17 +119,15 @@
 
 					.col {
 						@include clearfix();
+						clear: both;
+						display: block !important;
 						float: none !important;
 						width: auto !important;
-						padding-left: 0;
+						padding: 0;
-						padding-right: 0;
 
-						&:not(.header){
+						&.volume,
-							line-height: 45px;
+						&.latency {
-						}
+							padding-top: 5px;
-
-						&.volume {
-							padding-bottom: 20px !important;
 						}
 					}
 				}