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

UI for changing groups

Browse Source
This commit is contained in:
James Barnsley
2018-04-30 20:34:15 +12:00
parent 490457e51c
commit 4d1c11a4c1
7 changed files with 142 additions and 133 deletions
Download Patch File Download Diff File Expand all files Collapse all files

189
mopidy_iris/static/app.css
View File

@ -4291,103 +4291,100 @@ input[type="submit"] {
left: 0;
right: 0; } }
.snapcast .group:not(:first-child) {
padding-top: 20px; }
.snapcast .group .clients {
padding: 0 10px; }
.snapcast .group .clients .client {
border: 0;
padding: 0;
clear: both; }
.snapcast .group .clients .client::after {
content: '';
clear: both;
display: block; }
.snapcast .group .clients .client:not(:first-child) {
padding-top: 8px; }
.snapcast .group .clients .client > .name {
width: 40%;
padding-bottom: 4px;
position: relative;
display: block;
box-sizing: border-box;
border: 0; }
.snapcast .group .clients .client > .name input {
width: 100%;
padding-right: 30px; }
.snapcast .group .clients .client > .name .tools {
position: absolute;
top: -2px;
right: 0;
z-index: 2; }
.snapcast .group .clients .client > .name .tools .disconnected {
padding: 12px 0;
cursor: default;
font-size: 12px; }
.snapcast .group .clients .client > .volume {
width: 28%;
padding-left: 2%; }
.snapcast .group .clients .client > .latency {
width: 28%;
padding-left: 2%; }
.snapcast .group .clients .client > .volume input,
.snapcast .group .clients .client > .latency input {
width: 20%; }
.snapcast .group .clients .client .volume-control {
display: inline-block;
vertical-align: middle;
padding-top: 4px;
width: 80%;
padding-right: 10px;
box-sizing: border-box; }
.snapcast .group .clients .client .volume-control .mute-control {
display: inline-block;
float: left;
padding: 0 10px;
.snapcast .group {
padding-top: 10px;
border-top: 1px solid #383734;
margin-top: 20px; }
.snapcast .group:nth-child(0n + 1) {
margin-top: 0; }
.snapcast .group .clients {
padding: 0 10px; }
.snapcast .group .clients .client {
border: 0;
padding: 0;
clear: both; }
.snapcast .group .clients .client::after {
content: '';
clear: both;
display: block; }
.snapcast .group .clients .client:not(:first-child) {
padding-top: 8px; }
.snapcast .group .clients .client > .name {
width: 40%;
padding-bottom: 4px;
position: relative;
display: block;
box-sizing: border-box;
border: 0; }
.snapcast .group .clients .client .volume-control .slider-wrapper {
margin-left: 25px; }
.snapcast .group .clients .client .volume-control.muted .slider .progress {
background: #a3a19f; }
.snapcast .group .clients .client .latency-control {
display: inline-block;
vertical-align: middle;
padding-top: 4px;
width: 80%;
padding-right: 10px;
box-sizing: border-box; }
.snapcast .group .clients .client .latency-control .zero {
position: absolute;
top: -4px;
left: 50%;
bottom: 0;
width: 1px;
background: #383734;
z-index: 1; }
.snapcast .group .clients .client .latency-control .progress.positive {
border-top-left-radius: 0;
border-bottom-left-radius: 0; }
.snapcast .group .clients .client .latency-control .progress.negative {
border-top-right-radius: 0;
border-bottom-right-radius: 0; }
@media (max-width: 800px) {
.snapcast .group .clients .client {
padding-left: 0 !important;
padding-right: 0 !important; }
.snapcast .group .clients .client .col {
float: none !important;
width: auto !important;
padding-left: 0;
padding-right: 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 > .name input {
width: 100%;
padding-right: 30px; }
.snapcast .group .clients .client > .name .group {
float: right;
margin-bottom: -4rem; }
.snapcast .group .clients .client > .volume {
width: 28%;
padding-left: 2%; }
.snapcast .group .clients .client > .latency {
width: 28%;
padding-left: 2%; }
.snapcast .group .clients .client > .volume input,
.snapcast .group .clients .client > .latency input {
width: 20%; }
.snapcast .group .clients .client .volume-control {
display: inline-block;
vertical-align: middle;
padding-top: 4px;
width: 80%;
padding-right: 10px;
box-sizing: border-box; }
.snapcast .group .clients .client .volume-control .mute-control {
display: inline-block;
float: left;
padding: 0 10px;
border: 0; }
.snapcast .group .clients .client .volume-control .slider-wrapper {
margin-left: 25px; }
.snapcast .group .clients .client .volume-control.muted .slider .progress {
background: #a3a19f; }
.snapcast .group .clients .client .latency-control {
display: inline-block;
vertical-align: middle;
padding-top: 4px;
width: 80%;
padding-right: 10px;
box-sizing: border-box; }
.snapcast .group .clients .client .latency-control .zero {
position: absolute;
top: -4px;
left: 50%;
bottom: 0;
width: 1px;
background: #383734;
z-index: 1; }
.snapcast .group .clients .client .latency-control .progress.positive {
border-top-left-radius: 0;
border-bottom-left-radius: 0; }
.snapcast .group .clients .client .latency-control .progress.negative {
border-top-right-radius: 0;
border-bottom-right-radius: 0; }
@media (max-width: 800px) {
.snapcast .group .clients .client {
padding-left: 0 !important;
padding-right: 0 !important; }
.snapcast .group .clients .client .col {
float: none !important;
width: auto !important;
padding-left: 0;
padding-right: 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; } }
aside {
position: fixed;

39
mopidy_iris/static/app.js
View File

@ -20978,6 +20978,9 @@ var DropdownField = function (_React$Component) {
if (this.props.button) {
className += ' buttonify';
}
if (this.props.className) {
className += ' ' + this.props.className;
}
var current_value = this.props.options[0].value;
if (this.props.value) {
current_value = this.props.value;
@ -72484,12 +72487,23 @@ var Snapcast = function (_React$Component) {
'div',
{ className: 'group', key: group.id },
_react2.default.createElement(
'h3',
{ className: 'name' },
group.name ? group.name : group.id,
' (',
group.stream_id,
')'
'div',
{ className: 'field' },
_react2.default.createElement(
'div',
{ className: 'name' },
'ID'
),
_react2.default.createElement(
'div',
{ className: 'input' },
_react2.default.createElement(
'div',
{ className: 'text' },
group.id,
group.name ? '(' + group.name + ')' : null
)
)
),
_react2.default.createElement(
'div',
@ -72542,20 +72556,15 @@ var Snapcast = function (_React$Component) {
_react2.default.createElement(
'div',
{ className: 'col name' },
_react2.default.createElement(_DropdownField2.default, { className: 'group', icon: 'cog', name: 'Group', no_label: true, value: group.id, options: groups_dropdown, handleChange: function handleChange(value) {
_this2.props.pusherActions.setSnapcastClientGroup(client.id, value);_this2.props.uiActions.hideContextMenu();
} }),
_react2.default.createElement(_TextField2.default, {
onChange: function onChange(value) {
return _this2.props.pusherActions.setSnapcastClientName(client.id, value);
},
value: name
}),
_react2.default.createElement(
'div',
{ className: 'tools' },
client.connected ? null : _react2.default.createElement(_reactFontawesome2.default, { className: 'disconnected red-text', name: 'plug' }),
_react2.default.createElement(_DropdownField2.default, { icon: 'cog', name: 'Group', no_label: true, value: group.id, options: groups_dropdown, handleChange: function handleChange(value) {
_this2.props.pusherActions.setSnapcastClientGroup(client.id, value);_this2.props.uiActions.hideContextMenu();
} })
)
})
),
_react2.default.createElement(
'div',

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

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

3
src/js/components/Fields/DropdownField.js
View File

@ -57,6 +57,9 @@ export default class DropdownField extends React.Component{
if (this.props.button){
className += ' buttonify';
}
if (this.props.className){
className += ' '+this.props.className;
}
var current_value = this.props.options[0].value
if (this.props.value){
current_value = this.props.value;

19
src/js/components/Snapcast.js
View File

@ -123,9 +123,17 @@ class Snapcast extends React.Component{
groups.map(group => {
return (
<div className="group" key={group.id}>
<h3 className="name">
{group.name ? group.name : group.id} ({group.stream_id})
</h3>
<div className="field">
<div className="name">
ID
</div>
<div className="input">
<div className="text">
{group.id}
{group.name ? '('+group.name+')' : null}
</div>
</div>
</div>
<div className="field dropdown">
<div className="name">
Source
@ -156,14 +164,11 @@ class Snapcast extends React.Component{
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()}} />
<TextField
onChange={value => this.props.pusherActions.setSnapcastClientName(client.id, value)}
value={name}
/>
<div className="tools">
{client.connected ? null : <FontAwesome className="disconnected red-text" name="plug" />}
<DropdownField 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()}} />
</div>
</div>
<div className="col volume">
<VolumeControl

21
src/scss/components/_snapcast.scss
View File

@ -2,9 +2,12 @@
.snapcast {
.group {
padding-top: 10px;
border-top: 1px solid $grey;
margin-top: 20px;
&:not(:first-child){
padding-top: 20px;
&:nth-child(0n + 1){
margin-top: 0;
}
.clients {
@ -33,17 +36,9 @@
padding-right: 30px;
}
.tools {
position: absolute;
top: -2px;
right: 0;
z-index: 2;
.disconnected {
padding: 12px 0;
cursor: default;
font-size: 12px;
}
.group {
float: right;
margin-bottom: -4rem;
}
}