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

Base styles for commands; Fixing snapcast commands (removal)

Browse Source
This commit is contained in:
James Barnsley
2018-10-11 08:25:58 +13:00
parent c8dc36cd04
commit 74a77ed5b0
10 changed files with 14085 additions and 10846 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
mopidy_iris/static/app.css
View File

@ -2537,9 +2537,10 @@ main {
main a {
color: inherit;
text-decoration: none;
cursor: pointer;
cursor: pointer; }
main a:not(.control) {
border-bottom: 1px solid transparent; }
main a:hover {
main a:not(.control):hover {
border-color: #a3a19f; }
main p {
font-size: 18px;
@ -2717,49 +2718,49 @@ button.placeholder {
.col {
min-height: 1px;
float: left; }
.col.w5 {
.col--w5 {
width: 5%; }
.col.w10 {
.col--w10 {
width: 10%; }
.col.w15 {
.col--w15 {
width: 15%; }
.col.w20 {
.col--w20 {
width: 20%; }
.col.w25 {
.col--w25 {
width: 25%; }
.col.w30 {
.col--w30 {
width: 30%; }
.col.w33 {
.col--w33 {
width: 33.3334%; }
.col.w35 {
.col--w35 {
width: 35%; }
.col.w40 {
.col--w40 {
width: 40%; }
.col.w45 {
.col--w45 {
width: 45%; }
.col.w50 {
.col--w50 {
width: 50%; }
.col.w55 {
.col--w55 {
width: 55%; }
.col.w60 {
.col--w60 {
width: 60%; }
.col.w65 {
.col--w65 {
width: 65%; }
.col.w66 {
.col--w66 {
width: 66.6667%; }
.col.w70 {
.col--w70 {
width: 70%; }
.col.w75 {
.col--w75 {
width: 75%; }
.col.w80 {
.col--w80 {
width: 80%; }
.col.w85 {
.col--w85 {
width: 85%; }
.col.w90 {
.col--w90 {
width: 90%; }
.col.w95 {
.col--w95 {
width: 95%; }
.col.w100 {
.col--w100 {
width: 100%; }
.pull-left {
@ -6101,18 +6102,17 @@ main header {
.snapcast button {
margin-bottom: 0px; }
.snapcast__group__volume-control {
padding: 10px 0 5px;
.snapcast__group__mute-control, .snapcast__client__mute-control {
display: inline-block;
float: left;
padding: 8px 5px 0;
border: 0; }
.snapcast__group__volume-control, .snapcast__client__volume-control {
padding: 10px 0 5px 35px;
display: block;
width: 100%;
box-sizing: border-box; }
.snapcast__group__volume-control .mute-control {
display: inline-block;
float: left;
padding: 0 5px;
border: 0; }
.snapcast__group__volume-control .slider-wrapper {
margin-left: 30px; }
.snapcast__groups {
padding-top: 10px; }
@ -6165,19 +6165,6 @@ main header {
right: -2px; }
.snapcast__client__group-field .icon {
padding-right: 0; }
.snapcast__client__volume-control {
padding-top: 11px;
padding-right: 10px;
display: block;
vertical-align: middle;
box-sizing: border-box; }
.snapcast__client__volume-control .mute-control {
display: inline-block;
float: left;
padding: 0 5px;
border: 0; }
.snapcast__client__volume-control .slider-wrapper {
margin-left: 30px; }
.snapcast__client__latency input[type="number"] {
width: 20%; }
.snapcast__client__latency .latency-control {
@ -7033,8 +7020,6 @@ main .track-view {
padding-right: 0; }
.modal .content form .field.radio, .modal .content form .field.checkbox {
padding-top: 8px; }
.modal .content form button[type="submit"] {
margin-top: 50px; }
.modal .content .add-uri,
.modal .content .remove-uri {
position: absolute;

24525
mopidy_iris/static/app.js
View File

File diff suppressed because one or more lines are too long

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

@ -98,7 +98,7 @@
// Release details
// These are automatically injected to built HTML
var build = "1539069948";
var build = "1539197964";
var version = "3.27.2";
// Construct the script tag

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

@ -5,6 +5,7 @@ import { bindActionCreators } from 'redux';
import { Link, hashHistory } from 'react-router';
import VolumeControl from './Fields/VolumeControl';
import MuteControl from './Fields/MuteControl';
import LatencyControl from './Fields/LatencyControl';
import TextField from './Fields/TextField';
import DropdownField from './Fields/DropdownField';
@ -87,12 +88,6 @@ class Snapcast extends React.Component{
}
if (this.state.clients_expanded.includes(client.id)){
var commands = {};
if (this.props.commands[client.id]){
commands = this.props.commands[client.id];
}
return (
<div className={class_name+" snapcast__client--expanded"} key={client.id}>
<div className="snapcast__client__header" onClick={e => this.toggleClientExpanded(client.id)}>
@ -140,12 +135,15 @@ class Snapcast extends React.Component{
Volume
</div>
<div className="input">
<MuteControl
className="snapcast__client__mute-control"
mute={client.mute}
onMuteChange={mute => this.props.snapcastActions.setClientMute(client.id, mute)}
/>
<VolumeControl
className="snapcast__client__volume-control"
volume={client.volume}
mute={client.mute}
onVolumeChange={percent => this.props.snapcastActions.setClientVolume(client.id, percent)}
onMuteChange={mute => this.props.snapcastActions.setClientMute(client.id, mute)}
/>
</div>
</div>
@ -167,21 +165,6 @@ class Snapcast extends React.Component{
/>
</div>
</div>
<div className="field">
<div className="name tooltip">
Power command
<span className="tooltip__content">
Ajax request to trigger power
</span>
</div>
<div className="input">
<TextField
onChange={value => this.props.snapcastActions.setCommand(client.id, {power: value})}
value={commands.power ? commands.power : ""}
placeholder='{"url":"https://myserver.local:8080/sendCommand/power"}'
/>
</div>
</div>
</div>
</div>
);
@ -301,12 +284,15 @@ class Snapcast extends React.Component{
Volume
</div>
<div className="input">
<MuteControl
className="snapcast__group__mute-control"
mute={group.muted}
onMuteChange={mute => this.props.snapcastActions.setGroupMute(group.id, mute)}
/>
<VolumeControl
className="snapcast__group__volume-control"
volume={group_volume}
mute={group.muted}
onVolumeChange={(percent, old_percent) => this.props.snapcastActions.setGroupVolume(group.id, percent, old_percent)}
onMuteChange={mute => this.props.snapcastActions.setGroupMute(group.id, mute)}
/>
</div>
</div>

60
src/js/views/Settings.js
View File

@ -140,6 +140,47 @@ class Settings extends React.Component {
);
}
renderCommands(){
var commands = [];
if (this.props.pusher.commands){
for (var id in this.props.pusher.commands){
if (this.props.pusher.commands.hasOwnProperty(id)){
var command = Object.assign({}, this.props.pusher.commands[id]);
try {
command.command = JSON.parse(command.command);
} catch(error){
command.command = null;
}
commands.push(command);
}
}
}
if (commands.length <= 0){
return null;
}
return (
<div className="list">
{
commands.map(command => {
return (
<Link className="list__item command__item commands-setup__item" key={command.id} to={global.baseURL+'edit-command/'+command.id}>
<span className="col col--w30">
<Icon name={command.icon} />
{command.icon}
</span>
<span className="col col--w70">
{command.command && command.command.url ? command.command.url : "-"}
</span>
</Link>
);
})
}
</div>
);
}
render(){
var options = (
@ -166,15 +207,6 @@ class Settings extends React.Component {
var upgrade_button = null;
}
var commands = [];
if (this.props.pusher.commands){
for (var id in this.props.pusher.commands){
if (this.props.pusher.commands.hasOwnProperty(id)){
commands.push(this.props.pusher.commands[id]);
}
}
}
return (
<div className="view settings-view">
<Header options={options} uiActions={this.props.uiActions}>
@ -343,15 +375,7 @@ class Settings extends React.Component {
Commands
</div>
<div className="input">
{
commands.map(command => {
return (
<Link className="command__item commands-setup__item" key={command.id} to={global.baseURL+'edit-command/'+command.id}>
<Icon name={command.icon} />
</Link>
);
})
}
{this.renderCommands()}
<Link to={global.baseURL+'edit-command'} className="button">Add new</Link>
</div>
</div>

10
src/js/views/modals/EditCommand.js
View File

@ -68,17 +68,14 @@ class EditCommand extends React.Component{
onChange={ e => this.setState({ icon: e.target.value })}
/>
<div className="description">
Material icon, see <a href="https://material.io/tools/icons/?style=baseline" target="_blank" noopener="true">docs</a>
See <a href="https://material.io/tools/icons/?style=baseline" target="_blank" noopener="true">Material Icons</a> for available options
</div>
</div>
</div>
<div className="field textarea white">
<div className="name tooltip">
<div className="name">
Command
<div className="tooltip__content">
Ajax configuration (JSON string)
</div>
</div>
<div className="input">
<textarea
@ -86,6 +83,9 @@ class EditCommand extends React.Component{
value={this.state.command}
onChange={ e => this.setState({ command: e.target.value })}>
</textarea>
<div className="description">
Ajax request settings. See <a href="http://api.jquery.com/jquery.ajax/" target="_blank" noopener="true"><code>jquery.ajax</code> documentation</a>.
</div>
</div>
</div>

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

@ -5,23 +5,20 @@
margin-bottom: 0px;
}
&__group {
&__volume-control {
padding: 10px 0 5px;
display: block;
width: 100%;
box-sizing: border-box;
.mute-control {
&__group,
&__client {
&__mute-control {
display: inline-block;
float: left;
padding: 0 5px;
padding: 8px 5px 0;
border: 0;
}
.slider-wrapper {
margin-left: 30px;
}
&__volume-control {
padding: 10px 0 5px 35px;
display: block;
width: 100%;
box-sizing: border-box;
}
}
@ -103,25 +100,6 @@
}
}
&__volume-control {
padding-top: 11px;
padding-right: 10px;
display: block;
vertical-align: middle;
box-sizing: border-box;
.mute-control {
display: inline-block;
float: left;
padding: 0 5px;
border: 0;
}
.slider-wrapper {
margin-left: 30px;
}
}
&__latency {
input[type="number"] {
width: 20%;

47
src/scss/global/_core.scss
View File

@ -107,12 +107,15 @@ main {
color: inherit;
text-decoration: none;
cursor: pointer;
&:not(.control) {
border-bottom: 1px solid transparent;
&:hover {
border-color: $mid_grey;
}
}
}
p {
font-size: 18px;
@ -319,28 +322,28 @@ button.placeholder {
min-height: 1px;
float: left;
&.w5 { width: 5%; }
&.w10 { width: 10%; }
&.w15 { width: 15%; }
&.w20 { width: 20%; }
&.w25 { width: 25%; }
&.w30 { width: 30%; }
&.w33 { width: 33.3334%; }
&.w35 { width: 35%; }
&.w40 { width: 40%; }
&.w45 { width: 45%; }
&.w50 { width: 50%; }
&.w55 { width: 55%; }
&.w60 { width: 60%; }
&.w65 { width: 65%; }
&.w66 { width: 66.6667%; }
&.w70 { width: 70%; }
&.w75 { width: 75%; }
&.w80 { width: 80%; }
&.w85 { width: 85%; }
&.w90 { width: 90%; }
&.w95 { width: 95%; }
&.w100 { width: 100%; }
&--w5 { width: 5%; }
&--w10 { width: 10%; }
&--w15 { width: 15%; }
&--w20 { width: 20%; }
&--w25 { width: 25%; }
&--w30 { width: 30%; }
&--w33 { width: 33.3334%; }
&--w35 { width: 35%; }
&--w40 { width: 40%; }
&--w45 { width: 45%; }
&--w50 { width: 50%; }
&--w55 { width: 55%; }
&--w60 { width: 60%; }
&--w65 { width: 65%; }
&--w66 { width: 66.6667%; }
&--w70 { width: 70%; }
&--w75 { width: 75%; }
&--w80 { width: 80%; }
&--w85 { width: 85%; }
&--w90 { width: 90%; }
&--w95 { width: 95%; }
&--w100 { width: 100%; }
}
.pull-left {

4
src/scss/views/_modal.scss
View File

@ -93,10 +93,6 @@
padding-top: 8px;
}
}
button[type="submit"]{
margin-top: 50px;
}
}
.add-uri,