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

Nicer status

Browse Source
This commit is contained in:
James Barnsley
2017-02-21 08:35:24 +13:00
parent 60290db452
commit ba5ef316f4
8 changed files with 127 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
src/assets/icons/connection.svg Executable file
View File

@ -0,0 +1,10 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
<line fill="none" stroke="#000000" stroke-miterlimit="10" x1="5.25" y1="4.19" x2="5.25" y2="13.217"/>
<polyline points="2.716,6.29 5.25,3.065 7.784,6.29 "/>
<line fill="none" stroke="#000000" stroke-miterlimit="10" x1="10.75" y1="12.092" x2="10.75" y2="3.065"/>
<polyline points="13.284,9.992 10.75,13.217 8.216,9.992 "/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 803 B

13
src/assets/icons/server.svg Executable file
View File

@ -0,0 +1,13 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
<ellipse fill="none" stroke="#000000" stroke-miterlimit="10" cx="8" cy="4.306" rx="4.438" ry="1.292"/>
<path fill="none" stroke="#000000" stroke-miterlimit="10" d="M12.438,6.915c0,0.714-1.986,1.292-4.438,1.292
S3.563,7.629,3.563,6.915"/>
<path fill="none" stroke="#000000" stroke-miterlimit="10" d="M12.438,9.523c0,0.714-1.986,1.292-4.438,1.292
s-4.438-0.578-4.438-1.292"/>
<path fill="none" stroke="#000000" stroke-miterlimit="10" d="M3.563,4.306v7.825c0,0.713,1.986,1.292,4.438,1.292
s4.438-0.579,4.438-1.292V4.306"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1007 B

30
src/assets/icons/websocket.svg Executable file
View File

@ -0,0 +1,30 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.376,13.476c-0.57-0.571-1.143-1.142-1.714-1.717
c-0.055-0.055-0.114-0.063-0.185-0.062c-0.467,0-0.933,0-1.401,0c-1.578,0-3.156,0-4.735,0c-0.068,0-0.131,0.005-0.188-0.054
c-0.466-0.471-0.935-0.938-1.404-1.404c-0.051-0.051-0.047-0.078,0.001-0.124c0.168-0.164,0.336-0.326,0.496-0.496
c0.074-0.082,0.113-0.063,0.18,0.006c0.354,0.36,0.716,0.717,1.07,1.078c0.064,0.062,0.125,0.092,0.217,0.092
c0.774-0.005,1.549-0.003,2.323-0.004c0.044,0,0.088,0.017,0.132-0.023c-0.035-0.038-0.07-0.077-0.109-0.115
C9.285,9.879,8.512,9.101,7.732,8.33c-0.081-0.082-0.079-0.125,0.003-0.2C7.889,7.988,8.039,7.84,8.178,7.684
c0.083-0.09,0.125-0.088,0.212-0.001c0.77,0.779,1.547,1.553,2.323,2.327c0.034,0.035,0.061,0.087,0.133,0.097
c0-0.048,0-0.091,0-0.134c0-0.769-0.002-1.538,0.002-2.308c0-0.096-0.03-0.162-0.099-0.228c-0.35-0.345-0.692-0.698-1.047-1.04
C9.613,6.31,9.595,6.258,9.699,6.165c0.172-0.157,0.328-0.332,0.491-0.498c0.07-0.036,0.093,0.03,0.128,0.064
c0.444,0.442,0.887,0.889,1.333,1.329c0.072,0.072,0.103,0.141,0.103,0.243c-0.004,1.114-0.002,2.229-0.006,3.344
c0,0.109,0.02,0.152,0.144,0.149c0.52-0.008,1.041-0.007,1.562,0c0.117,0.002,0.144-0.034,0.144-0.146
c-0.003-1.378-0.002-2.756-0.002-4.133c0-0.085-0.022-0.145-0.083-0.205C12.88,5.683,12.25,5.054,11.623,4.42
c-0.075-0.076-0.113-0.083-0.192-0.001c-0.365,0.375-0.738,0.745-1.112,1.116c-0.035,0.033-0.058,0.1-0.128,0.063
c-0.009-0.012-0.016-0.025-0.026-0.035C9.152,4.551,8.138,3.54,7.127,2.526C7.067,2.467,7.005,2.459,6.93,2.459
C4.904,2.46,2.877,2.46,0.851,2.461c-0.044,0-0.096-0.021-0.142,0.024C0.743,2.522,0.775,2.559,0.81,2.592
c0.537,0.538,1.076,1.074,1.61,1.614c0.072,0.072,0.142,0.1,0.242,0.098c1.169-0.002,2.337-0.001,3.507-0.001
c0.074,0,0.138,0.004,0.197,0.065c0.393,0.399,0.788,0.795,1.188,1.188c0.071,0.068,0.051,0.101-0.007,0.158
C6.95,6.309,6.354,6.904,5.76,7.502c-0.063,0.064-0.096,0.065-0.159,0c-0.39-0.396-0.783-0.789-1.178-1.178
C4.365,6.268,4.345,6.211,4.346,6.132c0.003-0.268-0.002-0.536,0.003-0.804c0.002-0.096-0.024-0.123-0.121-0.122
C3.697,5.21,3.166,5.212,2.635,5.205C2.518,5.204,2.503,5.246,2.503,5.348c0.004,0.512,0.004,1.023,0,1.535
c0,0.095,0.027,0.162,0.095,0.229c0.991,0.986,1.977,1.979,2.969,2.962c0.096,0.094,0.082,0.137-0.005,0.223
c-0.366,0.356-0.722,0.723-1.088,1.08c-0.078,0.076-0.079,0.114,0,0.191c0.63,0.623,1.257,1.252,1.881,1.881
c0.067,0.067,0.134,0.093,0.229,0.093c2.893-0.001,5.789-0.001,8.682-0.002c0.047,0,0.095,0.017,0.146-0.018
C15.397,13.505,15.389,13.489,15.376,13.476z"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

