Resolving group change UI, client list

This commit is contained in:
James Barnsley
2018-04-30 20:59:27 +12:00
parent 4d1c11a4c1
commit f392e4b48b
6 changed files with 23473 additions and 25354 deletions

View File

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

View File

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

View File

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

View File

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