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

Upgraded all easy functional components

Browse Source
This commit is contained in:
James Barnsley
2019-04-11 09:43:13 +12:00
parent dcd75c7d70
commit ef541f4b24
6 changed files with 1083 additions and 1202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

227
mopidy_iris/static/app/app.js
View File

File diff suppressed because one or more lines are too long

2
mopidy_iris/static/app/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 = "1554932015";
var build = "1554932244";
var version = "3.34.3";
// Construct the script tag

91
src/js/components/Fields/ColourField.js
View File

@ -1,56 +1,49 @@
import React from 'react';
import React, { memo } from 'react';
import Icon from '../Icon';
export default class ColourField extends React.Component{
export default memo((props) => {
constructor(props){
super(props);
}
const colours = [
'',
'white',
'mid_grey',
'grey',
'dark_grey',
'black',
'turquoise',
'green',
'blue',
'light_blue',
'yellow',
'orange',
'red'
];
render(){
return (
<div className="colour-field">
{
colours.map(colour => {
let text_colour = "white";
var colours = [
'',
'white',
'mid_grey',
'grey',
'dark_grey',
'black',
'turquoise',
'green',
'blue',
'light_blue',
'yellow',
'orange',
'red'
];
switch (colour){
case 'yellow':
case 'white':
case 'light_blue':
text_colour = "black";
break;
}
return (
<div className="colour-field">
{
colours.map(colour => {
switch (colour){
case 'yellow':
case 'white':
case 'light_blue':
var text_colour = "black";
break;
default:
var text_colour = "white";
break;
}
return (
<div
key={colour}
className={"colour-field__option "+(colour ? colour+"-background " : "")+(this.props.colour == colour ? "colour-field__option--selected" : "")}
onClick={e => this.props.onChange(colour)}>
{this.props.colour == colour ? <Icon name="check" className={"colour-field__option__icon "+text_colour+"-text"} /> : null}
</div>
);
})
}
</div>
);
}
}
return (
<div
key={colour}
className={"colour-field__option "+(colour ? colour+"-background " : "")+(props.colour == colour ? "colour-field__option--selected" : "")}
onClick={e => props.onChange(colour)}>
{props.colour == colour ? <Icon name="check" className={"colour-field__option__icon "+text_colour+"-text"} /> : null}
</div>
);
})
}
</div>
);
});

1919
src/js/components/Fields/IconField.js
View File

File diff suppressed because it is too large Load Diff

44
src/js/components/Fields/MuteControl.js
View File

@ -1,30 +1,22 @@
import React from 'react';
import React, { memo } from 'react';
import Icon from '../Icon';
import * as helpers from '../../helpers';
export default class MuteControl extends React.Component{
constructor(props){
super(props);
export default memo((props) => {
if (props.mute){
return (
<a className={"control mute-control "+(props.noTooltip ? "" : "tooltip ")+(props.className ? props.className : "")} onClick={() => props.onMuteChange(false)}>
<Icon className="red-text" name="volume_off" />
{props.noTooltip ? null : <span className="tooltip__content">Unmute</span>}
</a>
)
} else {
return (
<a className={"control mute-control "+(props.noTooltip ? "" : "tooltip ")+(props.className ? props.className : "")} onClick={() => props.onMuteChange(true)}>
<Icon className="muted" name="volume_mute" />
{props.noTooltip ? null : <span className="tooltip__content">Mute</span>}
</a>
)
}
render(){
if (this.props.mute){
return (
<a className={"control mute-control "+(this.props.noTooltip ? "" : "tooltip ")+(this.props.className ? this.props.className : "")} onClick={() => this.props.onMuteChange(false)}>
<Icon className="red-text" name="volume_off" />
{this.props.noTooltip ? null : <span className="tooltip__content">Unmute</span>}
</a>
)
} else {
return (
<a className={"control mute-control "+(this.props.noTooltip ? "" : "tooltip ")+(this.props.className ? this.props.className : "")} onClick={() => this.props.onMuteChange(true)}>
<Icon className="muted" name="volume_mute" />
{this.props.noTooltip ? null : <span className="tooltip__content">Mute</span>}
</a>
)
}
}
}
});