1
src/js/services/pusher/reducer.js
View File

@ -9,6 +9,7 @@ export default function reducer(pusher = {}, action){
case 'PUSHER_CONNECTED':
return Object.assign({}, pusher, {
connected: true,
connecting: false,
connection_id: action.connection_id,
username: action.username
});

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

@ -11,6 +11,7 @@ import PusherConnectionList from '../components/PusherConnectionList'
import URISchemesList from '../components/URISchemesList'
import VersionManager from '../components/VersionManager'
import Header from '../components/Header'
import Icon from '../components/Icon'
import Thumbnail from '../components/Thumbnail'
import * as uiActions from '../services/ui/actions'
@ -56,7 +57,15 @@ class Settings extends React.Component{
}
renderConnectionStatus(service){
if( this.props[service.toLowerCase()].connected ){
if (service == 'Spotify' && !this.props[service.toLowerCase()].authorized){
return (
<span className="red-text connection-status">
<FontAwesome name="exclamation-triangle" />
&nbsp;
Not connected
</span>
)
} else if (this.props[service.toLowerCase()].connected){
return (
<span className="green-text connection-status">
<FontAwesome name="check" />
@ -64,20 +73,20 @@ class Settings extends React.Component{
{service}
</span>
)
}else if( this.props[service.toLowerCase()].connecting ){
} else if (this.props[service.toLowerCase()].connecting){
return (
<span className="grey-text connection-status">
<FontAwesome name="circle-o-notch" spin />
&nbsp;
{service}
Connecting
</span>
)
}else{
} else {
return (
<span className="red-text connection-status">
<FontAwesome name="exclamation-triangle" />
&nbsp;
{service}
Not connected
</span>
)
}
@ -140,6 +149,18 @@ class Settings extends React.Component{
)
}
serviceStatus(service){
if (this.props[service].connecting){
return <span className="grey-text">Connecting</span>
} else if (service == 'spotify' && !this.props[service].authorized){
return <span className="orange-text">Not authorized</span>
} else if (this.props[service].connected){
return <span className="green-text">Connected</span>
} else {
return <span className="red-text">Disconnected</span>
}
}
render(){
var actions = (
@ -155,18 +176,30 @@ class Settings extends React.Component{
<section>
<div className="status">
<div className="item">
<Icon name="server" />
<h4>Mopidy</h4>
{this.serviceStatus('mopidy')}
</div>
<div className="item">
<Icon name="connection" />
<h4>Pusher</h4>
{this.serviceStatus('pusher')}
</div>
<div className="item">
<Icon name="spotify" />
<h4>Spotify</h4>
{this.serviceStatus('spotify')}
</div>
</div>
<h4 className="underline">System</h4>
<form onSubmit={(e) => this.setMopidyConfig(e)}>
<div className="field">
<div className="name">Status</div>
<div className="input">
<div className="text">
{ this.renderConnectionStatus('Mopidy') }
&nbsp;&nbsp;
{ this.renderConnectionStatus('Pusher') }
</div>
</div>
</div>
<div className="field">
<div className="name">Username</div>
<div className="input">
@ -199,14 +232,6 @@ class Settings extends React.Component{
</form>
<h4 className="underline">Spotify</h4>
<div className="field">
<div className="name">Status</div>
<div className="input">
<div className="text">
{ this.renderConnectionStatus('Spotify') }
</div>
</div>
</div>
<form>
<div className="field">
<div className="name">Country</div>

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

@ -167,6 +167,7 @@ h4 {
.grey-text { color: $mid_grey !important; }
.red-text { color: $red !important; }
.green-text { color: $green !important; }
.orange-text { color: $orange !important; }
.dark-text { color: $dark_grey !important; }
.centred-text { text-align: center; }

1
src/scss/global/_variables.scss
View File

@ -11,6 +11,7 @@ $red: #cf2d2d;
$green: #47af2a;
$blue: #32b5f2;
$yellow: #FFF39C;
$orange: #f16f19;
$bp_wide: 1000px;
$bp_medium: 800px;

23
src/scss/views/_settings.scss
View File

@ -3,6 +3,29 @@
section {
padding: 40px;
}
.status {
.item {
position: relative;
display: inline-block;
padding: 0 0 0 45px;
margin-right: 20px;
min-width: 80px;
.icon {
width: 35px;
height: 35px;
position: absolute;
top: 0;
left: 0;
}
h4 {
padding: 0;
margin: 0;
}
}
}
.field.current-user {
.text {