Resolving group change UI, client list
This commit is contained in:
@ -4293,10 +4293,9 @@ input[type="submit"] {
|
||||
|
||||
.snapcast .group {
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid #383734;
|
||||
margin-top: 20px; }
|
||||
.snapcast .group:nth-child(0n + 1) {
|
||||
margin-top: 0; }
|
||||
border-top: 1px solid #383734; }
|
||||
.snapcast .group:not(:last-child) {
|
||||
padding-bottom: 20px; }
|
||||
.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-right: 0; }
|
||||
padding: 0; }
|
||||
.snapcast .group .clients .client .col::after {
|
||||
content: '';
|
||||
clear: both;
|
||||
display: block; }
|
||||
.snapcast .group .clients .client .col:not(.header) {
|
||||
line-height: 45px; }
|
||||
.snapcast .group .clients .client .col.volume {
|
||||
padding-bottom: 20px !important; } }
|
||||
.snapcast .group .clients .client .col.volume, .snapcast .group .clients .client .col.latency {
|
||||
padding-top: 5px; } }
|
||||
|
||||
aside {
|
||||
position: fixed;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@ -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
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -4,10 +4,9 @@
|
||||
.group {
|
||||
padding-top: 10px;
|
||||
border-top: 1px solid $grey;
|
||||
margin-top: 20px;
|
||||
|
||||
&:nth-child(0n + 1){
|
||||
margin-top: 0;
|
||||
&:not(:last-child){
|
||||
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-right: 0;
|
||||
padding: 0;
|
||||
|
||||
&:not(.header){
|
||||
line-height: 45px;
|
||||
}
|
||||
|
||||
&.volume {
|
||||
padding-bottom: 20px !important;
|
||||
&.volume,
|
||||
&.latency {
|
||||
padding-top: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user